An HTML form with two different input types; text and submit:
More "Try it Yourself" examples below.
The type attribute specifies the type of <input> element to display.
The default type is: text.
Tip: This is not a required attribute, but we think you should always include it.
Attribute | |||||
---|---|---|---|---|---|
type | Yes | Yes | Yes | Yes | Yes |
Note: The type attribute works in all major browsers. However, not all the different input types works in all major browsers.
Look below to see browser support for each input type.
HTML5 has the following new input types: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, and url.
Value | Description |
---|---|
button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
checkbox | Defines a checkbox |
color | Defines a color picker |
date | Defines a date control (year, month and day (no time)) |
datetime | Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second, based on UTC time zone) |
datetime-local | Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone) |
Defines a field for an e-mail address | |
file | Defines a file-select field and a "Browse..." button (for file uploads) |
hidden | Defines a hidden input field |
image | Defines an image as the submit button |
month | Defines a month and year control (no time zone) |
number | Defines a field for entering a number |
password | Defines a password field (characters are masked) |
radio | Defines a radio button |
range | Defines a control for entering a number whose exact value is not important (like a slider control) |
reset | Defines a reset button (resets all form values to default values) |
search | Defines a text field for entering a search string |
submit | Defines a submit button |
tel | Defines a field for entering a telephone number |
text | Default. Defines a single-line text field (default width is 20 characters) |
time | Defines a control for entering a time (no time zone) |
url | Defines a field for entering a URL |
week | Defines a week and year control (no time zone) |
A clickable button, that activates a JavaScript when it is clicked:
Checkboxes let a user select one or more options of a limited number of choices:
Select a color from a color picker:
Define a date and time control (with time zone):
Define a date and time control (no time zone):
Define a field for an e-mail address (will be automatically validated when submitted):
Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).
Define a file-select field and a "Browse..." button (for file uploads):
Define a hidden field (not visible to a user).
A hidden field often stores a default value, or can have its value changed by a JavaScript:
Define an image as a submit button:
Define a month and year control (no time zone):
Define a field for entering a number (You can also set restrictions on what numbers are accepted):
Use the following attributes to specify restrictions:
Define a password field (characters are masked)
Radio buttons let a user select only one of a limited number of choices:
Define a control for entering a number whose exact value is not important (like a slider control). You can also set restrictions on what numbers are accepted:
Use the following attributes to specify restrictions:
Define a reset button (resets all form values to default values):
Tip: Use the reset button carefully! It can be annoying for users who accidentally activate the reset button.
Define a search field (like a site search, or Google search):
Define a field for entering a telephone number:
Define two single-line text fields that a user can enter text into:
Define a control for entering a time (no time zone):
Define a field for entering a URL:
Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
Define a week and year control (no time zone):