Why is <input type="number"> a poor choice for phone numbers, postal codes and account IDs, and what markup would you use instead?

## The distinction the question is really testing There are two different things people call "a number": a **quantity** you can add, compare and step through, and a **digit string** that happens to be written with digits. A price, an age, a quantity in a basket are quantities. A phone number, a postcode, an order reference, a card number, a national ID are digit strings. `<input type="number">` implements the first meaning only, and every complaint about it follows from that one fact. ## What the number state actually does **It sanitises the value.** The number state defines a value-sanitisation step: if what the control holds is not a valid floating-point number, the value becomes the empty string. This is the sharp edge. The user pastes `+1 (555) 010-1234`, the browser may keep showing something in the box, and your script reads `value` and gets `""`. There is no error, no exception, nothing to log — the data simply is not there. The same happens with `1 234`, `12-34`, and a trailing comma from a spreadsheet paste. **It renders a spinner and binds keys.** Up and down arrows increment and decrement. Most desktop browsers draw spin buttons. Several browsers change the value when the wheel is scrolled over a focused number field, which is a real source of "I scrolled the page and my quantity changed" bug reports. **It changes the accessible semantics.** A number input maps to the `spinbutton` role rather than `textbox`. Screen reader users are told this is a value they step through, and get spinbutton interaction affordances — appropriate for a quantity, misleading for an account number. **It constrains the grammar.** No `+` at the start followed by formatting characters, no spaces, no parentheses, no hyphens — all of which are ordinary in written phone numbers. And because the underlying value is a number, exponent forms such as `1e5` are legal input, which almost nobody wants in an ID field. ## The leading-zero and precision traps Even where the value survives, the *meaning* may not. `00042` and `42` are the same quantity but different identifiers. Anything that round-trips the value through a numeric type — your own script, a form library, a backend that types the column as an integer — silently loses the padding. And very long digit strings such as a 19-digit card number exceed the exact-integer range of a double-precision float, so any numeric conversion corrupts the last digits. A digit string must stay a string end to end. ## The correct markup ```html <!-- a quantity: number is right --> <label for="qty">Quantity</label> <input id="qty" type="number" name="qty" min="1" value="1"> <!-- a digit string: text plus a keyboard hint --> <label for="zip">Postal code</label> <input id="zip" type="text" name="zip" inputmode="numeric"> <!-- a phone number --> <label for="tel">Phone</label> <input id="tel" type="tel" name="tel"> ``` `type="text"` keeps the value exactly as typed, keeps the textbox role, and removes the spinner. `inputmode="numeric"` is a pure keyboard hint: on a touch device the user still gets a numeric keypad, which was the only genuine reason most teams reached for `type="number"` in the first place. `type="tel"` is the dedicated state for telephone numbers — it applies no format validation at all, because phone formats vary worldwide, but it summons a telephone keypad and tells autofill and assistive tech what the field is for. ## When number is the right answer Do not over-correct. If the field is a quantity — a count, an amount, a temperature, a rating, an age — `type="number"` is exactly right and gives you stepping, a numeric keyboard, and a control that says "this is a magnitude". `step` and the min/max range make sense there because arithmetic makes sense there. For money, be aware the default step is 1, so a bare number input rejects `19.99` as invalid until you set a decimal step. ## The one-line rule Ask: would it ever make sense to add one to this value? If yes, `type="number"`. If adding one is meaningless — a phone number, a postcode, an ID, a card — it is a string, and the markup is `type="text"` with `inputmode="numeric"`, or `type="tel"`.