What is Autofill or Autocomplete?
Autofill is a very popular browser feature that helps users fill in forms more easily, as it automatically populates 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 began to focus more on this feature in the early 2010s, with the rise of mobile devices that made filling out forms less user-friendly.
Where does Autofill Data Come From?
Autofill data can be stored in the browser by filling out forms on websites or by manually adding it through the browser settings.
Can browsers do Autofill Field Detection
‘Use sensible field names’ is the advised guideline for Google Chrome. That is very vague, and what exactly does that mean? Is middle-name or house-number sufficient?
Browsers do a good job of finding the correct value for your form fields based on their names and labels (even in foreign languages). However, depending on how your forms are built, they often get it wrong, which can be frustrating. Incorrect autofill leaves it up to the customer to correct the data, hopefully before they decide to abort.
What’s the Solution for Good Autofill?
By using the HTML autocomplete attributes to inform browsers of the expected value, thereby eliminating the guesswork!
Discover autofill for your specific Use-Case
1. Autofill for Contact and Birthday fields
| HTML code | Autocompleted value |
|---|---|
autocomplete="name" |
The field expects the value to be a person’s full name. Using “name” rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the below autocomplete values if you do need to break the name down into its components. |
autocomplete="given-name" |
The given (or “first”) name. |
autocomplete="additional-name" |
The middle name. |
autocomplete="family-name" |
The family (or “last”) name. |
autocomplete="email" |
An email address. Optional when the type="email". |
autocomplete="tel" |
A full telephone number, including the country code (starting with a + sign). If you need to break the phone number up into its components, you can use: tel-country-code and tel-national.
|
autocomplete="tel-country-code" |
The numeric country code prefixed with a + sign. |
autocomplete="tel-national" |
Telephone number without the country code component. |
autocomplete="bday" |
The full birthday, format usually YYYY-MM-DD. |
autocomplete="bday-day" |
Day component of birthday, numeric. |
autocomplete="bday-month" |
Month component of birthday, numeric. |
autocomplete="bday-year" |
Year component of birthday, numeric. |
autocomplete="organization" |
A company or organization name, such as “Acme Widget Company” or “Girl Scouts of America”. |
2. Autofill for Address fields
| HTML code | Autocompleted value |
|---|---|
autocomplete="address-line1" |
The first line of the street address. Common use‑case in Europe to just have one address line. |
autocomplete="street-address" |
A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name. |
autocomplete="postal-code" |
Postal code, post code, ZIP code, CEDEX code. |
autocomplete="address-level2" |
In Europe and other regions with two administrative levels this represents the city name. For other regions consult MDN — administrative levels in addresses. |
autocomplete="country" |
A ISO3166 alpha‑2 two‑letter code representing the user’s country. Reference list. |
3. Autofill for Login fields
| HTML code | Autocompleted value |
|---|---|
autocomplete="new-password" |
A new password. When creating a new account or changing passwords, this should be used for an “Enter your new password” or “Confirm new password” field, as opposed to a general “Enter your current password” field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password. |
autocomplete="current-password" |
The user’s current password, if they previously logged in to your platform. |
autocomplete="one-time-code" |
A one‑time code used for verifying user identity, also called two‑factor authentication (2FA). |
4. Autofill for Payment fields
| HTML code | Autocompleted value |
|---|---|
autocomplete="cc-name" |
The full name as printed on or associated with a payment instrument such as a credit card. |
autocomplete="cc-number" |
A credit card number or other number identifying a payment method, such as an account number. |
autocomplete="cc-exp" |
A payment method expiration date, typically in the form “MM/YY” or “MM/YYYY”. |
autocomplete="cc-exp-month" |
The month in which the payment method expires. |
autocomplete="cc-exp-year" |
The year in which the payment method expires. |
Conclusion
Autofill is a helpful, user-friendly browser feature that simplifies form filling by inserting known user data. However, relying on browsers to deduce fields from names and labels can cause frustrating errors. The best way to avoid this is to explicitly instruct browsers using the HTML autocomplete attribute, linking each input to the exact data expected (e.g., given-name, email, bday, address-line1, postal-code, cc-number, current-password). Declaring these attributes across contact, address, login, and payment forms eliminates guesswork, boosts accuracy, reduces abandonment, and creates a quicker, more accessible checkout and onboarding process—especially on mobile.
