📝 Chapter 21: Introduction to HTML Forms

The autocomplete Attribute

Autofill systems, WCAG 1.3.5 compliance, standardized token vocabularies, section prefixes, and security mechanics.

LEARNING OBJECTIVES ⌵

Understand how modern browser autofill engines and password managers utilize the autocomplete attribute.
Implement WCAG 2.1 Success Criterion 1.3.5 (Identify Input Purpose) using standard autofill tokens.
Master the WHATWG token vocabulary across identity, security (new-password, one-time-code), addresses, and payments.
Apply sectioning prefixes (shipping, billing) for multi-address checkout pipelines.
Understand why browsers intentionally ignore autocomplete="off" on login/credential fields.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine checking into an international hotel or visiting a medical clinic. The receptionist hands you a clipboard with a 4-page paper form: Full Legal Name, Passport Number, Home Address, Mobile Phone, Emergency Contact, Credit Card.

If you have to handwrite your name and home address 15 times a month on paper, your wrist gets tired, you make typos, and you dread the process.

Now imagine carrying an official Digital Passport Smartcard. When you tap the clipboard, a robotic arm instantly copies your verified identity, home address, and payment token into every corresponding box in 0.1 seconds with 100% typographic accuracy.

+-----------------------------------------------------------------------------------+
| USER SMART VAULT (Keychain / 1Password / Browser Autofill)                        |
|   Name: "Alex Vance" | Email: "[email protected]" | CC: "**** **** **** 4242"         |
+-----------------------------------------------------------------------------------+
                                         │
                 Taps form (Scans autocomplete token clues)
                                         ▼
+-----------------------------------------------------------------------------------+
| WEB FORM INPUTS                                                                   |
|   <input autocomplete="name">       <==== Populated: "Alex Vance"                 |
|   <input autocomplete="email">      <==== Populated: "[email protected]"              |
|   <input autocomplete="cc-number">  <==== Populated: "4532 0123 4567 4242"        |
+-----------------------------------------------------------------------------------+

The autocomplete attribute is that standardized smartcard protocol. It provides machine-readable metadata that tells password managers and browser autofill engines: "This specific input is for the user's family name, this one is for the one-time SMS 2FA code, and this is the billing zip code."

Technical Deep Dive & Specifications

WCAG 2.1 Success Criterion 1.3.5 (Level AA)

Web Content Accessibility Guidelines (WCAG) 2.1 introduced SC 1.3.5: Identify Input Purpose. Websites must use standardized HTML autocomplete tokens on inputs collecting user-specific personal data. This assists users with motor disabilities, cognitive impairments, and screen reader users by allowing assistive technologies to automatically fill forms or render personalized visual icons (e.g., placing a phone icon next to tel inputs).

The Complete WHATWG Autocomplete Token Vocabulary

The autocomplete attribute accepts space-separated tokens structured according to the WHATWG specification:

[section-name] [shipping | billing] [contact-type] <token>

1. Identity & Contact Tokens

Token	Meaning / Purpose
`name`	Full name (single field)
`given-name`	First name / given name
`additional-name`	Middle name / middle initial
`family-name`	Last name / surname
`nickname`	Casual display handle
`email`	Email address
`username`	Account login username
`organization`	Company or employer name
`organization-title`	Job title / professional designation

2. Authentication & Security Tokens

Token	Meaning / Purpose
`current-password`	Existing password for authentication or re-auth
`new-password`	Registration or password change (triggers strong password generation)
`one-time-code`	2FA / OTP SMS code (triggers mobile keyboard SMS autofill on iOS/Android)
`webauthn`	Conditional UI for Passkeys / FIDO2 biometric authentication

3. Postal Address Tokens

Token	Meaning / Purpose
`street-address`	Full multiline street address
`address-line1`	Street address line 1
`address-line2`	Suite, unit, apartment number
`address-level2`	City, town, or municipality
`address-level1`	State, province, or prefecture
`postal-code`	Zip code or postal code
`country`	Two-letter ISO country code (`US`, `GB`)
`country-name`	Full localized country name (`United States`)

4. Payment Tokens

Token	Meaning / Purpose
`cc-name`	Cardholder name as printed on card
`cc-number`	16–19 digit payment card number
`cc-exp`	Expiration date (`MM/YY` or `MM/YYYY`)
`cc-exp-month`	Expiration month (`01`–`12`)
`cc-exp-year`	Expiration year (`2026`)
`cc-csc`	Card security code (CVV/CVC on back of card)
`cc-type`	Payment brand (`visa`, `mastercard`, `amex`)

5. Sectioning Prefixes (`shipping` vs `billing`)

When a checkout form collects both a shipping address and a billing address, prefixing tokens with shipping or billing prevents autofill collisions:

<!-- Shipping Address Group -->
<input autocomplete="shipping address-line1">
<input autocomplete="shipping postal-code">

