Auto-Complete In HTML Forms
Tags: autocomplete, forms
Published: 2019-10-30 16:54:42

---
title: Auto-Complete In HTML Forms
published: true
tags: autocomplete, forms
canonical_url: https://stephencharlesweiss.com//2019-09-30/auto-complete-forms/
---

Starting around 2015, browsers started treating the attribute `autocomplete` on `<input>` fields differently. Instead of honoring what had become a tradition of disabling autocomplete by setting it to `off`, browsers simply ignored that.

Based on the Chromium team’s response to a bug report, the spirit of the change seems to be two-fold:<sup>1</sup>

1. Setting `autocomplete=off` had become a de facto standard and done without much thought
2. The Chromium team found that folks, particularly on mobile, used autocomplete heavily to fill out forms that would otherwise be annoying or too tedious to complete. 

The result is actually pretty clever. While you can’t simply turn off autocomplete anymore, you _can_ tell the input value what you want it to autocomplete _with_.

From the WHATWG spec<sup>2</sup>, an example of how this is used:

```html
<fieldset>
 <legend>Ship the blue gift to…</legend>
 <p> <label> Address: <textarea name=ba autocomplete=“section-blue shipping street-address”></textarea> </label>
 <p> <label> City: <input name=bc autocomplete=“section-blue shipping address-level2”> </label>
 <p> <label> Postal Code: <input name=bp autocomplete=“section-blue shipping postal-code”> </label>
</fieldset>
<fieldset>
 <legend>Ship the red gift to…</legend>
 <p> <label> Address: <textarea name=ra autocomplete=“section-red shipping street-address”></textarea> </label>
 <p> <label> City: <input name=rc autocomplete=“section-red shipping address-level2”> </label>
 <p> <label> Postal Code: <input name=rp autocomplete=“section-red shipping postal-code”> </label>
</fieldset>
```

The spec seeks to provide out a standard set of form values that might be autofilled. In the example above, we have two separate addresses (identified by the `section-` token).

My understanding is that if the user gets to this form and has saved values for a `street-address`, `address-level2` (a city in the US), or a `postal-code`, the browser autofill them.

Interestingly, because these are space separated, ordered tokens, you could also provide fall-backs. For example:

```html
 <p> <label> City: <input name=bc autocomplete=“section-blue shipping address-level2 city town village locality”> </label>
```

The biggest thing to keep in mind with this new way to use autocomplete, however, is that if the value is _not_ found, the browser will not try to autofill. Therefore, if by alerting the browser to how we’d like a field to be autocompleted, we can simultaneously ensure that it won’t be inappropriately autofilled.

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Footnotes

- <sup>1</sup> [Issue 468153 | Chromium](https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164)
- <sup>2</sup> [Autofill - HTML Standard | WHATWG](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)