Form autofill attributes
On this page
Spec: html.spec.whatwg.org/mul...tml
All tokens
name
honorific-prefix
given-name
additional-name
family-name
honorific-suffix
nickname
username
new-password
current-password
one-time-code
organization-title
organization
street-address
address-line1
address-line2
address-line3
address-level4
address-level3
address-level2
address-level1
country
country-name
postal-code
cc-name
cc-given-name
cc-additional-name
cc-family-name
cc-number
cc-exp
cc-exp-month
cc-exp-year
cc-csc
cc-type
transaction-currency
transaction-amount
language
bday
bday-day
bday-month
bday-year
sex
url
photo
There's also a very handy table here if you scroll down a bit describing each token in detail.
Examples
Name
html
<label for="frmNameA">Name</label><inputname="name"id="frmNameA"placeholder="Full name"requiredautocomplete="name"/>
html
<label for="frmEmailA">Email</label><inputtype="email"name="email"id="frmEmailA"placeholder="name@example.com"requiredautocomplete="email"/><label for="frmEmailC">Confirm Email</label><inputtype="email"name="emailC"id="frmEmailC"placeholder="name@example.com"requiredautocomplete="email"/>
Address
html
<label for="frmAddressS">Address</label><inputname="ship-address"requiredid="frmAddressS"placeholder="123 Any Street"autocomplete="shipping street-address"/><label for="frmCityS">City</label><inputname="ship-city"requiredid="frmCityS"placeholder="New York"autocomplete="shipping locality"/><label for="frmStateS">State</label><inputname="ship-state"requiredid="frmStateS"placeholder="NY"autocomplete="shipping region"/><label for="frmZipS">Zip</label><inputname="ship-zip"requiredid="frmZipS"placeholder="10011"autocomplete="shipping postal-code"/><label for="frmCountryS">Country</label><inputname="ship-country"requiredid="frmCountryS"placeholder="USA"autocomplete="shipping country"/>
Shipping and billing
html
<textareaname="shipping-address"autocomplete="shipping street-address"></textarea><inputtype="text"name="shipping-city"autocomplete="shipping address-level2"/><inputtype="text"name="shipping-state"autocomplete="shipping address-level1"/><inputtype="text"name="shipping-country"autocomplete="shipping country-name"/><inputtype="text"name="shipping-postal-code"autocomplete="shipping postal-code"/>
Telephones, email and instant messaging
html
<input type="tel" name="home-phone" autocomplete="home tel" /><input type="tel" name="work-phone" autocomplete="work tel" /><input type="email" name="home-email" autocomplete="home email" /><input type="url" name="chat" autocomplete="home impp" />
In addition to the tel
field which would be a single input containing a full telephone number, there are also:
tel-country-code
tel-national
tel-area-code
tel-local
tel-local-prefix
tel-local-suffix
tel-extension
Credit cards
html
<label for="frmNameCC">Name on card</label><inputname="ccname"id="frmNameCC"requiredplaceholder="Full Name"autocomplete="cc-name"/><label for="frmCCNum">Card Number</label><input name="cardnumber" id="frmCCNum" required autocomplete="cc-number" /><label for="frmCCCVC">CVC</label><input name="cvc" id="frmCCCVC" required autocomplete="cc-csc" /><label for="frmCCExp">Expiry</label><inputname="cc-exp"id="frmCCExp"requiredplaceholder="MM-YYYY"autocomplete="cc-exp"/>
Sections
The final feature of the new autocomplete attribute tokens is the ability to declare an arbitrary section to group fields.
A section is defined using a token that starts with section-
. What comes after the dash is up to you. The specification provides this example of sections:
html
<fieldset><legend>Ship the blue gift to...</legend><label>Address:<input name="bc" autocomplete="section-blue shipping street-address" /></label><label>City:<input name="bc" autocomplete="section-blue shipping address-level2" /></label><label>Postal Code:<input name="bp" autocomplete="section-blue shipping postal-code" /></label></fieldset><fieldset><legend>Ship the red gift to...</legend><label>Address:<input name="ra" autocomplete="section-red shipping street-address" /></label><label>City:<input name="rc" autocomplete="section-red shipping address-level2" /></label><label>Postal Code:<input name="rp" autocomplete="section-red shipping postal-code" /></label></fieldset>
All the tokens
If you’re using the autofill tokens, the order is:
html
[section-](optional) [shipping|billing](optional)[home|work|mobile|fax|pager](optional) [autofill field name]
The longest possible set autofill token might look something like this:
html
<label for="foo">Mobile phone for delivery</label><inputtype="text"name="foo"id="foo"autocomplete="section-red shipping mobile tel"/>