Input HarborISSUE #10 of 46

autocomplete · how the browser remembers

FormaVSCaptain Invalid Input

Forma saysThe autocomplete attribute tells the browser how to autofill a field — speeding forms and improving accuracy.

Browsers can autofill names, addresses, and payment details if you label fields with the right autocomplete token: name, email, street-address, cc-number, one-time-code, and many more.

Good autocomplete tokens make checkout forms far faster and reduce typos. Set autocomplete="off" only when you truly must (and know browsers may ignore it for security fields like passwords).

Power-ups you unlock

autocomplete="email|name|street-address|cc-number|…"
Speeds form fill and cuts typos dramatically
one-time-code lets mobile suggest SMS codes
autocomplete="off" is a hint browsers may ignore

Captain Invalid Input attacks — common mistakes

Leaving generic field names so autofill misfires
Disabling autocomplete on address/payment fields (hurts UX)
Expecting off to reliably stop password managers

Boss battleBuild a tiny checkout: name, email, and street-address inputs each with the matching autocomplete token.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <p><label>name  <input name="name" autocomplete="name"></label></p>
    <p><label>email <input type="email" name="email" autocomplete="email"></label></p>
    <p><label>addr  <input name="addr" autocomplete="street-address"></label></p>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Input Form Attributes · Formaction · Formmethod Fieldset · Legend · Grouping Inputs ›