HTML5 Forms Absolute Beginners Web Development lesson 7

HTML5 Forms Absolute Beginners Web Development lesson 7


We will be covering HTML5 forms in this lesson. In your web development career you will use forms a lot. It is a good idea to get use to what is available to you. It is important to note that we are covering creating forms. #nbspdemo-of-form-and-php-processing">Processing forms in PHP will be coming in the future.

#AbsoluteBeginner

Form Tag

Just like everything on a web page we use a tag to create forms. The form tag looks like this. 
<form></form>

Input Types

There are several different types of input types in forms. You will create an input type like this. 
<input type="" />
Inside the double quotes you can use these different types.
  • text accepts text or numbers
  • number numbers only
  • tel bring up telephone dialer on mobile devices
  • url for web address
  • email for email addresses
  • color for a color picker
  • date for the date
  • time for the time
  • week for the weeks of the year
  • month for the months of the year
  • submit to submit a form
  • radio to select choices
  • search just like "text" above
  • reset to reset a form to default values
  • checkbox to create check-boxes.

Select Drop Downs

The select option is a little different coding syntax. Here is an example. 
<select id="pick" name="pick">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

Textarea Inputs

To create a box for a user to write in you will use a textarea tag. Here is an example. 
<textarea id="comment" name="comment" placheolder="Enter Comments Here"></textarea>

Attributes For Form Items

There are many attributes that you can give your form inputs. Here are several attributes that you can use.
  • readonly
  • disabled
  • size=""
  • maxlength=""
  • autocomplete="on"
  • autocomplete="off"
  • autofocus
  • pattern="[A-Za-z]{3}"
  • required
  • checked for auto checking radio buttons or check-boxes

Code for Today's Lesson

<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h1>HTML Forms</h1>
<h2>Input Type Text</h2>
<form>
<label>Enter Your Name</label><br/>
<input type="text" id="fullname" name="fullname" placeholder="Enter Your Full Name" maxlength="10" required/>
<input type="submit" id="submit" name="submit" value="Submit Name"/>
</form>
<h2>Input Type Numbers</h2>
<form>
<label>Enter Your Age</label><br/>
<input type="number" id="age" name="age" placeholder="Enter Your Age" />
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="number" id="points" name="points" min="0" max="100" step="10" value="30">
<input type="submit" id="submit2" name="submit2" value="Submit Name"/>
</form>

<h2>Input Type URL</h2>
<form>
<label>Enter Your Website Address</label><br/>
<input type="url" id="homepage" name="homepage" placeholder="Enter Website">
<input type="submit" id="submit3" name="submit3" value="Submit Name"/>
</form>

<h2>Input Type Search</h2>
<form>
<label>Search This</label><br/>
<input type="search" id="search" name="search" placeholder="enter keyword">
<input type="submit" id="submit4" name="submit4" value="Submit Name"/>
</form>

<h2>Input Type Phone</h2>
<form>
<label>Phone Input Type</label><br/>
<input type="tel" id="phone" name="phone" placeholder="enter phone #">
<input type="submit" id="submit5" name="submit5" value="Submit Name"/>
</form>

<h2>Input Type Date and Times</h2>
<form>
<label>Date Time Input Type</label><br/>
<input type="date" id="date" name="date" required/><br/>
<input type="week" id="week" name="week" /><br/>
<input type="month" id="month" name="month" /><br/>
<input type="time" id="time" name="time"/>
<input type="submit" id="submit6" name="submit6" value="Submit Date"/>
</form>

<h2>Input Type Radio</h2>
<form>
<label><input type="radio" id="sex" name="sex" value="Male" checked/>Male</label><br/>
<label><input type="radio" id="sex" name="sex" value="Female"/>Female</label><br/>
<br/>
<input type="submit" id="submit7" name="submit7" value="Submit Date"/>
</form>

<h2>Input Type Email</h2>
<form>
<label>Enter Email</label><br/>
<input type="email" id="em" name="em" value="[email protected]" size="77" disabled/>
<br/>
<input type="submit" id="submit8" name="submit8" value="Submit Email"/>
</form>

<h2>Input Type Color</h2>
<form>
<label>Pick Color</label><br/>
<input type="color" id="color" name="color" placeholder="Pick Color"/>
<br/>
<input type="submit" id="submit9" name="submit9" value="Submit Color"/>
</form>

<h2>Drop Downs</h2>
<form>
<label>Pick One</label><br/>
<select id="pick" name="pick">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<br/>
<input type="submit" id="submit9" name="submit9" value="Submit Color"/>
</form>

<h2>Textarea Box</h2>
<form>
<label>Enter Text</label><br/>
<textarea id="comment" name="comment" placheolder="Enter Comments Here"></textarea>
<br/>
<input type="submit" id="submit9" name="submit9" value="Submit Comments"/>
</form>

<br/><br/><br/><br/>
</body>
</html>
  Lesson 8


Sign Up To Comment