Does Your Browser Know What You're Asking For? Identify Input Purpose

You're checking out on an e-commerce site for the tenth time this month. You start typing your shipping address... and your browser suggests the wrong address. You're trying to enter your work email, and it keeps suggesting your personal email. You give up and type everything manually, again.

Or maybe you're someone with a cognitive disability who struggles to remember your address. Your browser could help you fill in forms automatically - but only if the website tells the browser what kind of information each field expects.

That's what the autocomplete attribute does, and it's one of the most underutilized accessibility features on the web.

The Standard

WCAG 1.3.5 Identify Input Purpose - 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 Input Purposes for User Interface Components section, and the content is implemented using technologies with support for identifying the expected meaning for form input data.

In simpler terms: if your form asks for common types of user information (name, email, address, phone, etc.), you need to tell browsers what each field is for using the autocomplete attribute.

Who Benefits from Autocomplete Attributes?

Everyone

Browser autofill saves time for all users. Instead of typing your full address for the hundredth time, you select it from a dropdown. Modern browsers are smart about this, but they work much better when you give them hints.

People with Cognitive Disabilities

This is the primary accessibility benefit. People with memory impairments, dyslexia, or other cognitive disabilities may struggle to remember or correctly enter information like addresses, phone numbers, or birth dates. Autocomplete reduces this burden significantly.

People with Motor Disabilities

Typing is physically difficult for some users. Anything that reduces the amount of typing required makes forms more accessible.

Password Manager Users

Password managers like 1Password, LastPass, Bitwarden, and browser-built-in managers rely on autocomplete attributes to correctly identify and fill login fields, credit card information, and personal data.

Assistive Technology

Future assistive technologies may use autocomplete values to customize form interfaces - for example, showing familiar icons next to fields or substituting text labels with symbols that users recognize more easily.

The 53 Autocomplete Values

WCAG defines 53 specific autocomplete values for common types of user information. Here are the most commonly used ones:

Names

name - Full name
given-name - First name
family-name - Last name
additional-name - Middle name or initial
nickname - Nickname or username

Contact Information

email - Email address
tel - Full telephone number
tel-country-code - Country code for phone
tel-national - Phone number without country code
tel-extension - Phone extension

Address Fields

street-address - Full street address
address-line1 - First line of street address
address-line2 - Second line of street address
address-line3 - Third line of street address
address-level1 - State or province
address-level2 - City
postal-code - ZIP or postal code
country - Country code
country-name - Country name

Payment Information

cc-name - Name on credit card
cc-given-name - First name on card
cc-family-name - Last name on card
cc-number - Credit card number
cc-exp - Expiration date
cc-exp-month - Expiration month
cc-exp-year - Expiration year
cc-csc - Security code (CVV)
cc-type - Type of card

Other Common Fields

bday - Birthday
bday-day, bday-month, bday-year - Birthday components
sex - Gender identity
url - Website URL
organization - Company or organization name
organization-title - Job title

Authentication Fields

username - Username for login
new-password - New password (when creating account or changing password)
current-password - Existing password for login
one-time-code - One-time verification code

Modifiers for Context

You can combine values with modifiers to be more specific:

shipping or billing - e.g., shipping street-address
home, work, mobile, fax, pager - for contact info, e.g., work tel

How to Use Autocomplete Attributes

Add the autocomplete attribute to your form inputs with the appropriate value:

<label for="email">Email Address</label> <input type="email" id="email" name="email" autocomplete="email"> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone" autocomplete="tel"> <label for="cc-number">Credit Card Number</label> <input type="text" id="cc-number" name="cc-number" autocomplete="cc-number">

For address fields in a shipping form:

<label for="shipping-address">Street Address</label> <input type="text" id="shipping-address" autocomplete="shipping street-address"> <label for="shipping-city">City</label> <input type="text" id="shipping-city" autocomplete="shipping address-level2">

When NOT to Use Autocomplete

