The type attribute on an <input> tag specifies the type of input control to create.
The <input> element creates a wide variety of input controls.
Three <input> elements with a type attribute.
Their values are: text, radio, and submit respectively.
<form action="/tutorial/action.html">
<fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
<legend>User Information</legend>
<label for="name">Your name</label>
<input type="text" id="name" name="name"><br /><br />
<label>Gender</label>
<label for="male"><input type="radio" id="male" name="gender" value="male" checked> Male</label>
<label for="female"><input type="radio" id="female" name="gender" value="female"> Female</label>
<label for="other"><input type="radio" id="other" name="gender" value="other"> Other</label><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form>
The type attribute specifies the type of input element to create.
The <input> element offers different types -- 21 in all.
These include text fields, buttons, checkboxes, radio buttons, color pickers, and more.
If the type attribute is not set, it will fall back to a text element.
<input type="button | checkbox | color | date | datetime-local | email | file |
hidden | image | number | password | radio | range | reset | search |
submit | tel | text | time | url | week">
| Value | Description |
|---|---|
| button | Creates a clickable button. |
| checkbox | Creates a checkbox or tickbox. |
| color | Creates a color picker. |
| date | Creates a date picker (year, month, day). |
| datetime-local | Creates a date and time picker (year, month, day, time), without timezone. |
| Creates a textfield for email address. | |
| file | Creates a file upload field with browse button. |
| hidden | Defines a hidden text field. |
| image | Use an image as submit button. |
| month | Creates a date picker without timezone (month and year). |
| number | Creates a number field with spinner (add or minus value). |
| password | Creates a password field. |
| radio | Creates a radio button. |
| range | Creates a range or slider control. |
| reset | Creates a reset button. |
| search | Creates a search text field. |
| submit | Creates a submit button. |
| tel | Creates a text field for telephone numbers. |
| text | Creates a single-line text field. This is the default. |
| time | Creates a time picker without timezone. |
| url | Creates a text field for URL. |
| week | Creates a date picker with week and year control and without timezone. |
Below are some type examples.
Four checkboxes. The first one is checked.
<form action="/tutorial/action.html">
<fieldset>
<legend>Favorite technologies</legend>
<label><input type="checkbox" name="html" value="html" checked> HTML</label><br />
<label><input type="checkbox" name="css" value="css"> CSS</label><br />
<label><input type="checkbox" name="javascript" value="javascript"> Javascript</label><br />
<label><input type="checkbox" name="csharp" value="csharp"> C#</label><br />
<input type="submit" value="Submit">
</fieldset>
</form>
A color picker. The default value is black or #000.
<form action="/tutorial/action.html">
<label for="color">Select Color</label><br />
<input type="color" id="color" name="color"><br />
<input type="submit" value="Submit">
</form>
A date picker.
<form action="/tutorial/action.html">
<label for="birthday">Birthday</label><br />
<input type="date" id="birthday" name="birthday"><br />
<input type="submit" value="Submit">
</form>
A numeric spinner with up-down buttons.
<form action="/tutorial/action.html">
<label for="quantity">Quantity</label><br />
<input type="number" id="quantity" name="quantity"><br />
<input type="submit" value="Submit">
</form>
Two input buttons. One of type submit and the other type reset.
The submit button sends form data to the server.
The reset button clears all fields to their original values.
<form action="/tutorial/action.html">
<label for="fullname">Full name</label><br />
<input type="text" id="fullname" name="fullname"><br />
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Here is when type support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
