How to Use Autocompletetype Attribute in HTML Forms

Most websites have an online form for various purposes – user registration, taking orders, ticket booking, to name a few. Yet, filling in those forms could be a tiring and repetitive task for most users, when in fact, they are likely to input the repetitive information, such as Name, Email Address, Street Address, Postal Code, and Phone Number.


(Image by Pawel Kadysz)

Users may downright abandon the form, if the list goes longer. To try to solve this issue, a team at Google proposed a new attribute called autocompletetype, to allow answers to be auto-filled into the form.

Recommended Reading: A look into: HTML5 Datalist

The Autocomplete Attribute?

Auto-fill is nothing new. We have been able to do so all this while with the already long-existing attribute, autocomplete. These two attributes, autocomplete and autocompletetype, primarily serve the same thing. The only different is in their design.

The autocomplete attribute is designated to enable (or disable) auto-fill functionality in the forms. Whereas, the autocompletetype attribute is designed for web developers so that they can assign a standard data type to help the browsers or applications populate the forms more accurately.

As stated in the proposal: current auto-fill products primarily rely on contextual clues, like the name attribute, input label, and the placeholder text, to determine what should be filled into the form elements (which is not reliable in particular situations).

Also Check Out: A Look Into: HTML5 Placeholder Attribute

AutocompleteType Usage

At the time of the writing, this attribute is specified in this way: x-autocompletetype, and it accepts data types for commonly required information in an online form, such as: full-name, street-address, city, postal-code, and country-name.

The following snippet shows an example of their implementation.

<form method="get" accept-charset="utf-8">
	<label for="namadepan">Nama Depan</label>
	<input id="namadepan" type="text" name="namadepan" value="" x-autocompletetype="given-name">
	<label for="namabelakang">Nama Belakang:</label>
  	<input type="text" name="namabelakang" value="" x-autocompletetype="family-name">
  	<label for="email">Email</label>
  	<input id="email" type="text" name="email" value="" x-autocompletetype="email">
  	<label for="telp">Telp.</label>
  	<input id="telp" type="text" name="telephone" value="" x-autocompletetype="tel">
  	<label for="fax">Fax</label>
  	<input id="fax" type="text" name="fax" value="" x-autocompletetype="fax">
</form>

Notice that I used my local language for the first two form elements. This is one of the instances where autocomplete type would be very useful. It gives the browsers or applications that possibly do not understand my local language, a standard label; so that they can correctly auto-fill in the form.

Final Thought

Can we use the attribute, right now? In short, yes we can. The browsers or applications that does not support the attribute will simply ignore it. Yet, the ones that have implemented it, like Google Chrome, can take the advantage and serve better experience to our users.

However, the only thing that becomes my concern is that the attribute is still in the experimental stage and the standardization is still being discussed. So, there could be some changes in the implementation in the future, as stated in Google Webmaster Central: "Like any early stage proposal we expect this will change and evolve as the web standards community provides feedback."

Further Resources

Further on autocompletetype attribute, you can head over to the following references:

Related posts:

  1. HTML5 Tutorial: Login Page with HTML5 Forms
  2. A Look into: HTML5 Placeholder Attribute
  3. A Look Into HTML5 Forms Input Types: Date, Color and Range
  4. CSS3 Attribute Selector: Targeting the File Type

via hongkiat.com http://www.hongkiat.com/blog/how-to-use-html-autocompletetype-attribute/