Provide autocomplete on form inputs

Applicable Role(s): Developer

Overview

Autofill on certain inputs makes it easier for users to understand what data is needed to fill out the form correctly, and the purpose of some form fields. Autocomplete is especially helpful for users with motor, memory, or cognitive disabilities, where the purpose of the field may need to be presented in another way.

Best Practices

Autofill is provided on user-specific inputs.

Inputs that need autofill apply to the following areas of user info:

  • Contact info (phone, email, addresses)
  • Login info
  • Job info (title, organization)
  • Shipping/billing addresses
  • Credit card info
  • Personal info (language, birthday, sex/gender)
  • URLs (website, photo, instant message)

Auto-fill doesn't have to apply if:

  • the fields aren't related to the topics previously listed,
  • the fields aren't about the user themselves (like filling out an emergency contact), or
  • the input asked for is non-text.

The autocomplete value should correspond with the input purpose.

The input purpose is provided through a set of input purpose terms. Example: if the field asks for a last name specifically, make sure the "family-name" attribute is used, rather than "given-name" or just "name."

Don't add your own autocomplete value

Autocomplete attributes can either be set to "on"/"off", or use one of the provided input purposes. Providing a custom value may cause unexpected behavior or won't provide autofill features correctly.

Pattern Examples

A common use for autocomplete is for filling out common form patterns, like event registrations or credit card info. In this section's example, if you tab to or click on an input and arrow down, the browser should fill in all inputs by tapping into your data in the browser.

Note: autocomplete works by grabbing either past form values entered into a field, or by grabbing user info from browser settings. Therefore, the following rendered form may or may not work depending on your browser, your site history or configuration.

Code


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

<label for="firstname">First Name</label>
<input type="text" autocomplete="given-name" 
 id="firstname" name="firstname">

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

Rendered Inputs

Need Accessibility Help?

Contact Carly Gerard

Contact David Engebretson