HTML <input> type Attribute
Example
An HTML form with two different input types; text and submit:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
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.
Browser Support
| 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.
Differences Between HTML 4.01 and HTML5
HTML5 has the following new input types: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, and url.
Syntax
<input type="value">
Attribute Values
| 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 | The input type datetime has been removed from the HTML standard. Use datetime-local instead. |
| 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) |
Examples
Input type: button
Example
A clickable button, that activates a JavaScript when it is clicked:
<input type="button" value="Click me" onclick="msg()">
Try it yourself »
Input type: checkbox
Example
Checkboxes let a user select one or more options of a limited number of choices:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
Try it yourself »
Input type: color
Example
Select a color from a color picker:
Select your favorite color: <input type="color" name="favcolor">
Try it yourself »
Input type: date
Input type: datetime
Example
Define a date and time control (with time zone):
Birthday (date and time): <input type="datetime" name="bdaytime">
Try it yourself »
The input type datetime has been removed from the HTML standard. Use datetime-local instead.
Input type: datetime-local
Example
Define a date and time control (no time zone):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Try it yourself »
Input type: email
Example
Define a field for an e-mail address (will be automatically validated when submitted):
E-mail: <input type="email" name="usremail">
Try it yourself »
Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).
Input type: file
Example
Define a file-select field and a "Browse..." button (for file uploads):
Select a file: <input type="file" name="img">
Try it yourself »
Input type: hidden
Example
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:
<input type="hidden" name="country" value="Norway">
Try it yourself »
Input type: image
Example
Define an image as a submit button:
<input type="image" src="img_submit.gif" alt="Submit">
Try it yourself »
Input type: month
Example
Define a month and year control (no time zone):
Birthday (month and year): <input type="month" name="bdaymonth">
Try it yourself »
Input type: number
Example
Define a field for entering a number (You can also set restrictions on what numbers are accepted):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5">
Try it yourself »
Use the following attributes to specify restrictions:
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value
Input type: password
Example
Define a password field (characters are masked)
<input type="password" name="pwd">
Try it yourself »
Input type: radio
Example
Radio buttons let a user select only one of a limited number of choices:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
Try it yourself »
Input type: range
Example
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:
<input type="range" name="points" min="0" max="10">
Try it yourself »
Use the following attributes to specify restrictions:
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value
Input type: reset
Example
Define a reset button (resets all form values to default values):
<input type="reset">
Try it yourself »
Tip: Use the reset button carefully! It can be annoying for users who accidentally activate the reset button.
Input type: search
Example
Define a search field (like a site search, or Google search):
Search Google: <input type="search" name="googlesearch">
Try it yourself »
Input type: submit
Input type: tel
Example
Define a field for entering a telephone number:
Telephone: <input type="tel" name="usrtel">
Try it yourself »
Input type: text
Example
Define two single-line text fields that a user can enter text into:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Try it yourself »
Input type: time
Example
Define a control for entering a time (no time zone):
Select a time: <input type="time" name="usr_time">
Try it yourself »
Input type: url
Example
Define a field for entering a URL:
Add your homepage: <input type="url" name="homepage">
Try it yourself »
Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
Input type: week
Example
Define a week and year control (no time zone):
Select a week: <input type="week" name="week_year">
Try it yourself »
HTML <input> tag