How to Use Autocompletetype Attribute in HTML Forms

By . Filed in Web Design

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.

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).

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:

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement