A Guide to Using the 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 can be a tiring and repetitive task for most users, as they often need to input repetitive information, such as Name, Email Address, Street Address, Postal Code, and Phone Number.

Users may even abandon the form if the list gets too long. To address this issue, a team at Google proposed a new attribute called autocompletetype, which allows answers to be auto-filled into the form.

What is the Autocomplete Attribute?

Auto-fill is nothing new. We’ve been able to use it for a while with the existing autocomplete attribute. Both autocomplete and autocompletetype serve a similar purpose, but they differ in design.

The autocomplete attribute enables (or disables) auto-fill functionality in forms. The autocompletetype attribute, on the other hand, is designed for web developers to assign a standard data type to help 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 placeholder text, to determine what should be filled into the form elements (which is not reliable in particular situations).

Using the AutocompleteType Attribute

At the time of writing, this attribute is specified as 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 its 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 instance where the autocompletetype attribute is very useful. It gives browsers or applications that may not understand my local language a standard label, allowing them to correctly auto-fill the form.

Final Thoughts

Can we use the attribute right now? In short, yes. Browsers or applications that do not support the attribute will simply ignore it. However, those that have implemented it, like Google Chrome, can take advantage of it and provide a better user experience.

My only concern is that the attribute is still in the experimental stage, and the standardization is still being discussed. Therefore, there could be changes 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

For more on the autocompletetype attribute, check out the following references:

• Making form-filling faster, easier and smarter – Webmaster Central Blog
• Should I use the “autocompletetype” attribute on my web forms? – Google Webmaster Help
• Proposal for autocompletetype Attribute in HTML5 Specification – WHATWG
• The autocomplete attribute and web documents using XHTML – Mozilla Wiki