In today’s digital era, submitting personal details using online forms are very common. If you are booking a flight ticket or ordering food/medicine online or shopping from e-commerce websites, you have to provide your personal details and fill lengthy forms. People hate filling those forms, especially on mobile devices. To improve user experience, many browsers introduced a feature of Autocomplete fields on behalf of the users.

What is Autocomplete feature? When a user starts to type in the field, the browser display options to fill in the field, based on previously typed values/history.

Autocomplete feature was introduced as an unofficial HTML feature in Microsoft’s internet explorer and was later adopted by a number of other browsers. Chrome introduced a similar Autofill feature in 2011. With HTML5, the autocomplete attribute is an official part of the specification.

The autocomplete attribute is used to specify whether a form or a particular input field should have autocomplete enabled or not. HTML syntax to set autocomplete “on” or “off” for the entire form or for the specific input elements:

<form autocomplete="on/off"> 

<input autocomplete="on/off">  

 Note: It is possible to have autocomplete “on” for the form, and “off” for specific input fields, or vice versa.

The autocomplete attribute works with the following types:
text, search, url, tel, email, password, date, range and color.

The autocomplete attribute sometimes does not work properly in some browser. So there are some workarounds as mentioned below.

1. Use value as ‘block’ instead of ‘off’ to disable the autocomplete attribute at the form level. i.e
   <form action=”” autocomplete=”off” > replace with < form action=”” autocomplete=”block” >
   –
2. If autocomplete feature is not working properly in one of the browsers, use following JavaScript.

<script type="text/javascript">
	 if($.browser.chrome) {                      
		  $(document).on('focus click tap', 'input', function() {
			   $(this).attr("autocomplete", 'block');                 
		  });                  
	 } else {
		  $(document).on('focus click tap', 'input', function() {
			   $(this).attr("autocomplete", 'off');
		  });
	 } 
</script>

3. Field level Autocomplete Tokens: Sometimes forms are too large and just setting the Autocomplete attribute to “on” or “off” creates confusion for the browsers. For example, sometimes a person’s address contains 2 to 3 lines. When we try to fill our address again in some other form, the browser suggests incorrect address lines using autocomplete feature.
   
   To make it more meaningful, we can provide predefined string values to autocomplete attribute. For example

<input name="example_input1" autocomplete="street-address">
<input name="example_input2" autocomplete="address-line1">
<input name="example_input3" autocomplete="address-line2">

Here are some of the predefined tokens:

Refer w3 specifications for list of all the predefined tokens at https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-autocompleteelements-autocomplete

4. What if we have multiple addresses in the same form i.e. present and permanent address? Obviously, both of them will have address-line1. Again your browser will be confused. In such cases, you can provide section name in the autocomplete attribute. You can give any meaningful name after the first eight character string i.e. section- For example:

<!-- Present Address fields -->
<input name="example_input1" autocomplete="section-present street-address">
<input name="example_input2" autocomplete="section-present address-line1">
<input name="example_input3" autocomplete="section-present address-line2">

<!-- Permanent Address fields -->
<input name="example_input1" autocomplete="section-permanent street-address">
<input name="example_input2" autocomplete="section-permanent address-line1">
<input name="example_input3" autocomplete="section-permanent address-line2">

There is much more to learn about the autocomplete feature. If interested you can refer w3 documentation for more info: https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-autocompleteelements-autocomplete

Note : The autocomplete attribute with only on/off option mostly works well in all the browsers except Google Chrome. For better autocomplete experience on Google Chorme, I would recommend using field level Autocomplete tokens.

That's all for this topic. If you guys have any suggestions or queries, feel free to drop a comment. We would be happy to add that in our post. You can also contribute your articles by creating contributor account here.

Happy Learning 🙂

If you like the content on CodePumpkin and if you wish to do something for the community and the planet Earth, you can donate to our campaign for planting more trees at CodePumpkin Cauvery Calling Campaign.

We may not get time to plant a tree, but we can definitely donate ₹42 per Tree.

About the Authors

jatin sorathiya    

Visit Full Profile

Curious IT geek to learn new technology.

abhi andhariya    

Visit Full Profile

Surviving Java Developer, Passionate Blogger, Table Tennis Lover, Bookworm, Occasional illustrator and a big fan of Joey Tribbiani, The Walking Dead and Game of Thrones...!!

Tags: html, javascript

Comments and Queries

<pre><code class="java"> 
String foo = "bar";
</code></pre>