Pattern Library (ver. 1.9)

Form autofill

Form autofill helps users fill forms in by prefilling the user’s address based on earlier user input from their browser.

Note: Autocomplete settings need to be turned on in your browser settings for the form autofill to work.

Demo

All fields are required.

Example optional helper text:
Format: XXX-XXX-XXXX

Format: A1A1A1

How to use

1. Create your form as instructed on our main Forms pages

2. Add the autocomplete attribute autocomplete="{{ autofill token }}" to any form input field you wish to have autofill activated for, entering the autofill token for the corrosponding input fields.

Visit HTML 5.2: 4.10. Forms for detailed instructions and the full list of autofill detailed tokens.

Common autofill tokens

The following tokens are some of the most common used:

Input field Autofill token
Username autocomplete="username"
Password autocomplete="current-password"
Email autocomplete="email"
First Name autocomplete="given-name"
Last Name autocomplete="family-name"
Full Name autocomplete="full-name"
Address autocomplete="street-address"
City autocomplete="address-level2"
Postal Code autocomplete="postal-code"
Phone autocomplete="tel"

View full list of Autofill tokens here.