<input type="number"> collects a value meant for actual arithmetic — with spinner arrows and min/max/step constraints — and is easy to reach for incorrectly on data that only looks numeric.
Syntax
<input type="number" name="quantity" min="1" max="10" step="1">Basic Example
<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" min="1" max="5" value="1">Browser output: a text field with small up/down spinner arrows, letting the user click to increment or decrement, in addition to typing directly.
How It Works
The browser enforces that the value is a valid number and, if set, falls within min/max, stepping by step (default 1). On mobile, it typically brings up a numeric keypad.
Important Attributes
| Attribute | Purpose |
|---|---|
min / max | Valid value range — see min-max |
step | The increment size (e.g. step="0.5" for half-steps) |
Real-World Example
<label for="course-count">Number of courses to enroll in</label>
<input type="number" id="course-count" name="course-count" min="1" max="3" step="1">A genuine numeric quantity — one where addition, comparison, and the spinner arrows are all actually meaningful actions on the value.
Common Mistakes
- Using
type="number"for phone numbers, postal/zip codes, or credit card numbers — these aren't used for math, can lose meaningful leading zeros, and the spinner arrows make no sense on them - Forgetting that a
numberinput can still be left completely empty unlessrequiredis also added
Best Practices
- Reserve
type="number"strictly for values genuinely used in calculations or comparisons (quantity, age, price) - For identifier-like digit strings (phone, postal code), use
type="text"withinputmode="numeric"and apatterninstead — this still gives a numeric mobile keyboard without the inappropriate spinner behavior
Accessibility Considerations
The spinner arrows can be small and fiddly for users with motor impairments — always allow direct typing as a reliable alternative, which native number inputs already do.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Spinner arrow styling varies noticeably by browser and operating system — a detail worth checking across your actual target browsers if the exact appearance matters to your design.
Mini Practice
- Build a quantity selector limited between 1 and 10.
- Identify why a phone number field should not use
type="number", and describe the better alternative.
