Form autofill attributes

December 29, 2020

On this page

Name
Email
Address
- Shipping and billing
Telephones, email and instant messaging
Credit cards
Sections
All the tokens
Demo
Useful links

Name

html

<label for="frmNameA">Name</label>
<input
  name="name"
  id="frmNameA"
  placeholder="Full name"
  required
  autocomplete="name"
/>

Email

html

<label for="frmEmailA">Email</label>
<input
  type="email"
  name="email"
  id="frmEmailA"
  placeholder="name@example.com"
  required
  autocomplete="email"
/>
<label for="frmEmailC">Confirm Email</label>
<input
  type="email"
  name="emailC"
  id="frmEmailC"
  placeholder="name@example.com"
  required
  autocomplete="email"
/>

Address

html

<label for="frmAddressS">Address</label>
<input
  name="ship-address"
  required
  id="frmAddressS"
  placeholder="123 Any Street"
  autocomplete="shipping street-address"
/>
<label for="frmCityS">City</label>
<input
  name="ship-city"
  required
  id="frmCityS"
  placeholder="New York"
  autocomplete="shipping locality"
/>
<label for="frmStateS">State</label>
<input
  name="ship-state"
  required
  id="frmStateS"
  placeholder="NY"
  autocomplete="shipping region"
/>
<label for="frmZipS">Zip</label>
<input
  name="ship-zip"
  required
  id="frmZipS"
  placeholder="10011"
  autocomplete="shipping postal-code"
/>
<label for="frmCountryS">Country</label>
<input
  name="ship-country"
  required
  id="frmCountryS"
  placeholder="USA"
  autocomplete="shipping country"
/>

Shipping and billing

html

<textarea
  name="shipping-address"
  autocomplete="shipping street-address"
></textarea>
<input
  type="text"
  name="shipping-city"
  autocomplete="shipping address-level2"
/>
<input
  type="text"
  name="shipping-state"
  autocomplete="shipping address-level1"
/>
<input
  type="text"
  name="shipping-country"
  autocomplete="shipping country-name"
/>
<input
  type="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>
<input
  name="ccname"
  id="frmNameCC"
  required
  placeholder="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>
<input
  name="cc-exp"
  id="frmCCExp"
  required
  placeholder="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>
<input
  type="text"
  name="foo"
  id="foo"
  autocomplete="section-red shipping mobile tel"
/>

Demo

Useful links

Edit this page