HTML - <input>

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.

Browser Compatibility  

[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

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

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:

<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  

• Other form-related elements: <form>, <button>, <datalist>, <legend>, <label>, <select>, <optgroup>, <option>, <textarea>, <keygen>, <fieldset>, <output>, <progress> and <meter>.
• Cross-browser HTML5 placeholder text

Specifications  

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