The HTML type attribute
The HTML type attribute determines the kind of input control and its behavior, value type and on-screen keyboard. It is used on the <input> element.
Overview
The type attribute on an <input> is the most important attribute on the element — it determines what kind of control you get: a text box, email field, password, number spinner, date picker, checkbox, radio button, file picker, color picker, range slider and many more.
Choosing the right type does a lot for you automatically. It brings up the appropriate on-screen keyboard on mobile (a numeric pad for number and tel, an @-key layout for email), provides built-in validation (email format, number ranges via min/max), and renders the right native UI such as date and color pickers.
The default is text. Use the most specific type that fits the data — type="email" rather than plain text for an email address — so users get the right keyboard and the browser's free validation, and always pair the input with a <label>.
Syntax
<input type="email" name="email">Values
| Value |
|---|
| text (default) | email | password | number | tel | url | search | date | time | datetime-local | month | week | color | range | checkbox | radio | file | hidden | submit | reset | button | image |
Example
<input type="color" value="#1c7ce9"> <input type="range" min="0" max="10" value="6">Best practices
- Use the most specific input type so users get the right on-screen keyboard and built-in validation.
- Prefer
email,tel,url,number,dateand similar over plaintextwhere they fit. - Do not rely on the type alone for validation — re-check on the server.
- Pair every input with a <label>.
Frequently asked questions
What does the input type attribute do?
What input types are available?
text, email, password, number, tel, url, date, checkbox, radio, file, color and range.Does the input type provide validation?
What is the default input type?
text, used when no type is specified.