HTML <input> Element

The HTML <input> tag represents an input element - a control that allows the user to input data.

The <input> element can represent many different types of input. For example, it can provide a control for the user to enter text. It can represent radio buttons so that the user can select one option only out of multiple options. It can represent a checkbox so that the user can select more than one option from multiple options. It can represent many other controls such as a password field, datetime field, submit button, email address field and more.

The basic tag is written like this <input type=" name="> with the type of control written between the opening/closing quotes of the type attribute. The name attribute is used to give the input element a name. This assists with processing the data once submitted - it distinguishes this form field from any others.

Example

The following example shows how this element works.

Code

<form action="/html-elements/html-form-tag-action.php" method="get">
Name:
<input type="text" name="name" value=" maxlength="90" style="width:100px;">
<br>
Pick a color:
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green"> Green
<input type="radio" name="color" value="blue"> Blue
<br>
<input type="submit" value="Submit">
</form>

Result

Attributes

The <input> element accepts the following attributes.

Local Attributes

The following attributes are defined in the <input> element's specification.

Attribute Description

Specifies a comma-separated list of content types that the server accepts.

Possible values:

audio/*
video/*
image/*
[A valid MIME type, with no parameters]
[A string whose first character is a "." (U+002E) character] (for specifying a file extension)

You can specify both any MIME types and any corresponding extensions. For example, <input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

alt Alternate text. This specifies text to be used in case the browser/user agent can't render the input control. This should be descriptive text.

autocomplete

Specifies whether the browser should use "autocomplete" with this control. This can be useful for fields that accept sensitive data, such as banking details etc.

Possible values:

on (default value)
off

autofocus

The autofocus attribute automatically gives focus to a control when the page loads. This allows the user to start using the control without having to select it first. Because of its purpose, there must not be more than one element in the document with the autofocus attribute specified.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either autofocus or autofocus="autofocus").

Possible values:

[Empty string]
autofocus

checked This attribute ensures that the input control is already selected when the page loads. Used with type="radio" or type="checkbox".

disabled

Disables the input control. The control won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.

Possible values:

[Empty string]
disabled

dirname

Determines the direction of the text as submitted in the input field. The value of this attribute can be a string of text such as a name for the field. For example, if you specify the attribute as dirname="text_dir", once the form has been submitted, the data might look like this: text_dir=ltr.

form

Specifies the ID of a form to which this control belongs.

Possible values:

[The ID of a form element in the element's owner Document]

formaction Specifies the URL of the file that will process the control when submitted.

formenctype

Specifies the content type used to encode the form data set when it's submitted to the server.

Possible values:

application/x-www-form-urlencoded (default)
multipart/form-data (use this when uploading files)
text/plain (use this when uploading files)

formmethod

Specifies the HTTP method to use when the control is submitted.

Possible values:

get (the form data is appended to the URL when submitted)
post (the form data is not appended to the URL)
dialog (Closes the dialog box in which the form finds itself, if any, and otherwise does not submit.)

formnovalidate

Specifies that the form is not to be validated during submission.

Possible values:

[Empty string]
novalidate

formtarget

Specifies the browsing context to load the destination indicated in the action attribute.

Possible values:

_blank
_self
_top
_parent

height Specifies the height of the control.

inputmode

Specifies what kind of input mechanism would be most helpful for users entering content into the form control.

Possible values:

Value	Description
`verbatim`	Default. Alphanumeric Latin-script input of non-prose content, e.g. usernames, passwords, product codes.
`latin`	Latin-script input in the user's preferred language(s), with some typing aids enabled (e.g. text prediction). Intended for human-to-computer communications, e.g. free-form text search fields.
`latin-name`	Latin-script input in the user's preferred language(s), with typing aids intended for entering human names enabled (e.g. text prediction from the user's contact list and automatic capitalisation at every word). Intended for situations such as customer name fields.
`latin-prose`	Latin-script input in the user's preferred language(s), with aggressive typing aids intended for human-to-human communications enabled (e.g. text prediction and automatic capitalisation at the start of sentences). Intended for situations such as e-mails and instant messaging.
`full-width-latin`	Latin-script input in the user's secondary language(s), using full-width characters, with aggressive typing aids intended for human-to-human communications enabled (e.g. text prediction and automatic capitalisation at the start of sentences). Intended for latin text embedded inside CJK text.
`kana`	Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
`kana-name`	Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji, and with typing aids intended for entering human names enabled (e.g. text prediction from the user's contact list). Intended for situations such as customer name fields.
`katakana`	Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
`numeric`	Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. (For numbers, prefer `<input type="number">`.)
`tel`	Telephone number input, including keys for the digits 0 to 9, the "#" character, and the "*" character. In some locales, this can also include alphabetic mnemonic labels (e.g. in the US, the key labeled "2" is historically also labeled with the letters A, B, and C). Rarely necessary; use `<input type="tel">` instead.
`email`	Text input in the user's locale, with keys for aiding in the input of e-mail addresses, such as that for the "@" character and the "." character. Rarely necessary; use `<input type="email">` instead.
`url`	Text input in the user's locale, with keys for aiding in the input of Web addresses, such as that for the "/" and "." characters and for quick input of strings commonly found in domain names such as "www." or ".co.uk". Rarely necessary; use `<input type="url">` instead.

list Specifies a datalist element to use for a list of predefined options for the user. The value must be the ID of a datalist element in the same document.

max Specifies the maximum value for the control. The user won't be able to enter a higher value than is listed here.

maxlength Specifies the maximum number of characters that the user is allowed to enter into the text field. The user will be prevented from entering any more characters than the number provided here.

min Specifies the minimum value for the control. The user won't be able to enter a lower value than is listed here.

minlength Specifies a lower bound on the number of characters a user can input.

multiple

Specifies whether the user is allowed to enter more than one value.

Possible values:

[Empty string]
multiple

name Assigns a name to the input control. This assists with processing the data once submitted - it distinguishes this form field from any others.

pattern Specifies a regular expression against which the control's value is to be checked. Value must match the Pattern production of ECMA 262's grammar.

placeholder

Specifies a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format.

Note that the placeholder attribute's value should be short. For a longer hint or other advisory text, the (global) title attribute is more appropriate (see Global Attributes below).

Also, the placeholder attribute should not be used in place of the <label> element.

readonly

Sets the input control to read-only - it won't allow the user to change the value. Despite this, this <input> element can still receive focus and are included when tabbing through the form controls.

Possible values:

[Empty string]
readonly

required

Specifies that this <input> element is a required field (the user must complete this field).

Possible values:

[Empty string]
required

size Specifies the width of this <input> control, in characters. Value that is a valid non-negative integer greater than zero.

src If type="image", this attribute specifies the location of the image.

step Specifies the granularity that is expected (and required) of the value, by limiting the allowed values.

type

Specifies the type of control.

Possible values:

Value	Data Type	Control Type
`hidden`	An arbitrary string	N/A
`text`	Text with no line breaks	Text field
`search`	Text with no line breaks	Text field
`tel`	Text with no line breaks	Text field
`url`	An absolute IRI	Text field
`email`	An email address or list of email addresses	Text field
`password`	Text with no line breaks (sensitive information)	Text field that obscures data entry (eg, hides the password by using asterisks (******) or similar)
`datetime`	A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC	Date and time control
`date`	A date (year, month, day) with no time zone	Date control
`month`	A date consisting of a year and a month with no time zone	A month control
`week`	A date consisting of a week-year number and a week number with no time zone	A week control
`time`	A time (hour, minute, seconds, fractional seconds) with no time zone	A time control
`datetime-local`	A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone	Date and time control
`number`	A numerical value	Text field or spinner control
`range`	A numerical value, with the extra semantic that the exact value is not important	Slider control or similar
`color`	An sRGB color with 8-bit red, green, and blue components	A color well. Enables the user to select a color.
`checkbox`	A set of zero or more values from a predefined list	Checkbox
`radio`	An enumerated value	Radio button
`file`	Zero or more files each with a MIME type and optionally a file name	A label and a button
`submit`	An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission	Button
`image`	A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission	Either a clickable image, or a button
`reset`	N/A	Button
`button`	N/A	Button

value Specifies a default value for the control. Note: If type="checkbox" or type="radio" this attribute is required.

width Specifies the width of the control.

Global Attributes

The <input> element accepts the following global attributes. These attributes are standard across all HTML 5 elements.

Attribute Description

accesskey

Specifies a shortcut key that can be used to access this <input> element.

Possible values.

[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]

class This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use.

contenteditable

This attribute specifies whether the user can edit the content or not.

Possible values:

true
false

contextmenu The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM.

dir

Specifies the direction of the text.

Possible values:

Value	Description
ltr	Specifies that the text should read left to right.
rtl	The text should read right to left.
auto	The text direction should be determined programatically using the contents of the element.

draggable

Specifies whether the user is allowed to drag this <input> element or not.

Possible values:

true
false
auto

Value	Description
true	This value specifies that the element is draggable.
false	A `false` value specifies that the element is not draggable.
auto	Uses the default behavior of the user agent/browser. This is the default value.

dropzone

The dropzone attribute specifies what should happen when the user "drops" an element (i.e. after dragging it) onto this <input> element.

Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.

Possible values:

Value	Description
copy	Results in a copy of the dragged data. Default value.
move	Results in the data being moved to the new location.
link	Results in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string "`string:`"	Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string "`file:`"	Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: `dropzone="copy file:image/png file:image/gif file:image/jpeg"`

Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

hidden

Indicates that this particular <input> element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.

Possible values:

[Empty string]
hidden

id The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.

itemid

The itemid provides a global identifier for an "item". This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.

The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary's specification.

itemprop

This attribute provides one or more properties to one or more "items".

Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute's value must have at least one token. Each token must be one of the following:

A valid URL that is an absolute URL, or
If the item is a typed item: a "defined property name" allowed in this situation according to the specification that defines the relevant types for the item, or
If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:).

Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.

itemref

This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the "item". Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.

itemscope

HTML5 elements that have the itemscope attribute create a name-value pair called an "item". Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.

Possible values:

[Empty string]
itemscope

itemtype

This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute's value must have at least one token.

The itemtype attribute must only be present in elements that include the itemscope attribute.

lang

Sets the language code to be used.

Possible values:

[Must be a valid RFC 3066 language code, or an empty string.]

spellcheck

Specifies whether the element should have its spelling checked.

Value	Description
[Empty string]	The element should have its spelling checked.
true	The element should have its spelling checked.
false	The element should not have its spelling checked.

If this attribute is missing, the element will use the default behavior, possibly based on the parent's own spellcheck state.

style Specifies inline styles for this <input> element. This allows you to define the styles within the page, and within this <input> tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.

tabindex

Helps determine the tabbing order for the element (for when the user uses the "tab" key on their keyboard to "tab" through the elements on the page in order to select an element).

Possible values:

[Any valid integer. For example, 0, 1, 2, 3, ...etc]

title

Specifies a title to associate with this particular <input> element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").

Possible values:

[Any text to be displayed as a "tool tip".]

translate

Determines whether the element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The translate attribute is an enumerated attribute and may contain the following possible values:

[Empty String]
yes
no

If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.

Event Handlers

This element also accepts various event handlers. Event handlers are commonly used to extend the functionality of an HTML element.

For a list of event handlers that you can use with this element, see Event handlers on elements, Document objects, and Window objects at the W3C website.

More Information About the `<input>` Element

Content Categories	Flow content. Phrasing content. If the `type` attribute is not in the `Hidden` state: Interactive content. If the `type` attribute is not in the `Hidden` state: Listed, labelable, submittable, resettable, and reassociateable form-associated element. If the `type` attribute is in the `Hidden` state: Listed, submittable, resettable, and reassociateable form-associated element. If the `type` attribute is not in the `Hidden` state: Palpable content.
Can be used	Where phrasing content is expected.
Content model	Empty.
End Tag Required?	No. You can only use a start tag when using the `<input>` element, it must not have a closing tag. Right: `<input>` Wrong: `<input></input>`
DOM Interface	`HTMLInputElement`

Specifications for the `<input>` Element

Here is the <input> element defined in the various specifications:

W3C (HTML5)
WHATWG (HTML Living Standard)
W3C HTML 4.01 Specification (previous version of HTML)

HTML <input> Element

Example

Code

Result

Attributes

Local Attributes

Global Attributes

Event Handlers

More Information About the <input> Element

Specifications for the <input> Element

More Information About the `<input>` Element

Specifications for the `<input>` Element