Autocomplete is the very useful feature in browsers where when a user is presented with a form, the browser can fill it in with previously saved data (such as your email, password or address).

This is part of the HTML spec, and there are several rules and gotchas. This is a guide to everything you need to know!

Here is a demo. If you click in the 3 fields, your browser should suggest your first name (in the first field), last name (in the second field) and email (in the final field).

I've listed all the type of autocomplete options near the end of this page.

What types of inputs does autocomplete work on?

Normally it is used with <input type="text"> inputs (or similar - type="email" etc).

It can also be used for <textarea> and <select> dropdowns too

Where does the browser get its suggestions from?

They are normally from previously entered values from forms that the user has submitted before (from your site and/or other domains).

Sometimes after you submit a form in Chrome, you may see the following notification offering to save those details.

You can also visit chrome://settings/addresses in Chrome browsers to configure your saved addresses.

How to disable autocomplete suggestions

You can set autocomplete="off" and browsers are meant to disable any suggestions. In practice this does not always work, and sometimes browsers will still try and fill out/provide suggestions. See this Chromium issue for reference

If you have your own autocomplete feature built in (like on Google's homepage where it has a dropdown of suggestions) then it is recommended to add autocomplete="off" to your <input> elements.

Note: even if the browser is listening to your autocomplete="off" attribute, there may be password managers (such as 1password or lastpass) that ignore that, and they may still show a dialog asking if the user would like to save the submitted details (especially for username/passwords).

Tokens such as Shipping vs Billing

All examples so far have been basic 1 word property values (e.g. autocomplete="address-line-1"). But these autocomplete properties support multiple space-separated tokens.

One useful example is when you need different addresses for billing vs shipping/delivery.

You can add shipping and billing prefixes, then a space, then the address type to specify what kind of address it is for.

For example:

<input autocomplete="shipping address-line-1" ...>

<input autocomplete="billing address-line-1" ...>

There are also the following tokens that can be used for telephone/email autocomplete:

• home, meaning the field is for contacting someone at their residence
• work, meaning the field is for contacting someone at their workplace
• mobile, meaning the field is for contacting someone regardless of location
• fax, meaning the field describes a fax machine's contact details
• pager, meaning the field describes a pager's or beeper's contact details

Sections

If you have multiple groups of similar fields, for example if you are buying 2 gifts and need to enter two different shipping locations, then you can prefix the autocomplete property with section-.

Here is an example, which also uses the shipping/billing attribute.

<fieldset>

<!-- blue shipping details -->
 <legend>Ship the blue gift to...</legend>
 <p> <label> Address:     <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label>
 <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level2"> </label>
 <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
</fieldset>

<!-- red shipping details -->
<fieldset>
 <legend>Ship the red gift to...</legend>
 <p> <label> Address:     <textarea name=ra autocomplete="section-red shipping street-address"></textarea> </label>
 <p> <label> City:        <input name=rc autocomplete="section-red shipping address-level2"> </label>
 <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping postal-code"> </label>
</fieldset>

Gotchas/misc

Follow these rules for maximum compatibility:

• The inputs must be inside a <form> element
• The form must have a submit button
• There must be a name and id attribute on the inputs

They are case insensitive

You don't need to worry about caps. autocomplete="tel" is the same as autocomplete="Tel".

Use autocomplete="on" for automatic behaviour

Just like you can tell browsers to disable autocomplete with autocomplete="off", turning it to just autocomplete="on" sets it to the default automatic behaviour.

Unpredictable when you have maxlength

If you make use of attributes such as maxlength, be aware that when browsers auto fill they can choose to truncate the autofill data.

e.g. <input name=middle-initial maxlength="1" autocomplete="given-name"> could autocomplete with just the first letter of their name.

Form autocomplete

I've focused on the inputs (<input>, <select> and <textarea>). But they should be inside a <form>... and the form element also supports the autocomplete property.

It only accepts two values - autocomplete="on" and autocomplete="off". Even with this set, browsers often ignore it for login forms.

Alternative to autocomplete: data list

If you have a list of autocomplete options, you can provide them with <datalist>.

See the demo below. Click / focus on the input and you should see some suggestions.

What kind of pet do you have?

<form>
    <label for="animal">What kind of pet do you have?</label>
    <input list="animals" name="animal" id="animal"/>
    <datalist id="animals">
        <option value="Bird"/>
        <option value="Cat"/>
        <option value="Dog"/>
        <option value="Elephant"/>
        <option value="Horse"/>
        <option value="A5h.dev animal demo"/>
    </datalist>
</form>

Styling autofilled fields with CSS

You can use the :autofill (and :-webkit-autofill) CSS psuedo class to style an input that has been autofilled.

input:-webkit-autofill,
input:autofill {
    border: 2px solid navy;
}

---

What kinds of information can be saved and used as suggestions

Name

You can set autocomplete="name" when you are asking for a user's full name.

full name

If you need a specific part of the name, you can use one of the following instead:

• autocomplete="honorific-prefix" for "Mrs", "Mr", "Dr" etc
• There is also autocomplete="honorific-suffix" for things such as "PhD", "Jr" etc
• autocomplete="given-name", autocomplete="additional-name", autocomplete="family-name" for first/middle/last name
• Also the autocomplete="nickname" for a nickname (this does not suggest anything on my machine)

first name

last name

*note: I'm using first/middle/last name, but that is only what is used in certain cultures (including mine). Given/Additional/Family is the correct & more inclusive term.

Email address

You can set autocomplete="email" to get autocompletion of a user's email address

email

Phone number

The basic form is <input autocomplete="tel">, but there are a range of others if you need something specific:

• tel-country-code (such as "1" for USA)
• tel-national for a phone number without international prefix
• tel-area-code for a area code (not international code), and tel-local for a local phone number (no international code, no area code)
• tel-extension for an extension code (room/suite number)

tel

tel-national

URLs

• autocomplete="url" to offer autocomplete suggestions for a URL
• autocomplete="photo" to offer autocomplete suggestions for a URL to a photo. I have yet to seen this in use.
• autocomplete="impp" to offer autocomplete suggestions for a URL to an instant messaging protocol endpoint. I have also not seen this in use.

Username

You can set autocomplete="username" to get autocompletion of a username.

This will sometimes fill it out with an email address (probably because some sites use email address as a username).

username

Passwords

There are a couple of ways to use autocomplete with passwords.

The typical way on login forms is with autocomplete="current-password". Note: even without this, just having <input type="password"/> will normally result in the browser trying to auto fill it out with a previously saved password.

But sometimes you need to prevent this behaviour - such as when changing passwords.

You can use autocomplete="new-password" to indicate to browsers that it should not autocomplete, and let the browser offer hints for suggesting a new password.

One time codes

If you use autocomplete="one-time-code" and receive a SMS, browsers can use this to offer to fill it out with your new one time password. This works well on iOS

Addresses

There are a lot of autocomplete options for addresses.

• street-address can be multi line (textarea). It should be the basic street address without city, zip/postal code, or country name
• address-line1, address-line2, address-line3 are the individual lines. They shouldn't be used in a form that also has the multi-line street-address autocomplete
• address-level4 (most specific: i.e. post town), address-level3, addres-level2, address-level1 (least specific: normally country). The specifics of how these work depend on the country, but they go from most specific (your local area) to least specific (country)
• country is for the country code, and country-name for the name of the country. You probably won't need both on a form.
• postal-code

street-address

Note: this is a textarea

address-line1

country

country-name

Payments

Autocomplete is very useful for payments. Most people remember their full name and address, but it is rarer to know someone who can recite their card details.

The autocomplete fields tend to be skewed towards credit/debit cards.

• autocomplete="cc-name" full name on the card
• autocomplete="cc-given-name" / autocomplete="cc-additional-name" / autocomplete="cc-family-name" are the individual name parts. This is not commonly used.
• autocomplete="cc-number" credit / debug card number
• autocomplete="cc-exp" full expiration date (normally in MM/YY or MM/YYYY). Recommended to use a regex pattern to enforce it (e.g. <input autocomplete="cc-exp" pattern="([0-9]{2}[/]?){2}" />)
• autocomplete="cc-exp-month" and autocomplete="cc-exp-year" for the month/year of expiry
• autocomplete="cc-csc" - security code on back of the card
• autocomplete="cc-type"(Visa, Master Card etc)

There are also some others related to payments such as transaction-amount, transation-currency

Personal details

• autocomplete="bday", bday-day, bday-month, bday-year for birthday information
• autocomplete="sex" for gender identity