Why use specific input types instead of type=text?

Specific types give free native validation, semantic meaning for assistive tech, and the correct on-screen keyboard on mobile. type=email shows an @ key, type=tel a numeric pad, and the browser validates the format before submit without any JavaScript.

What is the difference between type and inputmode?

type defines validation, parsing and the default control. inputmode only hints which virtual keyboard to show without changing validation. Use inputmode=numeric on a type=text field when you want digits but not number-spinner behaviour.

Do all browsers render every input type?

No. Unknown or unsupported types fall back to type=text, so the field still works but loses the specialised control. Always pair date, color and range with a JavaScript or server fallback for older browsers.

Which types support min, max and step?

The numeric and temporal types — number, range, date, datetime-local, month, week and time — accept min, max and step. step also accepts the keyword any to disable stepping for arbitrary decimal values.

Is this reference searched locally?

Yes. The full input-type table is bundled into the page and filtered in your browser. Nothing is sent to a server.

HTML Input Types Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

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.

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}">

On mobile, type selects the keyboard: email adds @, url adds /, tel shows a phone pad, and number/numeric show digits. Unsupported types degrade gracefully to text, so always supply sensible attributes and a fallback.

Tips and notes

Use the most specific type available — it is the cheapest accessibility and UX win.
Pair type="text" with inputmode when you need a keyboard hint without strict validation (e.g. card numbers that need spaces).
type="password" masks input but offers no validation — add pattern/minlength.
type="search" adds a clear button on most browsers; type="hidden" is never rendered and submits a fixed value.
For date/time types the submitted value uses a fixed ISO format regardless of the locale shown to the user.