How Autofill Knows Where to Put Your Stuff

But why does it mess up sometimes, and what can we do to help it?

Password managers and autofill applications are great at what they do, but sometimes they don’t work quite as expected. Making well-defined forms can help these applications choose the correct fields to fill with the right information. All this really requires is defining, at most, two more attributes for each input element within a form. One of the earliest browsers to adopt this, Google Chrome, is improving how we as developers define forms and it only adds a few extra steps to make sure autofill works correctly.

What is this new way you speak of?

A developer can help these autofill applications perform well by doing a few things:

  1. Always wrap login/registration/change password sections in a form, without combining them. Separating each of these into their own separate form blocks can help autofill distinguish between them.
    • One thing to note for Google Chrome, if these input elements are not wrapped within a form, Chrome will only provide suggestions. But it will not actually fill the fields automatically.
  2. Use autocomplete attributes.
    • An example would be the: <input type="password" autocomplete="current-password" /> 
    • Using these tags helps autofill applications infer what a field is to be used for. So for the example above, this would tell the password manager that that field is where a user's current password should go. For a change password form, the autocomplete value would be set to "new-password", telling the password manager that the password is being changed so that it can prompt the user accordingly to update their password in their password manager.
    • There are autocomplete values for credit card fields, addresses, and so many more.

Without using these more specific autocomplete properties, you may find that data gets put in the wrong spot when using complicated forms. Such as forms involving a shipping address and billing address where a user expects different data to go in each. And yes, there is a way to differentiate between shipping address fields and billing address fields. For example:

  • Shipping: <input name="shippingLine1" autocomplete="shipping address-line1" />
  • Billing: <input name="billingLine1" autocomplete="billing address-line1" />

This would be the easiest way to define a difference between a shipping and billing field within a form. Having a complicated form using both types mentioned above is exactly where using this type of autocomplete would shine. Mainly because it would help users fill in the form accurately and quickly. 

What do other browsers support?

In browsers other than Google Chrome, although it is part of the WHATWG HTML Standard, only <input type="password" autocomplete="on|off" /> is supported in HTML5. This basically tells an autofill application to either fill this specific field or not. This version of autocomplete only works with specific input types such as text, email, password, search, url, tel, datepickers, range, and color, which is somewhat limited in comparison to what Chrome supports, although it does cover the vast majority of autofill fields.

Browsers that do not support the autocomplete method described above have their own way to identify fields. They use previously-entered field data and the name attribute within an input element to predict the correct type of information to fill the field with. By default, autocomplete is set to "on", but at the very least a name attribute should be specified. So, <input type="password" name="password" /> would probably do just fine in helping out an autofill application find the correct fields to fill.