Text and choice controls

Numbers, dates, and ranges

Use numeric and date-related controls without assuming every value that looks numeric should use a number input.

8 minute lesson

~~~

Use type="number" for a quantity that can be compared, increased, or decreased.

<label for="seats">Number of seats</label>
<input id="seats" name="seats" type="number" min="1" max="12" step="1">

The browser can provide stepper controls and reject values outside the declared range. The submitted value is still text in the request. The server must parse it, reject invalid numbers, and check the range again.

Postal codes, card numbers, and telephone numbers are identifiers. Arithmetic makes no sense for them. They may contain leading zeroes or formatting characters, so use a text-like input with an appropriate inputmode when a numeric keyboard helps.

Date controls submit normalized strings such as 2026-07-30, but displaying and parsing dates still needs care. Decide whether the value represents a calendar date, a local time, or an instant. Do not silently invent a time zone.

A range input is useful when an approximate position matters more than typing an exact value:

<label for="volume">Volume</label>
<input id="volume" name="volume" type="range" min="0" max="100" value="50">

Show the current value when people need to know it. A slider without a visible value can be hard to use precisely.

Submit boundary values such as 0, 12, 13, and an empty value. Confirm the server rejects what the HTML says it rejects.

Lesson completed