Forms — Labels, Input Types and Autofill

<label for="email">Email address</label>
<input id="email" name="email" type="email">

// Or wrap, which needs no id
<label>
  Email address
  <input name="email" type="email">
</label>

// A real label also expands the click target — tapping the text
// focuses the field, which matters a lot on a phone.

// Placeholder as label: fails on four counts
<input placeholder="Email address">      // no announced name,
// disappears on typing, low contrast, and looks pre-filled.

// Visually hidden when the design has no room — still announced
<label for="q" class="sr-only">Search problems</label>
<input id="q" type="search" placeholder="Search…">

// Help text and errors, linked so they are announced with the field
<input id="pw" aria-describedby="pw-help pw-error" aria-invalid="true">
<p id="pw-help">At least 8 characters.</p>
<p id="pw-error" role="alert">Include a number.</p>

// Group related controls
<fieldset><legend>Difficulty</legend> …radios… </fieldset>

<input type="email">     // @ key on the keyboard, format validation
<input type="tel">       // numeric keypad, no format assumptions
<input type="url">       // .com key
<input type="search">    // a clear button, "Search" on the return key
<input type="date">      // native date picker
<input type="password">  // masked, offers the password manager
<input type="number">    // spinner — for QUANTITIES only

// number is wrong for phone numbers, OTPs, PINs and card numbers:
// it strips leading zeros, allows e and -, and scrolling changes it.
<input type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code">

// inputmode picks the keyboard without changing validation
inputmode="numeric" | "decimal" | "tel" | "email" | "url" | "search"

// Constraint attributes — free validation and messages
<input type="email" required minlength="8" maxlength="64"
       pattern="[0-9]{6}" step="0.01" min="1" max="10">

// Style the states, but only after the user has interacted
input:user-invalid { border-color: var(--danger) }

<input name="name"     autocomplete="name">
<input name="email"    autocomplete="email">
<input name="phone"    autocomplete="tel">
<input name="address"  autocomplete="street-address">
<input name="city"     autocomplete="address-level2">
<input name="pincode"  autocomplete="postal-code">
<input name="country"  autocomplete="country">

// Sign in vs sign up — this is what makes a password manager offer
// to save, and offer the right entry
<input type="password" autocomplete="current-password">   // sign in
<input type="password" autocomplete="new-password">       // sign up
<input inputmode="numeric" autocomplete="one-time-code">  // OTP autofill

// Payment fields
autocomplete="cc-number" | "cc-name" | "cc-exp" | "cc-csc"

// autocomplete="off" on a whole form is nearly always wrong —
// browsers ignore it for logins anyway, and it only punishes users
// filling a long form.

// Also: never disable paste on a password or OTP field.