association-of-controls-and-forms.html 140 KB

Raw Blame History Permalink

<!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 &#8212; 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="&#9587;&#8413;"></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> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <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">...
 &lt;form id="a"&gt;
  &lt;div id="b"&gt;&lt;/div&gt;
 &lt;/form&gt;
 &lt;script&gt;
  document.getElementById('b').innerHTML =
     '&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;form id="c"&gt;&lt;input id="d"&gt;&lt;/table&gt;' +
     '&lt;input id="e"&gt;';
 &lt;/script&gt;
...</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>&lt;input maxlength="256" name="q" value="" autofocus&gt;
&lt;input type="submit" value="Search"&gt;</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>&lt;form action="editor.cgi" method="post"&gt;
 &lt;p&gt;&lt;label&gt;Name: &lt;input required name=fn&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Essay: &lt;textarea required name=essay&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit name=submit value="Submit essay"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit formnovalidate name=save value="Save essay"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit formnovalidate name=cancel value="Cancel"&gt;&lt;/p&gt;
&lt;/form&gt;</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>&lt;label&gt;Feeling: &lt;input name=f type="text" oninput="check(this)"&gt;&lt;/label&gt;
&lt;script&gt;
 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('');
   }
 }
&lt;/script&gt;</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>&lt;form action="/find.cgi" method=get&gt;
 &lt;input type=text name=t&gt;
 &lt;input type=search name=q&gt;
 &lt;input type=submit&gt;
&lt;/form&gt;</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&amp;q=fur</code>.</p><p>On the other hand, consider this form:</p><pre>&lt;form action="/find.cgi" method=post enctype="multipart/form-data"&gt;
 &lt;input type=text name=t&gt;
 &lt;input type=search name=q&gt;
 &lt;input type=submit&gt;
&lt;/form&gt;</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">&lt;scheme&gt;</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">&lt;query&gt;</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 (&amp;).</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 (&amp;), 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 (&amp;) 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 (&amp;), 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="">&lt;input&#160;type=file&#160;multiple&gt;</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>