You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1574 lines
138 KiB
1574 lines
138 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="en-US-x-Hixie" ><head><title>4.10.7.1.13 Number state — HTML5 </title><style type="text/css">
|
|
pre { margin-left: 2em; white-space: pre-wrap; }
|
|
h2 { margin: 3em 0 1em 0; }
|
|
h3 { margin: 2.5em 0 1em 0; }
|
|
h4 { margin: 2.5em 0 0.75em 0; }
|
|
h5, h6 { margin: 2.5em 0 1em; }
|
|
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
|
|
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
|
|
p { margin: 1em 0; }
|
|
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
|
|
dl, dd { margin-top: 0; margin-bottom: 0; }
|
|
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
|
|
dt + dt { margin-top: 0; }
|
|
dd dt { margin-top: 0.25em; margin-bottom: 0; }
|
|
dd p { margin-top: 0; }
|
|
dd dl + p { margin-top: 1em; }
|
|
dd table + p { margin-top: 1em; }
|
|
p + * > li, dd li { margin: 1em 0; }
|
|
dt, dfn { font-weight: bold; font-style: normal; }
|
|
dt dfn { font-style: italic; }
|
|
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
|
|
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
|
|
pre em { font-weight: bolder; font-style: normal; }
|
|
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
|
|
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
|
|
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
|
|
table thead, table tbody { border-bottom: solid; }
|
|
table tbody th:first-child { border-left: solid; }
|
|
table tbody th { text-align: left; }
|
|
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
|
|
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
|
|
|
|
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
|
|
.matrix, .matrix td { border: none; 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; }
|
|
|
|
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
|
|
img.extra { float: right; }
|
|
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
|
|
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
|
|
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
|
|
pre.css:first-line { color: #AAAA50; }
|
|
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
|
|
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
|
|
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
|
|
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
|
|
dl.domintro dd p { margin: 0.5em 0; }
|
|
dl.switch { padding-left: 2em; }
|
|
dl.switch > dt { text-indent: -1.5em; }
|
|
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
|
|
dl.triple { padding: 0 0 0 1em; }
|
|
dl.triple dt, dl.triple dd { margin: 0; display: inline }
|
|
dl.triple dt:after { content: ':'; }
|
|
dl.triple dd:after { content: '\A'; white-space: pre; }
|
|
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
|
|
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
|
|
a .diff-new { border-bottom: 1px blue solid; }
|
|
|
|
h2 { page-break-before: always; }
|
|
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
|
|
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
|
|
|
|
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
|
|
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
|
|
|
|
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
|
|
div.head p { margin: 0; }
|
|
div.head h1 { margin: 0; }
|
|
div.head .logo { float: right; margin: 0 1em; }
|
|
div.head .logo img { border: none } /* remove border from top image */
|
|
div.head dl { margin: 1em 0; }
|
|
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
|
|
|
|
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
|
|
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
|
|
body > .toc > li > * { margin-bottom: 0.5em; }
|
|
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
|
|
.toc, .toc li { list-style: none; }
|
|
|
|
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
|
|
.brief li { margin: 0; padding: 0; }
|
|
.brief li p { margin: 0; padding: 0; }
|
|
|
|
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
|
|
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
|
|
.category-list li { display: inline; }
|
|
.category-list li:not(:last-child)::after { content: ', '; }
|
|
.category-list li > span, .category-list li > a { text-transform: lowercase; }
|
|
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
|
|
|
|
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
|
|
.XXX > :first-child { margin-top: 0; }
|
|
p .XXX { line-height: 3em; }
|
|
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
|
|
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
|
|
.annotation :link, .annotation :visited { color: inherit; }
|
|
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
|
|
.annotation span { border: none ! important; }
|
|
.note { color: green; background: transparent; font-family: sans-serif; }
|
|
.warning { color: red; background: transparent; }
|
|
.note, .warning { font-weight: bolder; font-style: italic; }
|
|
p.note, div.note { padding: 0.5em 2em; }
|
|
span.note { padding: 0 2em; }
|
|
.note p:first-child, .warning p:first-child { margin-top: 0; }
|
|
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
|
|
.warning:before { font-style: normal; }
|
|
p.note:before { content: 'Note: '; }
|
|
p.warning:before { content: '\26A0 Warning! '; }
|
|
|
|
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
|
|
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
|
|
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
|
|
.bookkeeping dt { margin: 0.5em 2em 0; }
|
|
.bookkeeping dd { margin: 0 3em 0.5em; }
|
|
|
|
h4 { position: relative; z-index: 3; }
|
|
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
|
|
.element {
|
|
background: #EEEEFF;
|
|
color: black;
|
|
margin: 0 0 1em 0.15em;
|
|
padding: 0 1em 0.25em 0.75em;
|
|
border-left: solid #9999FF 0.25em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.element:before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: -1.15em;
|
|
height: 2em;
|
|
width: 0.9em;
|
|
background: #EEEEFF;
|
|
content: ' ';
|
|
border-style: none none solid solid;
|
|
border-color: #9999FF;
|
|
border-width: 0.25em;
|
|
}
|
|
|
|
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
|
|
td > .example:only-child { margin: 0 0 0 0.1em; }
|
|
|
|
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
|
|
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
|
|
ul.domTree li li { list-style: none; }
|
|
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree span { font-style: italic; font-family: serif; }
|
|
ul.domTree .t1 code { color: purple; font-weight: bold; }
|
|
ul.domTree .t2 { font-style: normal; font-family: monospace; }
|
|
ul.domTree .t2 .name { color: black; font-weight: bold; }
|
|
ul.domTree .t2 .value { color: blue; font-weight: normal; }
|
|
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
|
|
ul.domTree .t7 code, .domTree .t8 code { color: green; }
|
|
ul.domTree .t10 code { color: teal; }
|
|
|
|
body.dfnEnabled dfn { cursor: pointer; }
|
|
.dfnPanel {
|
|
display: inline;
|
|
position: absolute;
|
|
z-index: 10;
|
|
height: auto;
|
|
width: auto;
|
|
padding: 0.5em 0.75em;
|
|
font: small sans-serif, Droid Sans Fallback;
|
|
background: #DDDDDD;
|
|
color: black;
|
|
border: outset 0.2em;
|
|
}
|
|
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
|
|
.dfnPanel :link, .dfnPanel :visited { color: black; }
|
|
.dfnPanel p { font-weight: bolder; }
|
|
.dfnPanel * + p { margin-top: 0.25em; }
|
|
.dfnPanel li { list-style-position: inside; }
|
|
|
|
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
|
|
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
|
|
#configUI p label { display: block; }
|
|
#configUI #updateUI, #configUI .loginUI { text-align: center; }
|
|
#configUI input[type=button] { display: block; margin: auto; }
|
|
|
|
fieldset { margin: 1em; padding: 0.5em 1em; }
|
|
fieldset > legend + * { margin-top: 0; }
|
|
fieldset > :last-child { margin-bottom: 0; }
|
|
fieldset p { margin: 0.5em 0; }
|
|
|
|
.stability {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0; right: 0;
|
|
margin: 0 auto 0 auto !important;
|
|
z-index: 1000;
|
|
width: 50%;
|
|
background: maroon; color: yellow;
|
|
-webkit-border-radius: 1em 1em 0 0;
|
|
-moz-border-radius: 1em 1em 0 0;
|
|
border-radius: 1em 1em 0 0;
|
|
-moz-box-shadow: 0 0 1em #500;
|
|
-webkit-box-shadow: 0 0 1em #500;
|
|
box-shadow: 0 0 1em red;
|
|
padding: 0.5em 1em;
|
|
text-align: center;
|
|
}
|
|
.stability strong {
|
|
display: block;
|
|
}
|
|
.stability input {
|
|
appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
|
|
position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
|
|
}
|
|
.stability input:hover {
|
|
color: white;
|
|
text-shadow: 0 0 2px black;
|
|
}
|
|
.stability input:active {
|
|
padding: 0.3em 0.45em 0.2em 0.55em;
|
|
}
|
|
.stability :link, .stability :visited,
|
|
.stability :link:hover, .stability :visited:hover {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
|
|
</style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
|
|
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><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><style type="text/css">
|
|
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
|
|
</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;
|
|
}
|
|
</script>
|
|
<script src="link-fixup.js" type="text/javascript"></script>
|
|
<link href="style.css" rel="stylesheet"><link href="states-of-the-type-attribute.html" title="4.10.7.1 States of the type attribute" rel="prev">
|
|
<link href="spec.html#contents" title="Table of contents" rel="index">
|
|
<link href="common-input-element-attributes.html" title="4.10.7.2 Common input element attributes" rel="next">
|
|
</head><body><div class="head" id="head">
|
|
<div id="multipage-common">
|
|
<p class="stability" id="wip"><strong>This is a work in
|
|
progress!</strong> For the latest updates from the HTML WG, possibly
|
|
including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
|
|
There may also be a more
|
|
<a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
|
|
with changes based on resolution of Last Call issues.
|
|
<input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"></p>
|
|
<script type="text/javascript">
|
|
function closeWarning(element) {
|
|
element.parentNode.removeChild(element);
|
|
var date = new Date();
|
|
date.setDate(date.getDate()+4);
|
|
document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
|
|
}
|
|
if (getCookie('hide-obsolescence-warning') == '1')
|
|
setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
|
|
</script></div>
|
|
|
|
<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</h1>
|
|
</div><div>
|
|
<a href="states-of-the-type-attribute.html" class="prev">4.10.7.1 States of the type attribute</a> –
|
|
<a href="spec.html#contents">Table of contents</a> –
|
|
<a href="common-input-element-attributes.html" class="next">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"><span class="secno">4.10.7.1.13 </span>Number state</a></li><li><a href="number-state.html#range-state"><span class="secno">4.10.7.1.14 </span>Range state</a></li><li><a href="number-state.html#color-state"><span class="secno">4.10.7.1.15 </span>Color state</a></li><li><a href="number-state.html#checkbox-state"><span class="secno">4.10.7.1.16 </span>Checkbox state</a></li><li><a href="number-state.html#radio-button-state"><span class="secno">4.10.7.1.17 </span>Radio Button state</a></li><li><a href="number-state.html#file-upload-state"><span class="secno">4.10.7.1.18 </span>File Upload state</a></li><li><a href="number-state.html#submit-button-state"><span class="secno">4.10.7.1.19 </span>Submit Button state</a></li><li><a href="number-state.html#image-button-state"><span class="secno">4.10.7.1.20 </span>Image Button state</a></li><li><a href="number-state.html#reset-button-state"><span class="secno">4.10.7.1.21 </span>Reset Button state</a></li><li><a href="number-state.html#button-state"><span class="secno">4.10.7.1.22 </span>Button state</a></li></ol></li></ol></li></ol></li></ol></li></ol></div>
|
|
|
|
<h6 id="number-state"><span class="secno">4.10.7.1.13 </span><dfn title="attr-input-type-number">Number</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#number-state" title="attr-input-type-number">Number</a> state, the rules in
|
|
this section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
|
|
for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
|
|
number.</p><div class="impl">
|
|
|
|
<p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
the user agent should allow the user to change the number
|
|
represented by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as
|
|
obtained from applying the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating point
|
|
number values</a> to it. User agents must not allow the user to
|
|
set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a non-empty
|
|
string that is not a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point number</a>. If
|
|
the user agent provides a user interface for selecting a number,
|
|
then the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to
|
|
the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number" title="best representation of the number as a floating
|
|
point number">best representation of the number representing the
|
|
user's selection as a floating point number</a>. User agents
|
|
should allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>
|
|
|
|
</div><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">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">valid
|
|
floating point number</a>.</p><div class="impl">
|
|
|
|
<p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
|
|
follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
|
|
of the element is not a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point number</a>,
|
|
then set it to the empty string instead.</p>
|
|
|
|
</div><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
|
|
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
|
|
number</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
|
|
attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid
|
|
floating point number</a>.</p><p><span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is
|
|
1.</span> The <a href="common-input-element-attributes.html#concept-input-step-default" title="concept-input-step-default">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">min</a></code> attribute has a non-integer
|
|
value).</p><div class="impl">
|
|
|
|
<p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>,
|
|
the user agent may round the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the nearest number for
|
|
which the element would not <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch" title="suffering from a step
|
|
mismatch">suffer from a step mismatch</a>. If there are two such
|
|
numbers, user agents are encouraged to pick the one nearest positive
|
|
infinity.</p>
|
|
|
|
<p><strong>The <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
|
|
string to a number</a>, given a string <var title="">input</var>,
|
|
is as follows</strong>: If applying the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing
|
|
floating point number values</a> to <var title="">input</var>
|
|
results in an error, then return an error; otherwise, return the
|
|
resulting number.</p>
|
|
|
|
<p><strong>The <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
|
|
number to a string</a>, given a number <var title="">input</var>,
|
|
is as follows</strong>: Return a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
|
|
number</a> that represents <var title="">input</var>.</p>
|
|
|
|
</div><div class="bookkeeping">
|
|
|
|
<p>The following common <code><a href="the-input-element.html#the-input-element">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">autocomplete</a></code>,
|
|
<code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
|
|
<code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
|
|
<code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>,
|
|
<code title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code>, and
|
|
<code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
|
|
<code title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
|
|
<code title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
|
|
in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
|
|
|
|
<p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">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-attributes.html#dom-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code> and
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
|
|
|
|
</div><h6 id="range-state"><span class="secno">4.10.7.1.14 </span><dfn title="attr-input-type-range">Range</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#range-state" title="attr-input-type-range">Range</a> state, the rules in this
|
|
section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
|
|
for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">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" title="attr-input-type-number">Number</a> state.</p><div class="impl">
|
|
|
|
<p class="note">In this state, the range and step constraints are
|
|
enforced even during user input, and there is no way to set the
|
|
value to the empty string.</p>
|
|
|
|
<p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
the user agent should allow the user to change the number
|
|
represented by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as
|
|
obtained from applying the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating point
|
|
number values</a> to it. User agents must not allow the user to
|
|
set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string that
|
|
is not a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point number</a>. If the user agent
|
|
provides a user interface for selecting a number, then the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to a <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number" title="best representation of the number as a floating point
|
|
number">best representation of the number representing the user's
|
|
selection as a floating point number</a>. User agents must not
|
|
allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>
|
|
|
|
</div><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
|
|
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
|
|
number</a>.</p><div class="impl">
|
|
|
|
<p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
|
|
follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
|
|
of the element is not a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point number</a>,
|
|
then set it to a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point number</a> that
|
|
represents the <a href="#concept-input-value-default-range" title="concept-input-value-default-range">default value</a>.</p>
|
|
|
|
</div><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
|
|
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
|
|
number</a>. The <a href="common-input-element-attributes.html#concept-input-min-default" title="concept-input-min-default">default
|
|
minimum</a> is 0. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
|
|
attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid
|
|
floating point number</a>. The <a href="common-input-element-attributes.html#concept-input-max-default" title="concept-input-max-default">default maximum</a> is 100.</p><p>The <dfn id="concept-input-value-default-range" title="concept-input-value-default-range">default
|
|
value</dfn> is the <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>
|
|
plus half the difference between the <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a> and the <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a>, unless the <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a> is less than the <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>, in which case the <a href="#concept-input-value-default-range" title="concept-input-value-default-range">default value</a> is
|
|
the <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>.</p><div class="impl">
|
|
|
|
<p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-an-underflow">suffering from an
|
|
underflow</a>, the user agent must set the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
|
|
number</a> that represents the <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>.</p>
|
|
|
|
<p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-an-overflow">suffering from an overflow</a>,
|
|
if the <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a> is not less
|
|
than the <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>, the user
|
|
agent must set the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
|
|
number</a> that represents the <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a>.</p>
|
|
|
|
</div><p><span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is
|
|
1.</span> The <a href="common-input-element-attributes.html#concept-input-step-default" title="concept-input-step-default">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">min</a></code> attribute has a non-integer
|
|
value).</p><div class="impl">
|
|
|
|
<p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>,
|
|
the user agent must round the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the nearest number for
|
|
which the element would not <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch" title="suffering from a step
|
|
mismatch">suffer from a step mismatch</a>, and which is greater
|
|
than or equal to the <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>,
|
|
and, if the <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a> is not
|
|
less than the <a href="common-input-element-attributes.html#concept-input-min" title="concept-input-min">minimum</a>, which
|
|
is less than or equal to the <a href="common-input-element-attributes.html#concept-input-max" title="concept-input-max">maximum</a>. If two numbers match these
|
|
constraints, then user agents must use the one nearest to positive
|
|
infinity.</p>
|
|
|
|
<p class="example">For example, the markup
|
|
<code><input type="range" min=0 max=100 step=20 value=50></code>
|
|
results in a range control whose initial value is 60.</p>
|
|
|
|
<p><strong>The <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
|
|
string to a number</a>, given a string <var title="">input</var>,
|
|
is as follows</strong>: If applying the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing
|
|
floating point number values</a> to <var title="">input</var>
|
|
results in an error, then return an error; otherwise, return the
|
|
resulting number.</p>
|
|
|
|
<p><strong>The <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
|
|
number to a string</a>, given a number <var title="">input</var>,
|
|
is as follows</strong>: Return a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
|
|
number</a> that represents <var title="">input</var>.</p>
|
|
|
|
</div><div class="bookkeeping">
|
|
|
|
<p>The following common <code><a href="the-input-element.html#the-input-element">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">autocomplete</a></code>,
|
|
<code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>, and
|
|
<code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
|
|
<code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>,
|
|
<code title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code>, and
|
|
<code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
|
|
<code title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
|
|
<code title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
|
|
in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
|
|
|
|
<p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">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-attributes.html#dom-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code> and
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">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">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="sample-range.png" width="49"></p><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">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="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="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 title="attr-input-type-color">Color</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#color-state" title="attr-input-type-color">Color</a> state, the rules in this
|
|
section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a color
|
|
well control, for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
|
|
<a href="common-microsyntaxes.html#simple-color">simple color</a>.</p><div class="impl">
|
|
|
|
<p class="note">In this state, there is always a color picked, and
|
|
there is no way to set the value to the empty string.</p>
|
|
|
|
<p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
the user agent should allow the user to change the color represented
|
|
by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as obtained from
|
|
applying the <a href="common-microsyntaxes.html#rules-for-parsing-simple-color-values">rules for parsing simple color values</a> to
|
|
it. User agents must not allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string that is not a
|
|
<a href="common-microsyntaxes.html#valid-lowercase-simple-color">valid lowercase simple color</a>. If the user agent
|
|
provides a user interface for selecting a color, then the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to the result of
|
|
using the <a href="common-microsyntaxes.html#rules-for-serializing-simple-color-values">rules for serializing simple color values</a> to
|
|
the user's selection. User agents must not allow the user to set the
|
|
<a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>
|
|
|
|
</div><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
|
|
specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-simple-color">valid
|
|
simple color</a>.</p><div class="impl">
|
|
|
|
<p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
|
|
follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
|
|
of the element is a <a href="common-microsyntaxes.html#valid-simple-color">valid simple color</a>, then set it to
|
|
the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the element
|
|
<a href="infrastructure.html#converted-to-ascii-lowercase">converted to ASCII lowercase</a>; otherwise, set it to the string
|
|
"<code title="">#000000</code>".</p>
|
|
|
|
</div><div class="bookkeeping">
|
|
|
|
<p>The following common <code><a href="the-input-element.html#the-input-element">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">autocomplete</a></code> and
|
|
<code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> content attributes;
|
|
<code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>, and
|
|
<code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes.</p>
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
|
|
in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
|
|
|
|
<p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
|
|
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">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-attributes.html#dom-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
|
|
<code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
|
|
<code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
</div><h6 id="checkbox-state"><span class="secno">4.10.7.1.16 </span><dfn title="attr-input-type-checkbox">Checkbox</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#checkbox-state" title="attr-input-type-checkbox">Checkbox</a> state, the rules in
|
|
this section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a
|
|
two-state control that represents the element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> state. If the
|
|
element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">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">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><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">indeterminate</a></code> IDL attribute
|
|
is set to true. The <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate">indeterminate</a></code> IDL attribute
|
|
only gives the appearance of a third state.</p><div class="impl">
|
|
|
|
<p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
then: The <a href="content-models.html#pre-click-activation-steps">pre-click activation steps</a> consist of setting
|
|
the element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> to
|
|
its opposite value (i.e. true if it is false, false if it is true),
|
|
and of setting the element's <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate">indeterminate</a></code> IDL attribute
|
|
to false. The <a href="content-models.html#canceled-activation-steps">canceled activation steps</a> consist of
|
|
setting the <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> and
|
|
the element's <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate">indeterminate</a></code> IDL attribute
|
|
back to the values they had before the <a href="content-models.html#pre-click-activation-steps">pre-click activation
|
|
steps</a> were run. The <a href="content-models.html#activation-behavior">activation behavior</a> is to
|
|
<a href="webappapis.html#fire-a-simple-event">fire a simple event</a> that bubbles named <code title="event-change">change</code> at the element. </p>
|
|
|
|
<p><strong>Constraint validation</strong>: If the element is <i title="concept-input-required"><a href="common-input-element-attributes.html#concept-input-required">required</a></i> and its <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> is false, then the
|
|
element is <a href="association-of-controls-and-forms.html#suffering-from-being-missing">suffering from being missing</a>.</p>
|
|
|
|
</div><dl class="domintro"><dt><var title="">input</var> . <code title="dom-input-indeterminate"><a href="the-input-element.html#dom-input-indeterminate">indeterminate</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>When set, overrides the rendering of <a href="#checkbox-state" 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">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">checked</a></code>, and
|
|
<code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code> content attributes;
|
|
<code title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code> and
|
|
<code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attributes.</p>
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
|
|
in mode <a href="common-input-element-attributes.html#dom-input-value-default-on" title="dom-input-value-default-on">default/on</a>.</p>
|
|
|
|
<p>The <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
|
|
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">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-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
|
|
<code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
|
|
<code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> event does not apply.</p>
|
|
|
|
</div><h6 id="radio-button-state"><span class="secno">4.10.7.1.17 </span><dfn title="attr-input-type-radio">Radio Button</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#radio-button-state" title="attr-input-type-radio">Radio Button</a> state, the rules
|
|
in this section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
|
|
that, when used in conjunction with other <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
elements, forms a <i><a href="#radio-button-group">radio button group</a></i> in which only one
|
|
control can have its <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> state set to true. If
|
|
the element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">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><p>The <dfn id="radio-button-group"><i>radio button group</i></dfn> that contains an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element <var title="">a</var> also contains all
|
|
the other <code><a href="the-input-element.html#the-input-element">input</a></code> elements <var title="">b</var> that
|
|
fulfill all of the following conditions:</p><ul><li>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <var title="">b</var>'s <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#radio-button-state" 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">form owner</a>, or they both have no <a href="association-of-controls-and-forms.html#form-owner">form
|
|
owner</a>.</li>
|
|
|
|
<li>They both have a <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
|
|
attribute, their <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> attributes
|
|
are not empty, and the value of <var title="">a</var>'s <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> attribute is a <a href="infrastructure.html#compatibility-caseless">compatibility
|
|
caseless</a> match for the value of <var title="">b</var>'s
|
|
<code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> attribute.</li>
|
|
|
|
</ul><p>A document must not contain an <code><a href="the-input-element.html#the-input-element">input</a></code> element whose
|
|
<i><a href="#radio-button-group">radio button group</a></i> contains only that element.</p><div class="impl">
|
|
|
|
<p>When any of the following phenomena occur, if the element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> state is true after
|
|
the occurrence, the <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> state of all the other
|
|
elements in the same <i><a href="#radio-button-group">radio button group</a></i> must be set to
|
|
false:</p>
|
|
|
|
<ul><li>The element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> state is set to
|
|
true (for whatever reason).</li>
|
|
|
|
<li>The element's <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> attribute
|
|
is set, changed, or removed.</li>
|
|
|
|
<li>The element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a> changes.</li>
|
|
|
|
</ul><p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
then: The <a href="content-models.html#pre-click-activation-steps">pre-click activation steps</a> consist of setting
|
|
the element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> to
|
|
true. The <a href="content-models.html#canceled-activation-steps">canceled activation steps</a> consist of setting
|
|
the element's <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> to
|
|
false. The <a href="content-models.html#activation-behavior">activation behavior</a> is to <a href="webappapis.html#fire-a-simple-event">fire a
|
|
simple event</a> that bubbles named <code title="event-change">change</code> at the element. .</p>
|
|
|
|
<p><strong>Constraint validation</strong>: If an element in the
|
|
<i><a href="#radio-button-group">radio button group</a></i> is <i title="concept-input-required"><a href="common-input-element-attributes.html#concept-input-required">required</a></i>, and all of the
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> elements in the <i><a href="#radio-button-group">radio button group</a></i> have a
|
|
<a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checkedness</a> that is false,
|
|
then the element is <a href="association-of-controls-and-forms.html#suffering-from-being-missing">suffering from being missing</a>.</p>
|
|
|
|
</div><p class="note">If none of the radio buttons in a <a href="#radio-button-group">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).</p><div class="bookkeeping">
|
|
|
|
<p>The following common <code><a href="the-input-element.html#the-input-element">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">checked</a></code> and
|
|
<code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code> content attributes;
|
|
<code title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code> and
|
|
<code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attributes.</p>
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
|
|
in mode <a href="common-input-element-attributes.html#dom-input-value-default-on" title="dom-input-value-default-on">default/on</a>.</p>
|
|
|
|
<p>The <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
|
|
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">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-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
|
|
<code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
|
|
<code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> event does not apply.</p>
|
|
|
|
</div><h6 id="file-upload-state"><span class="secno">4.10.7.1.18 </span><dfn title="attr-input-type-file">File Upload</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#file-upload-state" title="attr-input-type-file">File Upload</a> state, the rules in this
|
|
section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a list of
|
|
<dfn id="concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</dfn>,
|
|
each file consisting of a file name, a file type, and a file body
|
|
(the contents of the file).</p><div class="impl">
|
|
|
|
<p>File names may contain partial paths, e.g. in the case that a
|
|
user has selected an entire directory hierarchy. Path components
|
|
should be separated from each other using U+005C REVERSE SOLIDUS
|
|
character (\).</p>
|
|
|
|
<p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
the user agent should allow the user to change the files on the
|
|
list, e.g. adding or removing files. Files can be from the
|
|
filesystem or created on the fly, e.g. a picture taken from a camera
|
|
connected to the user's device.</p>
|
|
|
|
<p><strong>Constraint validation</strong>: If the element is <i title="concept-input-required"><a href="common-input-element-attributes.html#concept-input-required">required</a></i> and the list of <a href="#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a> is
|
|
empty, then the element is <a href="association-of-controls-and-forms.html#suffering-from-being-missing">suffering from being
|
|
missing</a>.</p>
|
|
|
|
<p>Unless the <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>
|
|
attribute is set, there must be no more than one file in the list of
|
|
<a href="#concept-input-type-file-selected" title="concept-input-type-file-selected">selected
|
|
files</a>.</p>
|
|
|
|
</div><hr><p>The <dfn id="attr-input-accept" title="attr-input-accept"><code>accept</code></dfn>
|
|
attribute may be specified to provide user agents with a hint of
|
|
what file types will be accepted.</p><p>If specified, the attribute must consist of a <a href="common-microsyntaxes.html#set-of-comma-separated-tokens">set of
|
|
comma-separated tokens</a>, each of which must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII
|
|
case-insensitive</a> match for one of the following:</p><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">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">ASCII case-insensitive</a>
|
|
matches for any of the other tokens (i.e. duplicates are not
|
|
allowed). <span class="impl">To obtain the list of tokens from the
|
|
attribute, the user agent must <a href="common-microsyntaxes.html#split-a-string-on-commas" title="split a string on
|
|
commas">split the attribute value on commas</a>.</span></p><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.</p><div class="impl">
|
|
|
|
<p>User agents should prevent the user from selecting files that are
|
|
not accepted by one (or more) of these tokens.</p>
|
|
|
|
</div><div class="example" id="fakepath-srsly">
|
|
|
|
<p>For historical reasons, the <code title="dom-input-value"><a href="common-input-element-attributes.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-attributes.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) { var x;
|
|
x = path.lastIndexOf('\\');
|
|
if (x >= 0) // Windows-based path
|
|
return path.substr(x+1);
|
|
x = path.lastIndexOf('/');
|
|
if (x >= 0) // Unix-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">input</a></code> element content
|
|
attributes apply to the element:
|
|
|
|
</p><p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
|
|
attributes and IDL attributes apply to the element:
|
|
<code title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
|
|
<code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>, and
|
|
<code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>;
|
|
<code title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code> and
|
|
<code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attributes.</p>
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
|
|
in mode <a href="common-input-element-attributes.html#dom-input-value-filename" title="dom-input-value-filename">filename</a>.</p>
|
|
|
|
<p>The <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">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">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
|
|
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
|
|
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
|
|
|
|
<p>The element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">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-attributes.html#dom-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
|
|
<code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
|
|
<code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> event does not apply.</p>
|
|
|
|
</div><h6 id="submit-button-state"><span class="secno">4.10.7.1.19 </span><dfn title="attr-input-type-submit">Submit Button</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#submit-button-state" title="attr-input-type-submit">Submit Button</a> state, the rules
|
|
in this section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a button
|
|
that, when activated, submits the form. <span class="impl">If the
|
|
element has a <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute,
|
|
the button's label must be the value of that attribute; otherwise,
|
|
it must be an implementation-defined string that means "Submit" or
|
|
some such.</span> The element is a <a href="forms.html#concept-button" title="concept-button">button</a>, specifically a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a>.</p><div class="impl">
|
|
|
|
<p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
the user agent should allow the user to activate the element.</p>
|
|
|
|
<p>The element's <a href="content-models.html#activation-behavior">activation behavior</a>, if the element
|
|
has a <a href="association-of-controls-and-forms.html#form-owner">form owner</a>, is to <a href="association-of-controls-and-forms.html#concept-form-submit" title="concept-form-submit">submit</a> the <a href="association-of-controls-and-forms.html#form-owner">form
|
|
owner</a> from the <code><a href="the-input-element.html#the-input-element">input</a></code> element; otherwise, it is
|
|
to do nothing.</p>
|
|
|
|
</div><p>The <code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> attributes are <a href="association-of-controls-and-forms.html#attributes-for-form-submission">attributes
|
|
for form submission</a>.</p><p class="note">The <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code> attribute can
|
|
be used to make submit buttons that do not trigger the constraint
|
|
validation.</p><div class="bookkeeping">
|
|
|
|
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
|
|
attributes and IDL attributes apply to the element:
|
|
<code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and
|
|
<code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> content attributes;
|
|
<code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute.</p>
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
|
|
in mode <a href="common-input-element-attributes.html#dom-input-value-default" title="dom-input-value-default">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
|
|
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
|
|
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">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-attributes.html#dom-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
|
|
<code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
|
|
<code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events do not apply.</p>
|
|
|
|
</div><h6 id="image-button-state"><span class="secno">4.10.7.1.20 </span><dfn title="attr-input-type-image">Image Button</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#image-button-state" title="attr-input-type-image">Image Button</a> state, the rules
|
|
in this section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">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" title="concept-button">button</a>,
|
|
specifically a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
|
|
button</a>.</p><hr><p>The image is given by the <dfn id="attr-input-src" title="attr-input-src"><code>src</code></dfn> attribute. The <code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute must be present, and
|
|
must contain a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
|
|
spaces</a> referencing a non-interactive, optionally animated,
|
|
image resource that is neither paged nor scripted.</p><div class="impl">
|
|
|
|
<p>When any of the following events occur, unless the user agent
|
|
cannot support images, or its support for images has been disabled,
|
|
or the user agent only fetches elements on demand, or the <code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute's value is the empty
|
|
string, the user agent must <a href="urls.html#resolve-a-url" title="resolve a
|
|
url">resolve</a> the value of the <code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute, relative to the
|
|
element, and if that is successful, must <a href="fetching-resources.html#fetch">fetch</a> the
|
|
resulting <a href="urls.html#absolute-url">absolute URL</a>:</p>
|
|
<ul><li>The <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is first set to the
|
|
<a href="#image-button-state" title="attr-input-type-image">Image Button</a> state
|
|
(possibly when the element is first created), and the <code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute is present.</li>
|
|
|
|
<li>The <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is changed back to
|
|
the <a href="#image-button-state" title="attr-input-type-image">Image Button</a> state,
|
|
and the <code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute is
|
|
present, and its value has changed since the last time the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute was in the <a href="#image-button-state" title="attr-input-type-image">Image Button</a> state.</li>
|
|
|
|
<li>The <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#image-button-state" title="attr-input-type-image">Image Button</a> state, and the
|
|
<code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute is set or
|
|
changed.</li>
|
|
|
|
</ul><p>Fetching the image must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the
|
|
element's document until the <a href="webappapis.html#concept-task" title="concept-task">task</a>
|
|
that is <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> by the
|
|
<a href="webappapis.html#networking-task-source">networking task source</a> once the resource has been <a href="fetching-resources.html#fetch" title="fetch">fetched</a> (defined below) has been run.</p>
|
|
|
|
<p>If the image was successfully obtained, with no network errors,
|
|
and the image's type is a supported image type, and the image is a
|
|
valid image of that type, then the image is said to be <dfn id="input-img-available" title="input-img-available"><i>available</i></dfn>. If this is true
|
|
before the image is completely downloaded, each <a href="webappapis.html#concept-task" title="concept-task">task</a> that is <a href="webappapis.html#queue-a-task" title="queue a
|
|
task">queued</a> by the <a href="webappapis.html#networking-task-source">networking task source</a> while
|
|
the image is being <a href="fetching-resources.html#fetch" title="fetch">fetched</a> must update
|
|
the presentation of the image appropriately.</p>
|
|
|
|
<p>The user agents should apply the <a href="fetching-resources.html#content-type-sniffing:-image" title="Content-Type
|
|
sniffing: image">image sniffing rules</a> to determine the type
|
|
of the image, with the image's <a href="fetching-resources.html#content-type" title="Content-Type">associated
|
|
Content-Type headers</a> giving the <var title="">official
|
|
type</var>. If these rules are not applied, then the type of the
|
|
image must be the type given by the image's <a href="fetching-resources.html#content-type" title="Content-Type">associated Content-Type headers</a>.</p>
|
|
|
|
<p>User agents must not support non-image resources with the
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element. User agents must not run executable code
|
|
embedded in the image resource. User agents must only display the
|
|
first page of a multipage resource. User agents must not allow the
|
|
resource to act in an interactive fashion, but should honor any
|
|
animation in the resource.</p>
|
|
|
|
<p>The <a href="webappapis.html#concept-task" title="concept-task">task</a> that is <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> by the <a href="webappapis.html#networking-task-source">networking task
|
|
source</a> once the resource has been <a href="fetching-resources.html#fetch" title="fetch">fetched</a>, must, if the download was successful
|
|
and the image is <i title="input-img-available"><a href="#input-img-available">available</a></i>,
|
|
<a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named
|
|
<code title="event-load">load</code> at the <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
element; and otherwise, if the fetching process fails without a
|
|
response from the remote server, or completes but the image is not a
|
|
valid or supported image, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a
|
|
simple event</a> named <code title="event-error">error</code> on
|
|
the <code><a href="the-input-element.html#the-input-element">input</a></code> element.</p>
|
|
|
|
<hr></div><p>The <dfn id="attr-input-alt" title="attr-input-alt"><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">alt</a></code> attribute must also be present,
|
|
and must contain a non-empty string.</p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension
|
|
attributes</a>.</p><div class="impl">
|
|
|
|
<hr><p>If the <code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute is set,
|
|
and the image is <i title="input-img-available"><a href="#input-img-available">available</a></i> and
|
|
the user agent is configured to display that image, then: The
|
|
element <a href="rendering.html#represents">represents</a> a control for selecting a <a href="#concept-input-type-image-coordinate" title="concept-input-type-image-coordinate">coordinate</a> from
|
|
the image specified by the <code title="attr-input-src"><a href="#attr-input-src">src</a></code>
|
|
attribute; if the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>, the user agent should
|
|
allow the user to select this <a href="#concept-input-type-image-coordinate" title="concept-input-type-image-coordinate">coordinate</a>. The
|
|
<a href="content-models.html#activation-behavior">activation behavior</a> in this case consists of taking the
|
|
user's selected <a href="#concept-input-type-image-coordinate" title="concept-input-type-image-coordinate">coordinate</a>, and
|
|
then, if the element has a <a href="association-of-controls-and-forms.html#form-owner">form owner</a>, <a href="association-of-controls-and-forms.html#concept-form-submit" title="concept-form-submit">submitting</a> the <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a> from the <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
element. If the user activates the control without explicitly
|
|
selecting a coordinate, then the coordinate (0,0) must be
|
|
assumed.</p>
|
|
|
|
<p>Otherwise, the element <a href="rendering.html#represents">represents</a> a submit button
|
|
whose label is given by the value of the <code title="attr-input-alt"><a href="#attr-input-alt">alt</a></code> attribute; if the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>, the user agent should
|
|
allow the user to activate the button. The <a href="content-models.html#activation-behavior">activation
|
|
behavior</a> in this case consists of setting the <a href="#concept-input-type-image-coordinate" title="concept-input-type-image-coordinate">selected
|
|
coordinate</a> to (0,0), and then, if the element has a
|
|
<a href="association-of-controls-and-forms.html#form-owner">form owner</a>, <a href="association-of-controls-and-forms.html#concept-form-submit" title="concept-form-submit">submitting</a> the <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a> from the <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
element.</p>
|
|
|
|
<p>The <dfn id="concept-input-type-image-coordinate" title="concept-input-type-image-coordinate">selected
|
|
coordinate</dfn> must consist of an <var title="">x</var>-component
|
|
and a <var title="">y</var>-component. The coordinates represent the
|
|
position relative to the edge of the image, with the coordinate
|
|
space having the positive <var title="">x</var> direction to the
|
|
right, and the positive <var title="">y</var> direction
|
|
downwards.</p>
|
|
|
|
<p>The <var title="">x</var>-component must be a <a href="common-microsyntaxes.html#valid-integer">valid
|
|
integer</a> representing a number <var title="">x</var> in the
|
|
range <span title="">−(<var title="">border<sub title="">left</sub></var>+<var title="">padding<sub title="">left</sub></var>) ≤ <var title="">x</var> ≤ <var title="">width</var>+<var title="">border<sub title="">right</sub></var>+<var title="">padding<sub title="">right</sub></var></span>, where <var title="">width</var>
|
|
is the rendered width of the image, <var title="">border<sub title="">left</sub></var> is the width of the border on the left of
|
|
the image, <var title="">padding<sub title="">left</sub></var> is
|
|
the width of the padding on the left of the image, <var title="">border<sub title="">right</sub></var> is the width of the
|
|
border on the right of the image, and <var title="">padding<sub title="">right</sub></var> is the width of the padding on the right
|
|
of the image, with all dimensions given in CSS pixels.</p>
|
|
|
|
<p>The <var title="">y</var>-component must be a <a href="common-microsyntaxes.html#valid-integer">valid
|
|
integer</a> representing a number <var title="">y</var> in the
|
|
range <span title="">−(<var title="">border<sub title="">top</sub></var>+<var title="">padding<sub title="">top</sub></var>) ≤ <var title="">y</var> ≤ <var title="">height</var>+<var title="">border<sub title="">bottom</sub></var>+<var title="">padding<sub title="">bottom</sub></var></span>, where <var title="">height</var>
|
|
is the rendered height of the image, <var title="">border<sub title="">top</sub></var> is the width of the border above the image,
|
|
<var title="">padding<sub title="">top</sub></var> is the width of
|
|
the padding above the image, <var title="">border<sub title="">bottom</sub></var> is the width of the border below the
|
|
image, and <var title="">padding<sub title="">bottom</sub></var> is
|
|
the width of the padding below the image, with all dimensions given
|
|
in CSS pixels.</p>
|
|
|
|
<p>Where a border or padding is missing, its width is zero CSS
|
|
pixels.</p>
|
|
|
|
<hr></div><p>The <code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> attributes are <a href="association-of-controls-and-forms.html#attributes-for-form-submission">attributes
|
|
for form submission</a>.</p><div class="bookkeeping">
|
|
|
|
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
|
|
attributes and IDL attributes apply to the element:
|
|
<code title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
|
|
<code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code> content attributes;
|
|
<code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute.</p>
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
|
|
in mode <a href="common-input-element-attributes.html#dom-input-value-default" title="dom-input-value-default">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
|
|
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>, and
|
|
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>.</p>
|
|
|
|
<p>The element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">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-attributes.html#dom-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
|
|
<code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
|
|
<code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">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="embedded-content-1.html#the-img-element">img</a></code> element. Readers are encouraged
|
|
to read that section, where many of the same requirements are
|
|
described in more detail.</p><h6 id="reset-button-state"><span class="secno">4.10.7.1.21 </span><dfn title="attr-input-type-reset">Reset Button</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#reset-button-state" title="attr-input-type-reset">Reset Button</a> state, the rules
|
|
in this section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a button
|
|
that, when activated, resets the form. <span class="impl">If the
|
|
element has a <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute,
|
|
the button's label must be the value of that attribute; otherwise,
|
|
it must be an implementation-defined string that means "Reset" or
|
|
some such.</span> The element is a <a href="forms.html#concept-button" title="concept-button">button</a>.</p><div class="impl">
|
|
|
|
<p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
the user agent should allow the user to activate the element.</p>
|
|
|
|
<p>The element's <a href="content-models.html#activation-behavior">activation behavior</a>, if the element
|
|
has a <a href="association-of-controls-and-forms.html#form-owner">form owner</a>, is to <a href="association-of-controls-and-forms.html#concept-form-reset" title="concept-form-reset">reset</a> the <a href="association-of-controls-and-forms.html#form-owner">form owner</a>;
|
|
otherwise, it is to do nothing.</p>
|
|
|
|
<p><strong>Constraint validation</strong>: The element is
|
|
<a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>
|
|
|
|
</div><div class="bookkeeping">
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute
|
|
applies to this element and is in mode <a href="common-input-element-attributes.html#dom-input-value-default" title="dom-input-value-default">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
|
|
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
|
|
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">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-attributes.html#dom-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
|
|
<code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
|
|
<code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events do not apply.</p>
|
|
|
|
</div><h6 id="button-state"><span class="secno">4.10.7.1.22 </span><dfn title="attr-input-type-button">Button</dfn> state</h6><div class="impl">
|
|
|
|
<p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#button-state" title="attr-input-type-button">Button</a> state, the rules in
|
|
this section apply.</p>
|
|
|
|
</div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">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">value</a></code> attribute, though it
|
|
may be the empty string. <span class="impl">If the element has a
|
|
<code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, the button's
|
|
label must be the value of that attribute; otherwise, it must be the
|
|
empty string.</span> The element is a <a href="forms.html#concept-button" title="concept-button">button</a>.</p><div class="impl">
|
|
|
|
<p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
|
|
the user agent should allow the user to activate the element. The
|
|
element's <a href="content-models.html#activation-behavior">activation behavior</a> is to do nothing.</p>
|
|
|
|
<p><strong>Constraint validation</strong>: The element is
|
|
<a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>
|
|
|
|
</div><div class="bookkeeping">
|
|
|
|
<p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute
|
|
applies to this element and is in mode <a href="common-input-element-attributes.html#dom-input-value-default" title="dom-input-value-default">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">accept</a></code>,
|
|
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
|
|
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
|
|
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
|
|
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
|
|
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
|
|
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
|
|
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
|
|
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
|
|
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
|
|
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
|
|
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
|
|
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
|
|
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
|
|
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
|
|
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
|
|
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
|
|
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
|
|
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
|
|
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
|
|
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
|
|
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">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-attributes.html#dom-input-checked">checked</a></code>,
|
|
<code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
|
|
<code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
|
|
<code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
|
|
<code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
|
|
<code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
|
|
<code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
|
|
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
|
|
<code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
|
|
<code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>
|
|
|
|
<p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events do not apply.</p>
|
|
|
|
</div></body></html>
|