The ‘autofill’ feature of browsers is a blessing and a curse. The feature enables the browser to reuse the data the user has previously entered in forms. The trouble starts when a form does not fulfill the standard. Then the feature sometimes fills in the wrong information into the fields.

Why does autofill fail?

The standard implemented a feature to group fields. This was created by adding optional ‘8characters at the start of the name’. A field like “first-name” could be interpreted as the group: “first” and autofill-field: ‘name’ (=> last name). To correct this you would need to rename the field to ’given-name’ as this is defined in the standard. However, if you would test ‘first-name’ in the browser you will discover that autocomplete works without problems. That is because even though it is not in the standard certain aliases are detected correctly. Depending on how the browser interprets the form. If you are not using the standard you basically are telling the browser to guess what the field is and let the browser decide what to autofill.

The Standard Keywords

If you want a pleasant user experience for the visitors of your site then you should take the time to make sure that your form confirms to the standard keywords:

“name”
“honorific-prefix”
“given-name”
“additional-name”
“family-name”
“honorific-suffix”
“nickname”
“username”
“new-password”
“current-password”
“organization-title”
“organization”
“street-address”
“address-line1”
“address-line2”
“address-line3”
“address-level4”
“address-level3”
“address-level2”
“address-level1”
“country”
“country-name”
“postal-code”
“transaction-currency”
“transaction-amount”
“language”
“bday”
“bday-day”
“bday-month”
“bday-year”
“sex”
“url”
“photo”

For Credit Card Information:

“cc-name”
“cc-given-name”
“cc-additional-name”
“cc-family-name”
“cc-number”
“cc-exp”
“cc-exp-month”
“cc-exp-year”
“cc-csc”
“cc-type”

To use these keywords with attribute autocomplete. However if the field autocomplete is not set browsers will automatically check the attribute-name. In this example both fields would be detected by autofill as ‘name’:

<form>
	<input name="field1" autocomplete="name" />
	<input name="name" />
</form>

As a personal preference, I would not set the autocomplete-attribute and simply use the keywords in the field name. This immediately eliminates the need to think of a more suitable name. If you are dealing with a backend you cannot modify I would use the field autocomplete.

Groups

Sometimes you need some of these fields multiple times. Let’s say you need a shipping and a billing address. Then you simply add a prefix to the attribute.

<form>
	<input name="billing-street-address" />
	<input name="billing-country" />
	<input name="shipping-street-address" />
	<input name="shipping-country" />
</form>

How to disable autofill?

In the rare case that you do not need this feature at all you probably would want to disable it. To do this you have again two options:

Disable globally

Simply add the attribute autocomplete="off to the form-element. You then can re-enable the autofill on an individual component by using autocomplete=on.

<form autocomplete="off">
	<input placeholder="disabled Autocomplete" />
	<input placeholder="enabled for only this input" autocomplete="on" />
</form>

Disable Individual Input

You can disable the autofill feature for an individual component by adding autocomplete="new-password" (This is because Chrome ignores the ‘off’ value)

<form>
	<input placeholder="disabled only for this component" autocomplete="new-password" />
</form>

Sources: