It is helpful for website logins to autofill usernames and passwords on HTML inputs, but can be a pain in the butt when you work with password change/reset forms or forms with credit card number fields. In these instances, you don’t want numbers to automatically fill in (or be remembered by a browser).
In this article, you will see how easy it is to disable, when you want to do it, and the ramifications of doing so.
When to Disable Autocomplete
During a login, your browser will always attempt to helpfully remember your password, username, and/or email for next time. This is a helpful feature.
Unfortunately, when you need to change your password, such as in a profile section, it tries to fill in your old password by default. You are trying to change the password, so this being filled in is confusing to the user.
Additionally, you will notice that your bank disables both usernames and passwords on login forms. This is for security reasons. You would also want to do this for credit card numbers, social security numbers, etc, for the sake of your users security and peace of mind.
Disabling Autocomplete
This is really easy. Simply add an HTML attribute to your inputs to keep it from being filled in automatically with text – autocomplete="off"
<input type="text" name="creditcard" autocomplete="off" /> |
Solid Tip: You can use autocomplete on individual inputs or the form tag itself.
HTML Validation
The autocomplete HTML attribute is new to HTML 5. The attribute does not validate in HTML 4 or XHTML 1. This attribute is also highly used with custom doc types that are created for sites with sensitive info (which of course wont W3C validate).
While I solidly suggest using XHTML in my series Building Better Web Pages, I also love using HTML 5.
XHTML 1 is much better than HTML 4 for teaching good coding habits (when you bother to validate your code), and HTML 5 tries to combine the best of both worlds. While not a finished spec, it works great on modern browsers.
The concept of autocomplete has been part of Internet Explorer and Gecko/Firefox browsers for over a decade now, so the usage is still supported even though it is not validated. If you would like to know more about that funny business, check out this Mozilla Wiki entry. The article mentions:
The primary motivation for the attribute at that time was that banks believed disabling autocomplete was a necessary security measure for the login information on their websites, and would bar from their services browsers that had autocomplete features without support for disabling them.
Further Note About Manipulating Validation
For some reason, there are a lot of internet search results that deal with trying to circumvent validation and still use autocomplete outside of HTML 5.
These techniques involve using JavaScript to simply add the attribute to the tags instead of them being part of the HTML document at the beginning. This is utterly ridiculous and serves no purpose. The moment you add the attribute to the markup, it becomes invalid, so the only reason to do it is to trick the W3C Validator into showing you a happy screen.
You are only fooling yourself.
