# Input Purpose and Autocomplete

> Canonical HTML version: https://rocketvalidator.com/glossary/input-purpose-autocomplete
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Input purpose and autocomplete refer to the practice of programmatically identifying the purpose of form fields using the HTML `autocomplete` attribute, enabling browsers and assistive technologies to automatically fill in user data and present fields in ways that are easier to understand and complete.

When users encounter forms on the web, they are often asked to provide personal information such as their name, email address, phone number, or credit card details. The HTML `autocomplete` attribute allows developers to explicitly declare the purpose of each input field using standardized token values. This declaration serves a dual purpose: it enables browsers to offer autofill suggestions based on previously stored data, and it allows assistive technologies to present form fields with additional cues—such as familiar icons or labels—that help users understand what information is expected.

This concept is directly tied to WCAG 2.1 Success Criterion 1.3.5 (Identify Input Purpose), a Level AA requirement. The criterion states that the purpose of each input field collecting information about the user can be programmatically determined when the input field serves a purpose identified in the WCAG list of input purposes (derived from the HTML `autocomplete` attribute values). By meeting this criterion, websites ensure that people with cognitive disabilities, motor impairments, and other conditions can interact with forms more efficiently and with fewer errors.

## Why Input Purpose and Autocomplete matters

Properly identifying input purpose benefits a wide range of users:

- **People with cognitive disabilities** may struggle to remember personal details or understand what a field is asking for. Assistive technologies can use autocomplete metadata to display icons (e.g., a phone icon next to a telephone field) or pre-fill values, reducing cognitive load.
- **People with motor impairments** benefit from autofill because it dramatically reduces the amount of typing required, minimizing physical effort and the chance of input errors.
- **People using screen readers** get additional context about the purpose of a field, improving navigation and comprehension of complex forms.
- **Older adults and users with low digital literacy** find forms less intimidating when browsers can suggest or auto-populate known values.

Without proper `autocomplete` attributes, browsers must guess at the purpose of fields based on heuristics like field names or labels, which is unreliable. Users who depend on autofill may be forced to manually enter data repeatedly, leading to frustration, errors, and potential abandonment of tasks like purchasing, registering, or filling out medical forms.

## How Input Purpose and Autocomplete works

### The autocomplete attribute

The `autocomplete` attribute accepts standardized token values defined in the HTML specification. Each token maps to a specific type of personal data. Common values include:

| Token | Purpose |
|---|---|
| `name` | Full name |
| `given-name` | First name |
| `family-name` | Last name |
| `email` | Email address |
| `tel` | Telephone number |
| `street-address` | Street address |
| `postal-code` | ZIP or postal code |
| `cc-number` | Credit card number |
| `bday` | Birthday |
| `username` | Username |
| `new-password` | New password (for registration or change) |
| `current-password` | Current password (for login) |

These tokens can also be combined with section names and address types. For example, `shipping street-address` distinguishes a shipping address field from a billing one.

### Scope of the requirement

WCAG SC 1.3.5 applies specifically to inputs that collect information **about the user** themselves. It does not apply to fields collecting information about other people or entities (e.g., "recipient's name" in a gift form), nor does it apply to fields where the purpose is not in the defined list of autocomplete tokens.

### Browser and assistive technology behavior

When `autocomplete` is set correctly, browsers can match the token to stored user profile data and offer autofill. Some assistive technologies and browser extensions go further by rendering visual icons next to fields, changing field appearance, or reordering fields to match a user's preferred layout. This is particularly helpful for users who rely on personalization features to navigate the web.

## Code examples

### Bad example: Missing autocomplete attributes

In this form, no `autocomplete` attributes are provided. Browsers and assistive technologies cannot programmatically determine the purpose of each field, forcing users to manually enter all data.

```html
<form method="post" action="/register">
  <div>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname">
  </div>
  <div>
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
  </div>
  <div>
    <label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone">
  </div>
  <button type="submit">Register</button>
</form>
```

### Good example: Proper autocomplete attributes

Each field includes an `autocomplete` attribute with the appropriate token value. Browsers can now autofill these fields, and assistive technologies can present additional cues to help users understand and complete the form.

```html
<form method="post" action="/register">
  <div>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname" autocomplete="given-name">
  </div>
  <div>
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname" autocomplete="family-name">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" autocomplete="email">
  </div>
  <div>
    <label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone" autocomplete="tel">
  </div>
  <button type="submit">Register</button>
</form>
```

### Good example: Distinguishing shipping and billing addresses

When a form collects both shipping and billing addresses, section-prefixed tokens help browsers and assistive technologies differentiate between the two sets of fields.

```html
<fieldset>
  <legend>Shipping Address</legend>
  <div>
    <label for="ship-street">Street</label>
    <input type="text" id="ship-street" name="ship-street" autocomplete="shipping street-address">
  </div>
  <div>
    <label for="ship-zip">ZIP Code</label>
    <input type="text" id="ship-zip" name="ship-zip" autocomplete="shipping postal-code">
  </div>
</fieldset>

<fieldset>
  <legend>Billing Address</legend>
  <div>
    <label for="bill-street">Street</label>
    <input type="text" id="bill-street" name="bill-street" autocomplete="billing street-address">
  </div>
  <div>
    <label for="bill-zip">ZIP Code</label>
    <input type="text" id="bill-zip" name="bill-zip" autocomplete="billing postal-code">
  </div>
</fieldset>
```

### Common mistake: Using autocomplete="off" unnecessarily

Some developers disable autocomplete to prevent browsers from suggesting values. While there are rare valid use cases (such as one-time security codes), broadly applying `autocomplete="off"` to personal data fields harms accessibility and usability. Avoid disabling autocomplete unless there is a strong, justified reason.

```html
<!-- Bad: Disabling autocomplete on a name field -->
<input type="text" id="name" name="name" autocomplete="off">

<!-- Good: Allowing autocomplete with the correct token -->
<input type="text" id="name" name="name" autocomplete="name">
```

By consistently applying the correct `autocomplete` values to your form fields, you make your forms faster, easier, and more accessible for everyone—meeting WCAG requirements while delivering a better user experience across all browsers and devices.