Google has found that "users complete forms up to 30% faster" when using autofill.

So let's learn how autofill works, how to build forms that support cross browser autofill, and take advantage of new features like scanning credit cards.

It's understandable why web developers haven’t paid much attention to autofill. When you’re filling out forms with test data on a regular basis, autofill tends to get in the way.

What Is Autofill?

When a form is submitted, Microsoft Edge and Firefox will store the value submitted along with the value of the name attribute. If the browser sees a field in the future with a matching name attribute, it will provide autofill options. Firefox also appears to look at the id in addition to the name attribute.

Because there are security and privacy concerns with this approach, the autocomplete off value has long been supported to prevent the browser from storing and auto-filling sensitive information.

How To Use

See the Pen Autofill - TopNguyen.Net by Top Nguyen (@topnguyen) on CodePen.

1. Add autocomplete attributes

Example for ccname attribute

<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">

This list below is common attributes

2. Use common values for input name attributes

To take advantage of autofill for Firefox and Edge users, you have to hope that the values you pick for the name attribute match what developers on other sites have used.

One way to do this would be to survey popular sites and see what they use and then use the same values.

3. Add name and/or label values that match the list Safari is looking for

Using the list of attributes from ios simulator that Safari appears to be looking for, you can modify the values for the name attribute or the label to match what Safari expects.

4. Make autofill part of your test plans

It is critical we test our products to ensure that they work well with autofill.

* Advance setup

Sections

The final feature of the new autocomplete attribute tokens is the ability to declare an arbitrary section to group fields.

A section is defined using a token that starts with section-. What comes after the dash is up to you. The specification provides this example of sections:

<fieldset>
<legend>Ship the blue gift to...</legend>
<label> Address:
  <input name="bc" autocomplete="section-blue shipping street-address">
</label>
<label> City:
  <input name="bc" autocomplete="section-blue shipping address-level2">
</label>
<label> Postal Code:
  <input name="bp" autocomplete="section-blue shipping postal-code">
</label>
</fieldset>
 
<fieldset>
<legend>Ship the red gift to...</legend>
<label> Address:
<input name="ra" autocomplete="section-red shipping street-address">
</label>
<label> City:
<input name="rc" autocomplete="section-red shipping address-level2">
</label>
<label> Postal Code:
<input name="rp" autocomplete="section-red shipping postal-code"> </label>
</fieldset>

All the tokens

Put all together, we've now got a much more complex set of tokens for the autocomplete attribute. And the order of the tokens matters.

First, you’re either using on and off values OR you’re using autofill field names. You can't use them at the same time.

If you’re using the autofill tokens, the order is:

Put all together, we've now got a much more complex set of tokens for the autocomplete attribute. And the order of the tokens matters.

First, you're either using on and off values OR you're using autofill field names. You can’t use them at the same time.

If you're using the autofill tokens, the order is:

[section-](optional) [shipping|billing](optional) [home|work|mobile|fax|pager](optional) [autofill field name]

And keep in mind that [home|work|mobile|fax|pager] only applies to the telephone, email, and chat autofill field names.

The longest possible set autofill token might look something like this:

<label for="foo">Mobile phone for delivery</label>
<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">

Supporting

Summary

Supporting autofill will make filling out forms less tedious for our users and lead to increased sales for e-commerce sites.

Happy Coding!