The standard only applies to fields collecting information about the user. Don't add autocomplete attributes when:

Asking about someone else - A form asking for your child's name or your recipient's address shouldn't use autocomplete
Search fields - Search boxes shouldn't use these specific values (though autocomplete="off" or browser-specific search autocomplete can still be useful)
Custom/unique data - Fields asking for account numbers, order numbers, or other unique identifiers don't fit the standard values

Autocomplete in Drupal

Drupal's Form API has support for autocomplete attributes, though implementation varies:

Core Forms

Drupal core now includes autocomplete attributes on login and password reset forms. As of Drupal 11, the username field has autocomplete="username" and password fields have autocomplete="current-password" or autocomplete="new-password" as appropriate.

Webform Module

The Webform module supports the full list of autocomplete values. When creating a webform element, you can select from dropdown options for all 53 standard values plus common combinations like "work tel" or "shipping address-line1".

To add autocomplete to a webform field:

Edit your webform
Add or edit a text, email, or tel element
Look for the "Autocomplete" setting
Select the appropriate value from the dropdown

Custom Forms

For custom forms built with Form API, add the autocomplete attribute like any other attribute:

$form['email'] = [ '#type' => 'email', '#title' => $this->t('Email Address'), '#attributes' => [ 'autocomplete' => 'email', ], ];

Commerce Module

Drupal Commerce should ideally include autocomplete attributes on checkout forms by default. If your Commerce site doesn't have these, you may need to customize the checkout form or use a hook to add them.

Autocomplete in WordPress

WordPress core and most form plugins have limited built-in support for autocomplete attributes. You'll typically need to add them manually or use plugins that support them.

Form Plugins

Gravity Forms - Supports autocomplete attributes. You can add them in the field's Advanced settings under "Custom CSS Class" or use the gform_field_content filter
WPForms - Limited native support, but you can add custom HTML attributes through field settings
Contact Form 7 - Add attributes directly in shortcodes: [email email autocomplete:email]
Formidable Forms - Can add HTML attributes in field settings

WooCommerce

WooCommerce checkout forms should include autocomplete attributes by default for address and payment fields. If they're missing, you can add them using the woocommerce_form_field filter.

Adding Manually

For custom WordPress forms or plugins without native support, you can add autocomplete attributes through JavaScript or by modifying form field output in your theme:

// Add via JavaScript document.getElementById('email').setAttribute('autocomplete', 'email');

Testing Autocomplete

Check the HTML - View source or use browser dev tools to verify autocomplete attributes are present and correctly spelled
Test with browser autofill - Fill out your form once manually, then reload and try the browser's autofill
Test with password managers - Try using a password manager to fill login and payment forms
Validate with automated tools - WAVE, axe DevTools, and other accessibility checkers flag missing autocomplete attributes
Check all your forms - Login, registration, checkout, contact forms, profile updates

Common Mistakes

Wrong Values

Using autocomplete="birthday" instead of autocomplete="bday", or making up your own values. Only use the 53 standard values.

Missing Attributes Entirely

The most common problem: forms simply don't have autocomplete attributes at all.

Using On/Off Instead of Specific Values

Setting autocomplete="on" or autocomplete="off" doesn't satisfy the standard. You need specific semantic values for user information fields.

Autocomplete on Non-User Fields

Remember: only use these values for information about the person filling out the form, not information about other people or entities.

The Bottom Line

Autocomplete attributes are a small implementation detail with big benefits. They help browsers autofill forms accurately, assist password managers, and crucially - they help people with cognitive and motor disabilities complete forms more easily.

The work is minimal: add one attribute to each relevant form field. The benefit is significant: faster form completion for everyone, and genuine accessibility improvements for people who need them most.

Start with your most important forms: login, registration, checkout. Add the appropriate autocomplete attributes to every field that asks for user information. Test with your browser's autofill. Then expand to all your forms.

This is one of those accessibility wins that benefits literally everyone who uses your site. Don't skip it.