HTML <input> type Attribute
Example
An HTML form with two different input types; text and submit:
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
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
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: checkbox
Example
Checkboxes let a user select one or more options of a limited number of choices:
<input type="checkbox" name="vehicle2" value="Car"> I have a car
Input type: color
Example
Select a color from a color picker:
Input type: date
Input type: datetime
Example
Define a date and time control (with time zone):
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):
Input type: email
Example
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).
Input type: file
Example
Define a file-select field and a "Browse..." button (for file uploads):
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: image
Example
Define an image as a submit button:
Input type: month
Example
Define a month and year control (no time zone):
Input type: number
Example
Define a field for entering a number (You can also set restrictions on what numbers are accepted):
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: radio
Example
Radio buttons let a user select only one of a limited number of choices:
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
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:
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):
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):
Input type: submit
Input type: tel
Example
Define a field for entering a telephone number:
Input type: text
Example
Define two single-line text fields that a user can enter text into:
Last name: <input type="text" name="lname"><br>
Input type: time
Example
Define a control for entering a time (no time zone):
Input type: url
Example
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).
Input type: week
Example
Define a week and year control (no time zone):
HTML <input> tag