/

Form autofill attributes

html
On this page
  • Name
  • Email
  • Address
  • Telephones, email and instant messaging
  • Credit cards
  • Sections
  • All the tokens
  • Demo
  • Useful links

Spec: html.spec.whatwg.org/mul...tml

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

Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.