<!-- Billing Address Group -->
<input autocomplete="billing address-line1">
<input autocomplete="billing postal-code">

The `autocomplete="off"` Reality in Modern Browsers

Historically, banks and websites placed autocomplete="off" on forms to prevent password saving. Modern Spec & Browser Reality: Modern browsers (Chrome, Safari, Firefox, Edge) and password managers (1Password, Bitwarden, Apple Keychain) intentionally ignore autocomplete="off" on login, username, and password fields.

Security research proved that forcing users to memorize complex passwords without password managers leads to weak, reused passwords (Password123!). Browsers prioritize user security by enabling password managers everywhere.

Use autocomplete="off" only for:

Unique captcha inputs
One-time verification tokens not intended for storage
Sensitive search histories in shared kiosk environments

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 33 (autocomplete="given-name"): Tells autofill engines to supply only the user's first name without combining it with the surname.
Line 37 (autocomplete="family-name"): Populates the user's surname.
Line 41 (autocomplete="email"): Binds to the user's registered email address.
Line 48 (autocomplete="shipping street-address"): Uses the shipping section prefix to populate the physical delivery address rather than the payment billing address.
Line 66 (autocomplete="one-time-code" inputmode="numeric"): The gold standard for 2FA. On iOS (Safari) and Android (Chrome), incoming SMS text messages with verification codes appear automatically as a single-tap suggestion directly above the keyboard.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>High-Conversion Autofill Checkout</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 680px; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; }
    fieldset { border: 1px solid #dee2e6; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; background: #fdfdfd; }
    legend { font-weight: 700; color: #2b8a3e; padding: 0 0.5rem; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .field { margin-bottom: 0.85rem; }
    label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
    input { width: 100%; box-sizing: border-box; padding: 0.55rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.95rem; }
    input:focus { outline: 2px solid #2b8a3e; }
    button { background: #2b8a3e; color: white; width: 100%; padding: 0.8rem; font-size: 1.1rem; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; }
    button:hover { background: #237032; }
    .badge { display: inline-block; background: #e7f5ff; color: #1971c2; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; margin-left: 4px; }
  </style>
</head>
<body>
  <h1>Express Checkout Portal</h1>
  <p>Notice how every field carries exact WHATWG <code>autocomplete</code> tokens for 1-click autofill.</p>

<form action="/api/checkout" method="POST">
    
    <fieldset>
      <legend>1. Contact Information</legend>
      <div class="grid-2">
        <div class="field">
          <label for="fname">First Name <span class="badge">given-name</span></label>
          <input type="text" id="fname" name="first_name" autocomplete="given-name" required>
        </div>
        <div class="field">
          <label for="lname">Last Name <span class="badge">family-name</span></label>
          <input type="text" id="lname" name="last_name" autocomplete="family-name" required>
        </div>
      </div>
      <div class="field">
        <label for="email">Email Address <span class="badge">email</span></label>
        <input type="email" id="email" name="email" autocomplete="email" required>
      </div>
    </fieldset>

<fieldset>
      <legend>2. Shipping Address</legend>
      <div class="field">
        <label for="ship-street">Street Address <span class="badge">shipping street-address</span></label>
        <input type="text" id="ship-street" name="ship_street" autocomplete="shipping street-address" required>
      </div>
      <div class="grid-2">
        <div class="field">
          <label for="ship-city">City <span class="badge">shipping address-level2</span></label>
          <input type="text" id="ship-city" name="ship_city" autocomplete="shipping address-level2" required>
        </div>
        <div class="field">
          <label for="ship-zip">Postal Code <span class="badge">shipping postal-code</span></label>
          <input type="text" id="ship-zip" name="ship_zip" autocomplete="shipping postal-code" required>
        </div>
      </div>
    </fieldset>

<fieldset>
      <legend>3. Verification</legend>
      <div class="field">
        <label for="sms-otp">SMS Verification Code <span class="badge">one-time-code</span></label>
        <input type="text" id="sms-otp" name="otp" autocomplete="one-time-code" inputmode="numeric" placeholder="123456" maxlength="6">
      </div>
    </fieldset>

<button type="submit">Complete Instant Checkout</button>
  </form>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

Express Checkout Portal
1. Contact Information
First Name [given-name]        Last Name [family-name]
[                      ]       [                     ]
Email Address [email]
[                                                    ]

2. Shipping Address
Street Address [shipping street-address]
[                                                    ]
City [shipping address-level2]  Postal Code [shipping postal-code]
[                      ]       [                     ]

3. Verification
SMS Verification Code [one-time-code]
[ 123456               ]
[ Complete Instant Checkout ]

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Password Reset & 2FA Suite

Instructions:

Build an account security update form posting to /api/account/security.
Add a field for the user's current password with autocomplete="current-password".
Add a field for the user's new password with autocomplete="new-password" and minlength="12".
Add a field for the SMS 2FA code with autocomplete="one-time-code" and numeric inputmode.
Verify that each input uses matching semantic <label> elements with for associations.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Security Update</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 500px; margin: 2rem auto; padding: 0 1rem; }
    .form-group { margin-bottom: 1.25rem; }
    label { display: block; font-weight: bold; margin-bottom: 0.3rem; }
    input { width: 100%; padding: 0.6rem; box-sizing: border-box; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; }
    small { display: block; color: #666; margin-top: 0.25rem; font-size: 0.8rem; }
    button { background: #d6336c; color: white; border: none; padding: 0.75rem; width: 100%; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 1rem; }
    button:hover { background: #c2255c; }
  </style>
</head>
<body>
  <h1>Update Password & 2FA</h1>

  <form action="/api/account/security" method="POST">
    <div class="form-group">
      <label for="old-pass">Current Password:</label>
      <input type="password" id="old-pass" name="current_password" autocomplete="current-password" required>
    </div>

    <div class="form-group">
      <label for="new-pass">New Password:</label>
      <input type="password" id="new-pass" name="new_password" autocomplete="new-password" minlength="12" required>
      <small>Must be at least 12 characters. Password managers can auto-generate this.</small>
    </div>

    <div class="form-group">
      <label for="twofa">SMS Security Code (2FA):</label>
      <input type="text" id="twofa" name="two_factor_code" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]{6}" required placeholder="6-digit code">
    </div>

    <button type="submit">Update Security Credentials</button>
  </form>
</body>
</html>

Why this works:

autocomplete="current-password" informs password managers to look up and insert the saved password for this domain.
autocomplete="new-password" informs password managers that this is an account modification, prompting them to generate a cryptographically strong new password and save the update upon submission.
autocomplete="one-time-code" enables one-tap SMS verification code pasting on mobile devices.

⚠️ Common Pitfalls

Using Custom Non-Standard Names as Autocomplete: Writing autocomplete="my-custom-phone" has zero effect. Browsers only recognize standardized tokens specified in the WHATWG specification.
Using autocomplete="off" on Password Fields: Thinking autocomplete="off" stops password theft. In reality, it hinders security by discouraging users from using password managers with generated 30-character random passwords.
Confusing name with given-name: Using autocomplete="name" on a field labeled "First Name" will cause the browser to insert the user's complete full name (first + last) into the first name box. Use given-name instead.

💡 Pro Tips

Pair one-time-code with WebOTP API: Combining autocomplete="one-time-code" with the JavaScript WebOTP API (navigator.credentials.get({ otp: { transport: ['sms'] } })) provides seamless programmatic verification without user typing.
Double Checkout Conversion Rates: E-commerce case studies consistently show that implementing full WHATWG autocomplete tokens on checkout fields cuts checkout completion times by 65% and reduces cart abandonment significantly.

📌 Key Takeaways

The autocomplete attribute provides machine-readable hints to browser autofill engines and password managers.
Implementing standard autocomplete tokens satisfies WCAG 2.1 Success Criterion 1.3.5 (Identify Input Purpose).
Use current-password for logins and new-password for registration/reset screens.
Use one-time-code on 2FA/OTP inputs to enable mobile SMS keyboard suggestions.
Prefix tokens with shipping or billing to disambiguate multi-address checkout pipelines.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which `autocomplete` token should be assigned to an input on a user registration screen to prompt password managers to suggest a secure, auto-generated password?

Topic: HTML Fundamentals

? Question 2 / 3

How should a developer differentiate a shipping street address from a billing street address in the same HTML checkout form?

Topic: HTML Fundamentals

? Question 3 / 3

What is the benefit of adding `autocomplete="one-time-code"` to a 2FA verification input on mobile devices?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

WCAG 2.1 Success Criterion 1.3.5 (Level AA)

The Complete WHATWG Autocomplete Token Vocabulary

1. Identity & Contact Tokens

2. Authentication & Security Tokens

3. Postal Address Tokens

4. Payment Tokens

5. Sectioning Prefixes (shipping vs billing)

The autocomplete="off" Reality in Modern Browsers

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Password Reset & 2FA Suite

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which autocomplete token should be assigned to an input on a user registration screen to prompt password managers to suggest a secure, auto-generated password?

How should a developer differentiate a shipping street address from a billing street address in the same HTML checkout form?

What is the benefit of adding autocomplete="one-time-code" to a 2FA verification input on mobile devices?

5. Sectioning Prefixes (`shipping` vs `billing`)

The `autocomplete="off"` Reality in Modern Browsers

Which `autocomplete` token should be assigned to an input on a user registration screen to prompt password managers to suggest a secure, auto-generated password?

What is the benefit of adding `autocomplete="one-time-code"` to a 2FA verification input on mobile devices?