Provide autofill on form inputs

Applicable Role(s): Developer

Overview

Forms that automatically fill out fields can make it easier for users to complete complex forms, and understand what data is needed to fill out the form correctly. Autocomplete is especially helpful for users with motor, memory, or cognitive disabilities, where filling out forms can take much longer to fill out and require more cognitive processing for some people.

Best Practices

Autofill is provided on user-specific inputs.

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

  • Contact info
  • 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 to fields not related to these areas, if they aren't about the user themselves, or if the input 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