type
The kind of an `<input>` field: from text and numbers to a date, colour and file.
Syntax
<input type="email">Parameters
| Parameter | Type | Description |
|---|---|---|
| text, email, password, tel, url, search | text fields | Single-line text fields with different keyboards and validation. |
| number, range | numbers | A number with spin buttons or a slider. |
| date, time, datetime-local, month, week | dates | Picking a date and time. |
| checkbox, radio | choices | A checkbox and a radio button. |
| color, file, hidden | other | A colour picker, a file upload, a hidden field. |
| submit, reset, button | buttons | Buttons as an `<input>`. |
Examples
Text fields of different types:
<p><input type="email" placeholder="Email"></p>
<p><input type="password" placeholder="Password"></p>
<p><input type="tel" placeholder="Phone"></p>
<p><input type="search" placeholder="Search"></p>Numbers, dates, colour and file:
<p><input type="number" min="0" max="10" value="2"> cups</p>
<p><input type="range" min="0" max="100" value="40"></p>
<p><input type="date"> <input type="time"></p>
<p><input type="color" value="#2a9d8f"> <input type="file"></p>Notes
The right type gives you free validation and convenience: on phones email shows a keyboard with @, tel and number a numeric one. If the browser does not know a type, it shows a plain text field. <button> has its own type: submit, button or reset.
See also
- <input> — An input field; its kind is set by the `type` attribute.
- <input type="checkbox"> — A checkbox is an independent yes/no choice; a radio button picks one option from a group.
- <button> — A button: submits a form or triggers an action.
- pattern — A pattern (regular expression) the field value must match.
Related recipes
In the tutorial
- Input types — The type attribute of input — text, email, password, numbers and sliders, dates, checkboxes, radio buttons, colour and file.