The type Attribute
The <input> element’s type attribute determines what kind of data it collects and how the browser renders it. HTML5 introduced many specialized types beyond plain text.
Common Input Types
| Type | Purpose |
|---|---|
| text | Single-line free text |
| Email address, validated and shows an @ keyboard on mobile | |
| password | Masks the entered characters |
| number | Numeric input with increment/decrement controls |
| checkbox | A single on/off toggle |
| radio | One choice among a group with the same name |
| date | A date picker |
| file | Uploads a file from the device |
| range | A slider between a min and max value |
| search | A text field styled and behaving like a search box |
| tel | A telephone number, shows a numeric keypad on mobile |
| url | A web address, validated for URL format |
| color | A color picker |
Input Type Examples
<input type="email" name="email" />
<input type="password" name="password" />
<input type="number" name="quantity" min="1" max="10" />
<input type="date" name="birthday" />
<input type="range" name="volume" min="0" max="100" />
<input type="color" name="theme" />Output
Checkbox vs Radio
<!-- Checkboxes: any number can be checked -->
<label><input type="checkbox" name="topping" value="cheese" /> Cheese</label>
<label><input type="checkbox" name="topping" value="olives" /> Olives</label>
<!-- Radio buttons: only one can be selected per name -->
<label><input type="radio" name="size" value="small" /> Small</label>
<label><input type="radio" name="size" value="large" /> Large</label>Output
File Uploads
The file type lets users select one or more files to upload. The accept attribute restricts which file types are shown, and multiple allows selecting several files at once.
File Input
<input type="file" accept="image/png, image/jpeg" multiple />Output
Mobile Keyboards
Using the correct input type (email, tel, number, url) automatically shows the most appropriate keyboard layout on mobile devices, improving the user experience without any JavaScript.
Best Practice
Always choose the most specific input type available for the data you’re collecting — it improves usability, gives free client-side validation, and requires no extra code.