HTML5 Forms: Implementing Web Forms for User Input Using HTML5 Elements

The HTML5 forms provide a convenient way to create consistent screens in your application for accepting user input. In the past, the Web form allowed you to accept user input before transmitting it to a server. With HTML5, you can now improve the user experience without having to use JavaScript by adding simple features, for example, email validity checks and date pickers, and using more advanced functionality, such as security checks and input value pattern definitions.

New HTML5 Elements

The following table lists the new elements available for your forms in HTML5. For a complete source code, see elements.html.

<input type="text" list="search">
<datalist id="search">
   <option value="Tomato">Tomato</option>
   <option value="banana">banana</option>
   <option value="Watermelon">Watermelon</option>
</datalist>

<label>user:<input type="text" name="user_name"></label>
<label>keygen:<keygen name="keygen"></label>

<meter value="75" min="0" max="100" low="60" high="80" optimum="81">
   75/100
</meter>

<fieldset onsubmit="return false"
          oninput="foobar.value = parseInt(foo.value) * parseInt(bar.value)">
   <input type="number" id="foo" name="foo"> *
   <input type="number" id="bar" name="bar"> =
   <output for="foo bar" name="foobar"></output>
</fieldset>

<progress value="75" max="100">
   75/100
</progress>

New Input Element Types

The following table lists the new input element types available for your forms in HTML5. Many of the new elements activate a specific keyboard suitable for the type of value the user is expected to enter (for example, an email or URL). For a complete source code, see types.html.

<input type="color"
       value="#ff0000">
<input type="datetime"
       value="2012-12-12T03:30Z">
<input type="email"
       required>
<input type="number"
       step="3">
<input type="range"
       min="1" max="10">
<input type="tel">
<input type="url">

New Input Element Attributes

The following table lists the new input element attributes available for your forms in HTML5. For a complete source code, see attributes.html.

<input type="range" min="1" max="10">
<input type="tel" pattern="[0-9]+" required>
<input placeholder="You know what to do, huh?">
<input type="number" step="3">

Creating a Basic Login Form

To create simple user input forms, you must learn to use the HTML5 features in Web forms:

1. Create a simple form where the user can enter their login details (email address and password):

   <form action="" method="">
      <label>email: <input type="text"></label>
      <label>password: <input type="password"></label>
       
      <input type="submit" value="Login">
   </form>
   

2. To check the validity of the entered email address automatically, add the required attribute to the input element with the email type:

   <label>email: <input type="email" required></label>
   

3. Define the password field as mandatory by using the required attribute in that input element too:

   <label>password: <input type="password" required></label>
   

4. Because a device has limited space on the screen, remove the field labels and replace them with hint texts using the placeholder attribute:

   <input type="email" placeholder="e-mail address" required>
   <input type="password" placeholder="password" required>
   

The final form that checks the email validity and requires the mandatory password input is complete:

<form action="" method="">
   <fieldset>
      <legend>Login</legend>
      <input type="email" placeholder="e-mail address" required>
      <input type="password" placeholder="password" required>
   </fieldset>
    
   <input type="submit" value="Login">
</form>

Source Code

For the complete source code related to this use case, see the following file:

• basicLogin.html

Creating an Advanced Login Form

To create advanced user input forms, you must learn to use the HTML5 features in Web forms:

1. Create a login form that checks the email validity and requires the mandatory password input:

   <form action="" method="">
      <fieldset>
         <legend>Login</legend>
         <input type="email" placeholder="e-mail address" required>
         <input type="password" placeholder="password" required>
      </fieldset>
       
      <input type="submit" value="Login">
   </form>
   

2. When the form page is loaded on the screen, put the focus automatically to the email field by using the autofocus attribute:

   <input type="email" placeholder="e-mail address" required autofocus>
   

3. To spare the user from filling in information that they have given previously, use the autocomplete attribute, which shows the previously successfully inserted entries in a datalist, from which the user can select and use them.

   You can apply the autocomplete attribute to a specific field by adding it to the appropriate input element. If you add it to the form element, it applies to all child elements within the form.

   <form action="" method="" autocomplete="on">
   

4. In general, apply the autocomplete attribute to the form element, and then separately set it to off for those fields that must not use it.

   In the following example, the password field must not use autocomplete, to prevent unauthorized access by any user.

   <input type="password" placeholder="password" required autocomplete="off">
   

5. Protect the password with private and public key pair using the keygen element.

   The element is used to transform the data sent from the connected form to a pair of encrypted keys using the RSA (Rivest Shamir Adleman) method. When the input data is sent from the form, the private key is saved in the local computer, and the public key is delivered to the server. Only if the keys match, the login process proceeds forwards.

   <keygen name="keyvalue">
   

6. Use the pattern attribute to perform a validity check that ensures that the password field value matches the given regular expression. The required attribute is used to ensure that the field value must be entered and then the validity check can be performed.

   In the following example, the password only accepts numbers and letters of the alphabet. If an invalid value is entered, the login cannot proceed.

   <input type="password" placeholder="password" required
          pattern="[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*" 
          autocomplete="off">
   

7. Define the required length of the password within the pattern attribute.

   In the following example, the password must be 6 to 12 characters long.

   <input type="password" placeholder="password" required 
          pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}" 
          autocomplete="off">
   

The final form with autofocus and autocomplete features, strengthened security, and password value requirements is complete:

<form action="" method="" autocomplete="on">
   <fieldset>
      <legend>Login</legend>
      <input type="email" placeholder="e-mail address" required autofocus>
      <input type="password" placeholder="password" required 
             pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}" 
             autocomplete="off">
   </fieldset>

   <keygen name="keyvalue">
    
   <input type="submit" value="Login">
</form>