Form autocomplete
Learn autocomplete tokens like email, tel, address-line1.
Form autofill
You have likely seen a browser offer to fill in your email or address when you complete a checkout form. This behaviour is called autofill. The browser places previously saved information into matching fields.
To make it work you use the autocomplete attribute. Its value is a token: <input type="email" autocomplete="email">. The token tells the browser what kind of data the field expects.
With the right token, a user can fill the whole form with one click. Both speed and accuracy improve.
Common autocomplete tokens
Common tokens include:
email: email addresstel: phone numberaddress-line1: address linepostal-code: postal codegiven-name: first namefamily-name: family namecountry-name: country
Picking the right token lets the browser offer the matching saved value. Prefer a specific token over the loose on; the browser will not mix fields up and the user only has to confirm.
Off and section tokens
Sometimes you want to switch autofill off: autocomplete="off". This fits a one-time coupon field; the browser will not suggest old coupons.
To split the form into parts you can use a section token: autocomplete="section-shipping street-address". The section-shipping prefix says this field belongs to the 'shipping' part; the browser keeps same-type fields in different sections apart.
You can toggle tokens with on and off, but a specific token is always clearer.
Exercise Write a shipping form with autocomplete
Add a <form> inside body. Put three labelled inputs inside: an email field <input type="email" autocomplete="email">, a phone field <input type="tel" autocomplete="tel">, an address field <input type="text" autocomplete="address-line1">. Each input must have an id that matches its <label for="...">.
Show example solution
<body>
<form>
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="tel">Phone</label>
<input type="tel" id="tel" name="tel" autocomplete="tel">
<label for="addr">Address</label>
<input type="text" id="addr" name="addr" autocomplete="address-line1">
</form>
</body>Test yourself
-
Which attribute turns on the browser's autofill suggestion?
- autocomplete
- placeholder
- required
- pattern
Show answer
autocomplete — Correct. The autocomplete attribute tells the browser what data the field wants and turns on autofill.
-
Add autocomplete to the email field
<input type="email" name="email" autocomplete="____">Show answer
<input type="email" name="email" autocomplete="email"> -
Match each token to its field type
- tel
- Phone
- address-line1
- Address line
- postal-code
- Postal code