The <input>
tag creates an input control that accepts data from the user.
This element is an absolute powerhouse with its support for different input types, such as, text fields, radio buttons, checkboxes, password fields, dates, and more.
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>
The <input>
tag creates different types of input controls.
The type attribute defines what type of input control will be rendered (see examples below).
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>
<input type="range" min="0" max="25" value="5" id="experience" name="experience" oninput="updateYear(this)">
<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.
Attribute | Value | Description |
---|---|---|
type |
text checkbox radio hidden button submit reset password file -------- color date datetime-local 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.
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 |
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..">
Three <input>
elements that are button types:
<input type="button" value="Button">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
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>
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>
An <input>
element of type password.
When entering a password the characters are hidden.
<input type="password" name="password" placeholder="Enter password..">
An <input>
element of type file.
Click the button to select a file.
<input type="file">
An <input>
element of type number.
Click the up/down buttons to increment/decrement by 1.
<input type="number" value="3">
An <input>
element of type date.
Click the control to select a date.
<input type="date">
An <input>
element of type time.
Click the control to select a time.
<input type="time">
An <input>
element of type range.
Slide the thumb to change the value (value is not visible).
<input type="range">
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
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 |
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.