Form Autocomplete

Filling out forms is painful. Login forms aren't too bad,given that you have allowed your browser to remember your credentials. If you've filled out the form before, your browser may also remember previous values for some of the inputs (which isn't necessarily desirable for sensitive information, like credit card numbers).

Many websites, especially eCommerce sites, offer or require storing information such as addresses and credit card numbers. This is convenient, but not very secure. Given the option, I will opt out of allowing anyone to remember billing, shipping, or payment info simply because I'd rather that this info not be stored in a database. Sure, it's unlikely that Amazon will have their customer credit card numbers stolen, but what about my local propane company? And do I really want to go through and update my info on countless sites when I move or get a new credit card?

Sample for showing autocomplete in Firefox 56 Nightly
Also shown is the new date picker (which is awesome!)

Credit cards currently not supported (in development). I am sure that requires extra attention to details, due to the fact that, well, credit cards.

Fortunately for users, browser makers are constantly trying to deliver a better experience, and browsers now have the means to know what values a form expects and to remember things like name, email , telephone number, credit card info, etc. This is enabled through the autocomplete attribute being set on <input>s. Before, this used to be something that took values of either on or off, but it can now accept values such as given-name, cc-number, and street-address.

Basic Info


Contact Info

Payment Info

This is not yet universally supported. It's been in Chrome for a while now, and has been in testing in Firefox Nightly since May of 2017. I do not know the status in other browsers, since support for a single attribute is not always published. Setting these attributes on your forms will have no effect at all on unsupported browsers though, so you should really consider using it anywhere your users would benefit from it. I can only imagine that you'll see benefits almost immediately from users who are less frustrated by the checkout experience.

Note: The demo form does not transmit any info. In fact, it's just a bunch of inputs outside of any form.