html/no-number-for-codes

Why

type="number" is for quantities. On a postal code or card number it removes leading zeros, accepts e and -, can change the value when the person scrolls over the focused field, and shows spinner buttons that make no sense. The HTML standard itself says the number state is not for such values.

Fix

Use type="text" with inputmode="numeric" for the digit keyboard, the right autocomplete token (postal-code, cc-number, one-time-code) and, when the format is fixed, pattern with a visible hint. Keep type="number" for amounts, ages and counts.

Examples

<!-- bad -->
<input id="zip" name="zip" type="number">
<!-- good -->
<input id="zip" name="zip" type="text" inputmode="numeric" autocomplete="postal-code">

Sources

• HTML Standard, Number state (type=number)
• MDN, inputmode

Read it in the terminal

npx github:dawidolko/frontend-skills explain html/no-number-for-codes