HTML <input> type Attribute
Example
An HTML form with two different input types; text and submit:
<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text"
id="username" name="username"><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: The type attribute 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.
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, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| 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 timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| 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 |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
More Examples
Input type: button
A push button that activates a JavaScript when it is clicked:
<input type="button" value="Click me" onclick="msg()">
Try it Yourself »
Input type: checkbox
Checkboxes let a user select one or more options of a limited number of choices:
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
Try it Yourself »
Input type: color
Select a color from a color picker:
<label for="favcolor">Select your favorite color:</label>
<input type="color"
id="favcolor" name="favcolor">
Try it Yourself »
Input type: date
Define a date control:
<label for="birthday">Birthday:</label>
<input type="date"
id="birthday" name="birthday">
Try it Yourself »
Input type: datetime-local
Define a date and time control (no time zone):
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local"
id="birthdaytime" name="birthdaytime">
Try it Yourself »
Input type: email
Define a field for an e-mail address (will be automatically validated when submitted):
<label for="email">Enter your email:</label>
<input type="email"
id="email" name="email">
Try it Yourself »
Input type: file
Define a file-select field and a "Browse..." button (for file uploads):
<label for="myfile">Select a file:</label>
<input type="file"
id="myfile" name="myfile">
Try it Yourself »
Input type: hidden
Define a hidden field (not visible to a user).
A hidden field often stores what database record that needs to be updated when the form is submitted:
<input type="hidden" id="custId" name="custId" value="3487">
Try it Yourself »
Input type: image
Define an image as a submit button:
<input type="image" src="img_submit.gif" alt="Submit">
Try it Yourself »
Input type: month
Define a month and year control (no time zone):
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month"
id="bdaymonth" name="bdaymonth">
Try it Yourself »
Input type: number
Define a field for entering a number (You can also set restrictions on what numbers are accepted):
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number"
id="quantity" 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
Define a password field (characters are masked):
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
Try it Yourself »
Input type: radio
Radio buttons let a user select only one of a limited number of choices:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio"
id="other" name="gender" value="other">
<label
for="other">Other</label>
Try it Yourself »
Input type: range
Define a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:
<label for="vol">Volume (between 0 and 50):</label>
<input type="range"
id="vol" name="vol" min="0" max="50">
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
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
Define a search field (like a site search, or Google search):
<label for="gsearch">Search Google:</label>
<input type="search"
id="gsearch" name="gsearch">
Try it Yourself »
Input type: submit
Input type: tel
Define a field for entering a telephone number:
<label for="phone">Enter your phone number:</label>
<input type="tel"
id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Try it Yourself »
Input type: text
Define two single-line text fields that a user can enter text into:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text"
id="lname" name="lname"><br>
Try it Yourself »
Input type: time
Define a control for entering a time (no time zone):
<label for="appt">Select a time:</label>
<input type="time"
id="appt" name="appt">
Try it Yourself »
Input type: url
Define a field for entering a URL:
<label for="homepage">Add your homepage:</label>
<input type="url"
id="homepage" 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
Define a week and year control (no time zone):
<label for="week">Select a week:</label>
<input type="week"
id="week" name="week">
Try it Yourself »
❮ HTML <input> tag
