HTML <input> type Attribute

The type attribute on an <input> tag specifies the type of input control to create. The <input> element is a powerhouse that offers a wide variety of input controls.

Example

#

Three <input> elements with a type attribute.
Their values are: text, radio, and submit respectively.

User Information  

         

<form action="/tutorial/action.html">
  <fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
    <legend>User Information</legend>
    <label for="name">Your name</label> &nbsp;
    <input type="text" id="name" name="name"><br /><br />

    <label>Gender</label> &nbsp;&nbsp;&nbsp;
    &nbsp; <label for="male"><input type="radio" id="male" name="gender" value="male" checked> Male</label>
    &nbsp; <label for="female"><input type="radio" id="female" name="gender" value="female"> Female</label>
    &nbsp; <label for="other"><input type="radio" id="other" name="gender" value="other"> Other</label><br /><br />

    <input type="submit" value="Submit">
  </fieldset>
</form>

Using type

The type attribute specifies the type of input element to create.

The <input> element offers a wide variety of 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.


Syntax

<input type="button | checkbox | color | date | datetime-local | email | file |
             hidden | image |  number | password | radio | range | reset | search |
             submit | tel | text | time | url | week">

Values

#

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.
email 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.


input type="checkbox"

#

Four checkboxes. The first one is checked.

Favorite technologies



<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>

input type="color"

#

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>

input type="date"

#

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>

input type="number"

#

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>

input type="submit" and type="reset"

#

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>

Browser support

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

You may also like

 Back to <input>
Guides