How does Chrome detect Credit Card fields?
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.
From this answer https://stackoverflow.com/a/9795126/292060, it looks like Chrome is either matching a regex pattern on the field name, or the form is explicitly using the x-autocompletetype
attribute, like this (This example uses "somename" to avoid mixing issues matching on the name):
<input type="text" name="somename" x-autocompletetype="cc-number" />
Practically, you could do both, picking a name that matches, and the x-autocompletetype:
<input type="text" name="ccnum" x-autocompletetype="cc-number" />
Do you have a view-source of the input box in your screenshot? That would show if it's matching on the name or on the x-autocompletetype attribute.
The answer I linked to has several links for more information; I didn't repeat them here.
Some other comments:
I know Chrome pops a question whether to save the credit card information (I don't), but I don't know if it is popping that question regardless of how it detected it. That is, I'm not sure if Chrome will autocomplete separate fields of credit cards along with other fields, or if it needs to save the whole thing as a credit card.
Your question was how to do it, not whether to. But from the comment in your question, I agree that you might not want to autocomplete the credit card fields. Personally I find it disconcerting when it happens, even knowing it's local in my browser (I especially feel this way about the CVV, and get a surprising amount of resistance when I report it). However, there are posts that find it frustrating when a customer wants to use it, has Chrome set up with credit cards, and a website blocks it.