The type attribute tells the browser what kind of data to expect. Picking the right type gives visitors a better keyboard on phones and built-in checks, with no extra code.
index.html
HTML
<form>
<p><label>Email <input type="email" name="email"></label></p>
<p><label>Password <input type="password" name="pw"></label></p>
<p><label>Age <input type="number" name="age" min="0" max="120"></label></p>
<p><label>Birthday <input type="date" name="dob"></label></p>
<p><label>Website <input type="url" name="site"></label></p>
<p><label>Phone <input type="tel" name="phone"></label></p>
<p><label>Search <input type="search" name="q"></label></p>
<p><label>Favourite colour <input type="color" name="colour" value="#ca4b00"></label></p>
<p><label>Volume <input type="range" name="vol" min="0" max="10"></label></p>
</form>What the types give you
| Type | Use for | Bonus |
|---|---|---|
text | Short free text | Default |
email | Email addresses | Checks the format, shows an @ keyboard |
password | Passwords | Hides what is typed |
number | Numbers | Number keypad, min, max, step |
date, time | Dates and times | Date picker |
url | Web addresses | Checks the format |
tel | Phone numbers | Phone keypad |
search | Search boxes | Clear button on some browsers |
color | A colour | Colour picker |
range | A value on a slider | Slider |
lightbulb
Phone numbers are not numbers
Use
type="tel" for phone numbers. type="number" is for quantities you could add up.
warning
Unsupported types fall back to text
If a browser does not know a type, it shows a normal text box. Your form still works, but without the extras, so never rely on the type alone to check data.