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,
autocompletetype, primarily serve the same thing. The only different is in their design.
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
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:
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.
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."
autocompletetype attribute, you can head over to 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