Autocomplete must match input purpose

Autocomplete attribute must use valid tokens for personal data

Form fields that collect personal data must expose a valid input purpose using the HTML autocomplete attribute. This covers names, contact details, addresses, payment, and login fields. It enables browsers and assistive tech to present accurate autofill, reduce input effort, and announce context.

Why It Matters

Incorrect or missing autocomplete tokens block reliable autofill and prevent assistive technologies from identifying field purpose. Users then type more, make more errors, and can abandon forms.

People with motor impairments benefit from fewer keystrokes. Users with low vision and screen reader users get clearer prompts and consistent filling. Cognitive load drops when the browser suggests the right data in the right field.

Common Causes

• Autocomplete omitted on personal-data fields.
• Typos or nonstandard tokens (for example, cc-cvv instead of cc-csc).
• Wrong token chosen (using name instead of given-name/family-name for split fields).
• autocomplete="off" used unnecessarily on checkout or login.
• Token order or spacing errors when combining context tokens.
• Setting autocomplete on a wrapper element instead of the actual input.

How to Fix

1. Inventory personal-data fields
   • Identify fields that collect names, contact info, addresses, payment, identity, or dates.
2. Map each field to a valid token
   • Use the recognized set of input purposes (53 personal-data purposes). Examples include: name, given-name, additional-name, family-name, honorific-prefix, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, organization, organization-title, street-address, address-line1, address-line2, address-line3, address-level1 (state/province), address-level2 (city), address-level3, country, country-name, postal-code, cc-name, cc-number, cc-exp, cc-exp-month, cc-exp-year, cc-csc, bday, bday-day, bday-month, bday-year, sex, url, impp, language, photo.
   • Choose the most specific purpose. For split fields, use the split tokens (for example, given-name and family-name).
3. Apply the attribute correctly
   • Use lowercase tokens; do not add typos or extra punctuation.
   • Put the field purpose token last. Optional context tokens may precede it:
   • section-<id> to group related fields (for example, section-shipping).
   • shipping or billing to indicate address/payment context.
   • home, work, mobile, fax, pager for contact channels (for example, tel-mobile).
   • Match input types to the data: type="email", type="tel", type="url", type="password".
   • Keep visible labels that describe the field; do not rely on placeholders.
   • Only use autocomplete="off" where security or privacy truly requires it; otherwise avoid it.
   • For custom widgets, ensure the real input element that receives text has the autocomplete attribute.
4. Validate implementation
   • Confirm there is exactly one field purpose token per input and it matches the actual data.
   • Ensure no conflicting or redundant tokens are present.

How to Test

Keyboard

• Tab through the form in order; focus should move logically.
• Trigger autofill using keyboard (Arrow keys/Enter) and verify correct data lands in each field.

Screen reader

• With NVDA/JAWS/VoiceOver, focus each field; confirm the visible label is announced.
• Invoke browser/OS autofill and ensure fields populate correctly without confusing announcements.

Mobile/touch

• On iOS Safari and Android Chrome, tap each field; verify relevant contact/card/address suggestions appear.
• Ensure autofill fills the correct fields (for example, city into address-level2, not address-line1).

Code/automation

• Inspect the DOM to confirm the attribute is on the input, spelled exactly, and tokens are valid.
• Run automated checks (for example, axe or Lighthouse rules for autocomplete) and address any invalid or missing tokens.

Good Example

<form autocomplete="on">
  <fieldset>
    <legend>Shipping address</legend>

    <label for="first">First name</label>
    <input id="first" name="first" type="text" autocomplete="section-ship given-name">

    <label for="last">Last name</label>
    <input id="last" name="last" type="text" autocomplete="section-ship family-name">

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

    <label for="tel">Mobile phone</label>
    <input id="tel" name="tel" type="tel" inputmode="tel" autocomplete="tel-mobile">

    <label for="addr1">Address line 1</label>
    <input id="addr1" name="addr1" type="text" autocomplete="section-ship shipping address-line1">

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

    <label for="region">StateProvince</label>
    <select id="region" name="region" autocomplete="address-level1">
      <option value="">Select…</option>
    </select>

    <label for="zip">Postal code</label>
    <input id="zip" name="zip" type="text" inputmode="numeric" autocomplete="postal-code">
  </fieldset>

  <fieldset>
    <legend>Payment</legend>

    <label for="ccname">Name on card</label>
    <input id="ccname" name="ccname" type="text" autocomplete="cc-name">

    <label for="ccnum">Card number</label>
    <input id="ccnum" name="ccnum" type="text" inputmode="numeric" autocomplete="cc-number">

    <label for="expmo">Exp. month</label>
    <input id="expmo" name="expmo" type="text" inputmode="numeric" autocomplete="cc-exp-month">

    <label for="expyr">Exp. year</label>
    <input id="expyr" name="expyr" type="text" inputmode="numeric" autocomplete="cc-exp-year">

    <label for="csc">Security code</label>
    <input id="csc" name="csc" type="text" inputmode="numeric" autocomplete="cc-csc">
  </fieldset>
</form>

Bad Example

<form autocomplete="off">
  <!-- Tokens are misspelled or missing; placeholders instead of labels -->

  <input id="fn" name="fn" type="text" placeholder="First Name" autocomplete="First-Name">

  <input id="ln" name="ln" type="text" placeholder="Surname" autocomplete="name-last">

  <input id="mail" name="mail" type="text" placeholder="Email" autocomplete="e-mail">

  <!-- Autocomplete incorrectly set on container, not input -->
  <div autocomplete="address-line1">
    <input id="line1" name="line1" type="text" placeholder="Address 1">
  </div>

  <!-- Wrong payment tokens -->
  <input id="card" name="card" type="text" placeholder="Card" autocomplete="credit-card-number">
  <input id="cvv" name="cvv" type="text" placeholder="CVV" autocomplete="cc-cvv">
</form>

Quick Checklist

• Every personal-data field has autocomplete with a valid token.
• Tokens are lowercase, correctly spelled, and match the field purpose.
• Optional context tokens (section-, shipping/billing, home/work/mobile) are used only when needed and precede the purpose.
• The purpose token is last in the value and there is no extra punctuation.
• Input type matches the data (email, tel, url, password, etc.).
• Visible labels are present; placeholders are not used as labels.
• autocomplete="off" is avoided unless strictly required for security.
• Autofill on desktop and mobile fills the correct fields without errors.