Post
Ask Question

Autocomplete In HTML5

Autocomplete In HTML5 

 
All of us have seen the autocomplete options while filling the forms online or even logging into our social accounts. All of us fill up so much information online in our day to day life. Mostly used examples can be of Gmail or Facebook. When we login to Gmail or Facebook, we enter the username and password. Over the period, have you noticed the username getting displayed just as you type in the few initial letters? This amazing feature is the autocomplete feature.
 
It is very convenient for us to fill the forms easily when the autocomplete feature is available. At times, we would like to avoid, using this feature for security/confidentiality purposes. Suppose, I access my company's Email account from a cyber cafe and I don't want the autocomplete functionality to grab and remember my Email and display it to the other users. HTML5 gives us the power to create the forms, where we can enable and disable this autocomplete functionality just by adding an attribute to our input/form tag.
 
Autocomplete is an attribute, which can be used with the form tag and input tag. An autocomplete attribute was not present in the previous versions of HTML. It is a new feature of HTML5. Its value can be either "on" or "off".
 
Syntax
 
To set autocomplete on/off for the entire form, one can state:
  1. <form autocomplete="on/off">   
To set autocomplete on/off for the specific input elements: 
  1. <input autocomplete="on/off">      
In the syntax, given above, value "on" enables the autocomplete and "off" disables the autocomplete.
 
Let us understand autocomplete by implementing it in a form. Create a simple login form by referring the code snippet, given below:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <form> Username:   
  5.             <input type="text" name="user">  
  6.                 <br>  
  7.                     <br> Password:   
  8.                         <input type="password" name="pwd">  
  9.                             <br>  
  10.                                 <br>  
  11.                                     <input type="submit">  
  12.                                     </form>  
  13.                                 </body>  
  14.                             </html>     
Now, when we we use this form several times, we will see the autocomplete options.
 
As you can see in the highlighted area, the Browser gives us predictions for autocomplete, as we have not set it off. Autocomplete is enabled by default. Now, let us disable it. Add the highlighted code to our existing form.
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <form autocomplete="off"> Username:   
  5.             <input type="text" name="user">  
  6.                 <br>  
  7.                     <br> Password:   
  8.                         <input type="password" name="pwd">  
  9.                             <br>  
  10.                                 <br>  
  11.                                     <input type="submit">  
  12.                                     </form>  
  13.                                 </body>  
  14.                             </html>     
OUTPUT
 
Now, you can see the Browser doesn't give any predictions based on previous records. You can also turn autocomplete off for the entire form and on for few input elements.
 
OUTPUT
Try the code snippet, given below and observe the results.
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <form autocomplete="on"> First name:   
  5.             <input type="text" name="fname">  
  6.                 <br>  
  7.                     <br> Middle name:   
  8.                         <input type="text" name="mname">  
  9.                             <br>  
  10.                                 <br> Last name:   
  11.                                     <input type="text" name="lname">  
  12.                                         <br>  
  13.                                             <br> Phone:   
  14.                                                 <input type="text" name="phone" autocomplete="off">  
  15.                                                     <br>  
  16.                                                         <br> E-mail:   
  17.                                                             <input type="email" name="email" autocomplete="off">  
  18.                                                                 <br>  
  19.                                                                     <br>  
  20.                                                                         <input type="submit">  
  21.                                                                         </form>  
  22.                                                                     </body>  
  23.                                                                 </html>    
OUTPUT
The code, given above, has 5 input tags. Autocomplete is on for the form but off for the phone and Email input tags. Hence, the predictions won't be given for the phone and Email text fields.
 
Autocomplete is recommended for the input types, which allows the data entry. 
Next Recommended Reading Working With AutoComplete Attribute In HTML5