Autocomplete Attributes — Speeding Up Form Completion Accessibly

In this tutorial, you will learn about Autocomplete Attributes. We cover key concepts, practical examples, and best practices to help you master this topic.

The autocomplete attribute tells browsers what kind of data a field expects, enabling autofill from saved profiles and reducing typing errors.

What You'll Learn

How to use autocomplete attributes correctly, which values to use for common fields, and how they benefit users with disabilities.

Why It Matters

Autofill saves time and reduces errors, especially for users with motor disabilities who find typing difficult, and for users with cognitive disabilities who benefit from not having to recall information.

Real-World Use

A user with a motor disability needs to fill out a shipping form. With autocomplete attributes, their browser fills in name, address, phone, and email with one click instead of typing each field individually.

Autocomplete Values

<form autocomplete="on">
  <label for="fullname">Full name</label>
  <input type="text" id="fullname" name="fullname" autocomplete="name">

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

  <label for="address">Street address</label>
  <input type="text" id="address" name="address" autocomplete="street-address">

  <label for="city">City</label>
  <input type="text" id="city" name="city" autocomplete="address-level2">

  <label for="state">State</label>
  <input type="text" id="state" name="state" autocomplete="address-level1">

  <label for="zip">ZIP code</label>
  <input type="text" id="zip" name="zip" autocomplete="postal-code">

  <label for="country">Country</label>
  <select id="country" name="country" autocomplete="country-name">
    <option value="">Select country</option>
    <option value="US">United States</option>
  </select>

  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone" autocomplete="tel">

  <label for="cc-number">Card number</label>
  <input type="text" id="cc-number" name="cc-number"
         autocomplete="cc-number"
         inputmode="numeric"
         pattern="[0-9]{13,19}">

  <label for="cc-exp">Expiry</label>
  <input type="text" id="cc-exp" name="cc-exp"
         autocomplete="cc-exp"
         placeholder="MM/YY">
</form>

Section Tokens

<!-- Different sections for billing and shipping -->
<fieldset>
  <legend>Shipping address</legend>
  <input type="text" autocomplete="shipping name">
  <input type="text" autocomplete="shipping street-address">
</fieldset>

<fieldset>
  <legend>Billing address</legend>
  <input type="text" autocomplete="billing name">
  <input type="text" autocomplete="billing street-address">
</fieldset>

Common Mistakes

1. Using autocomplete=off on standard fields

Disabling autofill forces users to retype information, which is especially burdensome for users with disabilities.

2. Wrong autocomplete value for the field

Using email for a phone field confuses the browser autofill. Each value has a specific purpose.

3. No autocomplete on payment fields

Credit card fields need autocomplete so password managers and browser autofill can populate them.

4. Incorrect section tokens

Section tokens (shipping/billing) must be lowercase and separated by a space from the autocomplete value.

5. Missing autocomplete on custom controls

Custom select dropdowns and autocomplete widgets need the appropriate autocomplete attribute to trigger autofill.

Practice Questions

1. What autocomplete value should a city field use? address-level2 represents the city or locality.

2. How do you differentiate billing and shipping addresses? Use section tokens: autocomplete="billing street-address" and autocomplete="shipping street-address".

3. What are the benefits of autocomplete for Accessibility? Reduces typing (helps motor disabilities), reduces cognitive load (helps cognitive disabilities), and reduces errors (all users).

Challenge: Create a checkout form with shipping and billing sections. Use proper autocomplete attributes and section tokens for every field.

FAQ

Mini Project

Add autocomplete attributes to every field in a registration form. Test that browser autofill correctly populates the form. Verify with Chrome DevToolsk "DevTools" >}} that the values are recognized.

What's Next

Learn how to manage Focus Management in Forms to guide users through complex multi-field forms and validation workflows.