Which Attributes Does Chrome Autofill Expect?
This question is pretty old but I have an updated answer for 2017!
There is now full documentation on how to trigger autocomplete.
Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.
The following answer is from my original answer from here: https://stackoverflow.com/a/41965106/1696153
Google wrote a pretty nice guide for developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!
How to Enable AutoComplete on your HTML forms
Here are some key points on how to enable autocomplete:
- Use a
<label>
for all your<input>
fields - Add a
autocomplete
attribute to your<input>
tags and fill it in using this guide. - Name your
name
andautocomplete
attributes correctly for all<input>
tags Example:
<label for="frmNameA">Name</label><input type="text" name="name" id="frmNameA"placeholder="Full name" required autocomplete="name"><label for="frmEmailA">Email</label><input type="email" name="email" id="frmEmailA"placeholder="name@example.com" required autocomplete="email"><!-- note that "emailC" will not be autocompleted --><label for="frmEmailC">Confirm Email</label><input type="email" name="emailC" id="frmEmailC"placeholder="name@example.com" required autocomplete="email"><label for="frmPhoneNumA">Phone</label><input type="tel" name="phone" id="frmPhoneNumA"placeholder="+1-555-555-1212" required autocomplete="tel">
How to name your <input>
tags
In order to trigger autocomplete, make sure you correctly name the name
and autocomplete
attributes in your <input>
tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>
! This information can also be found here.
Here's how to name your inputs:
- Name
- Use any of these for
name
:name fname mname lname
- Use any of these for
autocomplete
:name
(for full name)given-name
(for first name)additional-name
(for middle name)family-name
(for last name)
- Example:
<input type="text" name="fname" autocomplete="given-name">
- Use any of these for
- Email
- Use any of these for
name
:email
- Use any of these for
autocomplete
:email
- Example:
<input type="text" name="email" autocomplete="email">
- Use any of these for
- Address
- Use any of these for
name
:address city region province state zip zip2 postal country
- Use any of these for
autocomplete
:- For one address input:
street-address
- For two address inputs:
address-line1
address-line2
address-level1
(state or province)address-level2
(city)postal-code
(zip code)country
- For one address input:
- Use any of these for
- Phone
- Use any of these for
name
:phone mobile country-code area-code exchange suffix ext
- Use any of these for
autocomplete
:tel
- Use any of these for
- Credit Card
- Use any of these for
name
:ccname cardnumber cvc ccmonth ccyear exp-date card-type
- Use any of these for
autocomplete
:cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
- Use any of these for
- Usernames
- Use any of these for
name
:username
- Use any of these for
autocomplete
:username
- Use any of these for
- Passwords
- Use any of these for
name
:password
- Use any of these for
autocomplete
:current-password
(for sign-in forms)new-password
(for sign-up and password-change forms)
- Use any of these for
Resources
- Current WHATWG HTML Standard for autocomplete.
- "Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
- "Help Users Checkout Faster with Autofill" from Google in 2015.
There are a bunch of stuff that could be "expected" (like things in RFC3106 or the hCard format) but in the end it comes down to what you can find in the Chromium source code, I guess.
This specific section which seems to be Chromium's AutoFill implementation is probably of interest for you, which I found by using the Google Code Search feature for Chromium now available via Google Code Project Hosting.
Some of the constants are extern-ed used for regular expressions are defined in autofill_regex_constants.h
and provided in a fairly extensive list (even with I18N support!) in autofill_regex_constants.cc.utf8
.
It looks like Chrome (v51.0) implements the following spec: https://html.spec.whatwg.org/multipage/forms.html#autofill
This means that you can populate the autocomplete
attribute with specific types of values that Chrome should fill in.
Examples:
<input type="text" autocomplete="address-line1" id="a1" name="a1" /><input type="text" autocomplete="address-line2" id="a2" name="a2" /><input type="text" autocomplete="address-level2" id="city" name="city" /><input type="text" autocomplete="address-level1" id="state" name="state" /><input type="text" autocomplete="country-name" id="country" name="country" /><input type="text" autocomplete="tel" id="phone" name="phone" /><input type="text" autocomplete="email" id="email" name="email" />
(Obviously I've left out the labels on the examples)