Practice: Create a simple HTML5 form

Return to article

Solution

Here is the solution for the form specified:

• To create a form with autocomplete, you need code similar to that shown in Listing 1. A form element, orderForm, is created with the autocomplete attribute turned on. The autocomplete provides relevant suggestions for completing an entry field.
  
  Listing 1. Form code
  

  <form id="orderForm" autocomplete="on" > . . . </form>

• The two field sets that contain the labeled input fields have the structure shown in Listing 2. Each field set contains the legend element, which identifies the field set as a group. The first field set should have the legend Customer Info, and the second field set should have the legend Books.
  
  Listing 2. Field set code
  

  <fieldset> <legend> Customer Info </legend> . . . </fieldset> <fieldset> <legend> Books </legend> . . . </fieldset>

• Your Name field, created with autofocus, placeholder text, and required attributes, should be similar to the one shown in Listing 3. The input type should be text, the placeholder should have content that gives information to the user, the autofocus attribute places the cursor in this field when the page opens, and the required attribute forces the user to enter a value.
  
  Listing 3. The Name field code
  

  <label>Name: <input id="fullname" name="name" type="text" placeholder="Enter your name" autofocus required size="50"> </label>

• The Telephone field should use the new type tel, as shown in Listing 4. Your code should have a similar placeholder, which tells the user how to enter information. The pattern created restricts user entry to numbers only, and the numbers must follow a pattern like "1-123-123-1234."
  
  Listing 4. Telephone field code
  

  <label>Telephone: <input id="tel" name="telephone" type="tel" required size="50" placeholder="Pattern: 1-234-567-8910" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))"> </label>

• The Email address field should have a placeholder and allow multiple entries. The type for the email address should be email, as shown in Listing 5. When the email type is used, the field automatically verifies that it is in fact an email address. The multiple attribute allows entry of more than one address.
  
  Listing 5. Email address field code
  

  <label>Email address: <input id="email" name="email" type="email" placeholder="Enter your email address" required multiple size="50"> </label>

• The Books field shown in Listing 6 has a data list with the ID books, which is also the value of the list attribute of the <input> tag. Several option values are provided that are displayed when the field has focus.
  
  Listing 6. Books data list field code
  

  <label> <input type="text" name="productlist" list="books" size="45"> <datalist id="books"> <option value="HTML5 Canvas by Steve Fulton & Jeff Fulton"> <option value="JavaScript: The Definitive Guide by David Flanagan"> <option value="HTML5 Geolocation by Anthony T. Holdener III"> <option value="Supercharged JavaScript Graphics by Raffaele Cecco"> <option value="HTML5: Up and Running by Mark Pilgrim"> </datalist> </label>

• Your task for the Quantity (Maximum 5) field was to define a field with a minimum value of 1 and a maximum value of 5. To accomplish this, you must use the number type, as shown in Listing 7. With the type defined as number, you can then provide a min and a max value for the quantity.
  
  Listing 7. Quantity field code
  

  <label> Quantity (Maximum 5): <input name="form_number" id="form_number" type="number" min="1" max="5" > </label>

The form you just coded would look like Listing 8.

	
<form id="orderForm" autocomplete="on" >
  <fieldset>
  <legend> Customer Info </legend>
  <p>
    <label>Name:
      <input id="fullname" name="name" type="text" 
	           placeholder="Enter your name" autofocus required size="50">
    </label>
  </p>
  <p>
    <label>Telephone:
      <input id="tel" name="telephone" type="tel"    required size="50"
	              placeholder="Pattern: 1-234-567-8910" 
	                   pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
    </label>
  </p>
  <p>
    <label>E-mail address:
      <input id="email" name="email" type="email"  
	                placeholder="Enter your email address" required size="50">
    </label>
  </p>
  </fieldset>
  <fieldset>
  <legend> Books </legend>
  <p>
    <label>
  <input type="text" name="productlist" list="books" size="45">
  <datalist id="books">
   <option value="HTML5 Canvas by Steve Fulton & Jeff Fulton">
   <option value="JavaScript: The Definitive Guide by David Flanagan">
   <option value="HTML5 Geolocation by Anthony T. Holdener III">
   <option value="Supercharged JavaScript Graphics by Raffaele Cecco">
	<option value="HTML5: Up and Running by Mark Pilgrim">
  </datalist>
 </label>
    <label>
      Quantity (Maximum 5): <input name="form_number" id="form_number" 
	               type="number" min="1" max="5" >
    </label>
</p>
  </fieldset>
 <input type="submit" value="Submit" />
</form>

Return to article