auto-complete in html forms

2019-10-07

 | 

~2 min read

 | 

386 words

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: 1

  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 2 , an example of how this is used:

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

<fieldset>
    <legend>Ship the red gift to…</legend>
    <p>
        <label>
            Address:
            <textarea
                name="ra"
                autocomplete="“section-red"
                shipping
                street-address”
            ></textarea>
        </label>
    </p>
    <p>
        <label>
            City:
            <input
                name="rc"
                autocomplete="“section-red"
                shipping
                address-level2”
            />
        </label>
    </p>
    <p>
        <label>
            Postal Code:
            <input
                name="rp"
                autocomplete="“section-red"
                shipping
                postal-code”
            />
        </label>
    </p>
</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:

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

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.

Footnotes


Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!