HTML Input Types
The type attribute on <input> chooses the kind of input and the on-screen keyboard the browser shows. Picking the right type gives users hints and free validation.
Input types
| type | Purpose | Mobile keyboard |
|---|---|---|
text | Default single-line input. | Letters |
email | Email address. Validated for format. | Adds @ |
password | Text is masked. | Letters |
number | Numeric input. Spinner buttons appear. | Number pad |
tel | Phone number. No format validation. | Phone pad |
url | Full URL. Validated. | Adds /, .com |
search | Search query. Many browsers add a clear button. | Letters |
date / time / datetime-local | Picker UI for dates and times. | Date picker |
color | Color picker. | — |
range | Slider, not displayed as a number. | — |
checkbox | Single on/off. | — |
radio | One of several mutually exclusive choices (same name). | — |
file | File upload. Add multiple for many files. | — |
hidden | Value submitted without being visible. | — |
submit / reset | Buttons. Prefer <button> instead. | — |
Tip: Always pick a specific type. Using
type="email" instead of type="text" for an email field gives you free format validation and a friendlier keyboard on phones.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Input Types</title>
</head>
<body>
<h1>HTML Input Types</h1>
<p>This is a demo page for the "HTML Input Types" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Use the input type that shows a date picker.
<input type="
">
Four letters. Same word you write on a calendar.
Discussion
Loading…