Autocomplete Attribute

Use the autocomplete attribute to help browsers and password managers fill forms correctly.

Overview

The autocomplete attribute on <input>, <textarea>, <select>, and <form> controls whether the browser should offer to automatically complete the field value. More importantly, when given specific token values, it tells the browser exactly what type of data belongs in each field enabling autofill for name, address, email, credit card, and more. This is one of the most impactful accessibility and UX improvements you can add to forms with a single attribute. Users on mobile especially benefit they don't have to retype their name and address on every checkout form. Key values: off, on, name, email, username, new-password, current-password, tel, bday, street-address, country, postal-code, cc-number, cc-exp, cc-csc.

Key Points

•autocomplete="off" disables browser autofill for a specific field
•Specific token values (name, email, tel) tell browsers exactly what to fill
•new-password prevents password managers from filling a "create password" field with the current password
•current-password signals a login form's password field
•Shipping/billing address tokens: street-address, address-line1, city, postal-code, country
•Payment tokens: cc-number, cc-name, cc-exp-month, cc-exp-year, cc-csc

Examples

<form action="/login" method="POST">
  <label for="username">Username or Email</label>
  <input
    type="email"
    id="username"
    name="username"
    autocomplete="username"
  >

  <label for="password">Password</label>
  <input
    type="password"
    id="password"
    name="password"
    autocomplete="current-password"
  >

  <button type="submit">Sign In</button>
</form>

autocomplete="username" and "current-password" enable password manager integration.

Registration form new password field

<form action="/register" method="POST">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <label for="new-pass">Create Password</label>
  <input
    type="password"
    id="new-pass"
    name="password"
    autocomplete="new-password"
  >

  <label for="confirm-pass">Confirm Password</label>
  <input
    type="password"
    id="confirm-pass"
    name="confirm_password"
    autocomplete="new-password"
  >
</form>

new-password tells password managers to suggest a strong new password.

Shipping address form with address autocomplete

<fieldset>
  <legend>Shipping Address</legend>

  <input type="text" name="fname"    autocomplete="shipping given-name"    placeholder="First name">
  <input type="text" name="lname"    autocomplete="shipping family-name"   placeholder="Last name">
  <input type="text" name="address1" autocomplete="shipping address-line1" placeholder="Street address">
  <input type="text" name="city"     autocomplete="shipping address-level2" placeholder="City">
  <input type="text" name="zip"      autocomplete="shipping postal-code"   placeholder="ZIP / Postal code">
  <select name="country"             autocomplete="shipping country">
    <option value="">Country</option>
    <option value="US">United States</option>
    <option value="GB">United Kingdom</option>
  </select>
</fieldset>

Common Mistakes

Setting autocomplete="off" everywhere this breaks autofill and password managers, hurting UX
Using autocomplete="off" to hide sensitive fields use server-side logic instead
Omitting autocomplete on checkout/address forms users must retype data manually on every purchase

Note

The WCAG 2.1 Success Criterion 1.3.5 (Identify Input Purpose) requires appropriate autocomplete tokens on personal data fields. Getting this right both improves UX and meets accessibility compliance.

Autocomplete Attribute

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does autocomplete="new-password" tell the browser?