HTML Input Types
An input’s type can change its interface, keyboard hints, and built-in constraints. Choose a type according to the value’s meaning, not simply because it looks convenient.
How it works
- email and url provide format checking; tel is for telephone values but does not impose one universal phone-number format. number is for quantities, not identifiers such as account or postal codes.
- date, time, and datetime-local represent different values. datetime-local does not include a time zone; decide how the application interprets it.
- checkbox supports an independent choice; radio supports one choice within a same-name group. file selects local files. password obscures visible input but does not encrypt transmission.
A practical example
<label for="places">Number of places</label>
<input id="places" name="places" type="number" min="1" max="4" step="1">
<label for="visit-date">Visit date</label>
<input id="visit-date" name="visit_date" type="date">
<label><input type="checkbox" name="updates" value="yes"> Send workshop updates</label>
The quantity has a numeric range, the date uses a date-oriented control, and the checkbox represents an independent preference. A checkbox normally contributes its value only when checked.