| 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-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). Default range is from 0 to 100 |
| 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:
<input type="button" value="Click me" onclick="msg()">
Try it Yourself »
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<br>
<input type="checkbox" name="vehicle3" value="Boat"
checked> I have a boat<br>
Try it Yourself »
Select a color from a color picker:
Select your favorite color: <input type="color" name="favcolor">
Try it Yourself »
Define a date and time control (no time zone):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Try it Yourself »
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).
Define a file-select field and a "Browse..." button (for file uploads):
Select a file: <input type="file" name="img">
Try it Yourself »
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 »
Define an image as a submit button:
<input type="image" src="img_submit.gif" alt="Submit">
Try it Yourself »
Define a month and year control (no time zone):
Birthday (month and year): <input type="month" name="bdaymonth">
Try it Yourself »
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:
Define a password field (characters are masked)
<input type="password" name="pwd">
Try it Yourself »
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 »
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:
<input type="range" name="points" min="0" max="10">
Try it Yourself »
Use the following attributes to specify restrictions:
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.
Define a search field (like a site search, or Google search):
Search Google: <input type="search" name="googlesearch">
Try it Yourself »
Define a field for entering a telephone number:
Telephone: <input type="tel" name="usrtel">
Try it Yourself »
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 »
Define a control for entering a time (no time zone):
Select a time: <input type="time" name="usr_time">
Try it Yourself »
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).
Define a week and year control (no time zone):
Select a week: <input type="week" name="week_year">
Try it Yourself »