<input> HTML input element
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
Try it
<label for="name">Name (4 to 8 characters):</label>
<input
type="text"
id="name"
name="name"
required
minlength="4"
maxlength="8"
size="10" />
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
<input> types
How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is text.
The available types are as follows:
| Type | Description | Basic Examples |
|---|---|---|
| button |
A push button with no default behavior displaying the value of the value attribute, empty by default.
|
|
| checkbox | A checkbox allowing single values to be selected/deselected. |
|
| color | A control for specifying a color; opening a color picker when active in supporting browsers. |
|
| date | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. |
|
| datetime-local | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. |
|
A field for editing an email address. Looks like a
text input, but has validation parameters and relevant
keyboard in supporting browsers and devices with dynamic keyboards.
|
|
|
| file |
A control that lets the user select a file.
Use the accept attribute to define the types of files that the control can select.
|
|
| hidden | A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden! | |
| image |
A graphical submit button. Displays an image defined by the src attribute.
The alt attribute displays if the image src is missing.
|
|
| month | A control for entering a month and year, with no time zone. |
|
| number | A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads. |
|
| password | A single-line text field whose value is obscured. Will alert user if site is not secure. |
|
| radio |
A radio button, allowing a single value to be selected out of multiple choices with the same name value.
|
|
| range |
A control for entering a number whose exact value is not important.
Displays as a range widget defaulting to the middle value.
Used in conjunction min and max to define the range of acceptable values.
|
|
| reset | A button that resets the contents of the form to default values. Not recommended. |
|
| search | A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. |
|
| submit | A button that submits the form. |
|
| tel | A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. |
|
| text | The default value. A single-line text field. Line-breaks are automatically removed from the input value. |
|
| time | A control for entering a time value with no time zone. |
|
| url |
A field for entering a URL. Looks like a text input, but
has validation parameters and relevant keyboard in supporting browsers
and devices with dynamic keyboards.
|
|
| week | A control for entering a date consisting of a week-year number and a week number with no time zone. |
|
| Obsolete values | ||
datetime |
A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. |
|
Attributes
The <input> element is so powerful because of its attributes; the type attribute, described with examples above, being the most important. Since every <input> element, regardless of type, is based on the HTMLInputElement interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.
This section provides a table listing all the attributes with a brief description. This table is followed by a list describing each attribute in greater detail, along with which input types they are associated with. Those that are common to most or all input types are defined in greater detail below. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.
Attributes for the <input> element include the global HTML attributes and additionally:
| Attribute | Type(s) | Description |
|---|---|---|
accept |
file |
Hint for expected file type in file upload controls |
alpha |
color |
Opacity of the color |
alt |
image |
alt attribute for the image type. Required for accessibility |
autocapitalize |
all except url, email, and password |
Controls automatic capitalization in inputted text. |
autocomplete |
all except checkbox, radio, and buttons |
Hint for form autofill feature |
capture |
file |
Media capture input method in file upload controls |
checked |
checkbox, radio |
Whether the command or control is checked |
colorspace |
color |
The color space that should be used for selecting the color value |
dirname |
hidden, text, search, url, tel, email |
Name of form field to use for sending the element's directionality in form submission |
disabled |
all | Whether the form control is disabled |
form |
all | Associates the control with a form element |
formaction |
image, submit |
URL to use for form submission |
formenctype |
image, submit |
Form data set encoding type to use for form submission |
formmethod |
image, submit |
HTTP method to use for form submission |
formnovalidate |
image, submit |
Bypass form control validation for form submission |
formtarget |
image, submit |
Browsing context for form submission |
height |
image |
Same as height attribute for <img>; vertical dimension |
list |
all except hidden, password, checkbox, radio, and buttons |
Value of the id attribute of the <datalist> of autocomplete options |
max |
date, month, |