HTML <input> Tag

Four <input> elements of different types: a text field, radio buttons, checkbox, and a submit button -- all wrapped inside a <form>.

<form action="/tutorial/action.html">
  <fieldset style="border: 2px solid #4238ca; background: #f6f8ff; ">
    <legend>Student Information</legend>

    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="text" placeholder="City" name="city"><br /><br />

    <div>
      <input type="checkbox" id="bachelors" name="bachelors" value="bachelors">
      <label for="bachelors">Bachelors degree</label>
    </div>

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

A <form> with different <input> controls.
Enter data and click submit to see the results.

<form action="/tutorial/action.html">

  <input type="text" name="name" placeholder="Name"><br /><br />
  <input type="text" name="email" placeholder="Email"><br /><br />

  <label><input type="checkbox" name="html" value="html"> I know HTML</label><br />
  <label><input type="checkbox" name="css" value="css"> I know CSS</label><br />
  <label><input type="checkbox" name="js" value="js"> I know JavaScript</label><br /><br />

  <label for="experience">Years of experience:</label> &nbsp;
  <input type="range" min="0" max="25" value="5" id="experience" name="experience" oninput="updateYear(this)"> &nbsp;
  <span id="years">5</span> years <br /><br />

  <input type="submit" value="Submit">

</form>

<script>
  let updateYear = element => {
    document.getElementById("years").innerText = element.value;
  }  
</script>

This table lists the <input> tag attributes.

For addional global attributes see our global attributes list.

Obsolete Attributes

Do not use the attributes listed below.  They are not valid in HTML5.
Browser support for these attributes is spotty.

Text Input

A single line <input> element of type text.
The placeholder adds a muted hint to the text input.

<input type="text" name="salary" placeholder="Enter your salary..">

Buttons

Three <input> elements that are button types:

• The button type is a normal clickable button.
• The submit type submits user entered data.
• The reset type resets all user entered data to its default state.

<input type="button" value="Button">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Checkboxes

Four <input> elements of type checkbox.

Each element is wrapped by a <label> which binds the label text to the controls.
North and East are normal checkboxes, South is checked (selected), and West is disabled.

<label><input type="checkbox" name="north" value="north"> North </label><br />
<label><input type="checkbox" name="east" value="east"> East </label><br />
<label><input type="checkbox" name="south" value="south" checked> South </label><br />
<label><input type="checkbox" name="west" value="west" disabled> West </label>

Radio Buttons

Five <input> elements of type radio.

Each element is wrapped by a <label> which binds the label text to the controls.
The first three are normal checkboxes, Medium Low is checked (selected), and Low is disabled.

<label><input type="radio" name="score" value="high"> High </label><br />
<label><input type="radio" name="score" value="mediumhigh"> Medium High </label><br />
<label><input type="radio" name="score" value="medium"> Medium </label><br />
<label><input type="radio" name="score" value="mediumlow" checked> Medium Low </label><br />
<label><input type="radio" name="score" value="low" disabled> Low </label>

Password Input

An <input> element of type password.
When entering a password the characters are hidden.

<input type="password" name="password" placeholder="Enter password..">

File Upload

An <input> element of type file.
Click the button to select a file.

<input type="file">

Number Input

An <input> element of type number.
Click the up/down buttons to increment/decrement by 1.

<input type="number" value="3">

Date Picker

An <input> element of type date.
Click the control to select a date.

<input type="date">

Time Picker

An <input> element of type time.
Click the control to select a time.

<input type="time">

Range Input

An <input> element of type range.
Slide the thumb to change the value (value is not visible).

<input type="range">

Color Picker

An <input> element of type color.
Click the control to select a color.

<input type="color" value="#F45D48"> Color Picker

The <input> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, they allow you to create comprehensive data input solutions.

Here is a list of form tags

This table shows when <input> 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

Note: The HTML5 input types (time, email, color, search, tel, etc.) were released in Oct 2014.

• Our HTML form Tag Reference
• Our HTML select Tag Reference
• Our HTML textarea Tag Reference
• Our CSS Forms Tutorial