HTML - <input>

The HTML element <input> is used to create interactive controls for web-based forms in order to accept data from the user. How an <input> works varies considerably depending on the value of its type attribute.

Description  

The HTML element <input> is used to create interactive controls for web-based forms in order to accept data from the user. How an <input> works varies considerably depending on the value of its type attribute.

Content categories Flow content, listed, submittable, resettable, form-associated element, phrasing content.
If the type is not hidden, then labellable element, palpable content.
Permitted content None, it is an empty element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parent elements Any element that accepts phrasing content.
DOM interface HTMLInputElement

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) (Yes)[1] 1.0 1.0
type 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=button 1.0 1.0 (1.7 or earlier) 3 1.0 1.0
type=checkbox 1.0 1.0 (1.7 or earlier)
3.6 (1.9.2)[2]
2 1.0 1.0
type=color 21.0 29.0 (29.0) No support 11.01 No support
type=date 5.0[24] No support[3] No support 10.62 (Yes)[4]
type=datetime No support[4] No support[3] No support 10.62 (Yes)[4]
type=datetime-local 5.0 No support[3] No support 10.62 (Yes)[4]
type=email 5.0 4.0 (2.0) 10 10.62 ?
type=file 1.0 1.0 (1.7 or earlier) 3.02 1.0 1.0
type=hidden 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=image 1.0 1.0 (1.7 or earlier)[5] 2 1.0 1.0
type=month 5.0 No support[6] No support 10.62 (Yes)[4]
type=number 6.0[7] 29.0 (29.0) 10[4] 10.62 (Yes)
type=password 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=radio 1.0 1.0 (1.7 or earlier)
3.6 (1.9.2)[2]
2 1.0 1.0
type=range 5.0 23.0 (23.0) 10 10.62[8] (Yes)
type=reset 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=search 5.0 4.0 (2.0) 10 11.01 (Yes)
type=submit 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=tel 5.0 4.0 (2.0) 10 11.01 ?
type=text 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
type=time 5.0 No support[3] No support 10.62 (Yes)[4]
type=url 5.0 4.0 (2.0) 10 10.62 ?
type=week 5.0 No support[3] No support 10.62 (Yes)[4]
accept=[file extension] (Yes) No support 10 ? No support
accept=[MIME type] 8.0 16.0 (16.0) 10 10 No support
accept=audio/* (Yes) 4.0 (2.0)[9] 10 No support No support
accept=video/* (Yes) 4.0 (2.0)[10] 10 No support No support
accept=image/* (Yes) 4.0 (2.0)[11] 10 No support No support
accept=[. + ext] ? 37.0 (37.0) ? ? ?
accesskey 1.0 (Yes) 6 1.0 ?
mozactionhint No support 4.0 (2.0) No support No support No support
autocapitalize 43 ? ? ? (Yes)
autocomplete 17.0 4.0 (2.0) 5 9.6 5.2
autofocus 5.0 4.0 (2.0) 10 9.6 5.0
capture Chrome for Android (0.16) ? ? ? ?
checked 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
disabled 1.0 1.0 (1.7 or earlier)[25] 6 1.0 1.0
form 9.0 4.0 (2.0) ? 10.62 ?
formaction 9.0 4.0 (2.0) 10 10.62 5.2
formenctype 9.0 4.0 (2.0) 10 10.62 ?
formmethod 9.0 4.0 (2.0) 10 10.62 5.2
formnovalidate 5.0[12] 4.0 (2.0) 10 10.62 ?
formtarget 9.0 4.0 (2.0) 10 10.62 5.2
height 1.0 16.0 (16.0) ? 1.0 ?
incremental (Yes) No support No support No support (Yes)
inputmode No support No support No support No support No support
list 20.0 4.0 (2.0) 10 9.6 No support
max 5.0 16.0 (16.0) ? 10.62 ?
maxlength 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
min 5.0 16.0 (16.0) ? 10.62 ?
minlength 40.0 ? ? ? ?
multiple 1.0[13] 3.6 (1.9.2)[14]
(Yes)[15]
10 1.0
10.62[14]
11.01[15]
?
name 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
pattern 5.0 4.0 (2.0) 10 9.6 No support
placeholder 10.0 4.0 (2.0) 10 11.00 5.0
readonly 1.0 1.0 (1.7 or earlier) 6[16] 1.0 1.0
required 5.0
10[17]
4.0 (2.0) 10 9.6 No support
size 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
spellcheck 10.0 3.6 (1.9.2) 10 11.0 4.0
src 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
step 6.0 16.0 (16.0) 10 10.62 5.0
tabindex 1.0 1.0 (1.7 or earlier) 6[18] (Yes) ?
webkitdirectory (Yes) 49.0 (49.0) ? (Yes) (Yes)
width 1.0 16.0 (16.0) ? 1.0 ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)
type (Yes) (Yes) (Yes) (Yes) (Yes)
type=button (Yes) (Yes)[27] (Yes) (Yes) (Yes)
type=checkbox (Yes) (Yes) (Yes) (Yes) (Yes)
type=color ? 27.0 (27.0) ? (Yes) ?
type=date No support No support No support 10.62 5.0[23]
type=datetime No support No support No support 10.62 (Yes)[23]
type=datetime-local No support No support No support 10.62 (Yes)[23]
type=email ? 4.0 (2.0) ? (Yes) 3.1[19]
type=file ? ?[27] ? ? (Yes)[21]
type=hidden (Yes) (Yes) (Yes) (Yes) (Yes)
type=image (Yes) (Yes) (Yes) (Yes) (Yes)
type=month No support No support No support 10.62 (Yes)[23]
type=number 2.3 29.0 (29.0) ? (Yes) 4.0[19]
type=password (Yes) (Yes) (Yes) (Yes) (Yes)[22]
type=radio (Yes) (Yes) (Yes) (Yes) (Yes)
type=range ? No support ? (Yes) 5.0
type=reset (Yes) (Yes) (Yes) (Yes) (Yes)
type=search ? 4.0 (2.0) ? 10.62 4.0[22]
type=submit (Yes) (Yes)[27] (Yes) (Yes) (Yes)
type=tel 2.3 4.0 (2.0) ? 10.62 3.1[22]
type=text (Yes) (Yes)[27] (Yes) (Yes) (Yes)[22]
type=time No support No support No support 10.62 (Yes)[23]
type=url ? 4.0 (2.0) ? 10.62 3.1[19]
type=week No support No support No support 10.62 (Yes)
accept=[MIME type] ? ? ? ? ?
accept=audio/* ? ? ? ? ?
accept=image/* ? ?[26] ? ? ?
accept=video/* ? ? ? ? ?
accept=[. + ext] ? 37.0 (37.0) ? ? ?
accesskey ? ? ? ? ?
autocomplete ? 4.0 (2.0) (Yes) (Yes) (Yes)
autofocus 3.2 4.0 (2.0) ? (Yes) ?
capture 3.0 10.0 (10.0) ? ? 6.0
checked (Yes) (Yes) (Yes) (Yes) (Yes)
disabled (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)
form ? ? ? ? ?
formaction ? 4.0 (2.0) ? 10.62 5.0
formenctype ? ? ? ? ?
formmethod ? 4.0 (2.0) ? 10.62 5.0
formnovalidate ? 4.0 (2.0) ? 10.62 ?
formtarget ? 4.0 (2.0) ? 10.62 5.0
height ? 16.0 (16.0) ? ? ?
list No support 4.0 (2.0) ? (Yes) ?
max ? 16.0 (16.0)[20] ? 10.62 ?
maxlength (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)
min ? 16.0 (16.0)[20] ? 10.62 ?
minlength ? No support ? 27.0 ?
multiple ? (Yes) ? (Yes) ?
name (Yes) 4.0 (2.0) (Yes) (Yes) 1.0
pattern ? 4.0 (2.0) ? (Yes) (Yes)
placeholder 2.3 4.0 (2.0) ? 11.10 4
readonly (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)
required ? (Yes) ? (Yes) ?
size (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)
spellcheck ? 4.0 (2.0) ? 11.0 ?
src ? ? ? ? ?
step ? 16.0 (16.0)[20] ? 10.62 ?
tabindex ? ? ? ? ?
webkitdirectory (Yes) 49.0 (49.0) ? (Yes) (Yes)
width ? 16.0 (16.0) ? ? ?

[1] This was implemented in version 2 or earlier.

[2] Implemented for indeterminate value.

[3] This feature is not implemented yet. See bug 825294.

[4] It is recognized but there is no UI.

[5] Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) only sends x and y coordinates when clicked, no longer the name/value of the element.

[6] This feature is not implemented yet. See bug 888320.

[7] Localization in Chrome 11.

[8] Opera 11.01 added support for a default value.

[9] Filters for the following audio file extensions: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma.

[10] Filters for the following video file extensions: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid

[11] Filters for the following image file extensions: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw

[12] In 6.0 it only worked with the HTML5 document type, validation support in 7.0 was disabled and re-enabled in 10.0.

[13] Supported for type="file" and type="email" as of version 5.0.

[14] Supported for type="file".

[15] Supported for type="email".

[16] Missing for type="checkbox" and type="radio".

[17] Supported for <select> element.

[18] Elements with tabindex > 0 are not navigated.

[19] No validation but provides a specific keyboard. Safari Mobile for iOS applies a default style of opacity: 0.4 to disabled textual <input> elements. Other major browsers don't currently share this particular default style.

[20] UI might remain unimplemented.

[21] File uploads were broken in Mobile Safari for iOS 8.0 and 8.0.1. The bug was fixed in iOs 8.0.2.

[22] Safari Mobile for iOS applies a default style of opacity: 0.4 to disabled textual <input> elements. Other major browsers don't currently share this particular default style.

[23] On Safari Mobile for iOS, setting display: block on an <input> of type="date", type="time", type="datetime", type="datetime-local", or type="month" causes the text within the <input> to become vertically misaligned. See WebKit bug 139848.

[24] As of Chrome v39, an <input> of type="date" styled with display: table-cell; width: 100%; will have a min-width imposed by Chrome and it cannot become narrower than this minimum width. See Chromium bug #346051.

[25] Firefox will, unlike other browsers, by default, persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> across page loads. Setting the value of the autocomplete attribute to off disables this feature; this works even when the autocomplete attribute would normally not apply to the <input> by virtue of its type. See bug 654072.

[26] Starting in Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply setting the accept attribute's value to image/* on their <input> of type="file" input.

[27] Firefox for Android sets a default background-image gradient on all type="file" inputs. This can be disabled using background-image: none;. It also sets a default border on them.

Notes  

File inputs

Note: Starting in Gecko 2.0, calling the click() method on an <input> element of type "file" opens the file picker and lets the user select files. See Using files from web applications for an example and more details.

You can't set the value of a file picker from a script; doing something like the following has no effect:

JavaScript
var e = getElementById("someFileInputElement");
e.value = "foo";

Error messages

If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:

HTML
<input type="email" x-moz-errormessage="Please specify a valid email address.">

Note, however, that this is not standard and will not have an effect on other browsers.

See Also  

Specifications  

Specification Status Comment
WHATWG HTML Living Standard
The definition of '<input>' in that specification.
Living Standard  
HTML Media Capture
The definition of '<input capture>' in that specification.
Candidate Recommendation Adds the capture element
HTML5
The definition of '<input>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<form>' in that specification.
Recommendation  

 

The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.

Firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"):

  • Try the language specified by a lang/xml:lang attribute on the element or any of its parents;
  • Try the language specified by any Content-Language HTTP header or
  • If none specified, use the browser's locale.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/input

Element Forms HTML HTML forms HTML input tag MakeBrowserAgnostic NeedsBrowserCompatibility NeedsMobileBrowserCompatibility Reference Web