HTML <input> Tag

The <input> tag creates an input control that accepts data from the user. This element is an absolute powerhouse with its support for a wide variety of input types, such as, text fields, radio buttons, checkboxes, password fields, dates, and more.

HTML Tag

Example

#

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

Student Information





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

Using <input>

The <input> tag creates input controls that accept data from users.

This tag is an absolute powerhouse with its support for many different input types.

The type attribute defines what type of input control will be rendered (see examples below).

More Examples

A <form> with a variety of <input> controls.
Enter data and click submit to see the values submitted.









    5 years

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

Attributes for <input>

This table lists the <input> tag attributes.

Attribute Value Description
type text
checkbox
radio
hidden
button
submit
reset
password
file
--------
color
date
datetime-local
email
search
image
month
number
range
tel
time
url
week
The type of input element to be created.
Click the type values for details: text, checkbox, etc.

The last 13 types (color to week) were added in HTML5 (Oct 2014).
name text Name of the input element.
value text Value of the input element.
id    identifier Defines a unique identifier for the input.
class    classnames Sets one or more CSS classes to be applied to the input.
style    CSS-styles Sets the style for the input.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the input is hidden.
title    text Sets a title that displays as a tooltip.
tabindex    index Sets a tab sequence relative to the other elements.
lang    language Sets the language for the input element.
checked checked For type="checkbox" or type="radio", makes the option checked or chosen.
placeholder text Short hint which describes expected value
maxlength number Maximum number of characters allowed
required no value Sets the input to required field
readonly readonly Make input read only
disabled disabled Disables input element
autofocus no value Sets the focus on the element after page loads
autocomplete on | off Presents the user with previously entered values
form form-id Refers to the id of the form the <input> element belongs to
formaction URL For type="submit" and type="image", URL or path of the file the submitted data will be processed
formtarget _blank
_self
_parent
_top
framename
For type="submit" and type="image", indicates where the response should be displayed
formenctype
application/x-www-form-urlencoded
multipart/form-data
text/plain
For type="submit" and type="image", how the form data submitted shall be encoded to the server
formmethod get
post
For type="submit" and type="image", the HTTP method for sending form data
formnovalidate formnovalidate Avoids the form being validated after submission
accept file-extension
audio/*
video/*
image/*
media_type
For type="file", indicates what file types user can pick to upload
min number
date
Minimum value
max number
date
Maximum value
step number
any
Interval between legal numbers
multiple multiple Allows users to choose more than one value from selection
pattern regexp Regular expression that an <input> element's value is checked against
size number Input control's width in number of characters
src URL For type="image", specifies the image URL or path to be used as submit button
alt text For type="image", specifies text to display when image cannot be loaded
width pixels Width of the input element in pixels. Used by img input types.
height pixels Height of element in pixels. Used by img input types
list datalist-id <datalist> element that contains pre-defined options for an <input> element
dirname inputname Text direction to be submitted

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.

Attribute Description Alternative
autocorrect Specifies to use autocorrection while the user types. n/a
incremental Specifies to treat data entry as live search. n/a
mozactionhint Suggests what to do when enter or return keys are hit. n/a
results Sets maximum number of entries in search results. n/a
webkitdirectory Specifies file picker should only include directories. n/a

Additional Examples


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.

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

Form Tags

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, these tags allow you to create comprehensive data input solutions.

Here is a list of form tags

Element Description
<form> Defines a data entry area that contains input elements
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<textarea> Creates a multi-line text input control
<select> Creates a dropdown control
<button> Creates a clickable button that can contain text or an image
<datalist> Specifies a list of options for a textfield (<input>) element
<fieldset> Groups related form elements and displays a box with a legend around these
<legend> Defines a caption for a fieldset

Browser support

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.


You may also like

Guides