Every value the input type attribute accepts, and what each one gives you.
| Type | Renders as | Use for |
|---|---|---|
| text | Single-line box | Default free text |
| Email field | Email with built-in validation | |
| password | Masked text | Passwords (hidden characters) |
| number | Numeric spinner | Numbers with min, max, step |
| tel | Phone field | Phone numbers (mobile keypad) |
| url | URL field | Web addresses with validation |
| search | Search box | Search queries (clear button) |
| Type | Renders as | Use for |
|---|---|---|
| date | Date picker | A calendar date |
| time | Time picker | A time of day |
| datetime-local | Date and time | Local date plus time |
| month | Month picker | A year and month |
| week | Week picker | A year and week number |
| color | Colour picker | A hex colour |
| range | Slider | A value within a range |
| Type | Renders as | Use for |
|---|---|---|
| checkbox | Checkbox | On/off or multi-select |
| radio | Radio button | Pick one from a group |
| file | File chooser | Upload one or more files |
| hidden | Nothing visible | Submit data without showing it |
| submit | Submit button | Send the form |
| reset | Reset button | Clear the form to defaults |
| button | Plain button | Custom actions via JavaScript |
The type attribute on an <input> does more than pick how the field looks — it changes the keyboard shown on phones, the built-in validation, and the controls the browser provides for free. Setting type="email" gives you address validation and an email-optimised mobile keyboard; type="number" adds steppers and rejects non-numbers; type="date" renders a native calendar; and type="tel" brings up the phone keypad without imposing a format. Using the right type is the easiest accessibility and mobile-UX win in a form, because the browser does the work you'd otherwise script. A couple of notes: native date and color pickers vary in appearance between browsers, and any input can be paired with attributes like required, min, max, step and pattern to tighten validation further.