HTML5 Forms: Managing User Input

This tutorial demonstrates how you can implement Web forms with HTML5.

Warm-up

Become familiar with the HTML5 Forms API basics by learning about:

• Creating a Basic Login Form

  Create a login form with mandatory fields, validity checks, and hint texts.

• Creating an Advanced Login Form

  Create a login form with autofocus, autocompletion, password security, and specific input value patterns.

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>