How To Optimize Online Forms For Autofill

Optimizing online forms for browser autofill streamlines the data entry process for your website visitors, leading to more form submission-related conversions like purchases, signups or contact requests.

You reduce the time needed for your users to fill out a form, get rid of the need to remember that piece of information, and prevent mistakes.

What Is Browser Form Autofill?

Autofill is a functionality of web browsers that allows them to automatically fill in commonly entered user information into online forms – like login, contact, address and credit card data. All major browsers support this functionality, although it depends on the user’s preferences whether they store this data in their browser in the first place, and then allow the browser to use it via autofill in a specific online form.

How To Optimize Online Forms For Autofill?

The most straightforward way to optimize online forms for browser autofill is to use the attribute autocomplete on <input> , <select> and <textarea> HTML form elements. It provides hints to browsers regarding the type of information expected in a particular form field.

Also make sure to wrap the form in a <form> element, and only use placeholder attributes the way they were meant to be used.

Here’s a list of most frequently used supported form fields:

Full name
<input type="text" name="full_name" autocomplete="name">

First name
<input type="text" name="first_name" autocomplete="given-name">

Last name
<input type="text" name="last_name" autocomplete="family-name">

Street address
<input type="text" name="street_address" autocomplete="street-address">
or if you need multiple lines for street address (in this case don’t use street-address anymore):
<input type="text" name="street_address" autocomplete="address-line1">
<input type="text" name="street_address" autocomplete="address-line2">
<input type="text" name="street_address" autocomplete="address-line3">

City
<input type="text" name="city" autocomplete="address-level2">

State or region
<input type="text" name="state" autocomplete="address-level1">

ZIP or postal code
<input type="text" name="zip_code" autocomplete="postal-code">

Country
<input type="text" name="country" autocomplete="country-name">

Phone number
<input type="tel" name="phone_number" autocomplete="tel">

Email address
<input type="email" name="email" autocomplete="email">

Username
<input type="text" name="username" autocomplete="username">

Password
for logging in with the current password:
<input type="password" name="password" autocomplete="current-password">

New password
for generating a new password:
<input type="password" name="password" autocomplete="new-password">

One-time code
for filling in a one-time code delivered via SMS:
<input type="text" name="one-time-code" autocomplete="one-time-code">

Credit card number
<input type="text" name="credit_card_number" autocomplete="cc-number">

Credit card expiration date
<input type="text" name="expiration_date" autocomplete="cc-exp">

Credit card cardholder name
<input type="text" name="cardholder_name" autocomplete="cc-name">

Credit card billing address
simply add billing (followed by an empty space) before the autocomplete attribute value:
<input type="text" name="billing_address" autocomplete="billing address-line1">
etc., or
<input type="text" name="billing_street_address" autocomplete="billing street-address">
etc.

Shipping address
for a clear distinction from the billing address, add shipping (followed by an empty space) before the autocomplete attribute value:
<input type="text" name="shipping_address" autocomplete="shipping address-line1">
etc., or
<input type="text" name="shipping_street_address" autocomplete="shipping street-address">
etc.

Company name
<input type="text" name="company_name" autocomplete="organization">

Job title
<input type="text" name="job_title" autocomplete="organization-title">

Birthday
<input type="text" name="birthdate" autocomplete="bday">

You can also set a form field to instruct the browser to not offer autofill, e.g. if it’s a field for a one-time code, or if it’s a honeypot field:
<input type="text" name="one-time-code" autocomplete="off">

For the full list visit for instance Mozilla’s documentation page.