Business, Chrome

Auto Complete Attribute Will Improve Your Profit (And Forms)

Hands full (with grapes)

Autofill in Chrome

Chrome has a great new Autofill feature that as a developer you’ll want to add to your websites for Chrome to use. Other browsers are sure to follow too. The first time you fill out a form, Chrome automatically saves the contact information that you enter, like your name, address, phone number, or email address, as an Autofill entry. You can store multiple addresses as separate entries. Moreover, Chrome can save your credit card information, with your explicit permission. When you enter credit card information on a form, Google Chrome asks you at the top of the page whether you’d like to save the information. Click “Save info” if you’d like the credit card to be saved as an Autofill entry.

Later, when you start filling out a form, the Autofill entries that match what you’re typing will appear in a menu. Select an entry to automatically complete the form with information from the entry. Chrome also saves the text you’ve typed in specific form fields. The next time you fill out the same field, text that you’ve typed in the past appears in a menu. Just select the text you want to use from the menu to insert it directly into the field.

In Chrome, you get a full support for the autocomplete attributes . All we need to do is to make sure we are leveraging them. You will improve your checkout process and make your users 6.73 times happier. Since autocomplete is part of the standard (WHATWG HTML) you know that other browsers will support it as well.

The autocomplete attributes can be accompanied with a section name, such as:

  • shipping given-name
  • billing street-address

This is recommended because it will make your form easier to understand and fill. The browser will auto complete different sections separately, and not as a continuous form.

The most common autocomplete attributes are shown below. I’ve marked the ones that are critical for credit cards, as it will help you improve the ‘goals completed’ in your transactions. Other attributes are also important as they will let the browser ‘know’ better how to use the stored data. Chrome does a good job in predicting what to fill where, but as front-end developers, we can make sure there are no false-positive fields with these attributes.

Common Attribute

Content type name attribute autocomplete attribute
Credit Card ccname

  • cc-name
  • cc-number
  • cc-csc
  • cc-exp-month
  • cc-exp-year
  • cc-exp
  • cc-type
Name name
  • name (full name)
  • given-name (first name)
  • additional-name (middle name)
  • family-name (last name)
Email email email
Address address
  • 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 phone

An example of a payment form

<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">
If we are talking about forms best practices, there are two more rules to remember:
  1. Use labels on form inputs, and ensure they’re visible when the field is in focus. The label element provides direction to the user, telling them what information is needed in a form element. Each label is associated with an input element by placing it inside the label element. Applying labels to form elements also helps to improve the touch target size: the user can touch either the label or the input in order to place focus on the input element.
  2. Use a placeholder to provide guidance about what you expect. The placeholder attribute provides a hint to the user about what’s expected in the input, typically by displaying the value as light text until the user starts typing in the element. Placeholders disappear as soon as the user starts typing in an element, thus they are not a replacement for labels. They should be used as an aid to help guide users on the required format and content.


You can see it in action over at: (It’s serving from https so your google wallet integration should work as well!)

The code:


Happy coding.


3 thoughts on “Auto Complete Attribute Will Improve Your Profit (And Forms)

    • greenido says:

      You just need to use:

      • given-name (first name)
      • additional-name (middle name)
      • family-name (last name)

      For each field. See more in the table above.

  1. evan says:

    -do you need the ‘name’ attribute to match the autocomplete attribute?
    -do you need the name attribute at all for the autocomplete attributes to work?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s