HTML autocomplete Values Worth Using

People type the same name, email address, phone number, and postal address into forms all week. The HTML autocomplete attribute lets a browser reuse information the person has chosen to save.

It costs one attribute per field and usually saves more time than a clever animated label ever will.

Use a token that describes the data

<label for="email">Email</label>
<input
  id="email"
  name="email"
  type="email"
  autocomplete="email"
>

The type says how the control behaves; autocomplete says what the value means. Useful identity and contact tokens include:

autocomplete="name"
autocomplete="given-name"
autocomplete="family-name"
autocomplete="email"
autocomplete="tel"
autocomplete="organization"

Address forms can be more specific:

autocomplete="street-address"
autocomplete="address-line1"
autocomplete="address-line2"
autocomplete="postal-code"
autocomplete="country-name"

Use street-address for one multiline control or the individual line tokens for a split form. Do not mix both models for the same address and expect the browser to untangle the design.

Password tokens prevent bad guesses

For a login:

<input
  type="password"
  name="password"
  autocomplete="current-password"
>

For registration or a password reset:

<input
  type="password"
  name="password"
  autocomplete="new-password"
>

Pair the username field with autocomplete="username". These hints help password managers tell an existing credential from one they should generate or update.

A one-time-code field can ask the operating system to offer a received code:

<input
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
>

The browser may still decline, and not every code is numeric. Choose inputmode from the actual format rather than the example.

Distinguish shipping from billing

Tokens can be prefixed when one form contains several addresses:

autocomplete="shipping street-address"
autocomplete="billing postal-code"

Section tokens can distinguish repeated groups in more complex forms. Sensible name values and properly connected labels help too; autocomplete works best when the entire form tells one consistent story.

Turning it off rarely solves the problem

autocomplete="off" is often ignored for credential fields and usually makes ordinary forms slower. I would disable saving only for a specific reason, not as a blanket security decoration.

Autocomplete does not submit anything without consent. It helps the user fill values they already control. Use accurate tokens, test the form in more than one browser, and let the browser handle a repetitive job it is good at.