Pick the right input type
The type attribute on <input> controls the control rendered, the validation
applied, and — crucially on mobile — which on-screen keyboard appears. This
reference lists every standard input type with the attributes it accepts and the
keyboard it triggers, so you can choose the most specific type for each field.
Why type matters beyond just validation
Choosing type="email" over type="text" is not just about the @ on the mobile keyboard. It tells assistive technology what kind of value is expected, makes browser autofill more accurate (browsers look at type to decide whether to offer saved emails, addresses, or credit cards), and provides native validation that fires before any JavaScript runs. Every specific type you skip is a UX, accessibility, and autofill opportunity lost.
The input types at a glance
| Type | Keyboard (mobile) | Key validation / behaviour |
|---|---|---|
text | Standard | None — use pattern/minlength to constrain |
email | Adds @ and . | Validates basic email format |
url | Adds / and .com | Must start with a valid scheme |
tel | Numeric pad | No format validation — use pattern |
number | Numeric with decimals | min, max, step; spinner control |
range | N/A | Returns a number within min–max; renders a slider |
date | Date picker | Value always ISO YYYY-MM-DD |
datetime-local | Date + time picker | Value is YYYY-MM-DDTHH:MM |
month | Month picker | Value is YYYY-MM |
week | Week picker | Value is YYYY-WNN |
time | Time picker | Value is HH:MM or HH:MM:SS |
color | Colour picker | Value is a hex string like #rrggbb |
checkbox | N/A | checked property, not value, carries state |
radio | N/A | Grouped by name; only one selected per group |
file | N/A | accept, multiple; no text value submitted |
password | Hides input | No format validation by default |
search | Adds search action key | Browser adds a clear button |
hidden | Never renders | Submits a fixed value without user interaction |
submit / reset / button | N/A | Form control buttons |
type vs inputmode — the key distinction
type controls both validation and the keyboard hint. inputmode controls only the keyboard hint, with no validation effect. Use inputmode when you need a specific keyboard but not the type’s built-in validation:
<!-- Card number: digits-only keyboard, but spaces allowed, no number spinner -->
<input type="text" inputmode="numeric" pattern="[0-9 ]{13,19}" autocomplete="cc-number">
<!-- PIN: digits-only keyboard, password masking, no number spinner -->
<input type="password" inputmode="numeric" minlength="4" maxlength="8">How it works
Each type maps to a value space and a default control. The browser validates the value against the type before form submission and exposes the result through the Constraint Validation API:
<input type="email" required>
<input type="number" min="0" max="100" step="5">
<input type="tel" inputmode="numeric" pattern="[0-9]{10}">Unsupported types degrade gracefully to text, so always supply sensible fallback
attributes and a server-side validation equivalent.
Key gotchas
type="number"strips leading zeros and rejects non-numeric characters before submit — do not use it for phone numbers, postcodes, or credit card numbers.- For
dateandtimetypes, the value submitted to the server is always ISO format (YYYY-MM-DD) regardless of how the picker displays it to the user. type="range"always has a value; it cannot be “empty” the waytextcan. Its default value is the midpoint ofmin–max.type="checkbox"does not submit anything when unchecked — to detect unchecked state server-side, add a<input type="hidden" name="agree" value="0">before the checkbox.type="password"masks input but provides no encryption and no format validation — addpatternandminlengthto enforce strength rules.