HTML5 Form Autocomplete Implementation

Technology is advancing very rapidly in the technology industry this last couple of years. A great and powerful new standard that was created and by which many of us developers are abiding already is HTML5. With this many opportunities came for us to be able to successfully create a user experience that is easily utilized by any visitor. One of the great tools that are on this library is the ability to AutoComplete forms, which at this time many of the major browsers already support. The browser with the biggest support of this feature is Google Chrome. Actually it was during one of Matt Cuts videos about it that I became familiar with it. Even if some of the browsers can perform this without implementation of any code I will highly recommended as you will be requesting exactly the information that you are looking for minimizing any room for user error. It is very simple to implement in any form without having to change any of the backEnd code, all that you have to do is add the attributeξx-autocompletetype.

Example:

<input type=”text” name=”fullName”ξx-autocompletetype=”name-full” />

The only thing that you have to be replacing will be the value of the attribute as it will be different for each input tag, you can find a complete list of them atξWHATWG Wiki, as well as the complete specifications of this new attribute. There is also a way to completely turn off this feature with the attribute “ξautocomplete=’off’ “, which might be useful for high security sites like bank portals or log in forms.

There are many mixed emotions in regard to form autocompletion on the web. Many say that it is a great security hazard as all of your personal and financial information is stored on your computer. However, on the contrary I do like the idea as anything that will help a visitor make it’s experience easier is good UX, and fortunately as well with the great advances in encryption we can rest secured that our information is safely stored. Please take a moment in the comment section below to let me know what you think about this topic as well as any other comments.

error

Enjoy this blog? Please spread the word :)