This question is pretty old but I have an updated answer for 2019!
You can now tell your browser which fields are for credit card info just by naming the <input>
correctly.
The following answer is from my original answer from here: https://stackoverflow.com/a/41965106/1696153
Here’s a link to the official current WHATWG HTML Standard for enabling autocomplete.
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="[email protected]" required autocomplete="email"> <!-- note that "emailC" will not be autocompleted --> <label for="frmEmailC">Confirm Email</label> <input type="email" name="emailC" id="frmEmailC" placeholder="[email protected]" 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.