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.
2210 lines
140 KiB
2210 lines
140 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.18 Association of controls and forms — 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="the-button-element.html" title="4.10.8 The button element" rel="prev">
|
|
<link href="spec.html#contents" title="Table of contents" rel="index">
|
|
<link href="interactive-elements.html" title="4.11 Interactive elements" 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="the-button-element.html" class="prev">4.10.8 The button element</a> –
|
|
<a href="spec.html#contents">Table of contents</a> –
|
|
<a href="interactive-elements.html" class="next">4.11 Interactive elements</a>
|
|
<ol class="toc"><li><ol><li><ol><li><a href="association-of-controls-and-forms.html#association-of-controls-and-forms"><span class="secno">4.10.18 </span>Association of controls and forms</a></li><li><a href="association-of-controls-and-forms.html#attributes-common-to-form-controls"><span class="secno">4.10.19 </span>Attributes common to form controls</a>
|
|
<ol><li><a href="association-of-controls-and-forms.html#naming-form-controls"><span class="secno">4.10.19.1 </span>Naming form controls</a></li><li><a href="association-of-controls-and-forms.html#enabling-and-disabling-form-controls"><span class="secno">4.10.19.2 </span>Enabling and disabling form controls</a></li><li><a href="association-of-controls-and-forms.html#a-form-control-s-value"><span class="secno">4.10.19.3 </span>A form control's value</a></li><li><a href="association-of-controls-and-forms.html#autofocusing-a-form-control"><span class="secno">4.10.19.4 </span>Autofocusing a form control</a></li><li><a href="association-of-controls-and-forms.html#limiting-user-input-length"><span class="secno">4.10.19.5 </span>Limiting user input length</a></li><li><a href="association-of-controls-and-forms.html#form-submission-0"><span class="secno">4.10.19.6 </span>Form submission</a></li><li><a href="association-of-controls-and-forms.html#submitting-element-directionality"><span class="secno">4.10.19.7 </span>Submitting element directionality</a></li></ol></li><li><a href="association-of-controls-and-forms.html#textFieldSelection"><span class="secno">4.10.20 </span>APIs for the text field selections</a></li><li><a href="association-of-controls-and-forms.html#constraints"><span class="secno">4.10.21 </span>Constraints</a>
|
|
<ol><li><a href="association-of-controls-and-forms.html#definitions"><span class="secno">4.10.21.1 </span>Definitions</a></li><li><a href="association-of-controls-and-forms.html#constraint-validation"><span class="secno">4.10.21.2 </span>Constraint validation</a></li><li><a href="association-of-controls-and-forms.html#the-constraint-validation-api"><span class="secno">4.10.21.3 </span>The constraint validation API</a></li><li><a href="association-of-controls-and-forms.html#security-forms"><span class="secno">4.10.21.4 </span>Security</a></li></ol></li><li><a href="association-of-controls-and-forms.html#form-submission"><span class="secno">4.10.22 </span>Form submission</a>
|
|
<ol><li><a href="association-of-controls-and-forms.html#introduction-2"><span class="secno">4.10.22.1 </span>Introduction</a></li><li><a href="association-of-controls-and-forms.html#implicit-submission"><span class="secno">4.10.22.2 </span>Implicit submission</a></li><li><a href="association-of-controls-and-forms.html#form-submission-algorithm"><span class="secno">4.10.22.3 </span>Form submission algorithm</a></li><li><a href="association-of-controls-and-forms.html#constructing-form-data-set"><span class="secno">4.10.22.4 </span>Constructing the form data set</a></li><li><a href="association-of-controls-and-forms.html#url-encoded-form-data"><span class="secno">4.10.22.5 </span>URL-encoded form data</a></li><li><a href="association-of-controls-and-forms.html#multipart-form-data"><span class="secno">4.10.22.6 </span>Multipart form data</a></li><li><a href="association-of-controls-and-forms.html#plain-text-form-data"><span class="secno">4.10.22.7 </span>Plain text form data</a></li></ol></li><li><a href="association-of-controls-and-forms.html#resetting-a-form"><span class="secno">4.10.23 </span>Resetting a form</a></li></ol></li></ol></li></ol></div>
|
|
|
|
<h4 id="association-of-controls-and-forms"><span class="secno">4.10.18 </span>Association of controls and forms</h4><p>A <a href="forms.html#form-associated-element">form-associated element</a> can have a relationship
|
|
with a <code><a href="forms.html#the-form-element">form</a></code> element, which is called the element's
|
|
<dfn id="form-owner">form owner</dfn>. If a <a href="forms.html#form-associated-element">form-associated element</a> is
|
|
not associated with a <code><a href="forms.html#the-form-element">form</a></code> element, its <a href="#form-owner">form
|
|
owner</a> is said to be null.</p><p>A <a href="forms.html#form-associated-element">form-associated element</a> is, by default, associated
|
|
with its <span class="impl">nearest</span> ancestor
|
|
<code><a href="forms.html#the-form-element">form</a></code> element<span class="impl"> (as described
|
|
below)</span>, but may have a <dfn id="attr-fae-form" title="attr-fae-form"><code>form</code></dfn> attribute specified to
|
|
override this.</p><p class="note">This feature allows authors to work around the lack
|
|
of support for nested <code><a href="forms.html#the-form-element">form</a></code> elements.</p><p>If a <a href="forms.html#form-associated-element">form-associated element</a> has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute specified, then that
|
|
attribute's value must be the <a href="elements.html#concept-id" title="concept-id">ID</a> of a <code><a href="forms.html#the-form-element">form</a></code> element in
|
|
the element's owner <code><a href="infrastructure.html#document">Document</a></code>.</p><div class="impl">
|
|
|
|
<p class="note">The rules in this section are complicated by the
|
|
fact that although conforming documents will never contain nested
|
|
<code><a href="forms.html#the-form-element">form</a></code> elements, it is quite possible (e.g. using a
|
|
script that performs DOM manipulation) to generate documents that
|
|
have such nested elements. They are also complicated by rules in the
|
|
HTML parser that, for historical reasons, can result in a
|
|
<a href="forms.html#form-associated-element">form-associated element</a> being associated with a
|
|
<code><a href="forms.html#the-form-element">form</a></code> element that is not its ancestor.</p>
|
|
|
|
<p>When a <a href="forms.html#form-associated-element">form-associated element</a> is created, its
|
|
<a href="#form-owner">form owner</a> must be initialized to null (no owner).</p>
|
|
|
|
<p>When a <a href="forms.html#form-associated-element">form-associated element</a> is to be <dfn id="concept-form-association" title="concept-form-association">associated</dfn> with a form, its
|
|
<a href="#form-owner">form owner</a> must be set to that form.</p>
|
|
|
|
<p>When a <a href="forms.html#form-associated-element">form-associated element</a>'s ancestor chain
|
|
changes, e.g. because it or one of its ancestors was <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element into a document">inserted</a> or <a href="infrastructure.html#remove-an-element-from-a-document" title="remove an element from a document">removed</a> from a
|
|
<code><a href="infrastructure.html#document">Document</a></code>, then the user agent must <a href="#reset-the-form-owner">reset the form
|
|
owner</a> of that element. <span class="note">The <a href="parsing.html#html-parser">HTML
|
|
parser</a> overrides this requirement when inserting form
|
|
controls.</span></p>
|
|
|
|
<p>When a <a href="forms.html#form-associated-element">form-associated element</a>'s <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is set, changed, or
|
|
removed, then the user agent must <a href="#reset-the-form-owner">reset the form owner</a>
|
|
of that element.</p>
|
|
|
|
<p>When a <a href="forms.html#form-associated-element">form-associated element</a> has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute and the <a href="elements.html#concept-id" title="concept-id">ID</a> of any of the
|
|
elements in the <code><a href="infrastructure.html#document">Document</a></code> changes, then the user agent
|
|
must <a href="#reset-the-form-owner">reset the form owner</a> of that <a href="forms.html#form-associated-element">form-associated
|
|
element</a>.</p>
|
|
|
|
<p>When a <a href="forms.html#form-associated-element">form-associated element</a> has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute and an element with an
|
|
<a href="elements.html#concept-id" title="concept-id">ID</a> is <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element into a document">inserted
|
|
into</a> or <a href="infrastructure.html#remove-an-element-from-a-document" title="remove an element from a
|
|
document">removed from</a> the <code><a href="infrastructure.html#document">Document</a></code>, then the
|
|
user agent must <a href="#reset-the-form-owner">reset the form owner</a> of that
|
|
<a href="forms.html#form-associated-element">form-associated element</a>.</p>
|
|
|
|
<p>When the user agent is to <dfn id="reset-the-form-owner">reset the form owner</dfn> of a
|
|
<a href="forms.html#form-associated-element">form-associated element</a>, it must run the following
|
|
steps:</p>
|
|
|
|
<ol><li><p>If the element's <a href="#form-owner">form owner</a> is not null, and
|
|
the element's <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> content
|
|
attribute is not present, and the element's <a href="#form-owner">form owner</a>
|
|
is its nearest <code><a href="forms.html#the-form-element">form</a></code> element ancestor after the change
|
|
to the ancestor chain, then do nothing, and abort these
|
|
steps.</p></li>
|
|
|
|
<li><p>Let the element's <a href="#form-owner">form owner</a> be null.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>If the element has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>
|
|
content attribute, then run these substeps:</p>
|
|
|
|
<ol><li><p>If the first element <a href="infrastructure.html#in-a-document" title="in a Document">in the
|
|
<code>Document</code></a> to have an <a href="elements.html#concept-id" title="concept-id">ID</a> that is <a href="infrastructure.html#case-sensitive" title="case-sensitive">case-sensitively</a> equal to the
|
|
element's <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> content
|
|
attribute's value is a <code><a href="forms.html#the-form-element">form</a></code> element, then <a href="#concept-form-association" title="concept-form-association">associate</a> the
|
|
<a href="forms.html#form-associated-element">form-associated element</a> with that <code><a href="forms.html#the-form-element">form</a></code>
|
|
element.</p></li>
|
|
|
|
<li><p>Abort the "reset the form owner" steps.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Otherwise, if the <a href="forms.html#form-associated-element">form-associated element</a> in
|
|
question has an ancestor <code><a href="forms.html#the-form-element">form</a></code> element, then <a href="#concept-form-association" title="concept-form-association">associate</a> the
|
|
<a href="forms.html#form-associated-element">form-associated element</a> with the nearest such ancestor
|
|
<code><a href="forms.html#the-form-element">form</a></code> element.</p></li>
|
|
|
|
<li><p>Otherwise, the element is left unassociated.</p></li>
|
|
|
|
</ol><div class="example">
|
|
|
|
<p>In the following non-conforming snippet:</p>
|
|
|
|
<pre class="bad">...
|
|
<form id="a">
|
|
<div id="b"></div>
|
|
</form>
|
|
<script>
|
|
document.getElementById('b').innerHTML =
|
|
'<table><tr><td><form id="c"><input id="d"></table>' +
|
|
'<input id="e">';
|
|
</script>
|
|
...</pre>
|
|
|
|
<p>The <a href="#form-owner">form owner</a> of "d" would be the inner nested
|
|
form "c", while the <a href="#form-owner">form owner</a> of "e" would be the
|
|
outer form "a".</p>
|
|
|
|
<p>This happens as follows: First, the "e" node gets associated
|
|
with "c" in the <a href="parsing.html#html-parser">HTML parser</a>. Then, the <code title="dom-innerHTML"><a href="apis-in-html-documents.html#dom-innerhtml">innerHTML</a></code> algorithm moves the nodes
|
|
from the temporary document to the "b" element. At this point, the
|
|
nodes see their ancestor chain change, and thus all the "magic"
|
|
associations done by the parser are reset to normal ancestor
|
|
associations.</p>
|
|
|
|
<p>This example is a non-conforming document, though, as it is a
|
|
violation of the content models to nest <code><a href="forms.html#the-form-element">form</a></code>
|
|
elements.</p>
|
|
|
|
</div>
|
|
|
|
</div><dl class="domintro"><dt><var title="">element</var> . <code title="dom-fae-form"><a href="#dom-fae-form">form</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the element's <a href="#form-owner">form owner</a>.</p>
|
|
|
|
<p>Returns null if there isn't one.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p><a href="forms.html#form-associated-element" title="form-associated element">Form-associated
|
|
elements</a> have a <dfn id="dom-fae-form" title="dom-fae-form"><code>form</code></dfn> IDL attribute, which,
|
|
on getting, must return the element's <a href="#form-owner">form owner</a>, or
|
|
null if there isn't one.</p>
|
|
|
|
</div><h4 id="attributes-common-to-form-controls"><span class="secno">4.10.19 </span><dfn>Attributes common to form controls</dfn></h4><h5 id="naming-form-controls"><span class="secno">4.10.19.1 </span>Naming form controls</h5><p>The <dfn id="attr-fe-name" title="attr-fe-name"><code>name</code></dfn> content
|
|
attribute gives the name of the form control, as used in <a href="#form-submission">form
|
|
submission</a> and in the <code><a href="forms.html#the-form-element">form</a></code> element's <code title="dom-form-elements"><a href="forms.html#dom-form-elements">elements</a></code> object. If the attribute
|
|
is specified, its value must not be the empty string.</p><p>Any non-empty value for <code title="attr-form-name"><a href="forms.html#attr-form-name">name</a></code>
|
|
is allowed, but the names "<code title="attr-fe-name-charset"><a href="#attr-fe-name-charset">_charset_</a></code>" and "<code title="attr-fe-name-isindex"><a href="#attr-fe-name-isindex">isindex</a></code>" are special:</p><dl><dt><dfn id="attr-fe-name-isindex" title="attr-fe-name-isindex"><code>isindex</code></dfn></dt>
|
|
<dd>
|
|
<p>This value, if used as the name of a <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-text">Text</a> control that is the first
|
|
control in a form that is submitted using the <code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
|
|
mechanism, causes the submission to only include the value of this
|
|
control, with no name.</p>
|
|
</dd>
|
|
|
|
<dt><dfn id="attr-fe-name-charset" title="attr-fe-name-charset"><code>_charset_</code></dfn></dt>
|
|
<dd>
|
|
<p>This value, if used as the name of a <a href="states-of-the-type-attribute.html#hidden-state" title="attr-input-type-hidden">Hidden</a> control with no <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, is automatically
|
|
given a value during submission consisting of the submission
|
|
character encoding.</p>
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-fe-name" title="dom-fe-name"><code>name</code></dfn> IDL
|
|
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> content attribute.</p>
|
|
|
|
</div><h5 id="enabling-and-disabling-form-controls"><span class="secno">4.10.19.2 </span>Enabling and disabling form controls</h5><p>The <dfn id="attr-fe-disabled" title="attr-fe-disabled"><code>disabled</code></dfn>
|
|
content attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>.</p><p>A form control is <dfn id="concept-fe-disabled" title="concept-fe-disabled">disabled</dfn>
|
|
if its <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> attribute is
|
|
set, or if it is a descendant of a <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element
|
|
whose <code title="attr-fieldset-disabled"><a href="forms.html#attr-fieldset-disabled">disabled</a></code> attribute
|
|
is set and is <em>not</em> a descendant of that
|
|
<code><a href="forms.html#the-fieldset-element">fieldset</a></code> element's first <code><a href="forms.html#the-legend-element">legend</a></code> element
|
|
child, if any.</p><div class="impl">
|
|
|
|
<p>A form control that is <a href="#concept-fe-disabled" title="concept-fe-disabled">disabled</a> must prevent any <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> events that are <a href="webappapis.html#queue-a-task" title="queue
|
|
a task">queued</a> on the <a href="webappapis.html#user-interaction-task-source">user interaction task
|
|
source</a> from being dispatched on the element.</p>
|
|
|
|
<p><strong>Constraint validation</strong>: If an element is <a href="#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, it is <a href="#barred-from-constraint-validation">barred from
|
|
constraint validation</a>.</p>
|
|
|
|
<p>The <dfn id="dom-fe-disabled" title="dom-fe-disabled"><code>disabled</code></dfn> IDL
|
|
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> content attribute.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h5 id="a-form-control-s-value"><span class="secno">4.10.19.3 </span>A form control's value</h5>
|
|
|
|
<p>Form controls have a <dfn id="concept-fe-value" title="concept-fe-value">value</dfn>
|
|
and a <dfn id="concept-fe-checked" title="concept-fe-checked">checkedness</dfn>. (The latter
|
|
is only used by <code><a href="the-input-element.html#the-input-element">input</a></code> elements.) These are used to
|
|
describe how the user interacts with the control.</p>
|
|
|
|
<p>To define the behaviour of constraint validation in the face of
|
|
the <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code> attribute,
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> elements can also have separately defined <dfn id="concept-fe-values" title="concept-fe-values">value<em>s</em></dfn>.</p>
|
|
|
|
</div><h5 id="autofocusing-a-form-control"><span class="secno">4.10.19.4 </span>Autofocusing a form control</h5><p>The <dfn id="attr-fe-autofocus" title="attr-fe-autofocus"><code>autofocus</code></dfn>
|
|
content attribute allows the author to indicate that a control is to
|
|
be focused as soon as the page is loaded, allowing the user to just
|
|
start typing without having to manually focus the main control.</p><p>The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute is
|
|
a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>.</p><p>There must not be more than one element in the document with the
|
|
<code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute
|
|
specified.</p><div class="impl">
|
|
|
|
<p>When an element with the <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute specified is
|
|
<a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element into a document">inserted into a
|
|
document</a>, user agents should run the following steps:</p>
|
|
|
|
<ol><li><p>Let <var title="">target</var> be the element's
|
|
<code><a href="infrastructure.html#document">Document</a></code>.</p></li>
|
|
|
|
<li><p>If <var title="">target</var> has no <a href="browsers.html#browsing-context">browsing
|
|
context</a>, abort these steps.</p></li>
|
|
|
|
<li><p>If <var title="">target</var>'s <a href="browsers.html#browsing-context">browsing
|
|
context</a> has no <a href="browsers.html#top-level-browsing-context">top-level browsing context</a> (e.g.
|
|
it is a <a href="browsers.html#nested-browsing-context">nested browsing context</a> with no <a href="browsers.html#parent-browsing-context">parent
|
|
browsing context</a>), abort these steps.</p></li>
|
|
|
|
<li><p>If <var title="">target</var>'s <a href="browsers.html#browsing-context">browsing
|
|
context</a> had the <a href="the-iframe-element.html#sandboxed-automatic-features-browsing-context-flag">sandboxed automatic features browsing
|
|
context flag</a> set when <var title="">target</var> was
|
|
created, abort these steps.</p></li>
|
|
|
|
<li><p>If <var title="">target</var>'s <a href="origin-0.html#origin">origin</a> is not
|
|
the <a href="origin-0.html#same-origin" title="same origin">same</a> as the
|
|
<a href="origin-0.html#origin">origin</a> of the <code><a href="infrastructure.html#document">Document</a></code> of the currently
|
|
focused element in <var title="">target</var>'s <a href="browsers.html#top-level-browsing-context">top-level
|
|
browsing context</a>, abort these steps.</p></li>
|
|
|
|
<li><p>If <var title="">target</var>'s <a href="origin-0.html#origin">origin</a> is not
|
|
the <a href="origin-0.html#same-origin" title="same origin">same</a> as the
|
|
<a href="origin-0.html#origin">origin</a> of the <a href="browsers.html#active-document">active document</a> of <var title="">target</var>'s <a href="browsers.html#top-level-browsing-context">top-level browsing context</a>,
|
|
abort these steps.</p></li>
|
|
|
|
<li><p>If the user agent has already reached the last step of this
|
|
list of steps in response to an element being <a href="infrastructure.html#insert-an-element-into-a-document" title="insert
|
|
an element into a document">inserted</a> into a
|
|
<code><a href="infrastructure.html#document">Document</a></code> whose <a href="browsers.html#top-level-browsing-context">top-level browsing
|
|
context</a>'s <a href="browsers.html#active-document">active document</a> is the same as <var title="">target</var>'s <a href="browsers.html#top-level-browsing-context">top-level browsing context</a>'s
|
|
<a href="browsers.html#active-document">active document</a>, abort these steps.</p></li>
|
|
|
|
<li><p>If the user has indicated (for example, by starting to type
|
|
in a form control) that he does not wish focus to be changed, then
|
|
optionally abort these steps.</p></li>
|
|
|
|
<li><p><a href="webappapis.html#queue-a-task">Queue a task</a> that checks to see if the element
|
|
is <a href="editing.html#focusable">focusable</a>, and if so, runs the <a href="editing.html#focusing-steps">focusing
|
|
steps</a> for that element. User agents may also change the
|
|
scrolling position of the document, or perform some other action
|
|
that brings the element to the user's attention. The <a href="webappapis.html#task-source">task
|
|
source</a> for this task is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation task
|
|
source</a>.</p></li>
|
|
|
|
</ol><p class="note">Focusing the control does not imply that the user
|
|
agent must focus the browser window if it has lost focus.</p>
|
|
|
|
<p>The <dfn id="dom-fe-autofocus" title="dom-fe-autofocus"><code>autofocus</code></dfn>
|
|
IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
|
|
same name.</p>
|
|
|
|
</div><div class="example">
|
|
<p>In the following snippet, the text control would be focused when
|
|
the document was loaded.</p>
|
|
<pre><input maxlength="256" name="q" value="" autofocus>
|
|
<input type="submit" value="Search"></pre>
|
|
</div><h5 id="limiting-user-input-length"><span class="secno">4.10.19.5 </span>Limiting user input length</h5><p>A <dfn id="attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var>, declares a limit on the number of
|
|
characters a user can input.</p><p>If an element has its <a href="#attr-fe-maxlength" title="attr-fe-maxlength">form
|
|
control <code title="">maxlength</code> attribute</a> specified,
|
|
the attribute's value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
|
|
integer</a>. If the attribute is specified and applying the
|
|
<a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to its value
|
|
results in a number, then that number is the element's <dfn id="maximum-allowed-value-length">maximum
|
|
allowed value length</dfn>. If the attribute is omitted or parsing
|
|
its value results in an error, then there is no <a href="#maximum-allowed-value-length">maximum
|
|
allowed value length</a>.</p><div class="impl">
|
|
|
|
<p><strong>Constraint validation</strong>: If an element has a
|
|
<a href="#maximum-allowed-value-length">maximum allowed value length</a>, its <var title="">dirty
|
|
value flag</var> is true, its <a href="#concept-fe-value" title="concept-fe-value">value</a> was last changed by a user
|
|
edit (as opposed to a change made by a script), and the
|
|
<a href="common-microsyntaxes.html#code-point-length">code-point length</a> of the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> is greater than the element's
|
|
<a href="#maximum-allowed-value-length">maximum allowed value length</a>, then the element is
|
|
<a href="#suffering-from-being-too-long">suffering from being too long</a>.</p>
|
|
|
|
<p>User agents may prevent the user from causing the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to be set to a value whose
|
|
<a href="common-microsyntaxes.html#code-point-length">code-point length</a> is greater than the element's
|
|
<a href="#maximum-allowed-value-length">maximum allowed value length</a>.</p>
|
|
|
|
</div><h5 id="form-submission-0"><span class="secno">4.10.19.6 </span>Form submission</h5><p><dfn id="attributes-for-form-submission">Attributes for form submission</dfn> can be specified both
|
|
on <code><a href="forms.html#the-form-element">form</a></code> elements and on <a href="forms.html#concept-submit-button" title="concept-submit-button">submit buttons</a> (elements that
|
|
represent buttons that submit forms, e.g. an <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
element whose <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.html#submit-button-state" title="attr-input-type-submit">Submit Button</a>
|
|
state).
|
|
|
|
</p><p>The <a href="#attributes-for-form-submission">attributes for form submission</a> that may be
|
|
specified on <code><a href="forms.html#the-form-element">form</a></code> elements are <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>, <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code>, <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code>, <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code>, and <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code>.</p><p>The corresponding <a href="#attributes-for-form-submission">attributes for form submission</a>
|
|
that may be specified on <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
|
|
buttons</a> are <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>. When omitted, they
|
|
default to the values given on the corresponding attributes on the
|
|
<code><a href="forms.html#the-form-element">form</a></code> element.</p><hr><p>The <dfn id="attr-fs-action" title="attr-fs-action"><code>action</code></dfn> and
|
|
<dfn id="attr-fs-formaction" title="attr-fs-formaction"><code>formaction</code></dfn>
|
|
content attributes, if specified, must have a value that is a
|
|
<a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
|
|
spaces</a>.</p><p>The <dfn id="concept-fs-action" title="concept-fs-action">action</dfn> of an element is
|
|
the value of the element's <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code> attribute, if the
|
|
element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
|
|
button</a> and has such an attribute, or the value of its
|
|
<a href="#form-owner">form owner</a>'s <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>
|
|
attribute, if <em>it</em> has one, or else the empty string.</p><hr><p>The <dfn id="attr-fs-method" title="attr-fs-method"><code>method</code></dfn> and
|
|
<dfn id="attr-fs-formmethod" title="attr-fs-formmethod"><code>formmethod</code></dfn>
|
|
content attributes are <a href="common-microsyntaxes.html#enumerated-attribute" title="enumerated attribute">enumerated
|
|
attributes</a> with the following keywords and states:</p><ul><li>The keyword <dfn id="attr-fs-method-get-keyword" title="attr-fs-method-GET-keyword"><code>get</code></dfn>, mapping
|
|
to the state <dfn id="attr-fs-method-get" title="attr-fs-method-GET">GET</dfn>, indicating
|
|
the HTTP GET method.</li>
|
|
|
|
<li>The keyword <dfn id="attr-fs-method-post-keyword" title="attr-fs-method-POST-keyword"><code>post</code></dfn>, mapping
|
|
to the state <dfn id="attr-fs-method-post" title="attr-fs-method-POST">POST</dfn>, indicating
|
|
the HTTP POST method.</li>
|
|
|
|
</ul><p>The <i>missing value default</i> for these attributes is the
|
|
<a href="#attr-fs-method-get" title="attr-fs-method-GET">GET</a> state.</p><p>The <dfn id="concept-fs-method" title="concept-fs-method">method</dfn> of an element is
|
|
one of those states. If the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and has a <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code> attribute, then the
|
|
element's <a href="#concept-fs-method" title="concept-fs-method">method</a> is that
|
|
attribute's state; otherwise, it is the <a href="#form-owner">form owner</a>'s
|
|
<code title="attr-fs-method"><a href="#attr-fs-method">method</a></code> attribute's state.</p><hr><p>The <dfn id="attr-fs-enctype" title="attr-fs-enctype"><code>enctype</code></dfn> and
|
|
<dfn id="attr-fs-formenctype" title="attr-fs-formenctype"><code>formenctype</code></dfn>
|
|
content attributes are <a href="common-microsyntaxes.html#enumerated-attribute" title="enumerated attribute">enumerated
|
|
attributes</a> with the following keywords and states:</p><ul><li>The "<dfn id="attr-fs-enctype-urlencoded" title="attr-fs-enctype-urlencoded"><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.</li>
|
|
<li>The "<dfn id="attr-fs-enctype-formdata" title="attr-fs-enctype-formdata"><code>multipart/form-data</code></dfn>" keyword and corresponding state.</li>
|
|
<li>The "<dfn id="attr-fs-enctype-text" title="attr-fs-enctype-text"><code>text/plain</code></dfn>" keyword and corresponding state.</li>
|
|
</ul><p>The <i>missing value default</i> for these attributes is the
|
|
<code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
|
|
state.</p><p>The <dfn id="concept-fs-enctype" title="concept-fs-enctype">enctype</dfn> of an element
|
|
is one of those three states. If the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and has a <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code> attribute, then the
|
|
element's <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a> is that
|
|
attribute's state; otherwise, it is the <a href="#form-owner">form owner</a>'s
|
|
<code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code> attribute's state.</p><hr><p>The <dfn id="attr-fs-target" title="attr-fs-target"><code>target</code></dfn> and
|
|
<dfn id="attr-fs-formtarget" title="attr-fs-formtarget"><code>formtarget</code></dfn>
|
|
content attributes, if specified, must have values that are <a href="browsers.html#valid-browsing-context-name-or-keyword" title="valid browsing context name or keyword">valid browsing
|
|
context names or keywords</a>.</p><p>The <dfn id="concept-fs-target" title="concept-fs-target">target</dfn> of an element is
|
|
the value of the element's <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> attribute, if the
|
|
element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
|
|
button</a> and has such an attribute; or the value of its
|
|
<a href="#form-owner">form owner</a>'s <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code>
|
|
attribute, if <em>it</em> has such an attribute; or, if the
|
|
<code><a href="infrastructure.html#document">Document</a></code> contains a <code><a href="semantics.html#the-base-element">base</a></code> element with a
|
|
<code title="attr-base-target"><a href="semantics.html#attr-base-target">target</a></code> attribute, then the
|
|
value of the <code title="attr-base-target"><a href="semantics.html#attr-base-target">target</a></code> attribute
|
|
of the first such <code><a href="semantics.html#the-base-element">base</a></code> element; or, if there is no such
|
|
element, the empty string.</p><hr><p>The <dfn id="attr-fs-novalidate" title="attr-fs-novalidate"><code>novalidate</code></dfn>
|
|
and <dfn id="attr-fs-formnovalidate" title="attr-fs-formnovalidate"><code>formnovalidate</code></dfn>
|
|
content attributes are <a href="common-microsyntaxes.html#boolean-attribute" title="boolean attribute">boolean
|
|
attributes</a>. If present, they indicate that the form is not to
|
|
be validated during submission.</p><p>The <dfn id="concept-fs-novalidate" title="concept-fs-novalidate">no-validate state</dfn> of
|
|
an element is true if the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and the element's
|
|
<code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> attribute
|
|
is present, or if the element's <a href="#form-owner">form owner</a>'s <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code> attribute is present,
|
|
and false otherwise.</p><div class="example">
|
|
|
|
<p>This attribute is useful to include "save" buttons on forms that
|
|
have validation constraints, to allow users to save their progress
|
|
even though they haven't fully entered the data in the form. The
|
|
following example shows a simple form that has two required
|
|
fields. There are three buttons: one to submit the form, which
|
|
requires both fields to be filled in; one to save the form so that
|
|
the user can come back and fill it in later; and one to cancel the
|
|
form altogether.</p>
|
|
|
|
<pre><form action="editor.cgi" method="post">
|
|
<p><label>Name: <input required name=fn></label></p>
|
|
<p><label>Essay: <textarea required name=essay></textarea></label></p>
|
|
<p><input type=submit name=submit value="Submit essay"></p>
|
|
<p><input type=submit formnovalidate name=save value="Save essay"></p>
|
|
<p><input type=submit formnovalidate name=cancel value="Cancel"></p>
|
|
</form></pre>
|
|
|
|
</div><div class="impl">
|
|
|
|
<hr><p>The <dfn id="dom-fs-action" title="dom-fs-action"><code>action</code></dfn> IDL
|
|
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
|
|
same name, except that on getting, when the content attribute is
|
|
missing or its value is the empty string, <a href="dom.html#the-document-s-address">the document's
|
|
address</a> must be returned instead. The <dfn id="dom-fs-target" title="dom-fs-target"><code>target</code></dfn> IDL attribute must
|
|
<a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name. The
|
|
<dfn id="dom-fs-method" title="dom-fs-method"><code>method</code></dfn> and <dfn id="dom-fs-enctype" title="dom-fs-enctype"><code>enctype</code></dfn> IDL attributes
|
|
must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
|
|
same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-encoding" title="dom-fs-encoding"><code>encoding</code></dfn> IDL attribute
|
|
must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code> content attribute,
|
|
<a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-novalidate" title="dom-fs-noValidate"><code>noValidate</code></dfn> IDL
|
|
attribute must reflect the <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code> content attribute. The
|
|
<dfn id="dom-fs-formaction" title="dom-fs-formAction"><code>formAction</code></dfn> IDL
|
|
attribute must reflect the <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code> content attribute,
|
|
except that on getting, when the content attribute is missing or its
|
|
value is the empty string, <a href="dom.html#the-document-s-address">the document's address</a> must
|
|
be returned instead. The <dfn id="dom-fs-formenctype" title="dom-fs-formEnctype"><code>formEnctype</code></dfn> IDL
|
|
attribute must reflect the <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code> content attribute,
|
|
<a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-formmethod" title="dom-fs-formMethod"><code>formMethod</code></dfn> IDL
|
|
attribute must reflect the <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code> content attribute,
|
|
<a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-formnovalidate" title="dom-fs-formNoValidate"><code>formNoValidate</code></dfn> IDL
|
|
attribute must reflect the <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> content
|
|
attribute. The <dfn id="dom-fs-formtarget" title="dom-fs-formTarget"><code>formTarget</code></dfn> IDL
|
|
attribute must reflect the <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> content attribute.
|
|
|
|
</p></div><h5 id="submitting-element-directionality"><span class="secno">4.10.19.7 </span>Submitting element directionality</h5><p>A <dfn id="form-control-dirname-attribute">form control <code title="">dirname</code> attribute</dfn>
|
|
on a form control element enables the submission of <a href="elements.html#the-directionality">the
|
|
directionality</a> of the element, and gives the name of the
|
|
field that contains this value during <a href="#form-submission">form submission</a>.
|
|
If such an attribute is specified, its value must not be the empty
|
|
string.</p><h4 id="textFieldSelection"><span class="secno">4.10.20 </span>APIs for the text field selections</h4><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> elements define
|
|
the following members in their DOM interfaces for handling their
|
|
selection:</p><pre class="idl extract"> void <a href="#dom-textarea-input-select" title="dom-textarea/input-select">select</a>();
|
|
attribute unsigned long <a href="#dom-textarea-input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>;
|
|
attribute unsigned long <a href="#dom-textarea-input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>;
|
|
attribute DOMString <a href="#dom-textarea-input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>;
|
|
void <a href="#dom-textarea-input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(in unsigned long start, in unsigned long end, in optional DOMString direction);</pre><p>These methods and attributes expose and control the selection of
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> text fields.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Selects everything in the text field.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-textarea/input-selecionStart">selectionStart</code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the offset to the start of the selection.</p>
|
|
|
|
<p>Can be set, to change the start of the selection.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-textarea/input-selecionEnd">selectionEnd</code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the offset to the end of the selection.</p>
|
|
|
|
<p>Can be set, to change the end of the selection.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-textarea/input-selecionDirection">selectionDirection</code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current direction of the selection.</p>
|
|
|
|
<p>Can be set, to change the direction of the selection.</p>
|
|
|
|
<p>The possible values are "<code title="">forward</code>", "<code title="">backward</code>", and "<code title="">none</code>".</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange</a></code>(<var title="">start</var>, <var title="">end</var> [, <var title="">direction</var>] )</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Changes the selection to cover the given substring in the given direction. If the direction is omitted, it will be reset to be the platform default (none or forward).</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>When these methods and attributes are used with
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> elements while they don't apply, they must raise
|
|
an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception. Otherwise, they must
|
|
act as described below.</p>
|
|
|
|
<p>For <code><a href="the-input-element.html#the-input-element">input</a></code> elements, these methods and attributes
|
|
must operate on the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>. For <code><a href="the-button-element.html#the-textarea-element">textarea</a></code>
|
|
elements, these methods and attributes must operate on the element's
|
|
<a href="the-button-element.html#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>.</p>
|
|
|
|
<p>Where possible, user interface features for changing the text
|
|
selection in <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> elements
|
|
must be implemented in terms of the DOM API described in this
|
|
section, so that, e.g., all the same events fire.</p>
|
|
|
|
|
|
<p>The selections of <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-button-element.html#the-textarea-element">textarea</a></code>
|
|
elements have a <i>direction</i>, which is either <i>forward</i>,
|
|
<i>backward</i>, or <i>none</i>. This direction is set when the user
|
|
manipulates the selection. The exact meaning of the selection
|
|
direction depends on the platform.</p>
|
|
|
|
<p class="note">On Windows, the direction indicates the position of
|
|
the caret relative to the selection: a <i>forward</i> selection has
|
|
the caret at the end of the selection and a <i>backward</i>
|
|
selection has the caret at the start of the selection. Windows has
|
|
no <i>none</i> direction. On Mac, the direction indicates which end
|
|
of the selection is affected when the user adjusts the size of the
|
|
selection using the arrow keys with the Shift modifier: the forward
|
|
direction means the end of the selection is modified, and the
|
|
backwards direction means the start of the selection is modified.
|
|
The none direction is the default on Mac, it indicates that no
|
|
particular direction has yet been selected. The user sets the
|
|
direction implicitly when first adjusting the selection, based on
|
|
which directional arrow key was used.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-textarea-input-select" title="dom-textarea/input-select"><code>select()</code></dfn> method
|
|
must cause the contents of the text field to be fully selected, with
|
|
the selection direction being none, if the platform support
|
|
selections with the direction <i>none</i>, or otherwise
|
|
<i>forward</i>. The user agent must then <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> that bubbles named <code title="event-select">select</code> at the element, using the
|
|
<a href="webappapis.html#user-interaction-task-source">user interaction task source</a> as the task source.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-textarea-input-selectionstart" title="dom-textarea/input-selectionStart"><code>selectionStart</code></dfn>
|
|
attribute must, on getting, return the offset (in logical order) to
|
|
the character that immediately follows the start of the
|
|
selection. If there is no selection, then it must return the offset
|
|
(in logical order) to the character that immediately follows the
|
|
text entry cursor.</p>
|
|
|
|
<p>On setting, it must act as if the <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>
|
|
method had been called, with the new value as the first argument;
|
|
the current value of the <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>
|
|
attribute as the second argument, unless the current value of the
|
|
<code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code> is
|
|
less than the new value, in which case the second argument must also
|
|
be the new value; and the current value of the <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>
|
|
as the third argument.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-textarea-input-selectionend" title="dom-textarea/input-selectionEnd"><code>selectionEnd</code></dfn>
|
|
attribute must, on getting, return the offset (in logical order) to
|
|
the character that immediately follows the end of the selection. If
|
|
there is no selection, then it must return the offset (in logical
|
|
order) to the character that immediately follows the text entry
|
|
cursor.</p>
|
|
|
|
<p>On setting, it must act as if the <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>
|
|
method had been called, with the current value of the <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>
|
|
attribute as the first argument, the new value as the second
|
|
argument, and the current value of the <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>
|
|
as the third argument.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-textarea-input-selectiondirection" title="dom-textarea/input-selectionDirection"><code>selectionDirection</code></dfn>
|
|
attribute must, on getting, return the string corresponding to the
|
|
current selection direction: if the direction is <i>forward</i>,
|
|
"<code title="">forward</code>"; if the direction is
|
|
<i>backward</i>, "<code title="">backward</code>"; and otherwise,
|
|
"<code title="">none</code>".</p>
|
|
|
|
<p>On setting, it must act as if the <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>
|
|
method had been called, with the current value of the <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>
|
|
attribute as the first argument, the current value of the <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>
|
|
attribute as the first argument, and the new value as the third
|
|
argument.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-textarea-input-setselectionrange" title="dom-textarea/input-setSelectionRange"><code>setSelectionRange(<var title="">start</var>, <var title="">end</var>, <var title="">direction</var>)</code></dfn> method must set the selection
|
|
of the text field to the sequence of characters starting with the
|
|
character at the <var title="">start</var>th position (in logical
|
|
order) and ending with the character at the <span title="">(<var title="">end</var>-1)</span>th position. Arguments greater than the
|
|
length of the value in the text field must be treated as pointing at
|
|
the end of the text field. If <var title="">end</var> is less than
|
|
or equal to <var title="">start</var> then the start of the
|
|
selection and the end of the selection must both be placed
|
|
immediately before the character with offset <var title="">end</var>. In UAs where there is no concept of an empty
|
|
selection, this must set the cursor to be just before the character
|
|
with offset <var title="">end</var>. The direction of the selection
|
|
must be set to <i>backward</i> if <var title="">direction</var> is a
|
|
<a href="infrastructure.html#case-sensitive">case-sensitive</a> match for the string "<code title="">backward</code>", <i>forward</i> if <var title="">direction</var> is a <a href="infrastructure.html#case-sensitive">case-sensitive</a> match for
|
|
the string "<code title="">forward</code>" or if the platform does
|
|
not support selections with the direction <i>none</i>, and
|
|
<i>none</i> otherwise (including if the argument is omitted). The
|
|
user agent must then <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> that bubbles named <code title="event-select">select</code> at the element, using the
|
|
<a href="webappapis.html#user-interaction-task-source">user interaction task source</a> as the task source.</p>
|
|
|
|
|
|
<p>All elements to which this API applies have either a selection or
|
|
a text entry cursor position at all times (even for elements that
|
|
are not <a href="rendering.html#being-rendered">being rendered</a>). User agents should follow
|
|
platform conventions to determine their initial state.</p>
|
|
|
|
</div><p>Characters with no visible rendering, such as U+200D ZERO WIDTH
|
|
JOINER, still count as characters. Thus, for instance, the selection
|
|
can include just an invisible character, and the text insertion
|
|
cursor can be placed to one side or another of such a character.</p><div class="example">
|
|
|
|
<p>To obtain the currently selected text, the following JavaScript
|
|
suffices:</p>
|
|
|
|
<pre>var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);</pre>
|
|
|
|
<p>...where <var title="">control</var> is the <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
or <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>To add some text at the start of a text control, while
|
|
maintaining the text selection, the three attributes must be
|
|
preserved:</p>
|
|
|
|
<pre>var oldStart = control.selectionStart;
|
|
var oldEnd = control.selectionEnd;
|
|
var oldDirection = control.selectionDirection;
|
|
var prefix = "http://";
|
|
control.value = prefix + control.value;
|
|
control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldDirection);</pre>
|
|
|
|
<p>...where <var title="">control</var> is the <code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
or <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element.</p>
|
|
|
|
</div><h4 id="constraints"><span class="secno">4.10.21 </span>Constraints</h4><h5 id="definitions"><span class="secno">4.10.21.1 </span>Definitions</h5><div class="impl">
|
|
|
|
<p>A <a href="forms.html#category-listed" title="category-listed">listed form-associated
|
|
element</a> is a <dfn id="candidate-for-constraint-validation">candidate for constraint validation</dfn>
|
|
except when a condition has <dfn id="barred-from-constraint-validation" title="barred from constraint
|
|
validation">barred the element from constraint
|
|
validation</dfn>. (For example, an element is <a href="#barred-from-constraint-validation">barred from
|
|
constraint validation</a> if it is an <code><a href="the-button-element.html#the-output-element">output</a></code> or
|
|
<code><a href="forms.html#the-fieldset-element">fieldset</a></code> element.)</p>
|
|
|
|
<p>An element can have a <dfn id="custom-validity-error-message">custom validity error message</dfn>
|
|
defined. Initially, an element must have its <a href="#custom-validity-error-message">custom validity
|
|
error message</a> set to the empty string. When its value is not
|
|
the empty string, the element is <a href="#suffering-from-a-custom-error">suffering from a custom
|
|
error</a>. It can be set using the <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
|
|
method. The user agent should use the <a href="#custom-validity-error-message">custom validity error
|
|
message</a> when alerting the user to the problem with the
|
|
control.</p>
|
|
|
|
<p>An element can be constrained in various ways. The following is
|
|
the list of <dfn id="validity-states">validity states</dfn> that a form control can be
|
|
in, making the control invalid for the purposes of constraint
|
|
validation. (The definitions below are non-normative; other parts of
|
|
this specification define more precisely when each state applies or
|
|
does not.)</p>
|
|
|
|
<dl><dt> <dfn id="suffering-from-being-missing">Suffering from being missing</dfn> </dt>
|
|
|
|
<dd> <p>When a control has no <a href="#concept-fe-value" title="concept-fe-value">value</a> but has a <code title="">required</code> attribute (<code><a href="the-input-element.html#the-input-element">input</a></code> <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, <code><a href="the-button-element.html#the-select-element">select</a></code>
|
|
<code title="attr-select-required"><a href="the-button-element.html#attr-select-required">required</a></code>,
|
|
<code><a href="the-button-element.html#the-textarea-element">textarea</a></code> <code title="attr-textarea-required"><a href="the-button-element.html#attr-textarea-required">required</a></code>), or, in the case of
|
|
an element in a <i><a href="number-state.html#radio-button-group">radio button group</a></i>, any of the other
|
|
elements in the group has a <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code> attribute. </p></dd>
|
|
|
|
<dt> <dfn id="suffering-from-a-type-mismatch">Suffering from a type mismatch</dfn> </dt>
|
|
|
|
<dd> <p>When a control that allows arbitrary user
|
|
input has a <a href="#concept-fe-value" title="concept-fe-value">value</a> that is not
|
|
in the correct syntax (<a href="states-of-the-type-attribute.html#e-mail-state" title="attr-input-type-email">E-mail</a>, <a href="states-of-the-type-attribute.html#url-state" title="attr-input-type-url">URL</a>). </p></dd>
|
|
|
|
<dt> <dfn id="suffering-from-a-pattern-mismatch">Suffering from a pattern mismatch</dfn> </dt>
|
|
|
|
<dd> <p>When a control has a <a href="#concept-fe-value" title="concept-fe-value">value</a> that doesn't satisfy the
|
|
<code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code> attribute.</p></dd>
|
|
|
|
<dt> <dfn id="suffering-from-being-too-long">Suffering from being too long</dfn> </dt>
|
|
|
|
<dd> <p>When a control has a <a href="#concept-fe-value" title="concept-fe-value">value</a> that is too long for the
|
|
<a href="#attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</a> (<code><a href="the-input-element.html#the-input-element">input</a></code>
|
|
<code title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
|
|
<code><a href="the-button-element.html#the-textarea-element">textarea</a></code> <code title="attr-textarea-maxlength"><a href="the-button-element.html#attr-textarea-maxlength">maxlength</a></code>). </p></dd>
|
|
|
|
<dt> <dfn id="suffering-from-an-underflow">Suffering from an underflow</dfn> </dt>
|
|
|
|
<dd> <p>When a control has a <a href="#concept-fe-value" title="concept-fe-value">value</a> that is too low for the <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute.</p></dd>
|
|
|
|
<dt> <dfn id="suffering-from-an-overflow">Suffering from an overflow</dfn> </dt>
|
|
|
|
<dd> <p>When a control has a <a href="#concept-fe-value" title="concept-fe-value">value</a> that is too high for the
|
|
<code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code> attribute.</p></dd>
|
|
|
|
<dt> <dfn id="suffering-from-a-step-mismatch">Suffering from a step mismatch</dfn> </dt>
|
|
|
|
<dd> <p>When a control has a <a href="#concept-fe-value" title="concept-fe-value">value</a> that doesn't fit the rules
|
|
given by the <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>
|
|
attribute.</p></dd>
|
|
|
|
<dt> <dfn id="suffering-from-a-custom-error">Suffering from a custom error</dfn> </dt>
|
|
|
|
<dd> <p>When a control's <a href="#custom-validity-error-message">custom validity error
|
|
message</a> (as set by the element's <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
|
|
method) is not the empty string.</p> </dd>
|
|
|
|
</dl><p class="note">An element can still suffer from these states even
|
|
when the element is <a href="#concept-fe-disabled" title="concept-fe-disabled">disabled</a>; thus these states can
|
|
be represented in the DOM even if validating the form during
|
|
submission wouldn't indicate a problem to the user.</p>
|
|
|
|
<p>An element <dfn id="concept-fv-valid" title="concept-fv-valid">satisfies its
|
|
constraints</dfn> if it is not suffering from any of the above
|
|
<a href="#validity-states">validity states</a>.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h5 id="constraint-validation"><span class="secno">4.10.21.2 </span>Constraint validation</h5>
|
|
|
|
<p>When the user agent is required to <dfn id="statically-validate-the-constraints">statically validate the
|
|
constraints</dfn> of <code><a href="forms.html#the-form-element">form</a></code> element <var title="">form</var>, it must run the following steps, which return
|
|
either a <i>positive</i> result (all the controls in the form are
|
|
valid) or a <i>negative</i> result (there are invalid controls)
|
|
along with a (possibly empty) list of elements that are invalid and
|
|
for which no script has claimed responsibility:</p>
|
|
|
|
<ol><li><p>Let <var title="">controls</var> be a list of all the <a href="forms.html#category-submit" title="category-submit">submittable elements</a> whose
|
|
<a href="#form-owner">form owner</a> is <var title="">form</var>, in <a href="infrastructure.html#tree-order">tree
|
|
order</a>.</p></li>
|
|
|
|
<li><p>Let <var title="">invalid controls</var> be an initially
|
|
empty list of elements.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>For each element <var title="">field</var> in <var title="">controls</var>, in <a href="infrastructure.html#tree-order">tree order</a>, run the
|
|
following substeps:</p>
|
|
|
|
<ol><li><p>If <var title="">field</var> is not a <a href="#candidate-for-constraint-validation">candidate for
|
|
constraint validation</a>, then move on to the next
|
|
element.</p></li>
|
|
|
|
<li><p>Otherwise, if <var title="">field</var> <a href="#concept-fv-valid" title="concept-fv-valid">satisfies its constraints</a>, then
|
|
move on to the next element.</p></li>
|
|
|
|
<li><p>Otherwise, add <var title="">field</var> to <var title="">invalid controls</var>.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>If <var title="">invalid controls</var> is empty, then
|
|
return a <i>positive</i> result and abort these steps.</p></li>
|
|
|
|
<li><p>Let <var title="">unhandled invalid controls</var> be an
|
|
initially empty list of elements.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>For each element <var title="">field</var> in <var title="">invalid controls</var>, if any, in <a href="infrastructure.html#tree-order">tree
|
|
order</a>, run the following substeps:</p>
|
|
|
|
<ol><li><p><a href="webappapis.html#fire-a-simple-event">Fire a simple event</a> named <code title="event-invalid">invalid</code> that is cancelable at <var title="">field</var>.</p></li>
|
|
|
|
<li><p>If the event was not canceled, then add <var title="">field</var> to <var title="">unhandled invalid
|
|
controls</var>.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Return a <i>negative</i> result with the list of elements in
|
|
the <var title="">unhandled invalid controls</var> list.</p></li>
|
|
|
|
</ol><p>If a user agent is to <dfn id="interactively-validate-the-constraints">interactively validate the
|
|
constraints</dfn> of <code><a href="forms.html#the-form-element">form</a></code> element <var title="">form</var>, then the user agent must run the following
|
|
steps:</p>
|
|
|
|
<ol><li><p><a href="#statically-validate-the-constraints">Statically validate the constraints</a> of <var title="">form</var>, and let <var title="">unhandled invalid
|
|
controls</var> be the list of elements returned if the result was
|
|
<i>negative</i>.</p></li>
|
|
|
|
<li><p>If the result was <i>positive</i>, then return that result
|
|
and abort these steps.</p></li>
|
|
|
|
<li><p>Report the problems with the constraints of at least one of
|
|
the elements given in <var title="">unhandled invalid
|
|
controls</var> to the user. User agents may focus one of those
|
|
elements in the process, by running the <a href="editing.html#focusing-steps">focusing steps</a>
|
|
for that element, and may change the scrolling position of the
|
|
document, or perform some other action that brings the element to
|
|
the user's attention. User agents may report more than one
|
|
constraint violation. User agents may coalesce related constraint
|
|
violation reports if appropriate (e.g. if multiple radio buttons in
|
|
a <a href="number-state.html#radio-button-group" title="radio button group">group</a> are marked as
|
|
required, only one error need be reported). If one of the controls
|
|
is not <a href="rendering.html#being-rendered">being rendered</a> (e.g. it has the <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute set) then user agents
|
|
may report a script error.</p></li>
|
|
|
|
<li><p>Return a <i>negative</i> result.</p></li>
|
|
|
|
</ol></div><h5 id="the-constraint-validation-api"><span class="secno">4.10.21.3 </span>The <dfn>constraint validation API</dfn></h5><dl class="domintro"><dt><var title="">element</var> . <code title="dom-cva-willValidate"><a href="#dom-cva-willvalidate">willValidate</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element will be validated when the form is submitted; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity</a></code>(<var title="">message</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Sets a custom error, so that the element would fail to
|
|
validate. The given message is the message to be shown to the user
|
|
when reporting the problem to the user.</p>
|
|
|
|
<p>If the argument is the empty string, clears the custom error.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-valueMissing"><a href="#dom-validitystate-valuemissing">valueMissing</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element has no value but is a required field; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-typeMismatch"><a href="#dom-validitystate-typemismatch">typeMismatch</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element's value is not in the correct syntax; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-patternMismatch"><a href="#dom-validitystate-patternmismatch">patternMismatch</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element's value doesn't match the provided pattern; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-tooLong"><a href="#dom-validitystate-toolong">tooLong</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element's value is longer than the provided maximum length; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-rangeUnderflow"><a href="#dom-validitystate-rangeunderflow">rangeUnderflow</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element's value is lower than the provided minimum; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-rangeOverflow"><a href="#dom-validitystate-rangeoverflow">rangeOverflow</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element's value is higher than the provided maximum; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-stepMismatch"><a href="#dom-validitystate-stepmismatch">stepMismatch</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element's value doesn't fit the rules given by the <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-customError"><a href="#dom-validitystate-customerror">customError</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element has a custom error; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-valid"><a href="#dom-validitystate-valid">valid</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element's value has no validity problems; false otherwise.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">valid</var> = <var title="">element</var> . <code title="dom-cva-checkValidatity"><a href="#dom-cva-checkvalidatity">checkValidity</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the element's value has no validity problems;
|
|
false otherwise. Fires an <code title="event-invalid">invalid</code> event at the element in the
|
|
latter case.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">element</var> . <code title="dom-cva-validationMessage"><a href="#dom-cva-validationmessage">validationMessage</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the error message that would be shown to the user if
|
|
the element was to be checked for validity.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-cva-willvalidate" title="dom-cva-willValidate"><code>willValidate</code></dfn>
|
|
attribute must return true if an element is a <a href="#candidate-for-constraint-validation">candidate for
|
|
constraint validation</a>, and false otherwise (i.e. false if any
|
|
conditions are <a href="#barred-from-constraint-validation" title="barred from constraint
|
|
validation">barring it from constraint validation</a>).</p>
|
|
|
|
<p>The <dfn id="dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity"><code>setCustomValidity(<var title="">message</var>)</code></dfn>, when invoked, must set the
|
|
<a href="#custom-validity-error-message">custom validity error message</a> to the value of the given
|
|
<var title="">message</var> argument.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In the following example, a script checks the value of a form
|
|
control each time it is edited, and whenever it is not a valid
|
|
value, uses the <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity()</a></code> method
|
|
to set an appropriate message.</p>
|
|
|
|
<pre><label>Feeling: <input name=f type="text" oninput="check(this)"></label>
|
|
<script>
|
|
function check(input) {
|
|
if (input.value == "good" ||
|
|
input.value == "fine" ||
|
|
input.value == "tired") {
|
|
input.setCustomValidity('"' + input.value + '" is not a feeling.');
|
|
} else {
|
|
// input is fine -- reset the error message
|
|
input.setCustomValidity('');
|
|
}
|
|
}
|
|
</script></pre>
|
|
|
|
</div><div class="impl">
|
|
|
|
<p>The <dfn id="dom-cva-validity" title="dom-cva-validity"><code>validity</code></dfn>
|
|
attribute must return a <code><a href="#validitystate">ValidityState</a></code> object that
|
|
represents the <a href="#validity-states">validity states</a> of the element. This
|
|
object is <a href="infrastructure.html#live">live</a>, and the same object must be returned
|
|
each time the element's <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> attribute is retrieved.</p>
|
|
|
|
<pre class="idl">interface <dfn id="validitystate">ValidityState</dfn> {
|
|
readonly attribute boolean <a href="#dom-validitystate-valuemissing" title="dom-ValidityState-valueMissing">valueMissing</a>;
|
|
readonly attribute boolean <a href="#dom-validitystate-typemismatch" title="dom-ValidityState-typeMismatch">typeMismatch</a>;
|
|
readonly attribute boolean <a href="#dom-validitystate-patternmismatch" title="dom-ValidityState-patternMismatch">patternMismatch</a>;
|
|
readonly attribute boolean <a href="#dom-validitystate-toolong" title="dom-ValidityState-tooLong">tooLong</a>;
|
|
readonly attribute boolean <a href="#dom-validitystate-rangeunderflow" title="dom-ValidityState-rangeUnderflow">rangeUnderflow</a>;
|
|
readonly attribute boolean <a href="#dom-validitystate-rangeoverflow" title="dom-ValidityState-rangeOverflow">rangeOverflow</a>;
|
|
readonly attribute boolean <a href="#dom-validitystate-stepmismatch" title="dom-ValidityState-stepMismatch">stepMismatch</a>;
|
|
readonly attribute boolean <a href="#dom-validitystate-customerror" title="dom-ValidityState-customError">customError</a>;
|
|
readonly attribute boolean <a href="#dom-validitystate-valid" title="dom-ValidityState-valid">valid</a>;
|
|
};</pre>
|
|
|
|
<p>A <code><a href="#validitystate">ValidityState</a></code> object has the following
|
|
attributes. On getting, they must return true if the corresponding
|
|
condition given in the following list is true, and false
|
|
otherwise.</p>
|
|
|
|
<dl><dt><dfn id="dom-validitystate-valuemissing" title="dom-ValidityState-valueMissing"><code>valueMissing</code></dfn></dt>
|
|
<dd> <p>The control is <a href="#suffering-from-being-missing">suffering from being missing</a>.</p> </dd>
|
|
|
|
<dt><dfn id="dom-validitystate-typemismatch" title="dom-ValidityState-typeMismatch"><code>typeMismatch</code></dfn></dt>
|
|
<dd> <p>The control is <a href="#suffering-from-a-type-mismatch">suffering from a type mismatch</a>.</p> </dd>
|
|
|
|
<dt><dfn id="dom-validitystate-patternmismatch" title="dom-ValidityState-patternMismatch"><code>patternMismatch</code></dfn></dt>
|
|
<dd> <p>The control is <a href="#suffering-from-a-pattern-mismatch">suffering from a pattern mismatch</a>.</p> </dd>
|
|
|
|
<dt><dfn id="dom-validitystate-toolong" title="dom-ValidityState-tooLong"><code>tooLong</code></dfn></dt>
|
|
<dd> <p>The control is <a href="#suffering-from-being-too-long">suffering from being too long</a>.</p> </dd>
|
|
|
|
<dt><dfn id="dom-validitystate-rangeunderflow" title="dom-ValidityState-rangeUnderflow"><code>rangeUnderflow</code></dfn></dt>
|
|
<dd> <p>The control is <a href="#suffering-from-an-underflow">suffering from an underflow</a>.</p> </dd>
|
|
|
|
<dt><dfn id="dom-validitystate-rangeoverflow" title="dom-ValidityState-rangeOverflow"><code>rangeOverflow</code></dfn></dt>
|
|
<dd> <p>The control is <a href="#suffering-from-an-overflow">suffering from an overflow</a>.</p> </dd>
|
|
|
|
<dt><dfn id="dom-validitystate-stepmismatch" title="dom-ValidityState-stepMismatch"><code>stepMismatch</code></dfn></dt>
|
|
<dd> <p>The control is <a href="#suffering-from-a-step-mismatch">suffering from a step mismatch</a>.</p> </dd>
|
|
|
|
<dt><dfn id="dom-validitystate-customerror" title="dom-ValidityState-customError"><code>customError</code></dfn></dt>
|
|
<dd> <p>The control is <a href="#suffering-from-a-custom-error">suffering from a custom error</a>.</p> </dd>
|
|
|
|
<dt><dfn id="dom-validitystate-valid" title="dom-ValidityState-valid"><code>valid</code></dfn></dt>
|
|
<dd> <p>None of the other conditions are true.</p> </dd>
|
|
|
|
</dl><p>When the <dfn id="dom-cva-checkvalidatity" title="dom-cva-checkValidatity"><code>checkValidity()</code></dfn>
|
|
method is invoked, if the element is a <a href="#candidate-for-constraint-validation">candidate for
|
|
constraint validation</a> and does not <a href="#concept-fv-valid" title="concept-fv-valid">satisfy its constraints</a>, the user
|
|
agent must <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-invalid">invalid</code> that is cancelable (but in this
|
|
case has no default action) at the element and return
|
|
false. Otherwise, it must only return true without doing anything
|
|
else.</p>
|
|
|
|
<p>The <dfn id="dom-cva-validationmessage" title="dom-cva-validationMessage"><code>validationMessage</code></dfn>
|
|
attribute must return the empty string if the element is not a
|
|
<a href="#candidate-for-constraint-validation">candidate for constraint validation</a> or if it is one but
|
|
it <a href="#concept-fv-valid" title="concept-fv-valid">satisfies its constraints</a>;
|
|
otherwise, it must return a suitably localized message that the user
|
|
agent would show the user if this were the only form control with a
|
|
validity constraint problem. If the user agent would not actually
|
|
show a textual message in such a situation (e.g. it would show a
|
|
graphical cue instead), then the attribute must return a suitably
|
|
localized message that expresses (one or more of) the validity
|
|
constraint(s) that the control does not satisfy. If the element is a
|
|
<a href="#candidate-for-constraint-validation">candidate for constraint validation</a> and is
|
|
<a href="#suffering-from-a-custom-error">suffering from a custom error</a>, then the <a href="#custom-validity-error-message">custom
|
|
validity error message</a> should be present in the return
|
|
value.</p>
|
|
|
|
</div><h5 id="security-forms"><span class="secno">4.10.21.4 </span>Security</h5><p id="security-0">Servers should not rely on client-side
|
|
validation. Client-side validation can be intentionally bypassed by
|
|
hostile users, and unintentionally bypassed by users of older user
|
|
agents or automated tools that do not implement these features. The
|
|
constraint validation features are only intended to improve the user
|
|
experience, not to provide any kind of security mechanism.</p><h4 id="form-submission"><span class="secno">4.10.22 </span><dfn>Form submission</dfn></h4><div class="impl">
|
|
|
|
<h5 id="introduction-2"><span class="secno">4.10.22.1 </span>Introduction</h5>
|
|
|
|
</div><p><i>This section is non-normative.</i></p><p>When a form is submitted, the data in the form is converted into
|
|
the structure specified by the <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a>, and then sent to the
|
|
destination specified by the <a href="#concept-fs-action" title="concept-fs-action">action</a> using the given <a href="#concept-fs-method" title="concept-fs-method">method</a>.</p><p>For example, take the following form:</p><pre><form action="/find.cgi" method=get>
|
|
<input type=text name=t>
|
|
<input type=search name=q>
|
|
<input type=submit>
|
|
</form></pre><p>If the user types in "cats" in the first field and "fur" in the
|
|
second, and then hits the submit button, then the user agent will
|
|
load <code title="">/find.cgi?t=cats&q=fur</code>.</p><p>On the other hand, consider this form:</p><pre><form action="/find.cgi" method=post enctype="multipart/form-data">
|
|
<input type=text name=t>
|
|
<input type=search name=q>
|
|
<input type=submit>
|
|
</form></pre><p>Given the same user input, the result on submission is quite
|
|
different: the user agent instead does an HTTP POST to the given
|
|
URL, with as the entity body something like the following text:</p><pre>------kYFrd4jNJEgCervE
|
|
Content-Disposition: form-data; name="t"
|
|
|
|
cats
|
|
------kYFrd4jNJEgCervE
|
|
Content-Disposition: form-data; name="q"
|
|
|
|
fur
|
|
------kYFrd4jNJEgCervE--</pre><div class="impl">
|
|
|
|
<h5 id="implicit-submission"><span class="secno">4.10.22.2 </span>Implicit submission</h5>
|
|
|
|
<p>User agents may establish a <a href="forms.html#concept-button" title="concept-button">button</a> in each form as being the
|
|
form's <dfn id="default-button">default button</dfn>. This should be the first <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> in <a href="infrastructure.html#tree-order">tree
|
|
order</a> whose <a href="#form-owner">form owner</a> is that <code><a href="forms.html#the-form-element">form</a></code>
|
|
element, but user agents may pick another button if another would be
|
|
more appropriate for the platform. If the platform supports letting
|
|
the user submit a form implicitly (for example, on some platforms
|
|
hitting the "enter" key while a text field is focused implicitly
|
|
submits the form), then doing so must cause the form's <a href="#default-button">default
|
|
button</a>'s <a href="content-models.html#activation-behavior">activation behavior</a>, if any, to be
|
|
run.</p>
|
|
|
|
<p class="note">Consequently, if the <a href="#default-button">default button</a> is
|
|
<a href="#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, the form is not
|
|
submitted when such an implicit submission mechanism is used. (A
|
|
button has no <a href="content-models.html#activation-behavior">activation behavior</a> when disabled.)</p>
|
|
|
|
<p>If the form has no <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
|
|
button</a>, then the implicit submission mechanism must just
|
|
<a href="#concept-form-submit" title="concept-form-submit">submit</a> the
|
|
<code><a href="forms.html#the-form-element">form</a></code> element from the <code><a href="forms.html#the-form-element">form</a></code> element
|
|
itself.</p>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h5 id="form-submission-algorithm"><span class="secno">4.10.22.3 </span>Form submission algorithm</h5>
|
|
|
|
<p>When a <code><a href="forms.html#the-form-element">form</a></code> element <var title="">form</var> is <dfn id="concept-form-submit" title="concept-form-submit">submitted</dfn> from an element <var title="">submitter</var> (typically a button), optionally with a
|
|
<var title="">scripted-submit</var> flag set, the user agent must
|
|
run the following steps:</p>
|
|
|
|
<ol><li><p>Let <var title="">form document</var> be the <var title="">form</var>'s <code><a href="infrastructure.html#document">Document</a></code>.</p></li>
|
|
|
|
<li id="sandboxSubmitBlocked"><p>If <var title="">form
|
|
document</var> has no associated <a href="browsers.html#browsing-context">browsing context</a> or
|
|
its <a href="browsers.html#browsing-context">browsing context</a> had its <a href="the-iframe-element.html#sandboxed-forms-browsing-context-flag">sandboxed forms
|
|
browsing context flag</a> set when the <code><a href="infrastructure.html#document">Document</a></code> was
|
|
created, then abort these steps without doing anything.</p></li>
|
|
|
|
<li><p>Let <var title="">form browsing context</var> be the
|
|
<a href="browsers.html#browsing-context">browsing context</a> of <var title="">form
|
|
document</var>.</p></li>
|
|
|
|
<li><p>If <var title="">form</var> is already being submitted
|
|
(i.e. the form was <a href="#concept-form-submit" title="concept-form-submit">submitted</a> again while processing
|
|
the events fired from the next two steps, probably from a script
|
|
redundantly calling the <code title="dom-form-submit"><a href="forms.html#dom-form-submit">submit()</a></code> method on <var title="">form</var>), then abort these steps. This doesn't affect
|
|
the earlier instance of this algorithm.</p></li>
|
|
|
|
|
|
|
|
<li><p>If the <var title="">scripted-submit</var> flag is not set,
|
|
and the <var title="">submitter</var> element's <a href="#concept-fs-novalidate" title="concept-fs-novalidate">no-validate state</a> is false,
|
|
then <a href="#interactively-validate-the-constraints">interactively validate the constraints</a> of <var title="">form</var> and examine the result: if the result is
|
|
negative (the constraint validation concluded that there were
|
|
invalid fields and probably informed the user of this) then abort
|
|
these steps.</p></li>
|
|
|
|
<li><p>If the <var title="">scripted-submit</var> flag is not set,
|
|
then <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> that is cancelable named
|
|
<code title="event-submit">submit</code>, at <var title="">form</var>. If the event's default action is prevented
|
|
(i.e. if the event is canceled) then abort these steps. Otherwise,
|
|
continue (effectively the default action is to perform the
|
|
submission).</p></li>
|
|
|
|
|
|
|
|
|
|
<li><p>Let <var title="">form data set</var> be the result of
|
|
<a href="#constructing-the-form-data-set">constructing the form data set</a> for <var title="">form</var>.</p></li>
|
|
|
|
<li><p>Let <var title="">action</var> be the <var title="">submitter</var> element's <a href="#concept-fs-action" title="concept-fs-action">action</a>.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>If <var title="">action</var> is the empty string, let <var title="">action</var> be <a href="dom.html#the-document-s-address">the document's address</a> of
|
|
the <var title="">form document</var>.</p>
|
|
|
|
<p class="note">This step is a <a href="introduction.html#willful-violation">willful violation</a> of
|
|
RFC 3986, which would require base URL processing here. This
|
|
violation is motivated by a desire for compatibility with legacy
|
|
content. <a href="references.html#refsRFC3986">[RFC3986]</a></p>
|
|
|
|
|
|
</li>
|
|
|
|
<li><p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the
|
|
<a href="urls.html#url">URL</a> <var title="">action</var>, relative to the <var title="">submitter</var> element. If this fails, abort these
|
|
steps. Otherwise, let <var title="">action</var> be the resulting
|
|
<a href="urls.html#absolute-url">absolute URL</a>.</p></li>
|
|
|
|
<li><p>Let <var title="">scheme</var> be the <a href="urls.html#url-scheme" title="url-scheme"><scheme></a> of the resulting
|
|
<a href="urls.html#absolute-url">absolute URL</a>.</p></li>
|
|
|
|
<li><p>Let <var title="">enctype</var> be the <var title="">submitter</var> element's <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a>.</p></li>
|
|
|
|
<li><p>Let <var title="">method</var> be the <var title="">submitter</var> element's <a href="#concept-fs-method" title="concept-fs-method">method</a>.</p></li>
|
|
|
|
<li><p>Let <var title="">target</var> be the <var title="">submitter</var> element's <a href="#concept-fs-target" title="concept-fs-target">target</a>.</p></li>
|
|
|
|
<li><p>If the user indicated a specific <a href="browsers.html#browsing-context">browsing
|
|
context</a> to use when submitting the form, then let <var title="">target browsing context</var> be that <a href="browsers.html#browsing-context">browsing
|
|
context</a>. Otherwise, apply <a href="browsers.html#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name">the rules for choosing a
|
|
browsing context given a browsing context name</a> using <var title="">target</var> as the name and <var title="">form browsing
|
|
context</var> as the context in which the algorithm is executed,
|
|
and let <var title="">target browsing context</var> be the
|
|
resulting <a href="browsers.html#browsing-context">browsing context</a>.</p></li>
|
|
|
|
<li><p>If <var title="">target browsing context</var> was created
|
|
in the previous step, or if the <var title="">form document</var>
|
|
has not yet <a href="the-end.html#completely-loaded">completely loaded</a>, then let <var title="">replace</var> be true. Otherwise, let it be
|
|
false.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>Select the appropriate row in the table below based on the
|
|
value of <var title="">scheme</var> as given by the first cell of
|
|
each row. Then, select the appropriate cell on that row based on
|
|
the value of <var title="">method</var> as given in the first cell
|
|
of each column. Then, jump to the steps named in that cell and
|
|
defined below the table.</p>
|
|
|
|
<table><thead><tr><td>
|
|
</td><th> <a href="#attr-fs-method-get" title="attr-fs-method-GET">GET</a>
|
|
</th><th> <a href="#attr-fs-method-post" title="attr-fs-method-POST">POST</a>
|
|
</th></tr></thead><tbody><tr><th> <code title="">http</code>
|
|
</th><td> <a href="#submit-mutate-action" title="submit-mutate-action">Mutate action URL</a>
|
|
</td><td> <a href="#submit-body" title="submit-body">Submit as entity body</a>
|
|
</td></tr><tr><th> <code title="">https</code>
|
|
</th><td> <a href="#submit-mutate-action" title="submit-mutate-action">Mutate action URL</a>
|
|
</td><td> <a href="#submit-body" title="submit-body">Submit as entity body</a>
|
|
</td></tr><tr><th> <code title="">ftp</code>
|
|
</th><td> <a href="#submit-get-action" title="submit-get-action">Get action URL</a>
|
|
</td><td> <a href="#submit-get-action" title="submit-get-action">Get action URL</a>
|
|
</td></tr><tr><th> <code title="">javascript</code>
|
|
</th><td> <a href="#submit-get-action" title="submit-get-action">Get action URL</a>
|
|
</td><td> <a href="#submit-get-action" title="submit-get-action">Get action URL</a>
|
|
</td></tr><tr><th> <code title="">data</code>
|
|
</th><td> <a href="#submit-get-action" title="submit-get-action">Get action URL</a>
|
|
</td><td> <a href="#submit-data-post" title="submit-data-post">Post to data:</a>
|
|
</td></tr><tr><th> <code title="">mailto</code>
|
|
</th><td> <a href="#submit-mailto-headers" title="submit-mailto-headers">Mail with headers</a>
|
|
</td><td> <a href="#submit-mailto-body" title="submit-mailto-body">Mail as body</a>
|
|
</td></tr></tbody></table><p>If <var title="">scheme</var> is not one of those listed in
|
|
this table, then the behavior is not defined by this
|
|
specification. User agents should, in the absence of another
|
|
specification defining this, act in a manner analogous to that
|
|
defined in this specification for similar schemes.</p>
|
|
|
|
<p>The behaviors are as follows:</p>
|
|
|
|
<dl><dt><dfn id="submit-mutate-action" title="submit-mutate-action">Mutate action URL</dfn>
|
|
</dt><dd>
|
|
|
|
<p>Let <var title="">query</var> be the result of encoding the
|
|
<var title="">form data set</var> using the <a href="#application-x-www-form-urlencoded-encoding-algorithm"><code title="">application/x-www-form-urlencoded</code> encoding
|
|
algorithm</a>, interpreted as a US-ASCII string.</p>
|
|
|
|
|
|
<p>Let <var title="">destination</var> be a new <a href="urls.html#url">URL</a>
|
|
that is equal to the <var title="">action</var> except that its
|
|
<a href="urls.html#url-query" title="url-query"><query></a> component is
|
|
replaced by <var title="">query</var> (adding a U+003F QUESTION
|
|
MARK character (?) if appropriate).</p>
|
|
|
|
<p><a href="history.html#navigate">Navigate</a> <var title="">target
|
|
browsing context</var> to <var title="">destination</var>. If
|
|
<var title="">replace</var> is true, then <var title="">target
|
|
browsing context</var> must be navigated with <a href="history.html#replacement-enabled">replacement
|
|
enabled</a>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="submit-body" title="submit-body">Submit as entity body</dfn>
|
|
</dt><dd>
|
|
|
|
<p>Let <var title="">entity body</var> be the result of encoding
|
|
the <var title="">form data set</var> using the
|
|
<a href="#appropriate-form-encoding-algorithm">appropriate form encoding algorithm</a>.</p>
|
|
|
|
<p>Let <var title="">MIME type</var> be determined as
|
|
follows:</p>
|
|
|
|
<dl><dt>If <var title="">enctype</var> is <code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code></dt>
|
|
|
|
<dd>Let <var title="">MIME type</var> be "<code title="">application/x-www-form-urlencoded</code>".</dd>
|
|
|
|
<dt>If <var title="">enctype</var> is <code title="attr-fs-enctype-formdata"><a href="#attr-fs-enctype-formdata">multipart/form-data</a></code></dt>
|
|
|
|
<dd>Let <var title="">MIME type</var> be the concatenation of
|
|
the string "<code title="">multipart/form-data;</code>", a
|
|
U+0020 SPACE character, the string "<code title="">boundary=</code>", and the <a href="#multipart-form-data-boundary-string"><code title="">multipart/form-data</code> boundary string</a>
|
|
generated by the <a href="#multipart-form-data-encoding-algorithm"><code title="">multipart/form-data</code> encoding
|
|
algorithm</a>.</dd>
|
|
|
|
<dt>If <var title="">enctype</var> is <code title="attr-fs-enctype-text"><a href="#attr-fs-enctype-text">text/plain</a></code></dt>
|
|
|
|
<dd>Let <var title="">MIME type</var> be "<code title="">text/plain</code>".</dd>
|
|
|
|
</dl><p>Otherwise, <a href="history.html#navigate">navigate</a> <var title="">target browsing context</var> to <var title="">action</var> using the HTTP method given by <var title="">method</var> and with <var title="">entity body</var>
|
|
as the entity body, of type <var title="">MIME type</var>. If
|
|
<var title="">replace</var> is true, then <var title="">target
|
|
browsing context</var> must be navigated with <a href="history.html#replacement-enabled">replacement
|
|
enabled</a>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="submit-get-action" title="submit-get-action">Get action URL</dfn>
|
|
</dt><dd>
|
|
|
|
<p><a href="history.html#navigate">Navigate</a> <var title="">target
|
|
browsing context</var> to <var title="">action</var>. If <var title="">replace</var> is true, then <var title="">target
|
|
browsing context</var> must be navigated with <a href="history.html#replacement-enabled">replacement
|
|
enabled</a>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="submit-data-post" title="submit-data-post">Post to data:</dfn>
|
|
</dt><dd>
|
|
|
|
<p>Let <var title="">data</var> be the result of encoding the
|
|
<var title="">form data set</var> using the <a href="#appropriate-form-encoding-algorithm">appropriate
|
|
form encoding algorithm</a>.</p>
|
|
|
|
<p>If <var title="">action</var> contains the string "<code title="">%%%%</code>" (four U+0025 PERCENT SIGN characters),
|
|
then %-escape all bytes in <var title="">data</var> that, if
|
|
interpreted as US-ASCII, do not match the <code title="">unreserved</code> production in the URI Generic Syntax,
|
|
and then, treating the result as a US-ASCII string, further
|
|
%-escape all the U+0025 PERCENT SIGN characters in the resulting
|
|
string and replace the first occurrence of "<code title="">%%%%</code>" in <var title="">action</var> with the
|
|
resulting double-escaped string. <a href="references.html#refsRFC3986">[RFC3986]</a></p>
|
|
|
|
<p>Otherwise, if <var title="">action</var> contains the string
|
|
"<code title="">%%</code>" (two U+0025 PERCENT SIGN characters
|
|
in a row, but not four), then %-escape all characters in <var title="">data</var> that, if interpreted as US-ASCII, do not
|
|
match the <code title="">unreserved</code> production in the URI
|
|
Generic Syntax, and then, treating the result as a US-ASCII
|
|
string, replace the first occurrence of "<code title="">%%</code>" in <var title="">action</var> with the
|
|
resulting escaped string. <a href="references.html#refsRFC3986">[RFC3986]</a></p>
|
|
|
|
<p><a href="history.html#navigate">Navigate</a> <var title="">target
|
|
browsing context</var> to the potentially modified <var title="">action</var> (which will be a <a href="infrastructure.html#data-protocol" title="data
|
|
protocol"><code title="">data:</code> URL</a>). If <var title="">replace</var> is true, then <var title="">target
|
|
browsing context</var> must be navigated with <a href="history.html#replacement-enabled">replacement
|
|
enabled</a>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="submit-mailto-headers" title="submit-mailto-headers">Mail with headers</dfn>
|
|
</dt><dd>
|
|
|
|
<p>Let <var title="">headers</var> be the resulting encoding the
|
|
<var title="">form data set</var> using the <a href="#application-x-www-form-urlencoded-encoding-algorithm"><code title="">application/x-www-form-urlencoded</code> encoding
|
|
algorithm</a>, interpreted as a US-ASCII string.</p>
|
|
|
|
<p>Replace occurrences of U+002B PLUS SIGN characters (+) in
|
|
<var title="">headers</var> with the string "<code title="">%20</code>".</p>
|
|
|
|
<p>Let <var title="">destination</var> consist of all the
|
|
characters from the first character in <var title="">action</var> to the character immediately before the
|
|
first U+003F QUESTION MARK character (?), if any, or the end of
|
|
the string if there are none.</p>
|
|
|
|
<p>Append a single U+003F QUESTION MARK character (?) to <var title="">destination</var>.</p>
|
|
|
|
<p>Append <var title="">headers</var> to <var title="">destination</var>.</p>
|
|
|
|
<p><a href="history.html#navigate">Navigate</a> <var title="">target
|
|
browsing context</var> to <var title="">destination</var>. If
|
|
<var title="">replace</var> is true, then <var title="">target
|
|
browsing context</var> must be navigated with <a href="history.html#replacement-enabled">replacement
|
|
enabled</a>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="submit-mailto-body" title="submit-mailto-body">Mail as body</dfn>
|
|
</dt><dd>
|
|
|
|
<p>Let <var title="">body</var> be the resulting encoding the
|
|
<var title="">form data set</var> using the <a href="#appropriate-form-encoding-algorithm">appropriate
|
|
form encoding algorithm</a> and then %-escaping all the bytes
|
|
in the resulting byte string that, when interpreted as US-ASCII,
|
|
do not match the <code title="">unreserved</code> production in
|
|
the URI Generic Syntax. <a href="references.html#refsRFC3986">[RFC3986]</a></p>
|
|
|
|
<p>Let <var title="">destination</var> have the same value as
|
|
<var title="">action</var>.</p>
|
|
|
|
<p>If <var title="">destination</var> does not contain a U+003F
|
|
QUESTION MARK character (?), append a single U+003F QUESTION
|
|
MARK character (?) to <var title="">destination</var>. Otherwise, append a single U+0026
|
|
AMPERSAND character (&).</p>
|
|
|
|
<p>Append the string "<code title="">body=</code>" to <var title="">destination</var>.</p>
|
|
|
|
<p>Append <var title="">body</var>, interpreted as a US-ASCII
|
|
string, to <var title="">destination</var>.</p>
|
|
|
|
<p><a href="history.html#navigate">Navigate</a> <var title="">target
|
|
browsing context</var> to <var title="">destination</var>. If
|
|
<var title="">replace</var> is true, then <var title="">target
|
|
browsing context</var> must be navigated with <a href="history.html#replacement-enabled">replacement
|
|
enabled</a>.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><p>The <dfn id="appropriate-form-encoding-algorithm">appropriate form encoding algorithm</dfn> is
|
|
determined as follows:</p>
|
|
|
|
<dl><dt>If <var title="">enctype</var> is <code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code></dt>
|
|
|
|
<dd>Use the <a href="#application-x-www-form-urlencoded-encoding-algorithm"><code title="">application/x-www-form-urlencoded</code> encoding
|
|
algorithm</a>.</dd>
|
|
|
|
<dt>If <var title="">enctype</var> is <code title="attr-fs-enctype-formdata"><a href="#attr-fs-enctype-formdata">multipart/form-data</a></code></dt>
|
|
|
|
<dd>Use the <a href="#multipart-form-data-encoding-algorithm"><code title="">multipart/form-data</code> encoding
|
|
algorithm</a>.</dd>
|
|
|
|
<dt>If <var title="">enctype</var> is <code title="attr-fs-enctype-text"><a href="#attr-fs-enctype-text">text/plain</a></code></dt>
|
|
|
|
<dd>Use the <a href="#text-plain-encoding-algorithm"><code title="">text/plain</code> encoding
|
|
algorithm</a>.</dd>
|
|
|
|
</dl></li>
|
|
|
|
</ol><h5 id="constructing-form-data-set"><span class="secno">4.10.22.4 </span>Constructing the form data set</h5>
|
|
|
|
<p>The algorithm to <dfn id="constructing-the-form-data-set" title="constructing the form data
|
|
set">construct the form data set</dfn> for a form <var title="">form</var> is as follows:</p>
|
|
|
|
<ol><li><p>Let <var title="">controls</var> be a list of all the <a href="forms.html#category-submit" title="category-submit">submittable elements</a> whose
|
|
<a href="#form-owner">form owner</a> is <var title="">form</var>, in <a href="infrastructure.html#tree-order">tree
|
|
order</a>.</p></li>
|
|
|
|
<li><p>Let the <var title="">form data set</var> be a list of
|
|
name-value-type tuples, initially empty.</p></li>
|
|
|
|
<li>
|
|
|
|
<p><i>Loop</i>: For each element <var title="">field</var> in <var title="">controls</var>, in <a href="infrastructure.html#tree-order">tree order</a>, run the
|
|
following substeps:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p>If any of the following conditions are met, then skip these
|
|
substeps for this element:</p>
|
|
|
|
<ul><li>The <var title="">field</var> element has a
|
|
<code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element ancestor.</li>
|
|
|
|
<li>The <var title="">field</var> element is <a href="#concept-fe-disabled" title="concept-fe-disabled">disabled</a>.</li>
|
|
|
|
<li>The <var title="">field</var> element is a <a href="forms.html#concept-button" title="concept-button">button</a> but it is not <var title="">submitter</var>.</li>
|
|
|
|
<li>The <var title="">field</var> element is an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <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.html#checkbox-state" title="attr-input-type-checkbox">Checkbox</a> state and
|
|
whose <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> is
|
|
false.</li>
|
|
|
|
<li>The <var title="">field</var> element is an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <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.html#radio-button-state" title="attr-input-type-radio">Radio Button</a> state and
|
|
whose <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> is
|
|
false.</li>
|
|
|
|
<li>The <var title="">field</var> element is not an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <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.html#image-button-state" title="attr-input-type-image">Image Button</a> state, and
|
|
either the <var title="">field</var> element does not have a
|
|
<code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> attribute specified, or
|
|
its <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> attribute's value is
|
|
the empty string.</li>
|
|
|
|
<li>The <var title="">field</var> element is an
|
|
<code><a href="the-iframe-element.html#the-object-element">object</a></code> element that is not using a
|
|
<a href="infrastructure.html#plugin">plugin</a>.</li>
|
|
|
|
</ul><p>Otherwise, process <var title="">field</var> as follows:</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Let <var title="">type</var> be the value of the <code title="">type</code> IDL attribute of <var title="">field</var>.</p></li>
|
|
<li>
|
|
|
|
<p>If the <var title="">field</var> element is an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <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.html#image-button-state" title="attr-input-type-image">Image Button</a> state,
|
|
then run these further nested substeps:</p>
|
|
|
|
<ol><li><p>If the <var title="">field</var> element has a <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> attribute specified and its
|
|
value is not the empty string, let <var title="">name</var> be
|
|
that value followed by a single U+002E FULL STOP character (.).
|
|
Otherwise, let <var title="">name</var> be the empty
|
|
string.</p></li>
|
|
|
|
<li><p>Let <var title="">name<sub title="">x</sub></var> be the
|
|
string consisting of the concatenation of <var title="">name</var> and a single U+0078 LATIN SMALL LETTER X
|
|
character (x).</p></li>
|
|
|
|
<li><p>Let <var title="">name<sub title="">y</sub></var> be the
|
|
string consisting of the concatenation of <var title="">name</var> and a single U+0079 LATIN SMALL LETTER Y
|
|
character (y).</p></li>
|
|
|
|
<li><p>The <var title="">field</var> element is <var title="">submitter</var>, and before this algorithm was invoked
|
|
the user <a href="number-state.html#concept-input-type-image-coordinate" title="concept-input-type-image-coordinate">indicated a
|
|
coordinate</a>. Let <var title="">x</var> be the <var title="">x</var>-component of the coordinate selected by the
|
|
user, and let <var title="">y</var> be the <var title="">y</var>-component of the coordinate selected by the
|
|
user.</p></li>
|
|
|
|
<li><p>Append an entry to the <var title="">form data set</var>
|
|
with the name <var title="">name<sub title="">x</sub></var>,
|
|
the value <var title="">x</var>, and the type <var title="">type</var>.</p></li>
|
|
|
|
<li><p>Append an entry to the <var title="">form data set</var>
|
|
with the name <var title="">name<sub title="">y</sub></var> and
|
|
the value <var title="">y</var>, and the type <var title="">type</var>.</p></li>
|
|
|
|
<li><p>Skip the remaining substeps for this element: if there
|
|
are any more elements in <var title="">controls</var>, return
|
|
to the top of the <i>loop</i> step, otherwise, jump to the
|
|
<i>end</i> step below.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Let <var title="">name</var> be the value of the <var title="">field</var> element's <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> attribute.</p></li>
|
|
|
|
<li><p>If the <var title="">field</var> element is a
|
|
<code><a href="the-button-element.html#the-select-element">select</a></code> element, then for each <code><a href="the-button-element.html#the-option-element">option</a></code>
|
|
element in the <code><a href="the-button-element.html#the-select-element">select</a></code> element whose <a href="the-button-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true,
|
|
append an entry to the <var title="">form data set</var> with the
|
|
<var title="">name</var> as the name, the <a href="the-button-element.html#concept-option-value" title="concept-option-value">value</a> of the
|
|
<code><a href="the-button-element.html#the-option-element">option</a></code> element as the value, and <var title="">type</var> as the type.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>Otherwise, if the <var title="">field</var> element is an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <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.html#checkbox-state" title="attr-input-type-checkbox">Checkbox</a> state or the
|
|
<a href="number-state.html#radio-button-state" title="attr-input-type-radio">Radio Button</a> state,
|
|
then run these further nested substeps:</p>
|
|
|
|
<ol><li><p>If the <var title="">field</var> element has a <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute specified, then
|
|
let <var title="">value</var> be the value of that attribute;
|
|
otherwise, let <var title="">value</var> be the string
|
|
"<code title="">on</code>".</p></li>
|
|
|
|
<li><p>Append an entry to the <var title="">form data set</var>
|
|
with <var title="">name</var> as the name, <var title="">value</var> as the value, and <var title="">type</var>
|
|
as the type.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Otherwise, if the <var title="">field</var> element is an
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element whose <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.html#file-upload-state" title="attr-input-type-file">File Upload</a> state, then for
|
|
each file <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected</a> in the
|
|
<code><a href="the-input-element.html#the-input-element">input</a></code> element, append an entry to the <var title="">form data set</var> with the <var title="">name</var> as
|
|
the name, the file (consisting of the name, the type, and the
|
|
body) as the value, and <var title="">type</var> as the type. If
|
|
there are no <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a>,
|
|
then append an entry to the <var title="">form data set</var>
|
|
with the <var title="">name</var> as the name, the empty string
|
|
as the value, and <code>application/octet-stream</code> as the
|
|
type.</p></li>
|
|
|
|
|
|
<li><p>Otherwise, if the <var title="">field</var> element is an
|
|
<code><a href="the-iframe-element.html#the-object-element">object</a></code> element: try to obtain a form submission
|
|
value from the <a href="infrastructure.html#plugin">plugin</a>,
|
|
and if that is successful, append an entry to the <var title="">form data set</var> with <var title="">name</var> as the
|
|
name, the returned form submission value as the value, and the
|
|
string "<code title="">object</code>" as the type.</p></li>
|
|
|
|
<li><p>Otherwise, append an entry to the <var title="">form data
|
|
set</var> with <var title="">name</var> as the name, the <a href="#concept-fe-value" title="concept-fe-value">value</a> of the <var title="">field</var> element as the value, and <var title="">type</var> as the type.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>If the element has a <a href="#form-control-dirname-attribute">form control <code title="">dirname</code> attribute</a>, and that attribute's
|
|
value is not the empty string, then run these substeps:</p>
|
|
|
|
<ol><li><p>Let <var title="">dirname</var> be the value of the
|
|
element's <code title="">dirname</code> attribute.</p></li>
|
|
|
|
<li><p>Let <var title="">dir</var> be the string "<code title="">ltr</code>" if <a href="elements.html#the-directionality">the directionality</a> of the
|
|
element is '<a href="elements.html#concept-ltr" title="concept-ltr">ltr</a>', and "<code title="">rtl</code>" otherwise (i.e. when <a href="elements.html#the-directionality">the
|
|
directionality</a> of the element is '<a href="elements.html#concept-rtl" title="concept-rtl">rtl</a>').</p></li>
|
|
|
|
<li><p>Append an entry to the <var title="">form data set</var>
|
|
with <var title="">dirname</var> as the name, <var title="">dir</var> as the value, and the string "<code title="">direction</code>" as the type.</p></li>
|
|
|
|
</ol><p class="note">An element can only have a <a href="#form-control-dirname-attribute">form control
|
|
<code title="">dirname</code> attribute</a> if it is a
|
|
<code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element or an <code><a href="the-input-element.html#the-input-element">input</a></code> element
|
|
whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in
|
|
either the <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-text">Text</a> state
|
|
or the <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-search">Search</a>
|
|
state.</p>
|
|
|
|
</li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p><i>End</i>: Return the <var title="">form data
|
|
step</var>.</p></li>
|
|
|
|
</ol><h5 id="url-encoded-form-data"><span class="secno">4.10.22.5 </span>URL-encoded form data</h5>
|
|
|
|
<p>The <dfn id="application-x-www-form-urlencoded-encoding-algorithm"><code title="">application/x-www-form-urlencoded</code> encoding
|
|
algorithm</dfn> is as follows:</p>
|
|
|
|
<ol><li><p>Let <var title="">result</var> be the empty string.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>If the <code><a href="forms.html#the-form-element">form</a></code> element has an <code title="attr-form-accept-charset"><a href="forms.html#attr-form-accept-charset">accept-charset</a></code> attribute,
|
|
then, taking into account the characters found in the <var title="">form data set</var>'s names and values, and the character
|
|
encodings supported by the user agent, select a character encoding
|
|
from the list given in the <code><a href="forms.html#the-form-element">form</a></code>'s <code title="attr-form-accept-charset"><a href="forms.html#attr-form-accept-charset">accept-charset</a></code> attribute
|
|
that is an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>. If
|
|
none of the encodings are supported, or if none are listed, then
|
|
let the selected character encoding be UTF-8.</p>
|
|
|
|
<p>Otherwise, if the <a href="dom.html#document-s-character-encoding">document's character encoding</a> is
|
|
an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>, then that is
|
|
the selected character encoding.</p>
|
|
|
|
<p>Otherwise, let the selected character encoding be UTF-8.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Let <var title="">charset</var> be the <a href="infrastructure.html#preferred-mime-name">preferred MIME
|
|
name</a> of the selected character encoding.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>For each entry in the <var title="">form data set</var>,
|
|
perform these substeps:</p>
|
|
|
|
<ol><li><p>If the entry's name is "<code title="attr-fe-name-charset"><a href="#attr-fe-name-charset">_charset_</a></code>"
|
|
and its type is "<code title="">hidden</code>", replace its value
|
|
with <var title="">charset</var>.</p></li>
|
|
|
|
<li><p>If the entry's type is "<code title="">file</code>",
|
|
replace its value with the file's filename only.</p></li>
|
|
<li><p>For each character in the entry's name and value that
|
|
cannot be expressed using the selected character encoding,
|
|
replace the character by a string consisting of a U+0026
|
|
AMPERSAND character (&), a U+0023 NUMBER SIGN character (#),
|
|
one or more characters in the range U+0030 DIGIT ZERO (0) to
|
|
U+0039 DIGIT NINE (9) representing the Unicode code point of the
|
|
character in base ten, and finally a U+003B SEMICOLON character
|
|
(;).</p></li>
|
|
|
|
|
|
<li>
|
|
|
|
<p>For each character in the entry's name and value, apply the
|
|
appropriate subsubsteps from the following list:</p>
|
|
|
|
<dl class="switch"><dt>The character is a U+0020 SPACE character</dt>
|
|
|
|
<dd>Replace the character with a single U+002B PLUS SIGN
|
|
character (+).</dd>
|
|
|
|
|
|
|
|
|
|
<dt>If the character isn't in the range U+0020, U+002A,
|
|
U+002D, U+002E, U+0030 to U+0039, U+0041 to U+005A, U+005F,
|
|
U+0061 to U+007A</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Replace the character with a string formed as follows:</p>
|
|
|
|
<ol><li><p>Let <var title="">s</var> be an empty string.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>For each byte <var title="">b</var> of the character when
|
|
expressed in the selected character encoding in turn, run
|
|
the appropriate subsubsubstep from the list below:</p>
|
|
|
|
<dl class="switch"><dt>If the byte is in the range 0x20, 0x2A, 0x2D, 0x2E,
|
|
0x30 to 0x39, 0x41 to 0x5A, 0x5F, 0x61 to 0x7A</dt>
|
|
|
|
<dd><p>Append to <var title="">s</var> the Unicode
|
|
character with the code point equal to the byte.</p></dd>
|
|
|
|
<dt>Otherwise</dt>
|
|
|
|
<dd><p>Append to the string a U+0025 PERCENT SIGN character
|
|
(%) followed by two characters in the ranges U+0030 DIGIT
|
|
ZERO (0) to U+0039 DIGIT NINE (9) and U+0041 LATIN CAPITAL
|
|
LETTER A to U+0046 LATIN CAPITAL LETTER F representing the
|
|
hexadecimal value of the byte (zero-padded if
|
|
necessary).</p></dd>
|
|
|
|
</dl></li>
|
|
|
|
</ol></dd>
|
|
|
|
<dt>Otherwise</dt>
|
|
|
|
<dd><p>Leave the character as is.</p></dd>
|
|
|
|
</dl></li>
|
|
|
|
<li><p>If the entry's name is "<code title="attr-fe-name-isindex"><a href="#attr-fe-name-isindex">isindex</a></code>",
|
|
its type is "<code title="">text</code>", and this is the first
|
|
entry in the <var title="">form data set</var>, then append the
|
|
value to <var title="">result</var> and skip the rest of the
|
|
substeps for this entry, moving on to the next entry, if any, or
|
|
the next step in the overall algorithm otherwise.</p></li>
|
|
|
|
<li><p>If this is not the first entry, append a single U+0026
|
|
AMPERSAND character (&) to <var title="">result</var>.</p></li>
|
|
|
|
<li><p>Append the entry's name to <var title="">result</var>.</p></li>
|
|
|
|
<li><p>Append a single U+003D EQUALS SIGN character (=) to <var title="">result</var>.</p></li>
|
|
|
|
<li><p>Append the entry's value to <var title="">result</var>.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Encode <var title="">result</var> as US-ASCII and return the
|
|
resulting byte stream.</p></li>
|
|
|
|
</ol></div><div class="impl">
|
|
|
|
<h5 id="multipart-form-data"><span class="secno">4.10.22.6 </span>Multipart form data</h5>
|
|
|
|
|
|
|
|
|
|
|
|
<p>The <dfn id="multipart-form-data-encoding-algorithm"><code title="">multipart/form-data</code> encoding
|
|
algorithm</dfn> is as follows:</p>
|
|
|
|
<ol><li><p>Let <var title="">result</var> be the empty string.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>If the algorithm was invoked with an explicit character
|
|
encoding, let the selected character encoding be that encoding.
|
|
(This algorithm is used by other specifications, which provide an
|
|
explicit character encoding to avoid the dependency on the
|
|
<code><a href="forms.html#the-form-element">form</a></code> element described in the next paragraph.)</p>
|
|
|
|
<p>Otherwise, if the <code><a href="forms.html#the-form-element">form</a></code> element has an <code title="attr-form-accept-charset"><a href="forms.html#attr-form-accept-charset">accept-charset</a></code> attribute,
|
|
then, taking into account the characters found in the <var title="">form data set</var>'s names and values, and the character
|
|
encodings supported by the user agent, select a character encoding
|
|
from the list given in the <code><a href="forms.html#the-form-element">form</a></code>'s <code title="attr-form-accept-charset"><a href="forms.html#attr-form-accept-charset">accept-charset</a></code> attribute
|
|
that is an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>. If
|
|
none of the encodings are supported, or if none are listed, then
|
|
let the selected character encoding be UTF-8.</p>
|
|
|
|
<p>Otherwise, if the <a href="dom.html#document-s-character-encoding">document's character encoding</a> is
|
|
an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>, then that is
|
|
the selected character encoding.</p>
|
|
|
|
<p>Otherwise, let the selected character encoding be UTF-8.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Let <var title="">charset</var> be the <a href="infrastructure.html#preferred-mime-name">preferred MIME
|
|
name</a> of the selected character encoding.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>For each entry in the <var title="">form data set</var>,
|
|
perform these substeps:</p>
|
|
|
|
<ol><li><p>If the entry's name is "<code title="attr-fe-name-charset"><a href="#attr-fe-name-charset">_charset_</a></code>" and its type is
|
|
"<code title="">hidden</code>", replace its value with <var title="">charset</var>.</p></li>
|
|
|
|
|
|
<li><p>For each character in the entry's name and value that
|
|
cannot be expressed using the selected character encoding,
|
|
replace the character by a string consisting of a U+0026
|
|
AMPERSAND character (&), a U+0023 NUMBER SIGN character (#),
|
|
one or more characters in the range U+0030 DIGIT ZERO (0) to
|
|
U+0039 DIGIT NINE (9) representing the Unicode code point of the
|
|
character in base ten, and finally a U+003B SEMICOLON character
|
|
(;).</p></li>
|
|
|
|
|
|
</ol></li>
|
|
|
|
<li>
|
|
|
|
<p>Encode the (now mutated) <var title="">form data set</var>
|
|
using the rules described by RFC 2388, <cite>Returning Values from
|
|
Forms: <code title="">multipart/form-data</code></cite>, and
|
|
return the resulting byte stream. <a href="references.html#refsRFC2388">[RFC2388]</a></p>
|
|
|
|
<p>Each entry in the <var title="">form data set</var> is a
|
|
<i>field</i>, the name of the entry is the <i>field name</i> and
|
|
the value of the entry is the <i>field value</i>.</p>
|
|
|
|
<p>The order of parts must be the same as the order of fields in
|
|
the <var title="">form data set</var>. Multiple entries with the
|
|
same name must be treated as distinct fields.</p>
|
|
|
|
<p class="note">In particular, this means that multiple files
|
|
submitted as part of a single <code title=""><input type=file multiple></code> element
|
|
will result in each file having its own field; the "sets of files"
|
|
feature ("<code title="">multipart/mixed</code>") of RFC 2388 is
|
|
not used.</p>
|
|
|
|
<p>The parts of the generated <code title="">multipart/form-data</code> resource that correspond to
|
|
non-file fields must not have a <code><a href="fetching-resources.html#content-type">Content-Type</a></code> header
|
|
specified. Their names and values must be encoded using the
|
|
character encoding selected above (field names in particular do
|
|
not get converted to a 7-bit safe encoding as suggested in RFC
|
|
2388).</p>
|
|
|
|
<p>The boundary used by the user agent in generating the return
|
|
value of this algorithm is the <dfn id="multipart-form-data-boundary-string"><code title="">multipart/form-data</code> boundary string</dfn>. (This
|
|
value is used to generate the MIME type of the form submission
|
|
payload generated by this algorithm.)</p>
|
|
|
|
</li>
|
|
|
|
</ol></div><div class="impl">
|
|
|
|
<h5 id="plain-text-form-data"><span class="secno">4.10.22.7 </span>Plain text form data</h5>
|
|
|
|
<p>The <dfn id="text-plain-encoding-algorithm"><code title="">text/plain</code> encoding
|
|
algorithm</dfn> is as follows:</p>
|
|
|
|
<ol><li><p>Let <var title="">result</var> be the empty string.</p></li>
|
|
|
|
<li>
|
|
|
|
|
|
<p>If the <code><a href="forms.html#the-form-element">form</a></code> element has an <code title="attr-form-accept-charset"><a href="forms.html#attr-form-accept-charset">accept-charset</a></code> attribute,
|
|
then, taking into account the characters found in the <var title="">form data set</var>'s names and values, and the character
|
|
encodings supported by the user agent, select a character encoding
|
|
from the list given in the <code><a href="forms.html#the-form-element">form</a></code>'s <code title="attr-form-accept-charset"><a href="forms.html#attr-form-accept-charset">accept-charset</a></code> attribute.
|
|
If none of the encodings are supported, or if none are listed,
|
|
then let the selected character encoding be UTF-8.</p>
|
|
|
|
<p>Otherwise, the selected character encoding is the
|
|
<a href="dom.html#document-s-character-encoding">document's character encoding</a>.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Let <var title="">charset</var> be the <a href="infrastructure.html#preferred-mime-name">preferred MIME
|
|
name</a> of the selected character encoding.</p></li>
|
|
|
|
<li><p>If the entry's name is "<code title="attr-fe-name-charset"><a href="#attr-fe-name-charset">_charset_</a></code>" and its type is
|
|
"<code title="">hidden</code>", replace its value with <var title="">charset</var>.</p></li>
|
|
|
|
<li><p>If the entry's type is "<code title="">file</code>", replace
|
|
its value with the file's filename only.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>For each entry in the <var title="">form data set</var>,
|
|
perform these substeps:</p>
|
|
|
|
<ol><li><p>Append the entry's name to <var title="">result</var>.</p></li>
|
|
|
|
<li><p>Append a single U+003D EQUALS SIGN character (=) to <var title="">result</var>.</p></li>
|
|
|
|
<li><p>Append the entry's value to <var title="">result</var>.</p></li>
|
|
|
|
<li><p>Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF)
|
|
character pair to <var title="">result</var>.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Encode <var title="">result</var> using the selected
|
|
character encoding and return the resulting byte stream.</p></li>
|
|
|
|
</ol></div><div class="impl">
|
|
|
|
<h4 id="resetting-a-form"><span class="secno">4.10.23 </span>Resetting a form</h4>
|
|
|
|
<p>When a <code><a href="forms.html#the-form-element">form</a></code> element <var title="">form</var> is <dfn id="concept-form-reset" title="concept-form-reset">reset</dfn>, the user agent must
|
|
<a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-reset">reset</code>, that is cancelable, at <var title="">form</var>, and then, if that event is not canceled, must
|
|
invoke the <a href="#concept-form-reset-control" title="concept-form-reset-control">reset
|
|
algorithm</a> of each <a href="forms.html#category-reset" title="category-reset">resettable
|
|
element</a> whose <a href="#form-owner">form owner</a> is <var title="">form</var>.</p>
|
|
|
|
<p>Each <a href="forms.html#category-reset" title="category-reset">resettable element</a>
|
|
defines its own <dfn id="concept-form-reset-control" title="concept-form-reset-control">reset
|
|
algorithm</dfn>. Changes made to form controls as part of these
|
|
algorithms do not count as changes caused by the user (and thus,
|
|
e.g., do not cause <code title="event-input">input</code> events to
|
|
fire).</p>
|
|
|
|
</div></body></html>
|