Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Compare Revisions

<input>

Change Revisions

Revision 11003:

Revision 11003 by Sheppy on

Revision 287229:

Revision 287229 by ikr on

Title:
input
input
Slug:
HTML/Element/Input
HTML/Element/Input
Tags:
HTML, HTML:Element, "HTML:Element Reference", Forms, NeedsMobileBrowserCompatibility, Fixit, MakeBrowserAgnostic
HTML, HTML:Element, "HTML:Element Reference", Forms, NeedsMobileBrowserCompatibility, Fixit, MakeBrowserAgnostic
Content:

Revision 11003
Revision 287229
n7    <h2>n7    <h2 id="Summary">
n13    <h2>n13    <h2 id="Usage_context">
n52    <h2>n52    <h2 id="Attributes">
n72            <code>color</code>: {{ HTMLVersionInline("5") }} A con72            <code>color</code>: {{ HTMLVersionInline(5) }} A cont
>ntrol for specifying a color.>rol for specifying a color.
73          </li>
74          <li>73          </li>
74          <li>
75            <code>date</code>: {{ HTMLVersionInline("5") }} A con75            <code>date</code>: {{ HTMLVersionInline(5) }} A contr
>trol for entering a date (year, month, and day, with no time).>ol for entering a date (year, month, and day, with no time).
76          </li>
77          <li>76          </li>
77          <li>
78            <code>datetime</code>: {{ HTMLVersionInline("5") }} A78            <code>datetime</code>: {{ HTMLVersionInline(5) }} A c
> control for entering a date and time (hour, minute, second, and >ontrol for entering a date and time (hour, minute, second, and fr
>fraction of a second) based on UTC time zone.>action of a second) based on UTC time zone.
79          </li>
80          <li>79          </li>
80          <li>
81            <code>datetime-local</code>: {{ HTMLVersionInline("5"81            <code>datetime-local</code>: {{ HTMLVersionInline(5) 
>) }} A control for entering a date and time, with no time zone.>}} A control for entering a date and time, with no time zone.
82          </li>
83          <li>82          </li>
83          <li>
84            <code>email</code>: {{ HTMLVersionInline("5") }} A fi84            <code>email</code>: {{ HTMLVersionInline(5) }} A fiel
>eld for editing an e-mail address. The {{ cssxref(":valid") }} an>d for editing an e-mail address. The {{ cssxref(":valid") }} and 
>d {{ cssxref(":invalid") }}&nbsp;CSS pseudo-classes are applied a>{{ cssxref(":invalid") }}&nbsp;CSS pseudo-classes are applied as 
>s appropriate.>appropriate.
n96            <code>month</code>: {{ HTMLVersionInline("5") }} A con96            <code>month</code>: {{ HTMLVersionInline(5) }} A cont
>ntrol for entering a month and year, with no time zone.>rol for entering a month and year, with no time zone.
97          </li>
98          <li>97          </li>
98          <li>
99            <code>number</code>: {{ HTMLVersionInline("5") }} A c99            <code>number</code>: {{ HTMLVersionInline(5) }} A con
>ontrol for entering a floating point number.>trol for entering a floating point number.
n108            <code>range</code>: {{ HTMLVersionInline("5") }} A con108            <code>range</code>: {{ HTMLVersionInline(5) }} A cont
>ntrol for entering a number whose exact value is not important. T>rol for entering a number whose exact value is not important. Thi
>his type control uses the following default values if the corresp>s type control uses the following default values if the correspon
>onding attributes are not specified:>ding attributes are not specified:
n128            <code>search</code>: {{ HTMLVersionInline("5") }} A sn128            <code>search</code>: {{ HTMLVersionInline(5) }} A sin
>ingle-line text field for entering search strings; line-breaks ar>gle-line text field for entering search strings; line-breaks are 
>e automatically removed from the input value.>automatically removed from the input value.
n134            <code>tel</code>: {{ HTMLVersionInline("5") }} A contn134            <code>tel</code>: {{ HTMLVersionInline(5) }} A contro
>rol for entering a telephone number; line-breaks are automaticall>l for entering a telephone number; line-breaks are automatically 
>y removed from the input value, but no other syntax is enforced. >removed from the input value, but no other syntax is enforced. Yo
>You can use attributes such as <strong>pattern</strong> and <stro>u can use attributes such as <strong>pattern</strong> and <strong
>ng>maxlength</strong> to restrict values entered in the control. >>maxlength</strong> to restrict values entered in the control. Th
>The {{ cssxref(":valid") }} and {{ cssxref(":invalid") }}&nbsp;CS>e {{ cssxref(":valid") }} and {{ cssxref(":invalid") }}&nbsp;CSS 
>S pseudo-classes are applied as appropriate.>pseudo-classes are applied as appropriate.
n140            <code>time</code>: {{ HTMLVersionInline("5") }} A conn140            <code>time</code>: {{ HTMLVersionInline(5) }} A contr
>trol for entering a time value with no time zone.>ol for entering a time value with no time zone.
141          </li>
142          <li>141          </li>
142          <li>
143            <code>url</code>: {{ HTMLVersionInline("5") }} A fiel143            <code>url</code>: {{ HTMLVersionInline(5) }} A field 
>d for editing a URL. The user may enter a blank or invalid addres>for editing a URL. The user may enter a blank or invalid address.
>s. Line-breaks are automatically removed from the input value. Yo> Line-breaks are automatically removed from the input value. You 
>u can use attributes such as <strong>pattern</strong> and <strong>can use attributes such as <strong>pattern</strong> and <strong>m
>>maxlength</strong> to restrict values entered in the control. Th>axlength</strong> to restrict values entered in the control. The 
>e {{ cssxref(":valid") }} and {{ cssxref(":invalid") }}&nbsp;CSS >{{ cssxref(":valid") }} and {{ cssxref(":invalid") }}&nbsp;CSS ps
>pseudo-classes are applied as appropriate.>eudo-classes are applied as appropriate.
144          </li>
145          <li>144          </li>
145          <li>
146            <code>week</code>: {{ HTMLVersionInline("5") }} A con146            <code>week</code>: {{ HTMLVersionInline(5) }} A contr
>trol for entering a date consisting of a week-year number and a w>ol for entering a date consisting of a week-year number and a wee
>eek number with no time zone.>k number with no time zone.
n159            <code>audio/*</code> representing sound files {{ HTMLn159            <code>audio/*</code> representing sound files {{ HTML
>VersionInline("5") }}>VersionInline(5) }}
160          </li>
161          <li>160          </li>
161          <li>
162            <code>video/*</code> representing video files {{ HTML162            <code>video/*</code> representing video files {{ HTML
>VersionInline("5") }}>VersionInline(5) }}
163          </li>
164          <li>163          </li>
164          <li>
165            <code>image/*</code> representing image files {{ HTML165            <code>image/*</code> representing image files {{ HTML
>VersionInline("5") }}>VersionInline(5) }}
n170        {{ htmlattrdef("accesskey") }} {{ HTMLVersionInline("4"n170        {{ htmlattrdef("accesskey") }} {{ HTMLVersionInline(4) }}
>}} only, {{ obsoleteGeneric("inline", "HTML5") }}> only, {{ obsoleteGeneric("inline", "HTML5") }}
n182        {{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline("5n182        {{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5)
>") }}> }}
n199        {{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5"n199        {{ htmlattrdef("autofocus") }} {{ HTMLVersionInline(5) }}
>}} 
n214        This Boolean attribute indicates that the form control isn214        This Boolean attribute indicates that the form control is
> not available for interaction. In particular, the <code>click</c> not available for interaction. In particular, the <code>click</c
>ode> event <a class="external" href="http://www.whatwg.org/specs/>ode> event <a class="external" href="http://www.whatwg.org/specs/
>web-apps/current-work/multipage/association-of-controls-and-forms>web-apps/current-work/multipage/association-of-controls-and-forms
>.html#enabling-and-disabling-form-controls" title="http://www.wha>.html#enabling-and-disabling-form-controls" title="http://www.wha
>twg.org/specs/web-apps/current-work/multipage/association-of-cont>twg.org/specs/web-apps/current-work/multipage/association-of-cont
>rols-and-forms.html#enabling-and-disabling-form-controls">will no>rols-and-forms.html#enabling-and-disabling-form-controls">will no
>t be dispatched</a> on disabled controls.<br>>t be dispatched</a> on disabled controls. Also, a disabled contro
 >l's value isn't submitted with the form.<br>
n220        {{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}n220        {{ htmlattrdef("form") }} {{ HTMLVersionInline(5) }}
n226        {{ htmlattrdef("formaction") }}{{ HTMLVersionInline("5"n226        {{ htmlattrdef("formaction") }}{{ HTMLVersionInline(5) }}
>}} 
n232        {{ htmlattrdef("formenctype") }}{{ HTMLVersionInline("5")n232        {{ htmlattrdef("formenctype") }}{{ HTMLVersionInline(5) }
> }}>}
n252        {{ htmlattrdef("formmethod") }}{{ HTMLVersionInline("5"n252        {{ htmlattrdef("formmethod") }}{{ HTMLVersionInline(5) }}
>}} 
n269        {{ htmlattrdef("formnovalidate") }}{{ HTMLVersionInline("n269        {{ htmlattrdef("formnovalidate") }}{{ HTMLVersionInline(5
>5") }}>) }}
n275        {{ htmlattrdef("formtarget") }}{{ HTMLVersionInline("5"n275        {{ htmlattrdef("formtarget") }}{{ HTMLVersionInline(5) }}
>}} 
n294        {{ htmlattrdef("height") }} {{ HTMLVersionInline("5") }}n294        {{ htmlattrdef("height") }} {{ HTMLVersionInline(5) }}
n300        {{ htmlattrdef("list") }} {{ HTMLVersionInline("5") }}n300        {{ htmlattrdef("list") }} {{ HTMLVersionInline(5) }}
n306        {{ htmlattrdef("max") }} {{ HTMLVersionInline("5") }}&nbsn306        {{ htmlattrdef("max") }} {{ HTMLVersionInline(5) }}&nbsp;
>p; 
n312        {{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5"n312        {{ htmlattrdef("maxlength") }} {{ HTMLVersionInline(5) }}
>}} 
n318        {{ htmlattrdef("min") }} {{ HTMLVersionInline("5") }}&nbsn318        {{ htmlattrdef("min") }} {{ HTMLVersionInline(5) }}&nbsp;
>p; 
n324        {{ htmlattrdef("multiple") }}{{ HTMLVersionInline("5") }}n324        {{ htmlattrdef("multiple") }}{{ HTMLVersionInline(5) }}
n336        {{ htmlattrdef("pattern") }}{{ HTMLVersionInline("5") }}n336        {{ htmlattrdef("pattern") }}{{ HTMLVersionInline(5) }}
n342        {{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5"n342        {{ htmlattrdef("placeholder") }} {{ HTMLVersionInline(5) 
>) }}>}}
n356          {{ HTMLVersionInline("5") }} This attribute is ignored n356          {{ HTMLVersionInline(5) }} This attribute is ignored if
>if the value of the <strong>type</strong> attribute is <span styl> the value of the <strong>type</strong> attribute is <span style=
>e="font-family: Courier New;">hidden</span>, <span style="font-fa>"font-family: Courier New;">hidden</span>, <span style="font-fami
>mily: Courier New;">range</span>, <span style="font-family: Couri>ly: Courier New;">range</span>, <span style="font-family: Courier
>er New;">color</span>, <span style="font-family: Courier New;">ch> New;">color</span>, <span style="font-family: Courier New;">chec
>eckbox</span>, <span style="font-family: Courier New;">radio</spa>kbox</span>, <span style="font-family: Courier New;">radio</span>
>n>, <span style="font-family: Courier New;">file</span>, or a but>, <span style="font-family: Courier New;">file</span>, or a butto
>ton type.>n type.
n360        {{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }n360        {{ htmlattrdef("required") }} {{ HTMLVersionInline(5) }}
>} 
n366        {{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInln366        {{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInl
>ine("5") }}>ine(5) }}
n378        {{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline("5")n378        {{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }
> }}>}
n390        {{ htmlattrdef("step") }} {{ HTMLVersionInline("5") }}n390        {{ htmlattrdef("step") }} {{ HTMLVersionInline(5) }}
n396        {{ htmlattrdef("tabindex") }} element-specific in {{ HTMLn396        {{ htmlattrdef("tabindex") }} element-specific in {{ HTML
>VersionInline("4") }}, global in {{ HTMLVersionInline("5") }}>VersionInline(4) }}, global in {{ HTMLVersionInline(5) }}
n402        {{ htmlattrdef("usemap") }}&nbsp;{{ HTMLVersionInline("4"n402        {{ htmlattrdef("usemap") }}&nbsp;{{ HTMLVersionInline(4) 
>) }} only, {{ obsoleteGeneric("inline", "HTML5") }}>}} only, {{ obsoleteGeneric("inline", "HTML5") }}
n415        {{ htmlattrdef("width") }} {{ HTMLVersionInline("5") }}n415        {{ htmlattrdef("width") }} {{ HTMLVersionInline(5) }}
n427    <h2>n427    <h2 id="_Notes">
n431    <h3>n431    <h3 id="File_inputs">
n449    <h3>n449    <h3 id="Error_messages">
n461    <h2>n461    <h2 id="_DOM_interface">
n468    <h2>n468    <h2 id="Examples">
n471    <h3>n471    <h3 id="A_simple_input_box">
n481    <h3>n481    <h3 id="_A_common_use-case_senario">
n497    <h3>n497    <h3 id="Using_mozactionhint_on_Firefox_mobile">
n512    <h2>n512    <h2 id="_Browser_compatibility">
n632              {{ unimplemented_inline("547004") }}n632              {{ unimplemented_inline(547004) }}
n653              {{ unimplemented_inline("446510") }}n653              {{ unimplemented_inline(446510) }}
n674              {{ unimplemented_inline("446510") }}n674              {{ unimplemented_inline(446510) }}
n695              {{ unimplemented_inline("446510") }}n695              {{ unimplemented_inline(446510) }}
n796              {{ unimplemented_inline("446510") }}n796              {{ unimplemented_inline(446510) }}
n817              {{ unimplemented_inline("344616") }}n817              {{ unimplemented_inline(344616) }}
n880              {{ unimplemented_inline("344618") }}n880              {{ unimplemented_inline(344618) }}
n1001              {{ unimplemented_inline("446510") }}n1001              {{ unimplemented_inline(446510) }}
n1042              {{ unimplemented_inline("446510") }}n1042              {{ unimplemented_inline(446510) }}
n1063              {{ unimplemented_inline("565274") }}n1063              {{ unimplemented_inline(565274) }}
n1753    <h3>n1753    <h3 id="Gecko_notes">
t1765    <h2>t1765    <h2 id="See_also">

Back to History