The HTML <input> element and its types

<input> with its 22 type values is the most variable element in HTML. Each type carries different validation, keyboard, and platform UI semantics. Picking the right type is the difference between mobile autofill working or not.

Normative spec: https://html.spec.whatwg.org/multipage/input.html
Last verified: 2026-04-27
Byline: Editorial team

The 22 input types

The HTML Living Standard defines 22 values for the type attribute, grouped here by the platform UI they invoke:

Group	Types
Text	`text`, `password`, `search`, `tel`, `url`, `email`
Numeric	`number`, `range`
Date/time	`date`, `month`, `week`, `time`, `datetime-local`
Selection	`checkbox`, `radio`, `color`, `file`
Submission	`submit`, `image`, `reset`, `button`
Hidden	`hidden`

Two more — datetime and keygen — were removed in 2017 and 2017 respectively and should not be used.

The keyboard, autofill, and on-screen-keyboard layout depend on the type. type="email" summons the email-optimised keyboard on iOS Safari, Chrome on Android, and Firefox on Android, with the @ and .com keys promoted to the top row. type="tel" summons a numeric pad. About 30% of mobile-form abandonment is attributed to wrong-keyboard friction in Baymard Institute’s 2023 form study.

Required attributes per type

All types accept name, value, disabled, readonly, required, autocomplete, form.
text-family types accept minlength, maxlength, pattern, placeholder, size.
number and range accept min, max, step.
date-family types accept min, max, step in their format-specific units.
checkbox and radio accept checked.
file accepts accept, capture, multiple.
image accepts alt, src, width, height.

Constraint validation per type

Type	Built-in constraints
`email`	RFC 5321 syntax; rejects spaces and most invalid characters. Add `multiple` to accept comma-separated lists.
`url`	Absolute URL with scheme.
`tel`	None — telephone formats vary too much. Use `pattern` for region-specific rules.
`number`	Integer or float per `step`; respects `min`/`max`.
`date`	Calendar date in `YYYY-MM-DD`.
`time`	`HH:MM` or `HH:MM:SS`.
`range`	Implicit `min=0 max=100 step=1` if unset.

The validation message is localised by the user agent. Override only when the rule is application-specific (use input.setCustomValidity('App-specific error') and clear with input.setCustomValidity('')).

Autocomplete tokens

autocomplete accepts a structured token list defined in HTML §5.4 Autofilling form controls. The most-used tokens:

email, tel, name, given-name, family-name, organization.
street-address, address-line1, postal-code, country.
cc-number, cc-exp, cc-csc, cc-name.
current-password, new-password, one-time-code.

A correct token raises mobile-autofill success rates by about 60% (CSS-Tricks autofill survey). A wrong or missing token forces the user to type even when their password manager has the value.

Accessibility

Every input needs a programmatic name. Order of precedence (per ACCNAME 1.2):

<label for="..."> referencing the input by id.
<label> wrapping the input.
aria-labelledby (if a visible label exists elsewhere).
aria-label (last resort, breaks copy-paste of the label text).
placeholder (last resort, low priority — vanishes on focus).

Required and invalid states must be conveyed both visually (red border, error icon) and programmatically (aria-invalid="true", aria-describedby pointing to the error message id). The colour must meet /wcag/2.2/aa/1.4.3 (4.5:1) and the error must be in a live region or focusable.

Common pitfalls

type="number" for credit-card numbers. Strips leading zeros and breaks paste of 4111-1111-.... Use type="text" inputmode="numeric" instead.
type="tel" with pattern="[0-9]{10}". Accepts only US-shaped numbers; rejects every other country. Use a tolerant pattern or none.
Single <input> for first + last name. Breaks autofill; use two inputs with autocomplete="given-name" and family-name.
type="email" required with placeholder only and no label. AT users hear nothing. Always provide a <label>.
type="file" styled as a drop zone with no native button. Drag-only fails /wcag/2.2/aa/2.5.7.

Cross-engine support

All 22 types reached interop by 2017. The date and time types have engine-specific UI: Chromium (Blink) and Gecko render a calendar picker; WebKit on iOS uses the platform wheel; WebKit on macOS Safari renders a custom inline picker since Safari 14.1 (2021). Pass-rate on the HTML forms test suite is about 95% across all three engines per the 2024 dashboard.