How does Chrome detect Credit Card fields?

Question

In some forms, Chrome autofill prompts with Credit card autofill.

EDIT:Adding screenshot. This is not the same as browser autocomplete. You need not have entered the

Answer 1

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 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 for all your fields
• Add a autocomplete attribute to your tags and fill it in using this guide.
• Name your name and autocomplete attributes correctly for all tags

• Example:

  Name
  
  
  Email
  
  
  
  Confirm Email
  
  
  Phone
  
  

How to name your tags

In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your tags. This will automatically allow for autocomplete on forms. Make sure also to have a ! 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:
• Email
  • Use any of these for name: email
  • Use any of these for autocomplete: email
  • Example:
• 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
• Phone
  • Use any of these for name: phone mobile country-code area-code exchange suffix ext
  • Use any of these for autocomplete: tel
• 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
• Usernames
  • Use any of these for name: username
  • Use any of these for autocomplete: username
• 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)

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.