forms - 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 value in the same form before.

How should I write my HTML form so the browser detects these as Credit card fields and triggers this behavior?

An example of it working with a Stripe form would be ideal.

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 <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 and autocomplete 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="name@example.com" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" 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">
• Email
  • Use any of these for name: email
  • Use any of these for autocomplete: email
  • Example: <input type="text" name="email" autocomplete="email">
• 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.