Type, name and autocomplete

Give each input a name, a type, inputmode and an autocomplete token.

From web-design-guidelines (Web Interface Guidelines), Forms.

The keyboard follows the type

Tap Email, Phone or Code on either phone.

All type="text"Bad
closed
type + inputmodeGood
closed
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="code" inputmode="numeric"
       autocomplete="one-time-code" pattern="[0-9]*">

Autofill needs a match

Press Autofill and compare what each form receives.

No autocompleteBad
0/5
name + autocompleteGood
0/5
<input name="given-name"  autocomplete="given-name">
<input name="family-name" autocomplete="family-name">
<input name="email" type="email" autocomplete="email">
<input name="phone" type="tel"   autocomplete="tel">
<input name="postal-code" autocomplete="postal-code" inputmode="numeric">

Spellcheck flags valid values

Type an email and a code, or press Type sample.

Spellcheck onBad
0 flagged
spellcheck="false"Good
0 flagged
<input type="text" name="username" autocomplete="username"
       spellcheck="false" autocapitalize="none" autocorrect="off">

// React
<input name="username" autoComplete="username" spellCheck={false} />

Why it matters, pros and cons

Why it matters

Keyboards, autofill and spellcheck only read the input's attributes.

Pros

  • The right keyboard on the first tap.
  • One-tap autofill from saved details.
  • one-time-code offers SMS codes above the keyboard.

Cons

  • type="number" drops leading zeros; use inputmode="numeric".
  • type="email" validates natively; add novalidate for custom errors.
  • Keep spellcheck on for prose like messages and bios.