Form autofill attributes

Note date 21 Jan, 2023
Tags html
👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page

Spec: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

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 

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

Email 

<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 

<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 

<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 

<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 

<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:

<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:

[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:

<label for="foo">Mobile phone for delivery</label>
<input
  type="text"
  name="foo"
  id="foo"
  autocomplete="section-red shipping mobile tel"
/>

Demo

← Back home