html/input-type

Why

A plain text field gives a phone the letter keyboard for a phone number, no @ key for an email, and no built-in check of the format. The right type costs nothing and makes the field faster and less error-prone to fill.

Fix

Use type="email", type="tel" or type="url" and keep the matching autocomplete token. For digits that are not quantities (codes, card numbers) use type="text" with inputmode="numeric" (see html/no-number-for-codes).

Examples

<!-- bad -->
<input id="email" name="email">
<!-- good -->
<input id="email" name="email" type="email" autocomplete="email">

Sources

• HTML Standard, the input element (states of the type attribute)
• MDN, input types
• web.dev, Learn Forms, help users enter the right data

Read it in the terminal

npx github:dawidolko/frontend-skills explain html/input-type