Introduction
Autofill is a very popular browser function that helps a user filling in a form with less effort, as it automatically fills in web form fields with stored data, like first name, last name, email, phone number, etc. It can even be used for credit card details and passwords. Browsers started putting more effort in this feature early 2010’s with the rise of mobile devices that made filling forms a bit less user-friendly.
Autofill data
Autofill data will be stored in the browser by completing forms on websites or by manually adding them through the browser settings.
Autofill field detection
‘Use sensible field names’ is the advised guideline for Google Chrome. That is very broad and what does that mean? And is middle-name or house-number sufficient?
Browsers do a good job of finding the correct value for your form fields based on your field names and labels (even in foreign languages). But often, based on how your forms are built, they get it wrong, and it becomes a curse. Incorrect autofill leaves it up to the customer to correct the data. Hopefully, before they decide to abort.
Guideline
Use the HTML autocomplete attribute to provide browsers with a hint of the expected value, thereby eliminating the need for guesswork.
Autocomplete Attributes by Use Case
Signup & Account Management
HTML code | Autocompleted value |
autocomplete="name"
| Full name (preferred over separate fields) |
autocomplete="given-name"
| First (given) name |
autocomplete="additional-name"
| Middle name |
autocomplete="family-name"
| Last (family) name |
autocomplete="email"
| Email address |
autocomplete="tel"
| Full telephone (with country code) |
autocomplete="tel-country-code"
| Country code (e.g. +32) |
autocomplete="tel-national"
| National part of phone number |
autocomplete="bday"
| Full birthday (YYYY-MM-DD) |
autocomplete="bday-day"
| Birthday day (numeric) |
autocomplete="bday-month"
| Birthday month (numeric) |
autocomplete="bday-year"
| Birthday year (numeric) |
autocomplete="organization"
| Company or organisation name |
autocomplete="sex"
| Gender (non-standard; freeform text) |
Shipping & Billing Address
HTML code | Autocompleted value |
autocomplete="address-line1"
| First line of street address |
autocomplete="street-address"
| Full street address (exclude city, postal code, country) |
autocomplete="address-level2"
| City or locality |
autocomplete="postal-code"
| Postal/ZIP code |
autocomplete="country"
| ISO 3166-1 alpha-2 country code |
Note: House-number alone is not standardised. Either ask for complete address lines or integrate an address autocomplete service.
Shipping & Billing Address
It is common for forms to let users enter different shipping and billing addresses. To help browsers clearly distinguish between these two sections, you can provide explicit autocomplete hints in your HTML. The guideline is to prefix the existing HTML `autocomplete` values with either `shipping` or `billing`, depending on the address type. This allows browsers and autofill tools to correctly identify and complete the relevant fields.
HTML code |
autocomplete="billing email"
|
autocomplete="billing address-line-1"
|
HTML code | Autocompleted value |
autocomplete="cc-name"
| Name on payment instrument |
autocomplete="cc-number"
| Card or payment-method number |
autocomplete="cc-exp"
| Expiry date (e.g. “MM/YY” or “MM/YYYY”) |
autocomplete="cc-exp-month"
| Expiry month |
autocomplete="cc-exp-year"
| Expiry year |
autocomplete="iban"
| IBAN (International Bank Account Number) Compatible with Google Chrome, Microsoft Edge, Brave, and other Chromium-based browsers. Safari ignores this, so it can be added without side effects |
Login & Password Management
HTML code | Autocompleted value |
autocomplete="current-password"
| User’s existing password |
autocomplete="new-password"
| New password (account creation or password change) |
autocomplete="one-time-code"
| One-time code for 2FA
|