html5/spec-author-view/number-state.html - view

File: [Public] / html5 / spec-author-view / number-state.html
Revision 1.591: download - view: text, annotated - select for diffs
Fri Dec 16 01:00:50 2011 UTC (13 years, 9 months ago) by mike
Branches: MAIN
CVS tags: HEAD

Mention some XSS risks explicitly. (whatwg r6875)

[updated by splitter]

<!doctype html> <html lang="en-US-x-Hixie"><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>4.10.7.1.13 Number state — HTML5: Edition for Web Authors</title><link href="style.css" rel="stylesheet"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><script src="link-fixup.js" type="text/javascript"></script><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><script type="text/javascript"> function getCookie(name) { var params = location.search.substr(1).split("&"); for (var index = 0; index < params.length; index++) { if (params[index] == name) return "1"; var data = params[index].split("="); if (data[0] == name) return unescape(data[1]); } var cookies = document.cookie.split("; "); for (var index = 0; index < cookies.length; index++) { var data = cookies[index].split("="); if (data[0] == name) return unescape(data[1]); } return null; } function load(script) { var e = document.createElement('script'); e.setAttribute('src', script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); document.body.appendChild(e); } function init() { if (location.search == '?slow-browser') return; var configUI = document.createElement('div'); configUI.id = 'configUI'; document.body.appendChild(configUI); if (document.getElementById('head')) load('toc.js'); load('dfn.js'); if (getCookie('profile') == '1') document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; fixBrokenLink(); } </script><script src="dfn.js" type="text/javascript"></script><script src="toc.js" type="text/javascript"></script><link href="states-of-the-type-attribute.html" rel="prev" title="4.10.7.1 States of the type attribute"> <link href="Overview.html#contents" rel="contents" title="Table of contents"> <link href="common-input-element-attributes.html" rel="next" title="4.10.7.2 Common input element attributes"> <body class="split chapter"><div class="head" id="head"> <div aria-haspopup="true" id="jumpIndexA-button" role="button" tabindex="0">jump <div id="jumpIndexA"><ul><li><a class="noindex" href="the-a-element.html#the-a-element">a</a><a class="noindex" href="the-abbr-element.html#the-abbr-element">abbr</a><a class="noindex" href="the-address-element.html#the-address-element">address</a><a class="noindex" href="the-area-element.html#the-area-element">area</a><a class="noindex" href="the-article-element.html#the-article-element">article</a><a class="noindex" href="the-aside-element.html#the-aside-element">aside</a><a class="noindex" href="the-audio-element.html#the-audio-element">audio</a></ul><ul><li><a class="noindex" href="the-b-element.html#the-b-element">b</a><a class="noindex" href="the-base-element.html#the-base-element">base</a><a class="noindex" href="the-bdi-element.html#the-bdi-element">bdi</a><a class="noindex" href="the-bdo-element.html#the-bdo-element">bdo</a><a class="noindex" href="the-blockquote-element.html#the-blockquote-element">blockquote</a><a class="noindex" href="the-body-element.html#the-body-element">body</a><a class="noindex" href="the-br-element.html#the-br-element">br</a><a class="noindex" href="the-button-element.html#the-button-element">button</a></ul><ul><li><a class="noindex" href="the-canvas-element.html#the-canvas-element">canvas</a><a class="noindex" href="the-caption-element.html#the-caption-element">caption</a><a class="noindex" href="the-cite-element.html#the-cite-element">cite</a><a class="noindex" href="the-code-element.html#the-code-element">code</a><a class="noindex" href="the-col-element.html#the-col-element">col</a><a class="noindex" href="the-colgroup-element.html#the-colgroup-element">colgroup</a><a class="noindex" href="the-command-element.html#the-command-element">command</a></ul><ul><li><a class="noindex" href="the-datalist-element.html#the-datalist-element">datalist</a><a class="noindex" href="the-dd-element.html#the-dd-element">dd</a><a class="noindex" href="the-del-element.html#the-del-element">del</a><a class="noindex" href="the-details-element.html#the-details-element">details</a><a class="noindex" href="the-dfn-element.html#the-dfn-element">dfn</a><a class="noindex" href="the-div-element.html#the-div-element">div</a><a class="noindex" href="the-dl-element.html#the-dl-element">dl</a><a class="noindex" href="the-dt-element.html#the-dt-element">dt</a></ul><ul><li><a class="noindex" href="the-em-element.html#the-em-element">em</a><a class="noindex" href="the-embed-element.html#the-embed-element">embed</a><a class="noindex" href="the-fieldset-element.html#the-fieldset-element">fieldset</a><a class="noindex" href="the-figcaption-element.html#the-figcaption-element">figcaption</a><a class="noindex" href="the-figure-element.html#the-figure-element">figure</a><a class="noindex" href="the-footer-element.html#the-footer-element">footer</a><a class="noindex" href="the-form-element.html#the-form-element">form</a></ul><ul><li><a class="noindex" href="the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a><a class="noindex" href="the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a><a class="noindex" href="the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a><a class="noindex" href="the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a><a class="noindex" href="the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a><a class="noindex" href="the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a><a class="noindex" href="the-head-element.html#the-head-element">head</a><a class="noindex" href="the-header-element.html#the-header-element">header</a><a class="noindex" href="the-hgroup-element.html#the-hgroup-element">hgroup</a><a class="noindex" href="the-hr-element.html#the-hr-element">hr</a><a class="noindex" href="the-html-element.html#the-html-element">html</a></ul><ul><li><a class="noindex" href="the-i-element.html#the-i-element">i</a><a class="noindex" href="the-iframe-element.html#the-iframe-element">iframe</a><a class="noindex" href="the-img-element.html#the-img-element">img</a><a class="noindex" href="the-input-element.html#the-input-element">input</a><a class="noindex" href="the-ins-element.html#the-ins-element">ins</a><a class="noindex" href="the-kbd-element.html#the-kbd-element">kbd</a><a class="noindex" href="the-keygen-element.html#the-keygen-element">keygen</a></ul><ul><li><a class="noindex" href="the-label-element.html#the-label-element">label</a><a class="noindex" href="the-legend-element.html#the-legend-element">legend</a><a class="noindex" href="the-li-element.html#the-li-element">li</a><a class="noindex" href="the-link-element.html#the-link-element">link</a><a class="noindex" href="the-map-element.html#the-map-element">map</a><a class="noindex" href="the-mark-element.html#the-mark-element">mark</a><a class="noindex" href="the-menu-element.html#the-menu-element">menu</a><a class="noindex" href="the-meta-element.html#the-meta-element">meta</a><a class="noindex" href="the-meter-element.html#the-meter-element">meter</a></ul><ul><li><a class="noindex" href="the-nav-element.html#the-nav-element">nav</a><a class="noindex" href="the-noscript-element.html#the-noscript-element">noscript</a><a class="noindex" href="the-object-element.html#the-object-element">object</a><a class="noindex" href="the-ol-element.html#the-ol-element">ol</a><a class="noindex" href="the-optgroup-element.html#the-optgroup-element">optgroup</a><a class="noindex" href="the-option-element.html#the-option-element">option</a><a class="noindex" href="the-output-element.html#the-output-element">output</a></ul><ul><li><a class="noindex" href="the-p-element.html#the-p-element">p</a><a class="noindex" href="the-param-element.html#the-param-element">param</a><a class="noindex" href="the-pre-element.html#the-pre-element">pre</a><a class="noindex" href="the-progress-element.html#the-progress-element">progress</a><a class="noindex" href="the-q-element.html#the-q-element">q</a><a class="noindex" href="the-rp-element.html#the-rp-element">rp</a><a class="noindex" href="the-rt-element.html#the-rt-element">rt</a><a class="noindex" href="the-ruby-element.html#the-ruby-element">ruby</a></ul><ul><li><a class="noindex" href="the-s-element.html#the-s-element">s</a><a class="noindex" href="the-samp-element.html#the-samp-element">samp</a><a class="noindex" href="the-script-element.html#the-script-element">script</a><a class="noindex" href="the-section-element.html#the-section-element">section</a><a class="noindex" href="the-select-element.html#the-select-element">select</a><a class="noindex" href="the-small-element.html#the-small-element">small</a><a class="noindex" href="the-source-element.html#the-source-element">source</a><a class="noindex" href="the-span-element.html#the-span-element">span</a></ul><ul><li><a class="noindex" href="the-strong-element.html#the-strong-element">strong</a><a class="noindex" href="the-style-element.html#the-style-element">style</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sub</a><a class="noindex" href="the-summary-element.html#the-summary-element">summary</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sup</a></ul><ul><li><a class="noindex" href="the-table-element.html#the-table-element">table</a><a class="noindex" href="the-tbody-element.html#the-tbody-element">tbody</a><a class="noindex" href="the-td-element.html#the-td-element">td</a><a class="noindex" href="the-textarea-element.html#the-textarea-element">textarea</a><a class="noindex" href="the-tfoot-element.html#the-tfoot-element">tfoot</a><a class="noindex" href="the-th-element.html#the-th-element">th</a><a class="noindex" href="the-thead-element.html#the-thead-element">thead</a><a class="noindex" href="the-time-element.html#the-time-element">time</a><a class="noindex" href="the-title-element.html#the-title-element">title</a></ul><ul><li><a class="noindex" href="the-tr-element.html#the-tr-element">tr</a><a class="noindex" href="the-track-element.html#the-track-element">track</a><a class="noindex" href="the-u-element.html#the-u-element">u</a><a class="noindex" href="the-ul-element.html#the-ul-element">ul</a><a class="noindex" href="the-var-element.html#the-var-element">var</a><a class="noindex" href="the-video-element.html#the-video-element">video</a><a class="noindex" href="the-wbr-element.html#the-wbr-element">wbr</a></ul><ul class="jumpIndexA-other"><li><a class="noindex" href="global-attributes.html#global-attributes">global attributes</a><a class="noindex" href="index-of-terms.html#index-of-terms">terms</a></ul></div></div> <script src="jump-indexes.js"></script><p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> <h1>HTML5: Edition for Web Authors</h1> </div><div class="prev_next"> <a href="states-of-the-type-attribute.html">← 4.10.7.1 States of the type attribute</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="common-input-element-attributes.html">4.10.7.2 Common input element attributes →</a> <ol class="toc"><li><ol><li><ol><li><ol><li><ol><li><a href="number-state.html#number-state" id="4.10.7.1.13-number-state"><span class="secno">4.10.7.1.13 </span>Number state</a><li><a href="number-state.html#range-state" id="4.10.7.1.14-range-state"><span class="secno">4.10.7.1.14 </span>Range state</a><li><a href="number-state.html#color-state" id="4.10.7.1.15-color-state"><span class="secno">4.10.7.1.15 </span>Color state</a><li><a href="number-state.html#checkbox-state" id="4.10.7.1.16-checkbox-state"><span class="secno">4.10.7.1.16 </span>Checkbox state</a><li><a href="number-state.html#radio-button-state" id="4.10.7.1.17-radio-button-state"><span class="secno">4.10.7.1.17 </span>Radio Button state</a><li><a href="number-state.html#file-upload-state" id="4.10.7.1.18-file-upload-state"><span class="secno">4.10.7.1.18 </span>File Upload state</a><li><a href="number-state.html#submit-button-state" id="4.10.7.1.19-submit-button-state"><span class="secno">4.10.7.1.19 </span>Submit Button state</a><li><a href="number-state.html#image-button-state" id="4.10.7.1.20-image-button-state"><span class="secno">4.10.7.1.20 </span>Image Button state</a><li><a href="number-state.html#reset-button-state" id="4.10.7.1.21-reset-button-state"><span class="secno">4.10.7.1.21 </span>Reset Button state</a><li><a href="number-state.html#button-state" id="4.10.7.1.22-button-state"><span class="secno">4.10.7.1.22 </span>Button state</a></ol></ol></ol></ol></ol></div> <h6 id="number-state"><span class="secno">4.10.7.1.13 </span><dfn aria-haspopup="true" role="button" tabindex="0">Number</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_92">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a control for setting the element's <a class="full-spec-link" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#concept-fe-value" title='Read about this "value" reference in the full HTML5 spec.'>value</a> to a string representing a number.<p class="note">This specification does not define what user interface user agents are to use; user agent vendors are encouraged to consider what would best serve their users' needs. For example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input (converting it to the format required for submission as described above). <p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value" id="value_22">value</a></code> attribute, if specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number" id="valid-floating-point-number_2">valid floating point number</a>.<p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_21">min</a></code> attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number" id="valid-floating-point-number_3">valid floating point number</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_21">max</a></code> attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number" id="valid-floating-point-number_4">valid floating point number</a>.<p> The <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-step-default" title='Read about this "default step" reference in the full HTML5 spec.'>default step</a> is 1 (allowing only integers, unless the <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_22">min</a></code> attribute has a non-integer value).<div class="bookkeeping"> <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_93">input</a></code> element content attributes, IDL attributes, and methods apply to the element: <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_18">autocomplete</a></code>, <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_15">list</a></code>, <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_22">max</a></code>, <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_23">min</a></code>, <code title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_14">placeholder</a></code>, <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_29">readonly</a></code>, <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_15">required</a></code>, and <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_21">step</a></code> content attributes; <code title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code>, and <code title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code> and <code title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-value" title='Read about this "value" reference in the full HTML5 spec.'>value</a>.</p> <p>The <code title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> and <code title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> events apply.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_14">accept</a></code>, <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_52">alt</a></code>, <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_16">checked</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_15">dirname</a></code>, <code class="no-backref" title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_14">formaction</a></code>, <code class="no-backref" title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_14">formenctype</a></code>, <code class="no-backref" title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_14">formmethod</a></code>, <code class="no-backref" title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_14">formnovalidate</a></code>, <code class="no-backref" title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_14">formtarget</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_26">height</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_16">maxlength</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_18">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_15">pattern</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_14">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_62">src</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_26">width</a></code>.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code>, <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, and <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code> and <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code> methods.</p> </div><h6 id="range-state"><span class="secno">4.10.7.1.14 </span><dfn aria-haspopup="true" role="button" tabindex="0">Range</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_94">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a control for setting the element's <a class="full-spec-link" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#concept-fe-value" title='Read about this "value" reference in the full HTML5 spec.'>value</a> to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the <a href="#number-state" id="attr-input-type-number_3" title="attr-input-type-number">Number</a> state.<p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value" id="value_23">value</a></code> attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number" id="valid-floating-point-number_5">valid floating point number</a>.<p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_24">min</a></code> attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number" id="valid-floating-point-number_6">valid floating point number</a>. The <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-min-default" title='Read about this "default minimum" reference in the full HTML5 spec.'>default minimum</a> is 0. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_23">max</a></code> attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number" id="valid-floating-point-number_7">valid floating point number</a>. The <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-max-default" title='Read about this "default maximum" reference in the full HTML5 spec.'>default maximum</a> is 100.<p>The <dfn aria-haspopup="true" id="concept-input-value-default-range" role="button" tabindex="0">default value</dfn> is the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-min" title='Read about this "minimum" reference in the full HTML5 spec.'>minimum</a> plus half the difference between the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-min" title='Read about this "minimum" reference in the full HTML5 spec.'>minimum</a> and the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-max" title='Read about this "maximum" reference in the full HTML5 spec.'>maximum</a>, unless the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-max" title='Read about this "maximum" reference in the full HTML5 spec.'>maximum</a> is less than the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-min" title='Read about this "minimum" reference in the full HTML5 spec.'>minimum</a>, in which case the <a href="#concept-input-value-default-range" id="concept-input-value-default-range_1" title="concept-input-value-default-range">default value</a> is the <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-min" title='Read about this "minimum" reference in the full HTML5 spec.'>minimum</a>.<p> The <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#concept-input-step-default" title='Read about this "default step" reference in the full HTML5 spec.'>default step</a> is 1 (allowing only integers, unless the <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_25">min</a></code> attribute has a non-integer value).<div class="bookkeeping"> <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_95">input</a></code> element content attributes, IDL attributes, and methods apply to the element: <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_19">autocomplete</a></code>, <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_16">list</a></code>, <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_24">max</a></code>, <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_26">min</a></code>, and <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_22">step</a></code> content attributes; <code title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code>, and <code title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code> and <code title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-value" title='Read about this "value" reference in the full HTML5 spec.'>value</a>.</p> <p>The <code title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> and <code title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> events apply.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_15">accept</a></code>, <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_53">alt</a></code>, <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_17">checked</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_16">dirname</a></code>, <code class="no-backref" title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_15">formaction</a></code>, <code class="no-backref" title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_15">formenctype</a></code>, <code class="no-backref" title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_15">formmethod</a></code>, <code class="no-backref" title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_15">formnovalidate</a></code>, <code class="no-backref" title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_15">formtarget</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_27">height</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_17">maxlength</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_19">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_16">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_15">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_30">readonly</a></code>, <code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_16">required</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_15">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_63">src</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_27">width</a></code>.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code>, <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, and <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code> and <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code> methods.</p> </div><div class="example"> <p>Here is an example of a range control using an autocomplete list with the <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_17">list</a></code> attribute. This could be useful if there are values along the full range of the control that are especially important, such as preconfigured light levels or typical speed limits in a range control used as a speed control. The following markup fragment:</p> <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist> </pre> <p>...with the following style sheet applied:</p> <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre> <p>...might render as:</p> <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height="75" src="http://dev.w3.org/html5/spec/images/sample-range.png" width="49"><p>Note how the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties. The colors were similiarly derived from the style sheet. The tick marks, however, were derived from the markup. In particular, the <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_23">step</a></code> attribute has not affected the placement of tick marks, the UA deciding to only use the author-specified completion values and then adding longer tick marks at the extremes.</p> <p>Note also how the invalid value <code title="">+50</code> was completely ignored.</p> </div><div class="example"> <p>For another example, consider the following markup fragment:</p> <pre><input name=x type=range min=100 max=700 step=9.09090909 value=509.090909></pre> <p>A user agent could display in a variety of ways, for instance:</p> <p><img alt="As a dial." height="57" src="http://dev.w3.org/html5/spec/images/sample-range-2a.png" width="231"></p> <p>Or, alternatively, for instance:</p> <p><img alt="As a long horizontal slider with tick marks." height="56" src="http://dev.w3.org/html5/spec/images/sample-range-2b.png" width="445"></p> <p>The user agent could pick which one to display based on the dimensions given in the style sheet. This would allow it to maintain the same resolution for the tick marks, despite the differences in width.</p> </div><h6 id="color-state"><span class="secno">4.10.7.1.15 </span><dfn aria-haspopup="true" role="button" tabindex="0">Color</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_96">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a color well control, for setting the element's <a class="full-spec-link" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#concept-fe-value" title='Read about this "value" reference in the full HTML5 spec.'>value</a> to a string representing a <a href="common-microsyntaxes.html#simple-color" id="simple-color_0">simple color</a>.<p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value" id="value_24">value</a></code> attribute, if specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-simple-color" id="valid-simple-color_1">valid simple color</a>.<div class="bookkeeping"> <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_97">input</a></code> element content attributes, IDL attributes, and methods apply to the element: <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_20">autocomplete</a></code> and <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_18">list</a></code> content attributes; <code title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code> and <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attributes.</p> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-value" title='Read about this "value" reference in the full HTML5 spec.'>value</a>.</p> <p>The <code title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> and <code title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> events apply.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_16">accept</a></code>, <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_54">alt</a></code>, <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_18">checked</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_17">dirname</a></code>, <code class="no-backref" title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_16">formaction</a></code>, <code class="no-backref" title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_16">formenctype</a></code>, <code class="no-backref" title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_16">formmethod</a></code>, <code class="no-backref" title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_16">formnovalidate</a></code>, <code class="no-backref" title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_16">formtarget</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_28">height</a></code>, <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_25">max</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_18">maxlength</a></code>, <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_27">min</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_20">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_17">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_16">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_31">readonly</a></code>, <code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_17">required</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_16">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_64">src</a></code>, <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_24">step</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_28">width</a></code>.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code>, <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code>, and <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code>, <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code>, <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code>, and <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> </div><h6 id="checkbox-state"><span class="secno">4.10.7.1.16 </span><dfn aria-haspopup="true" role="button" tabindex="0">Checkbox</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_98">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a two-state control that represents the element's <a class="full-spec-link" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#concept-fe-checked" title='Read about this "checkedness" reference in the full HTML5 spec.'>checkedness</a> state. If the element's <a class="full-spec-link" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#concept-fe-checked" title='Read about this "checkedness" reference in the full HTML5 spec.'>checkedness</a> state is true, the control represents a positive selection, and if it is false, a negative selection. If the element's <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate" id="indeterminate_0">indeterminate</a></code> IDL attribute is set to true, then the control's selection should be obscured as if the control was in a third, indeterminate, state.<p class="note">The control is never a true tri-state control, even if the element's <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate" id="indeterminate_1">indeterminate</a></code> IDL attribute is set to true. The <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate" id="indeterminate_2">indeterminate</a></code> IDL attribute only gives the appearance of a third state.<dl class="domintro"><dt><var title="">input</var> . <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate" id="indeterminate_3">indeterminate</a></code> [ = <var title="">value</var> ]</dt> <dd> <p>When set, overrides the rendering of <a href="#checkbox-state" id="attr-input-type-checkbox_4" title="attr-input-type-checkbox">checkbox</a> controls so that the current value is not visible.</p> </dd> </dl><div class="bookkeeping"> <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_99">input</a></code> element content attributes and IDL attributes apply to the element: <code title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_19">checked</a></code>, and <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_18">required</a></code> content attributes; <code title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code> and <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attributes.</p> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-default-on" title='Read about this "default/on" reference in the full HTML5 spec.'>default/on</a>.</p> <p>The <code title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> event applies.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_17">accept</a></code>, <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_55">alt</a></code>, <code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_21">autocomplete</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_18">dirname</a></code>, <code class="no-backref" title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_17">formaction</a></code>, <code class="no-backref" title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_17">formenctype</a></code>, <code class="no-backref" title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_17">formmethod</a></code>, <code class="no-backref" title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_17">formnovalidate</a></code>, <code class="no-backref" title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_17">formtarget</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_29">height</a></code>, <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_19">list</a></code>, <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_26">max</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_19">maxlength</a></code>, <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_28">min</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_21">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_18">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_17">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_32">readonly</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_17">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_65">src</a></code>, <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_25">step</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_29">width</a></code>.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code>, and <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code>, <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code>, <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code>, and <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code class="no-backref" title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> event does not apply.</p> </div><h6 id="radio-button-state"><span class="secno">4.10.7.1.17 </span><dfn aria-haspopup="true" role="button" tabindex="0">Radio Button</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_100">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a control that, when used in conjunction with other <code><a href="the-input-element.html#the-input-element" id="input_101">input</a></code> elements, forms a <i><a href="#radio-button-group" id="radio-button-group_0">radio button group</a></i> in which only one control can have its <a class="full-spec-link" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#concept-fe-checked" title='Read about this "checkedness" reference in the full HTML5 spec.'>checkedness</a> state set to true. If the element's <a class="full-spec-link" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#concept-fe-checked" title='Read about this "checkedness" reference in the full HTML5 spec.'>checkedness</a> state is true, the control represents the selected control in the group, and if it is false, it indicates a control in the group that is not selected.<p>The <dfn aria-haspopup="true" id="radio-button-group" role="button" tabindex="0"><i>radio button group</i></dfn> that contains an <code><a href="the-input-element.html#the-input-element" id="input_102">input</a></code> element <var title="">a</var> also contains all the other <code><a href="the-input-element.html#the-input-element" id="input_103">input</a></code> elements <var title="">b</var> that fulfill all of the following conditions:<ul><li>The <code><a href="the-input-element.html#the-input-element" id="input_104">input</a></code> element <var title="">b</var>'s <code title="attr-input-type"><a href="the-input-element.html#attr-input-type" id="type_76">type</a></code> attribute is in the <a href="#radio-button-state" id="attr-input-type-radio_3" title="attr-input-type-radio">Radio Button</a> state.</li> <li>Either <var title="">a</var> and <var title="">b</var> have the same <a href="association-of-controls-and-forms.html#form-owner" id="form-owner_5">form owner</a>, or they both have no <a href="association-of-controls-and-forms.html#form-owner" id="form-owner_6">form owner</a>.</li> <li>They both have a <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name" id="name_32">name</a></code> attribute, their <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name" id="name_33">name</a></code> attributes are not empty, and the value of <var title="">a</var>'s <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name" id="name_34">name</a></code> attribute is a <a href="infrastructure.html#compatibility-caseless" id="compatibility-caseless_1">compatibility caseless</a> match for the value of <var title="">b</var>'s <code title="attr-fe-name"><a href="attributes-common-to-form-controls.html#attr-fe-name" id="name_35">name</a></code> attribute.</li> </ul><p>A document must not contain an <code><a href="the-input-element.html#the-input-element" id="input_105">input</a></code> element whose <i><a href="#radio-button-group" id="radio-button-group_1">radio button group</a></i> contains only that element.<p class="note">If none of the radio buttons in a <a href="#radio-button-group" id="radio-button-group_2">radio button group</a> are checked when they are inserted into the document, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script).<div class="bookkeeping"> <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_106">input</a></code> element content attributes and IDL attributes apply to the element: <code title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_20">checked</a></code> and <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_19">required</a></code> content attributes; <code title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code> and <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attributes.</p> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-default-on" title='Read about this "default/on" reference in the full HTML5 spec.'>default/on</a>.</p> <p>The <code title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> event applies.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_18">accept</a></code>, <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_56">alt</a></code>, <code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_22">autocomplete</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_19">dirname</a></code>, <code class="no-backref" title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_18">formaction</a></code>, <code class="no-backref" title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_18">formenctype</a></code>, <code class="no-backref" title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_18">formmethod</a></code>, <code class="no-backref" title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_18">formnovalidate</a></code>, <code class="no-backref" title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_18">formtarget</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_30">height</a></code>, <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_20">list</a></code>, <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_27">max</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_20">maxlength</a></code>, <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_29">min</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_22">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_19">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_18">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_33">readonly</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_18">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_66">src</a></code>, <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_26">step</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_30">width</a></code>.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code>, and <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code>, <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code>, <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code>, and <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code class="no-backref" title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> event does not apply.</p> </div><h6 id="file-upload-state"><span class="secno">4.10.7.1.18 </span><dfn aria-haspopup="true" role="button" tabindex="0">File Upload</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_107">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a list of <dfn aria-haspopup="true" id="concept-input-type-file-selected" role="button" tabindex="0">selected files</dfn>, each file consisting of a file name, a file type, and a file body (the contents of the file).<hr><p>The <dfn aria-haspopup="true" id="attr-input-accept" role="button" tabindex="0"><code>accept</code></dfn> attribute may be specified to provide user agents with a hint of what file types will be accepted.<p>If specified, the attribute must consist of a <a href="common-microsyntaxes.html#set-of-comma-separated-tokens" id="set-of-comma-separated-tokens_3">set of comma-separated tokens</a>, each of which must be an <a href="infrastructure.html#ascii-case-insensitive" id="ascii-case-insensitive_14">ASCII case-insensitive</a> match for one of the following:<dl><dt>The string <code title="">audio/*</code></dt> <dd>Indicates that sound files are accepted.</dd> <dt>The string <code title="">video/*</code></dt> <dd>Indicates that video files are accepted.</dd> <dt>The string <code title="">image/*</code></dt> <dd>Indicates that image files are accepted.</dd> <dt>A <a href="infrastructure.html#valid-mime-type-with-no-parameters" id="valid-mime-type-with-no-parameters_0">valid MIME type with no parameters</a></dt> <dd>Indicates that files of the specified type are accepted.</dd> </dl><p>The tokens must not be <a href="infrastructure.html#ascii-case-insensitive" id="ascii-case-insensitive_15">ASCII case-insensitive</a> matches for any of the other tokens (i.e. duplicates are not allowed). <p>User agents may use the value of this attribute to display a more appropriate user interface than a generic file picker. For instance, given the value <code title="">image/*</code>, a user agent could offer the user the option of using a local camera or selecting a photograph from their photo collection; given the value <code title="">audio/*</code>, a user agent could offer the user the option of recording a clip using a headset microphone.<div class="example" id="fakepath-srsly"> <p>For historical reasons, the <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute prefixes the filename with the string "<code title="">C:\fakepath\</code>". Some legacy user agents actually included the full path (which was a security vulnerability). As a result of this, obtaining the filename from the <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute in a backwards-compatible way is non-trivial. The following function extracts the filename in a suitably compatible manner:</p> <pre>function extractFilename(path) { if (path.substr(0, 12) == "C:\\fakepath\\") return path.substr(12); // modern browser var x; x = path.lastIndexOf('/'); if (x >= 0) // Unix-based path return path.substr(x+1); x = path.lastIndexOf('\\'); if (x >= 0) // Windows-based path return path.substr(x+1); return path; // just the filename }</pre> <p>This can be used as follows:</p> <pre><p><input type=file name=image onchange="updateFilename(this.value)"></p> <p>The name of the file you picked is: <span id="filename">(none)</span></p> <script> function updateFilename(path) { var name = extractFilename(path); document.getElementById('filename').textContent = name; } </script></pre> </div><hr><div class="bookkeeping"> <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_108">input</a></code> element content attributes apply to the element: <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_109">input</a></code> element content attributes and IDL attributes apply to the element: <code title="attr-input-accept"><a href="#attr-input-accept" id="accept_19">accept</a></code>, <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_23">multiple</a></code>, and <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_20">required</a></code>; <code title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code> and <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attributes.</p> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-filename" title='Read about this "filename" reference in the full HTML5 spec.'>filename</a>.</p> <p>The <code title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> event applies.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_57">alt</a></code>, <code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_23">autocomplete</a></code>, <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_21">checked</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_20">dirname</a></code>, <code class="no-backref" title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_19">formaction</a></code>, <code class="no-backref" title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_19">formenctype</a></code>, <code class="no-backref" title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_19">formmethod</a></code>, <code class="no-backref" title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_19">formnovalidate</a></code>, <code class="no-backref" title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_19">formtarget</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_31">height</a></code>, <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_21">list</a></code>, <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_28">max</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_21">maxlength</a></code>, <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_30">min</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_20">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_19">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_34">readonly</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_19">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_67">src</a></code>, <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_27">step</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_31">width</a></code>.</p> <p>The element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value" id="value_25">value</a></code> attribute must be omitted.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code>, <code class="no-backref" title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code>, and <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code>, <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code>, <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code>, and <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code class="no-backref" title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> event does not apply.</p> </div><h6 id="submit-button-state"><span class="secno">4.10.7.1.19 </span><dfn aria-haspopup="true" role="button" tabindex="0">Submit Button</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_110">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a button that, when activated, submits the form. The element is a <a href="forms.html#concept-button" id="concept-button_0" title="concept-button">button</a>, specifically a <a href="forms.html#concept-submit-button" id="concept-submit-button_0" title="concept-submit-button">submit button</a>.<p>The <code title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_20">formaction</a></code>, <code title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_20">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_20">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_20">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_20">formtarget</a></code> attributes are <a href="attributes-common-to-form-controls.html#attributes-for-form-submission" id="attributes-for-form-submission_1">attributes for form submission</a>.<p class="note">The <code title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_21">formnovalidate</a></code> attribute can be used to make submit buttons that do not trigger the constraint validation.<div class="bookkeeping"> <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_111">input</a></code> element content attributes and IDL attributes apply to the element: <code title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_21">formaction</a></code>, <code title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_21">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_21">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_22">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_21">formtarget</a></code> content attributes; <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute.</p> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-default" title='Read about this "default" reference in the full HTML5 spec.'>default</a>.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_20">accept</a></code>, <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_58">alt</a></code>, <code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_24">autocomplete</a></code>, <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_22">checked</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_21">dirname</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_32">height</a></code>, <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_22">list</a></code>, <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_29">max</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_22">maxlength</a></code>, <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_31">min</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_24">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_21">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_20">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_35">readonly</a></code>, <code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_21">required</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_20">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_68">src</a></code>, <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_28">step</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_32">width</a></code>.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code>, <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code>, and <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code>, <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code>, <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code>, and <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code class="no-backref" title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> and <code class="no-backref" title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> events do not apply.</p> </div><h6 id="image-button-state"><span class="secno">4.10.7.1.20 </span><dfn aria-haspopup="true" role="button" tabindex="0">Image Button</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_112">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> either an image from which a user can select a coordinate and submit the form, or alternatively a button from which the user can submit the form. The element is a <a href="forms.html#concept-button" id="concept-button_1" title="concept-button">button</a>, specifically a <a href="forms.html#concept-submit-button" id="concept-submit-button_1" title="concept-submit-button">submit button</a>.<p class="note">The coordinate is sent to the server <a class="full-spec-link" href="http://dev.w3.org/html5/spec/form-submission.html#constructing-the-form-data-set" title='Read about this "during form submission" reference in the full HTML5 spec.'>during form submission</a> by sending two entries for the element, derived from the name of the control but with "<code title="">.x</code>" and "<code title="">.y</code>" appended to the name with the <var title="">x</var> and <var title="">y</var> components of the coordinate respectively.<hr><p>The image is given by the <dfn aria-haspopup="true" id="attr-input-src" role="button" tabindex="0"><code>src</code></dfn> attribute. The <code title="attr-input-src"><a href="#attr-input-src" id="src_69">src</a></code> attribute must be present, and must contain a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces" id="valid-non-empty-url-potentially-surrounded-by-spaces_11">valid non-empty URL potentially surrounded by spaces</a> referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.<p>The <dfn aria-haspopup="true" id="attr-input-alt" role="button" tabindex="0"><code>alt</code></dfn> attribute provides the textual label for the alternative button for users and user agents who cannot use the image. The <code title="attr-input-alt"><a href="#attr-input-alt" id="alt_59">alt</a></code> attribute must also be present, and must contain a non-empty string.<p>The <code><a href="the-input-element.html#the-input-element" id="input_113">input</a></code> element supports <a href="dimension-attributes.html#dimension-attributes" id="dimension-attributes_5">dimension attributes</a>.<p>The <code title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_22">formaction</a></code>, <code title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_22">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_22">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_23">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_22">formtarget</a></code> attributes are <a href="attributes-common-to-form-controls.html#attributes-for-form-submission" id="attributes-for-form-submission_2">attributes for form submission</a>.<dl class="domintro"><dt><var title="">image</var> . <code id="dom-input-width" title="dom-input-width"><a href="#dom-input-width">width</a></code> [ = <var title="">value</var> ]</dt> <dt><var title="">image</var> . <code id="dom-input-height" title="dom-input-height"><a href="#dom-input-height">height</a></code> [ = <var title="">value</var> ]</dt> <dd> <p>These attributes return the actual rendered dimensions of the image, or zero if the dimensions are not known.</p> <p>They can be set, to change the corresponding content attributes.</p> </dd> </dl><div class="bookkeeping"> <p>The following common <code><a href="the-input-element.html#the-input-element" id="input_114">input</a></code> element content attributes and IDL attributes apply to the element: <code title="attr-input-alt"><a href="#attr-input-alt" id="alt_60">alt</a></code>, <code title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_23">formaction</a></code>, <code title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_23">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_23">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_24">formnovalidate</a></code>, <code title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_23">formtarget</a></code>, <code title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_33">height</a></code>, <code title="attr-input-src"><a href="#attr-input-src" id="src_70">src</a></code>, and <code title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_33">width</a></code> content attributes; <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute.</p> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-default" title='Read about this "default" reference in the full HTML5 spec.'>default</a>.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_21">accept</a></code>, <code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_25">autocomplete</a></code>, <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_23">checked</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_22">dirname</a></code>, <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_23">list</a></code>, <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_30">max</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_23">maxlength</a></code>, <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_32">min</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_25">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_22">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_21">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_36">readonly</a></code>, <code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_22">required</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_21">size</a></code>, and <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_29">step</a></code>.</p> <p>The element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value" id="value_26">value</a></code> attribute must be omitted.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code>, <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code>, and <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code>, <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code>, <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code>, and <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code class="no-backref" title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> and <code class="no-backref" title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> events do not apply.</p> </div><p class="note">Many aspects of this state's behavior are similar to the behavior of the <code><a href="the-img-element.html#the-img-element" id="img_33">img</a></code> element. Readers are encouraged to read that section, where many of the same requirements are described in more detail.<div class="example"> <p>Take the following form:</p> <pre><form action="process.cgi"> <input type=image src=map.png name=where> </form></pre> <p>If the user clicked on the image at coordinate (127,40) then the URL used to submit the form would be "<code title="">process.cgi?where.x=127&where.y=40</code>".</p> </div><h6 id="reset-button-state"><span class="secno">4.10.7.1.21 </span><dfn aria-haspopup="true" role="button" tabindex="0">Reset Button</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_115">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a button that, when activated, resets the form. The element is a <a href="forms.html#concept-button" id="concept-button_2" title="concept-button">button</a>.<div class="bookkeeping"> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute applies to this element and is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-default" title='Read about this "default" reference in the full HTML5 spec.'>default</a>.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_22">accept</a></code>, <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_61">alt</a></code>, <code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_26">autocomplete</a></code>, <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_24">checked</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_23">dirname</a></code>, <code class="no-backref" title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_24">formaction</a></code>, <code class="no-backref" title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_24">formenctype</a></code>, <code class="no-backref" title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_24">formmethod</a></code>, <code class="no-backref" title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_25">formnovalidate</a></code>, <code class="no-backref" title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_24">formtarget</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_34">height</a></code>, <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_24">list</a></code>, <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_31">max</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_24">maxlength</a></code>, <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_33">min</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_26">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_23">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_22">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_37">readonly</a></code>, <code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_23">required</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_22">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_71">src</a></code>, <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_30">step</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_34">width</a></code>.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code>, <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code>, and <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code>, <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code>, <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code>, and <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code class="no-backref" title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> and <code class="no-backref" title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> events do not apply.</p> </div><h6 id="button-state"><span class="secno">4.10.7.1.22 </span><dfn aria-haspopup="true" role="button" tabindex="0">Button</dfn> state</h6><p>The <code><a href="the-input-element.html#the-input-element" id="input_116">input</a></code> element <a class="full-spec-link" href="http://dev.w3.org/html5/spec/rendering.html#represents" title='Read about this "represents" reference in the full HTML5 spec.'>represents</a> a button with no default behavior. A label for the button must be provided in the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value" id="value_27">value</a></code> attribute, though it may be the empty string. The element is a <a href="forms.html#concept-button" id="concept-button_3" title="concept-button">button</a>.<div class="bookkeeping"> <p>The <code title="dom-input-value"><a href="common-input-element-apis.html#dom-input-value">value</a></code> IDL attribute applies to this element and is in mode <a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value-default" title='Read about this "default" reference in the full HTML5 spec.'>default</a>.</p> <p>The following content attributes must not be specified and do not apply to the element: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept" id="accept_23">accept</a></code>, <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt" id="alt_62">alt</a></code>, <code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete" id="autocomplete_27">autocomplete</a></code>, <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked" id="checked_25">checked</a></code>, <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname" id="dirname_24">dirname</a></code>, <code class="no-backref" title="attr-fs-formaction"><a href="attributes-common-to-form-controls.html#attr-fs-formaction" id="formaction_25">formaction</a></code>, <code class="no-backref" title="attr-fs-formenctype"><a href="attributes-common-to-form-controls.html#attr-fs-formenctype" id="formenctype_25">formenctype</a></code>, <code class="no-backref" title="attr-fs-formmethod"><a href="attributes-common-to-form-controls.html#attr-fs-formmethod" id="formmethod_25">formmethod</a></code>, <code class="no-backref" title="attr-fs-formnovalidate"><a href="attributes-common-to-form-controls.html#attr-fs-formnovalidate" id="formnovalidate_26">formnovalidate</a></code>, <code class="no-backref" title="attr-fs-formtarget"><a href="attributes-common-to-form-controls.html#attr-fs-formtarget" id="formtarget_25">formtarget</a></code>, <code class="no-backref" title="attr-dim-height"><a href="dimension-attributes.html#attr-dim-height" id="height_35">height</a></code>, <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list" id="list_25">list</a></code>, <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max" id="max_32">max</a></code>, <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength" id="maxlength_25">maxlength</a></code>, <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min" id="min_34">min</a></code>, <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple" id="multiple_27">multiple</a></code>, <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern" id="pattern_24">pattern</a></code>, <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder" id="placeholder_23">placeholder</a></code>, <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly" id="readonly_38">readonly</a></code>, <code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required" id="required_24">required</a></code>, <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size" id="size_23">size</a></code>, <code class="no-backref" title="attr-input-src"><a href="#attr-input-src" id="src_72">src</a></code>, <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step" id="step_31">step</a></code>, and <code class="no-backref" title="attr-dim-width"><a href="dimension-attributes.html#attr-dim-width" id="width_35">width</a></code>.</p> <p>The following IDL attributes and methods do not apply to the element: <code class="no-backref" title="dom-input-checked"><a href="common-input-element-apis.html#dom-input-checked">checked</a></code>, <code class="no-backref" title="dom-input-files"><a href="common-input-element-apis.html#dom-input-files">files</a></code>, <code class="no-backref" title="dom-input-list"><a href="common-input-element-apis.html#dom-input-list">list</a></code>, <code class="no-backref" title="dom-textarea/input-selectionStart"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title='Read about this "selectionStart" reference in the full HTML5 spec.'>selectionStart</a></code>, <code class="no-backref" title="dom-textarea/input-selectionEnd"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title='Read about this "selectionEnd" reference in the full HTML5 spec.'>selectionEnd</a></code>, <code class="no-backref" title="dom-textarea/input-selectionDirection"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title='Read about this "selectionDirection" reference in the full HTML5 spec.'>selectionDirection</a></code>, <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-apis.html#dom-input-valueasdate">valueAsDate</a></code>, and <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-apis.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes; <code class="no-backref" title="dom-textarea/input-select"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title='Read about this "select()" reference in the full HTML5 spec.'>select()</a></code>, <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title='Read about this "setSelectionRange()" reference in the full HTML5 spec.'>setSelectionRange()</a></code>, <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-apis.html#dom-input-stepdown">stepDown()</a></code>, and <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-apis.html#dom-input-stepup">stepUp()</a></code> methods.</p> <p>The <code class="no-backref" title="event-input-input"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-input" title='Read about this "input" reference in the full HTML5 spec.'>input</a></code> and <code class="no-backref" title="event-input-change"><a class="full-spec-link" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change" title='Read about this "change" reference in the full HTML5 spec.'>change</a></code> events do not apply.</p> </div>