the-button-element.html 184 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.8 The button element &#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="common-input-element-attributes.html" title="4.10.7.2 Common input element attributes" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="association-of-controls-and-forms.html" title="4.10.18 Association of controls and forms" 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="common-input-element-attributes.html" class="prev">4.10.7.2 Common input element attributes</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="association-of-controls-and-forms.html" class="next">4.10.18 Association of controls and forms</a>
  <ol class="toc"><li><ol><li><ol><li><a href="the-button-element.html#the-button-element"><span class="secno">4.10.8 </span>The <code>button</code> element</a></li><li><a href="the-button-element.html#the-select-element"><span class="secno">4.10.9 </span>The <code>select</code> element</a></li><li><a href="the-button-element.html#the-datalist-element"><span class="secno">4.10.10 </span>The <code>datalist</code> element</a></li><li><a href="the-button-element.html#the-optgroup-element"><span class="secno">4.10.11 </span>The <code>optgroup</code> element</a></li><li><a href="the-button-element.html#the-option-element"><span class="secno">4.10.12 </span>The <code>option</code> element</a></li><li><a href="the-button-element.html#the-textarea-element"><span class="secno">4.10.13 </span>The <code>textarea</code> element</a></li><li><a href="the-button-element.html#the-keygen-element"><span class="secno">4.10.14 </span>The <code>keygen</code> element</a></li><li><a href="the-button-element.html#the-output-element"><span class="secno">4.10.15 </span>The <code>output</code> element</a></li><li><a href="the-button-element.html#the-progress-element"><span class="secno">4.10.16 </span>The <code>progress</code> element</a></li><li><a href="the-button-element.html#the-meter-element"><span class="secno">4.10.17 </span>The <code>meter</code> element</a></li></ol></li></ol></li></ol></div>

  <h4 id="the-button-element"><span class="secno">4.10.8 </span>The <dfn><code>button</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, and <a href="forms.html#category-submit" title="category-submit">submittable</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>, but there must be no <a href="content-models.html#interactive-content">interactive content</a> descendant.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code></dd>
   <dd><code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code></dd>
   <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
   <dd><code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code></dd>
   <dd><code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code></dd>
   <dd><code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code></dd>
   <dd><code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code></dd>
   <dd><code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code></dd>
   <dd><code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code></dd>
   <dd><code title="attr-button-type"><a href="#attr-button-type">type</a></code></dd>
   <dd><code title="attr-button-value"><a href="#attr-button-value">value</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlbuttonelement">HTMLButtonElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="association-of-controls-and-forms.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute boolean <a href="association-of-controls-and-forms.html#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
  readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-formaction" title="dom-fs-formAction">formAction</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-formenctype" title="dom-fs-formEnctype">formEnctype</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-formmethod" title="dom-fs-formMethod">formMethod</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-formnovalidate" title="dom-fs-formNoValidate">formNoValidate</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fs-formtarget" title="dom-fs-formTarget">formTarget</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fe-name" title="dom-fe-name">name</a>;
           attribute DOMString <a href="#dom-button-type" title="dom-button-type">type</a>;
           attribute DOMString <a href="#dom-button-value" title="dom-button-value">value</a>;

  readonly attribute boolean <a href="association-of-controls-and-forms.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
  readonly attribute <a href="association-of-controls-and-forms.html#validitystate">ValidityState</a> <a href="association-of-controls-and-forms.html#dom-cva-validity" title="dom-cva-validity">validity</a>;
  readonly attribute DOMString <a href="association-of-controls-and-forms.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
  boolean <a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
  void <a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="forms.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-button-element">button</a></code> element <a href="rendering.html#represents">represents</a> a
  button. <span class="impl">If the element is not <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, then the user agent
  should allow the user to activate the button.</span></p><p>The element is a <a href="forms.html#concept-button" title="concept-button">button</a>.</p><p>The <dfn id="attr-button-type" title="attr-button-type"><code>type</code></dfn>
  attribute controls the behavior of the button when it is activated.
  It is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following table
  lists the keywords and states for the attribute &#8212; the keywords
  in the left column map to the states in the cell in the second
  column on the same row as the keyword.</p><table><thead><tr><th> Keyword
     </th><th> State
     </th><th> Brief description
   </th></tr></thead><tbody><tr><td><dfn id="attr-button-type-submit" title="attr-button-type-submit"><code>submit</code></dfn>
     </td><td><a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
     </td><td>Submits the form.
    </td></tr><tr><td><dfn id="attr-button-type-reset" title="attr-button-type-reset"><code>reset</code></dfn>
     </td><td><a href="#attr-button-type-reset-state" title="attr-button-type-reset-state">Reset Button</a>
     </td><td>Resets the form.
    </td></tr><tr><td><dfn id="attr-button-type-button" title="attr-button-type-button"><code>button</code></dfn>
     </td><td><a href="#attr-button-type-button-state" title="attr-button-type-button-state">Button</a>
     </td><td>Does nothing.
  </td></tr></tbody></table><p>The <i>missing value default</i> is the <a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
  state.</p><p>If the <code title="attr-button-type"><a href="#attr-button-type">type</a></code> attribute is in
  the <a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
  state, the element is specifically a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a>.</p><div class="impl">

  <p><strong>Constraint validation</strong>: If the <code title="attr-button-type"><a href="#attr-button-type">type</a></code> attribute is in the <a href="#attr-button-type-reset-state" title="attr-button-type-reset-state">Reset Button</a> state or
  the <a href="#attr-button-type-button-state" title="attr-button-type-button-state">Button</a> state,
  the element is <a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>

  <p>If the element is not <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, the <a href="content-models.html#activation-behavior">activation
  behavior</a> of the <code><a href="#the-button-element">button</a></code> element is to run the
  steps defined in the following list for the current state of the
  element's <code title="attr-button-type"><a href="#attr-button-type">type</a></code> attribute.</p>

  <dl><dt> <dfn id="attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</dfn> </dt>

   <dd><p>If the element has a <a href="association-of-controls-and-forms.html#form-owner">form owner</a>, the element
   must <a href="association-of-controls-and-forms.html#concept-form-submit" title="concept-form-submit">submit</a> the <a href="association-of-controls-and-forms.html#form-owner">form
   owner</a> from the <code><a href="#the-button-element">button</a></code> element.</p></dd>

   <dt> <dfn id="attr-button-type-reset-state" title="attr-button-type-reset-state">Reset Button</dfn> </dt>

   <dd><p>If the element has a <a href="association-of-controls-and-forms.html#form-owner">form owner</a>, the element
   must <a href="association-of-controls-and-forms.html#concept-form-reset" title="concept-form-reset">reset</a> the <a href="association-of-controls-and-forms.html#form-owner">form
   owner</a>.</p></dd>

   <dt> <dfn id="attr-button-type-button-state" title="attr-button-type-button-state">Button</dfn>

   </dt><dd><p>Do nothing.</p></dd>

  </dl></div><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
  explicitly associate the <code><a href="#the-button-element">button</a></code> element with its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
  attribute represents the element's name. The <code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code>
  attribute controls focus. The <code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> attributes are
  <a href="association-of-controls-and-forms.html#attributes-for-form-submission">attributes for form submission</a>.</p><p class="note">The <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code> attribute can
  be used to make submit buttons that do not trigger the constraint
  validation.</p><p>The <code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> must not be specified
  if the element's <code title="attr-button-type"><a href="#attr-button-type">type</a></code>
  attribute is not in the <a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
  state.</p><p>The <dfn id="attr-button-value" title="attr-button-value"><code>value</code></dfn>
  attribute gives the element's value for the purposes of form
  submission. The element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is the value of the element's
  <code title="attr-button-value"><a href="#attr-button-value">value</a></code> attribute, if there is
  one, or the empty string otherwise.</p><p class="note">A button (and its value) is only included in the
  form submission if the button itself was used to initiate the form
  submission.</p><div class="impl">

  <p>The <dfn id="dom-button-value" title="dom-button-value"><code>value</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name.</p>

  <p>The <dfn id="dom-button-type" title="dom-button-type"><code>type</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  <p>The <code title="dom-cva-willValidate"><a href="association-of-controls-and-forms.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="association-of-controls-and-forms.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a></code>
  attributes, and the <code title="dom-cva-checkValidatity"><a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
  methods, are part of the <a href="association-of-controls-and-forms.html#the-constraint-validation-api">constraint validation API</a>. The
  <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides a list
  of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-fe-autofocus"><a href="association-of-controls-and-forms.html#dom-fe-autofocus">autofocus</a></code>, <code title="dom-fe-disabled"><a href="association-of-controls-and-forms.html#dom-fe-disabled">disabled</a></code>, <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code>, and <code title="dom-fe-name"><a href="association-of-controls-and-forms.html#dom-fe-name">name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div><div class="example">

   <p>The following button is labeled "Show hint" and pops up a dialog
   box when activated:</p>

   <pre>&lt;button type=button
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')"&gt;
 Show hint
&lt;/button&gt;</pre>

  </div><h4 id="the-select-element"><span class="secno">4.10.9 </span>The <dfn><code>select</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href="#the-option-element">option</a></code> or <code><a href="#the-optgroup-element">optgroup</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code></dd>
   <dd><code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code></dd>
   <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
   <dd><code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code></dd>
   <dd><code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code></dd>
   <dd><code title="attr-select-required"><a href="#attr-select-required">required</a></code></dd>
   <dd><code title="attr-select-size"><a href="#attr-select-size">size</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlselectelement">HTMLSelectElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="association-of-controls-and-forms.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute boolean <a href="association-of-controls-and-forms.html#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
  readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
           attribute boolean <a href="#dom-select-multiple" title="dom-select-multiple">multiple</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fe-name" title="dom-fe-name">name</a>;
           attribute boolean <a href="#dom-select-required" title="dom-select-required">required</a>;
           attribute unsigned long <a href="#dom-select-size" title="dom-select-size">size</a>;

  readonly attribute DOMString <a href="#dom-select-type" title="dom-select-type">type</a>;

  readonly attribute <a href="common-dom-interfaces.html#htmloptionscollection">HTMLOptionsCollection</a> <a href="#dom-select-options" title="dom-select-options">options</a>;
           attribute unsigned long <a href="#dom-select-length" title="dom-select-length">length</a>;
  getter any <a href="#dom-select-item" title="dom-select-item">item</a>(in unsigned long index);
  any <a href="#dom-select-nameditem" title="dom-select-namedItem">namedItem</a>(in DOMString name);
  void <a href="#dom-select-add" title="dom-select-add">add</a>(in <a href="elements.html#htmlelement">HTMLElement</a> element, in optional <a href="elements.html#htmlelement">HTMLElement</a> before);
  void <a href="#dom-select-add" title="dom-select-add">add</a>(in <a href="elements.html#htmlelement">HTMLElement</a> element, in long before);
  void <a href="#dom-select-remove" title="dom-select-remove">remove</a>(in long index);

  readonly attribute <a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a> <a href="#dom-select-selectedoptions" title="dom-select-selectedOptions">selectedOptions</a>;
           attribute long <a href="#dom-select-selectedindex" title="dom-select-selectedIndex">selectedIndex</a>;
           attribute DOMString <a href="#dom-select-value" title="dom-select-value">value</a>;

  readonly attribute boolean <a href="association-of-controls-and-forms.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
  readonly attribute <a href="association-of-controls-and-forms.html#validitystate">ValidityState</a> <a href="association-of-controls-and-forms.html#dom-cva-validity" title="dom-cva-validity">validity</a>;
  readonly attribute DOMString <a href="association-of-controls-and-forms.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
  boolean <a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
  void <a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="forms.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-select-element">select</a></code> element represents a control for
  selecting amongst a set of options.</p><p>The <dfn id="attr-select-multiple" title="attr-select-multiple"><code>multiple</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If the attribute is
  present, then the <code><a href="#the-select-element">select</a></code> element
  <a href="rendering.html#represents">represents</a> a control for selecting zero or more options
  from the <a href="#concept-select-option-list" title="concept-select-option-list">list of
  options</a>. If the attribute is absent, then the
  <code><a href="#the-select-element">select</a></code> element <a href="rendering.html#represents">represents</a> a control for
  selecting a single option from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p><p>The <dfn id="attr-select-size" title="attr-select-size"><code>size</code></dfn>
  attribute gives the number of options to show to the user. The <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> attribute, if specified, must
  have a value that is a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a>
  greater than zero. If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is present,
  then the <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> attribute's
  default value is 4. If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is absent,
  then the <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> attribute's
  default value is 1.</p><div class="impl">

  <p>The <dfn id="concept-select-size" title="concept-select-size">display size</dfn> of a
  <code><a href="#the-select-element">select</a></code> element is the result of applying the
  <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to the value of
  element's <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> attribute, if it
  has one and parsing it is successful. If applying those rules to the
  attribute's value is not successful, or if the <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> attribute is absent, the
  element's <a href="#concept-select-size" title="concept-select-size">display size</a> is
  the default value of the attribute.</p>

  </div><p>The <dfn id="concept-select-option-list" title="concept-select-option-list">list of options</dfn>
  for a <code><a href="#the-select-element">select</a></code> element consists of all the
  <code><a href="#the-option-element">option</a></code> element children of the <code><a href="#the-select-element">select</a></code>
  element, and all the <code><a href="#the-option-element">option</a></code> element children of all the
  <code><a href="#the-optgroup-element">optgroup</a></code> element children of the <code><a href="#the-select-element">select</a></code>
  element, in <a href="infrastructure.html#tree-order">tree order</a>.</p><p>The <dfn id="attr-select-required" title="attr-select-required"><code>required</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, the
  user will be required to select a value before submitting the
  form.</p><p>If a <code><a href="#the-select-element">select</a></code> element has a <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute specified,
  does not have a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute specified, and has a <a href="#concept-select-size" title="concept-select-size">display size</a> of 1;
  and if the <a href="#concept-option-value" title="concept-option-value">value</a> of the
  first <code><a href="#the-option-element">option</a></code> element in the <code><a href="#the-select-element">select</a></code>
  element's <a href="#concept-select-option-list" title="concept-select-option-list">list of
  options</a> (if any) is the empty string, and that
  <code><a href="#the-option-element">option</a></code> element's parent node is the <code><a href="#the-select-element">select</a></code>
  element (and not an <code><a href="#the-optgroup-element">optgroup</a></code> element), then that
  <code><a href="#the-option-element">option</a></code> is the <code><a href="#the-select-element">select</a></code> element's
  <dfn id="placeholder-label-option">placeholder label option</dfn>.</p><p>If a <code><a href="#the-select-element">select</a></code> element has a <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute specified,
  does not have a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute specified, and has a <a href="#concept-select-size" title="concept-select-size">display size</a> of 1,
  then the <code><a href="#the-select-element">select</a></code> element must have a <a href="#placeholder-label-option">placeholder
  label option</a>.</p><div class="impl">

  <p><strong>Constraint validation</strong>: If the element has its
  <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute
  specified, and either none of the <code><a href="#the-option-element">option</a></code> elements in
  the <code><a href="#the-select-element">select</a></code> element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> have their
  <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true, or the only <code><a href="#the-option-element">option</a></code> element in the
  <code><a href="#the-select-element">select</a></code> element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> with its
  <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true is the <a href="#placeholder-label-option">placeholder label option</a>, then the element
  is <a href="association-of-controls-and-forms.html#suffering-from-being-missing">suffering from being missing</a>.</p>

  </div><div class="impl">

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is absent, and the element is not <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, then the user agent
  should allow the user to pick an <code><a href="#the-option-element">option</a></code> element in its
  <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> that
  is itself not <a href="#concept-option-disabled" title="concept-option-disabled">disabled</a>.
  Upon this <code><a href="#the-option-element">option</a></code> element being <dfn id="concept-select-pick" title="concept-select-pick">picked</dfn> (either through a click, or
  through unfocusing the element after changing its value, or through
  a <a href="commands.html#using-the-option-element-to-define-a-command" title="option-command">menu command</a>, or through any
  other mechanism), and before the relevant user interaction event
   is queued (e.g. before the
  <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event), the user agent must
  set the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the
  picked <code><a href="#the-option-element">option</a></code> element to true and 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-change">change</code> at the <code><a href="#the-select-element">select</a></code>
  element, using the <a href="webappapis.html#user-interaction-task-source">user interaction task source</a> as the
  task source.</p>

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is absent, whenever an <code><a href="#the-option-element">option</a></code> element in the
  <code><a href="#the-select-element">select</a></code> element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> has its
  <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true, and whenever an <code><a href="#the-option-element">option</a></code> element with its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true
  is added to the <code><a href="#the-select-element">select</a></code> element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, the user
  agent must set the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of all the
  other <code><a href="#the-option-element">option</a></code> element in its <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> to
  false.</p>

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is absent and the element's <a href="#concept-select-size" title="concept-select-size">display size</a> is greater than 1,
  then the user agent should also allow the user to request that the
  <code><a href="#the-option-element">option</a></code> whose <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, if
  any, be unselected. Upon this request being conveyed to the user
  agent, and before the relevant user interaction event  is queued (e.g. before the <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event), the user agent must set the
  <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of
  that <code><a href="#the-option-element">option</a></code> element to false and 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-change">change</code> at the <code><a href="#the-select-element">select</a></code>
  element, using the <a href="webappapis.html#user-interaction-task-source">user interaction task source</a> as the
  task source.</p>

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is absent and the element's <a href="#concept-select-size" title="concept-select-size">display size</a> is 1, then whenever
  there are no <code><a href="#the-option-element">option</a></code> elements in the <code><a href="#the-select-element">select</a></code>
  element's <a href="#concept-select-option-list" title="concept-select-option-list">list of
  options</a> that have their <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true,
  the user agent must set the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the first
  <code><a href="#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> in
  <a href="infrastructure.html#tree-order">tree order</a> that is not <a href="#concept-option-disabled" title="concept-option-disabled">disabled</a>, if any, to
  true.</p>

  <p>If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
  attribute is present, and the element is not <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, then the user agent
  should allow the user to <dfn id="concept-select-toggle" title="concept-select-toggle">toggle</dfn> the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the
  <code><a href="#the-option-element">option</a></code> elements in its <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> that are
  themselves not <a href="#concept-option-disabled" title="concept-option-disabled">disabled</a>
  (either through a click, or through a <a href="commands.html#using-the-option-element-to-define-a-command" title="option-command">menu command</a>, or any other mechanism).
  Upon the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of one or
  more <code><a href="#the-option-element">option</a></code> elements being changed by the user, and
  before the relevant user interaction event  is queued (e.g. before a related <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event), the user agent must
  <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-change">change</code> at the
  <code><a href="#the-select-element">select</a></code> element, using the <a href="webappapis.html#user-interaction-task-source">user interaction task
  source</a> as the task source.</p>

  <p>The <a href="association-of-controls-and-forms.html#concept-form-reset-control" title="concept-form-reset-control">reset
  algorithm</a> for <code><a href="#the-select-element">select</a></code> elements is to go through
  all the <code><a href="#the-option-element">option</a></code> elements in the element's <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, and set
  their <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a>
  to true if the <code><a href="#the-option-element">option</a></code> element has a <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute, and false
  otherwise.</p>

  </div><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
  explicitly associate the <code><a href="#the-select-element">select</a></code> element with its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
  attribute represents the element's name. The <code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code>
  attribute controls focus.</p><dl class="domintro"><dt><var title="">select</var> . <code title="dom-select-type"><a href="#dom-select-type">type</a></code></dt>

   <dd>

    <p>Returns "<code title="">select-multiple</code>" if the element
    has a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
    attribute, and "<code title="">select-one</code>"
    otherwise.</p>

   </dd>

   <dt><var title="">select</var> . <code title="dom-select-options"><a href="#dom-select-options">options</a></code></dt>

   <dd>

    <p>Returns an <code><a href="common-dom-interfaces.html#htmloptionscollection">HTMLOptionsCollection</a></code> of the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>

   </dd>

   <dt><var title="">select</var> . <code title="dom-select-length"><a href="#dom-select-length">length</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the number of elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>
    <p>When set to a smaller number, truncates the number of <code><a href="#the-option-element">option</a></code> elements in the <code><a href="#the-select-element">select</a></code>.</p>
    <p>When set to a greater number, adds new blank <code><a href="#the-option-element">option</a></code> elements to the <code><a href="#the-select-element">select</a></code>.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">select</var> . <code title="dom-select-item"><a href="#dom-select-item">item</a></code>(<var title="">index</var>)</dt>
   <dt><var title="">select</var>[<var title="">index</var>]</dt>
   <dd>
    <p>Returns the item with index <var title="">index</var> from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p>
    <p>Returns null if <var title="">index</var> is out of range.</p>
   </dd>

   <dt><var title="">element</var> = <var title="">select</var> . <code title="dom-select-item"><a href="#dom-select-item">namedItem</a></code>(<var title="">name</var>)</dt>
   <dd>
    <p>Returns the item with <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-option-name"><a href="obsolete.html#attr-option-name">name</a></code> <var title="">name</var> from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>
    <p>If there are multiple matching items, then a <code><a href="infrastructure.html#nodelist">NodeList</a></code> object containing all those elements is returned.</p>
    <p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> could be found.</p>
   </dd>

   <dt><var title="">select</var> . <code title="dom-select-add"><a href="#dom-select-add">add</a></code>(<var title="">element</var> [, <var title="">before</var> ])</dt>
   <dd>
    <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
    <p>The <var title="">before</var> argument can be a number, in
    which case <var title="">element</var> is inserted before the item
    with that number, or an element from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, in
    which case <var title="">element</var> is inserted before that
    element.</p>
    <p>If <var title="">before</var> is omitted, null, or a number out
    of range, then <var title="">element</var> will be added at the
    end of the list.</p>
    <p>This method will throw a <code><a href="common-dom-interfaces.html#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code>
    exception if <var title="">element</var> is an ancestor of the
    element into which it is to be inserted. If <var title="">element</var> is not an <code><a href="#the-option-element">option</a></code> or
    <code><a href="#the-optgroup-element">optgroup</a></code> element, then the method does nothing.</p>
   </dd>

   <dt><var title="">select</var> . <code title="dom-select-selectedOptions"><a href="#dom-select-selectedoptions">selectedOptions</a></code></dt>

   <dd>

    <p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> that are
    selected.</p>

   </dd>

   <dt><var title="">select</var> . <code title="dom-select-selectedIndex"><a href="#dom-select-selectedindex">selectedIndex</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the index of the first selected item, if any, or
    &#8722;1 if there is no selected item.</p>

    <p>Can be set, to change the selection.</p>

   </dd>

   <dt><var title="">select</var> . <code title="dom-select-value"><a href="#dom-select-value">value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the
    first selected item, if any, or the empty string if there is no
    selected item.</p>

    <p>Can be set, to change the selection.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-select-type" title="dom-select-type"><code>type</code></dfn> IDL
  attribute, on getting, must return the string "<code title="">select-one</code>" if the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is absent,
  and the string "<code title="">select-multiple</code>" if the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is
  present.</p>

  <p>The <dfn id="dom-select-options" title="dom-select-options"><code>options</code></dfn>
  IDL attribute must return an <code><a href="common-dom-interfaces.html#htmloptionscollection">HTMLOptionsCollection</a></code>
  rooted at the <code><a href="#the-select-element">select</a></code> node, whose filter matches the
  elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of
  options</a>.</p>

  <p>The <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection is
  also mirrored on the <code><a href="#htmlselectelement">HTMLSelectElement</a></code> object. The
  <a href="infrastructure.html#supported-property-indices">supported property indices</a> at any instant are the
  indices supported by the object returned by the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> attribute at that
  instant.</p>

  <p>The <dfn id="dom-select-length" title="dom-select-length"><code>length</code></dfn> IDL
  attribute must return the number of nodes <a href="common-dom-interfaces.html#represented-by-the-collection" title="represented
  by the collection">represented</a> by the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection. On setting, it
  must act like the attribute of the same name on the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection.</p>

  <p>The <dfn id="dom-select-item" title="dom-select-item"><code>item(<var title="">index</var>)</code></dfn> method must return the value
  returned by the method of the same name on the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection, when invoked
  with the same argument.</p>

  <p>The <dfn id="dom-select-nameditem" title="dom-select-namedItem"><code>namedItem(<var title="">name</var>)</code></dfn> method must return the value
  returned by the method of the same name on the <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection, when invoked
  with the same argument.</p>

  <p>Similarly, the <dfn id="dom-select-add" title="dom-select-add"><code>add()</code></dfn> and <dfn id="dom-select-remove" title="dom-select-remove"><code>remove()</code></dfn> methods must
  act like their namesake methods on that same <code title="dom-select-options"><a href="#dom-select-options">options</a></code> collection.</p>

  <p>The <dfn id="dom-select-selectedoptions" title="dom-select-selectedOptions"><code>selectedOptions</code></dfn>
  IDL attribute must return an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at
  the <code><a href="#the-select-element">select</a></code> node, whose filter matches the elements in
  the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>
  that have their <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true.</p>

  <p>The <dfn id="dom-select-selectedindex" title="dom-select-selectedIndex"><code>selectedIndex</code></dfn>
  IDL attribute, on getting, must return the <a href="#concept-option-index" title="concept-option-index">index</a> of the first
  <code><a href="#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> in
  <a href="infrastructure.html#tree-order">tree order</a> that has its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true,
  if any. If there isn't one, then it must return &#8722;1.</p>

  <p>On setting, the <code title="dom-select-selectedIndex"><a href="#dom-select-selectedindex">selectedIndex</a></code> attribute must
  set the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of all the
  <code><a href="#the-option-element">option</a></code> elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> to false,
  and then the <code><a href="#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> whose
  <a href="#concept-option-index" title="concept-option-index">index</a> is the given new
  value, if any, must have its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true.</p>

  <p>The <dfn id="dom-select-value" title="dom-select-value"><code>value</code></dfn> IDL
  attribute, on getting, must return the <a href="#concept-option-value" title="concept-option-value">value</a> of the first
  <code><a href="#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> in
  <a href="infrastructure.html#tree-order">tree order</a> that has its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true,
  if any. If there isn't one, then it must return the empty
  string.</p>

  <p>On setting, the <code title="dom-select-value"><a href="#dom-select-value">value</a></code>
  attribute must set the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of all the
  <code><a href="#the-option-element">option</a></code> elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> to false,
  and then the first <code><a href="#the-option-element">option</a></code> element in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, in
  <a href="infrastructure.html#tree-order">tree order</a>, whose <a href="#concept-option-value" title="concept-option-value">value</a> is equal to the given new
  value, if any, must have its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to
  true.</p>

  <p>The <dfn id="dom-select-multiple" title="dom-select-multiple"><code>multiple</code></dfn>,
  <dfn id="dom-select-required" title="dom-select-required"><code>required</code></dfn>, and
  <dfn id="dom-select-size" title="dom-select-size"><code>size</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name. The <code title="dom-select-size"><a href="#dom-select-size">size</a></code> IDL
  attribute is <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers">limited to only non-negative numbers</a>, with
  the default value zero (which for historical reasons is different
  from the default value of the <code title="attr-select-size"><a href="#attr-select-size">size</a></code> content attribute that it
  reflects).</p>
  <p>The <code title="dom-cva-willValidate"><a href="association-of-controls-and-forms.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="association-of-controls-and-forms.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a></code>
  attributes, and the <code title="dom-cva-checkValidatity"><a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
  methods, are part of the <a href="association-of-controls-and-forms.html#the-constraint-validation-api">constraint validation API</a>. The
  <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides a list
  of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-fe-autofocus"><a href="association-of-controls-and-forms.html#dom-fe-autofocus">autofocus</a></code>, <code title="dom-fe-disabled"><a href="association-of-controls-and-forms.html#dom-fe-disabled">disabled</a></code>, <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code>, and <code title="dom-fe-name"><a href="association-of-controls-and-forms.html#dom-fe-name">name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div><div class="example">

   <p>The following example shows how a <code><a href="#the-select-element">select</a></code> element
   can be used to offer the user with a set of options from which the
   user can select a single option. The default option is
   preselected.</p>

   <pre>&lt;p&gt;
 &lt;label for="unittype"&gt;Select unit type:&lt;/label&gt;
 &lt;select id="unittype" name="unittype"&gt;
  &lt;option value="1"&gt; Miner &lt;/option&gt;
  &lt;option value="2"&gt; Puffer &lt;/option&gt;
  &lt;option value="3" selected&gt; Snipey &lt;/option&gt;
  &lt;option value="4"&gt; Max &lt;/option&gt;
  &lt;option value="5"&gt; Firebot &lt;/option&gt;
 &lt;/select&gt;
&lt;/p&gt;</pre>

  </div><div class="example">

   <p>Here, the user is offered a set of options from which he can
   select any number. By default, all five options are selected.</p>

   <pre>&lt;p&gt;
 &lt;label for="allowedunits"&gt;Select unit types to enable on this map:&lt;/label&gt;
 &lt;select id="allowedunits" name="allowedunits" multiple&gt;
  &lt;option value="1" selected&gt; Miner &lt;/option&gt;
  &lt;option value="2" selected&gt; Puffer &lt;/option&gt;
  &lt;option value="3" selected&gt; Snipey &lt;/option&gt;
  &lt;option value="4" selected&gt; Max &lt;/option&gt;
  &lt;option value="5" selected&gt; Firebot &lt;/option&gt;
 &lt;/select&gt;
&lt;/p&gt;</pre>

  </div><h4 id="the-datalist-element"><span class="secno">4.10.10 </span>The <dfn><code>datalist</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Either: <a href="content-models.html#phrasing-content">phrasing content</a>.</dd>
   <dd>Or: Zero or more <code><a href="#the-option-element">option</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmldatalistelement">HTMLDataListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
  readonly attribute <a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a> <a href="#dom-datalist-options" title="dom-datalist-options">options</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-datalist-element">datalist</a></code> element represents a set of
  <code><a href="#the-option-element">option</a></code> elements that represent predefined options for
  other controls. The contents of the element represents fallback
  content for legacy user agents, intermixed with <code><a href="#the-option-element">option</a></code>
  elements that represent the predefined options. In the rendering,
  the <code><a href="#the-datalist-element">datalist</a></code> element <a href="rendering.html#represents">represents</a>
  nothing<span class="impl"> and it, along with its children, should
  be hidden</span>.</p><p>The <code><a href="#the-datalist-element">datalist</a></code> element is hooked up to an
  <code><a href="the-input-element.html#the-input-element">input</a></code> element using the <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> attribute on the
  <code><a href="the-input-element.html#the-input-element">input</a></code> element.</p><p>Each <code><a href="#the-option-element">option</a></code> element that is a descendant of the
  <code><a href="#the-datalist-element">datalist</a></code> element, that is not <a href="#concept-option-disabled" title="concept-option-disabled">disabled</a>, and whose <a href="#concept-option-value" title="concept-option-value">value</a> is a string that isn't the
  empty string, represents a suggestion. Each suggestion has a <a href="#concept-option-value" title="concept-option-value">value</a> and a <a href="#concept-option-label" title="concept-option-label">label</a>.

  </p><dl class="domintro"><dt><var title="">datalist</var> . <code title="dom-datalist-options"><a href="#dom-datalist-options">options</a></code></dt>

   <dd>
    <p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the <code>options</code> elements of the table.</p>
   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-datalist-options" title="dom-datalist-options"><code>options</code></dfn>
  IDL attribute must return an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at
  the <code><a href="#the-datalist-element">datalist</a></code> node, whose filter matches
  <code><a href="#the-option-element">option</a></code> elements.</p>

  <p><strong>Constraint validation</strong>: If an element has a
  <code><a href="#the-datalist-element">datalist</a></code> element ancestor, it is <a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from
  constraint validation</a>.</p>

  </div><h4 id="the-optgroup-element"><span class="secno">4.10.11 </span>The <dfn><code>optgroup</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>As a child of a <code><a href="#the-select-element">select</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href="#the-option-element">option</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-optgroup-disabled"><a href="#attr-optgroup-disabled">disabled</a></code></dd>
   <dd><code title="attr-optgroup-label"><a href="#attr-optgroup-label">label</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmloptgroupelement">HTMLOptGroupElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="#dom-optgroup-disabled" title="dom-optgroup-disabled">disabled</a>;
           attribute DOMString <a href="#dom-optgroup-label" title="dom-optgroup-label">label</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-optgroup-element">optgroup</a></code> element <a href="rendering.html#represents">represents</a> a group of
  <code><a href="#the-option-element">option</a></code> elements with a common label.</p><p>The element's group of <code><a href="#the-option-element">option</a></code> elements consists of
  the <code><a href="#the-option-element">option</a></code> elements that are children of the
  <code><a href="#the-optgroup-element">optgroup</a></code> element.</p><div class="impl">

  <p>When showing <code><a href="#the-option-element">option</a></code> elements in <code><a href="#the-select-element">select</a></code>
  elements, user agents should show the <code><a href="#the-option-element">option</a></code> elements
  of such groups as being related to each other and separate from
  other <code><a href="#the-option-element">option</a></code> elements.</p>

  </div><p>The <dfn id="attr-optgroup-disabled" title="attr-optgroup-disabled"><code>disabled</code></dfn> attribute
  is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> and can be used to <a href="#concept-option-disabled" title="concept-option-disabled">disable</a> a group of
  <code><a href="#the-option-element">option</a></code> elements together.</p><p>The <dfn id="attr-optgroup-label" title="attr-optgroup-label"><code>label</code></dfn>
  attribute must be specified. Its value gives the name of the group,
  for the purposes of the user interface. <span class="impl">User
  agents should use this attribute's value when labelling the group of
  <code><a href="#the-option-element">option</a></code> elements in a <code><a href="#the-select-element">select</a></code>
  element.</span></p><div class="impl">

  <p>The <dfn id="dom-optgroup-disabled" title="dom-optgroup-disabled"><code>disabled</code></dfn> and <dfn id="dom-optgroup-label" title="dom-optgroup-label"><code>label</code></dfn> attributes must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name.</p>

  </div><div class="example">

   <p>The following snippet shows how a set of lessons from three
   courses could be offered in a <code><a href="#the-select-element">select</a></code> drop-down
   widget:</p>

   <pre>&lt;form action="courseselector.dll" method="get"&gt;
 &lt;p&gt;Which course would you like to watch today?
 &lt;p&gt;&lt;label&gt;Course:
  &lt;select name="c"&gt;
   &lt;optgroup label="8.01 Physics I: Classical Mechanics"&gt;
    &lt;option value="8.01.1"&gt;Lecture 01: Powers of Ten
    &lt;option value="8.01.2"&gt;Lecture 02: 1D Kinematics
    &lt;option value="8.01.3"&gt;Lecture 03: Vectors
   &lt;optgroup label="8.02 Electricity and Magnestism"&gt;
    &lt;option value="8.02.1"&gt;Lecture 01: What holds our world together?
    &lt;option value="8.02.2"&gt;Lecture 02: Electric Field
    &lt;option value="8.02.3"&gt;Lecture 03: Electric Flux
   &lt;optgroup label="8.03 Physics III: Vibrations and Waves"&gt;
    &lt;option value="8.03.1"&gt;Lecture 01: Periodic Phenomenon
    &lt;option value="8.03.2"&gt;Lecture 02: Beats
    &lt;option value="8.03.3"&gt;Lecture 03: Forced Oscillations with Damping
  &lt;/select&gt;
 &lt;/label&gt;
 &lt;p&gt;&lt;input type=submit value="&#9654; Play"&gt;
&lt;/form&gt;</pre>

  </div><h4 id="the-option-element"><span class="secno">4.10.12 </span>The <dfn><code>option</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd>None.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>As a child of a <code><a href="#the-select-element">select</a></code> element.</dd>
   <dd>As a child of a <code><a href="#the-datalist-element">datalist</a></code> element.</dd>
   <dd>As a child of an <code><a href="#the-optgroup-element">optgroup</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#text-content" title="text content">Text</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-option-disabled"><a href="#attr-option-disabled">disabled</a></code></dd>
   <dd><code title="attr-option-label"><a href="#attr-option-label">label</a></code></dd>
   <dd><code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code></dd>
   <dd><code title="attr-option-value"><a href="#attr-option-value">value</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">[NamedConstructor=<a href="#dom-option" title="dom-option">Option</a>(),
 NamedConstructor=<a href="#dom-option-t" title="dom-option-t">Option</a>(in DOMString text),
 NamedConstructor=<a href="#dom-option-tv" title="dom-option-tv">Option</a>(in DOMString text, in DOMString value),
 NamedConstructor=<a href="#dom-option-tvd" title="dom-option-tvd">Option</a>(in DOMString text, in DOMString value, in boolean defaultSelected),
 NamedConstructor=<a href="#dom-option-tvds" title="dom-option-tvds">Option</a>(in DOMString text, in DOMString value, in boolean defaultSelected, in boolean selected)]
interface <dfn id="htmloptionelement">HTMLOptionElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="#dom-option-disabled" title="dom-option-disabled">disabled</a>;
  readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="#dom-option-form" title="dom-option-form">form</a>;
           attribute DOMString <a href="#dom-option-label" title="dom-option-label">label</a>;
           attribute boolean <a href="#dom-option-defaultselected" title="dom-option-defaultSelected">defaultSelected</a>;
           attribute boolean <a href="#dom-option-selected" title="dom-option-selected">selected</a>;
           attribute DOMString <a href="#dom-option-value" title="dom-option-value">value</a>;

           attribute DOMString <a href="#dom-option-text" title="dom-option-text">text</a>;
  readonly attribute long <a href="#dom-option-index" title="dom-option-index">index</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-option-element">option</a></code> element <a href="rendering.html#represents">represents</a> an option
  in a <code><a href="#the-select-element">select</a></code> element or as part of a list of suggestions
  in a <code><a href="#the-datalist-element">datalist</a></code> element.</p><p>In certain circumstances described in the definition of the
  <code><a href="#the-select-element">select</a></code> element, an <code><a href="#the-option-element">option</a></code> element can be a
  <code><a href="#the-select-element">select</a></code> element's <a href="#placeholder-label-option">placeholder label option</a>.
  A <a href="#placeholder-label-option">placeholder label option</a> does not represent an actual
  option, but instead represents a label for the <code><a href="#the-select-element">select</a></code>
  control.</p><p>The <dfn id="attr-option-disabled" title="attr-option-disabled"><code>disabled</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. An
  <code><a href="#the-option-element">option</a></code> element is <dfn id="concept-option-disabled" title="concept-option-disabled">disabled</dfn> if its <code title="attr-option-disabled"><a href="#attr-option-disabled">disabled</a></code> attribute is present or
  if it is a child of an <code><a href="#the-optgroup-element">optgroup</a></code> element whose <code title="attr-optgroup-disabled"><a href="#attr-optgroup-disabled">disabled</a></code> attribute is
  present.</p><div class="impl">

  <p>An <code><a href="#the-option-element">option</a></code> element that is <a href="#attr-option-disabled" title="attr-option-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>

  </div><p>The <dfn id="attr-option-label" title="attr-option-label"><code>label</code></dfn>
  attribute provides a label for element. The <dfn id="concept-option-label" title="concept-option-label">label</dfn> of an <code><a href="#the-option-element">option</a></code>
  element is the value of the <code title="attr-option-label"><a href="#attr-option-label">label</a></code> attribute, if there is one,
  or the <code><a href="infrastructure.html#textcontent">textContent</a></code> of the element, if there isn't.</p><p>The <dfn id="attr-option-value" title="attr-option-value"><code>value</code></dfn>
  attribute provides a value for element. The <dfn id="concept-option-value" title="concept-option-value">value</dfn> of an <code><a href="#the-option-element">option</a></code>
  element is the value of the <code title="attr-option-value"><a href="#attr-option-value">value</a></code> attribute, if there is one,
  or the <code><a href="infrastructure.html#textcontent">textContent</a></code> of the element, if there isn't.</p><p>The <dfn id="attr-option-selected" title="attr-option-selected"><code>selected</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. It represents the
  default <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the
  element.</p><div class="impl">

  <p>The <dfn id="concept-option-selectedness" title="concept-option-selectedness">selectedness</dfn>
  of an <code><a href="#the-option-element">option</a></code> element is a boolean state, initially
  false. Except where otherwise
  specified, when the element is created, its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> must be set
  to true if the element has a <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute. Whenever an
  <code><a href="#the-option-element">option</a></code> element's <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute is added, its
  <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> must
  be set to true.</p>

  <p class="note">The <code title="dom-option-tvd"><a href="#dom-option-tvd">Option()</a></code>
  constructor with three or fewer arguments overrides the initial
  state of the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> state to
  always be false even if the third argument is true (implying that a
  <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute is to
  be set). The fourth argument can be used to explicitly set the
  initial <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> state when
  using the constructor.</p>


  </div><p>A <code><a href="#the-select-element">select</a></code> element whose <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is not
  specified must not have more than one descendant <code><a href="#the-option-element">option</a></code>
  element with its <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code>
  attribute set.</p><div class="impl">

  <p>An <code><a href="#the-option-element">option</a></code> element's <dfn id="concept-option-index" title="concept-option-index">index</dfn> is the number of
  <code><a href="#the-option-element">option</a></code> element that are in the same <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a> but that
  come before it in <a href="infrastructure.html#tree-order">tree order</a>. If the
  <code><a href="#the-option-element">option</a></code> element is not in a <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, then the
  <code><a href="#the-option-element">option</a></code> element's <a href="#concept-option-index" title="concept-option-index">index</a> is zero.</p>

  </div><dl class="domintro"><dt><var title="">option</var> . <code title="dom-option-selected"><a href="#dom-option-selected">selected</a></code></dt>

   <dd>

    <p>Returns true if the element is selected, and false otherwise.</p>

    <p>Can be set, to override the current state of the element.</p>

   </dd>

   <dt><var title="">option</var> . <code title="dom-option-index"><a href="#dom-option-index">index</a></code></dt>

   <dd>

    <p>Returns the index of the element in its <code><a href="#the-select-element">select</a></code>
    element's <code title="dom-select-options"><a href="#dom-select-options">options</a></code>
    list.</p>

   </dd>

   <dt><var title="">option</var> . <code title="dom-option-form"><a href="#dom-option-form">form</a></code></dt>

   <dd>

    <p>Returns the element's <code><a href="forms.html#the-form-element">form</a></code> element, if any, or
    null otherwise.</p>

   </dd>

   <dt><var title="">option</var> . <code title="dom-option-text"><a href="#dom-option-text">text</a></code></dt>

   <dd>

    <p>Same as <code><a href="infrastructure.html#textcontent">textContent</a></code>, except that spaces are collapsed.</p>

   </dd>

   <dt><var title="">option</var> = new <code title="dom-option"><a href="#dom-option">Option</a></code>( [ <var title="">text</var> [, <var title="">value</var> [, <var title="">defaultSelected</var> [, <var title="">selected</var> ] ] ] ] )</dt>

   <dd>

    <p>Returns a new <code><a href="#the-option-element">option</a></code> element.</p>

    <p>The <var title="">text</var> argument sets the contents of the element.</p>
    <p>The <var title="">value</var> argument sets the <code title="attr-option-value"><a href="#attr-option-value">value</a></code> attribute.</p>
    <p>The <var title="">defaultSelected</var> argument sets the <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute.</p>
    <p>The <var title="">selected</var> argument sets whether or not the element is selected. If it is omitted, even if the <var title="">defaultSelected</var> argument is true, the element is not selected.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-option-disabled" title="dom-option-disabled"><code>disabled</code></dfn>
  and <dfn id="dom-option-label" title="dom-option-label"><code>label</code></dfn> IDL
  attributes must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content
  attributes of the same name. The <dfn id="dom-option-defaultselected" title="dom-option-defaultSelected"><code>defaultSelected</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> content attribute.</p>

  <p>The <dfn id="dom-option-value" title="dom-option-value"><code>value</code></dfn> IDL
  attribute, on getting, must return the value of the element's <code title="attr-option-value"><a href="#attr-option-value">value</a></code> content attribute, if it has
  one, or else the value of the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute. On setting, the element's <code title="attr-option-value"><a href="#attr-option-value">value</a></code> content attribute must be set
  to the new value.</p>

  <p>The <dfn id="dom-option-selected" title="dom-option-selected"><code>selected</code></dfn>
  IDL attribute, on getting, must return true if the element's <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, and
  false otherwise. On setting, it must set the element's <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> to the new
  value.</p>

  <p>The <dfn id="dom-option-index" title="dom-option-index"><code>index</code></dfn> IDL
  attribute must return the element's <a href="#concept-option-index" title="concept-option-index">index</a>.</p>

  <p>The <dfn id="dom-option-text" title="dom-option-text"><code>text</code></dfn> IDL
  attribute, on getting, must return the value of the
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute on the element with leading
  and trailing <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>
  removed, and with any sequences of two or more <a href="common-microsyntaxes.html#space-character" title="space
  character">space characters</a> replaced by a single U+0020 SPACE
  character. On setting, it must act as if the
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute on the element had been set
  to the new value.</p>

  <p>The <dfn id="dom-option-form" title="dom-option-form"><code>form</code></dfn> IDL
  attribute's behavior depends on whether the <code><a href="#the-option-element">option</a></code>
  element is in a <code><a href="#the-select-element">select</a></code> element or not. If the
  <code><a href="#the-option-element">option</a></code> has a <code><a href="#the-select-element">select</a></code> element as its parent,
  or has a <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element as its parent and that
  <code><a href="tabular-data.html#the-colgroup-element">colgroup</a></code> element has a <code><a href="#the-select-element">select</a></code> element as
  its parent, then the <code title="dom-option-form"><a href="#dom-option-form">form</a></code> IDL
  attribute must return the same value as the <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute on that
  <code><a href="#the-select-element">select</a></code> element. Otherwise, it must return null.</p>

  <p>Several constructors are provided for creating
  <code><a href="#htmloptionelement">HTMLOptionElement</a></code> objects (in addition to the factory
  methods from DOM Core such as <code title="">createElement()</code>): <dfn id="dom-option" title="dom-option"><code>Option()</code></dfn>, <dfn id="dom-option-t" title="dom-option-t"><code>Option(<var title="">text</var>)</code></dfn>, <dfn id="dom-option-tv" title="dom-option-tv"><code>Option(<var title="">text</var>, <var title="">value</var>)</code></dfn>, <dfn id="dom-option-tvd" title="dom-option-tvd"><code>Option(<var title="">text</var>, <var title="">value</var>, <var title="">defaultSelected</var>)</code></dfn>, and <dfn id="dom-option-tvds" title="dom-option-tvds"><code>Option(<var title="">text</var>, <var title="">value</var>, <var title="">defaultSelected</var>, <var title="">selected</var>)</code></dfn>. When invoked as constructors,
  these must return a new <code><a href="#htmloptionelement">HTMLOptionElement</a></code> object (a new
  <code><a href="#the-option-element">option</a></code> element). If the <var title="">text</var>
  argument is present, the new object must have as its only child a
  <code><a href="infrastructure.html#node">Node</a></code> with node type <code title="">TEXT_NODE</code> (3)
  whose data is the value of that argument. If the <var title="">value</var> argument is present, the new object must have a
  <code title="attr-option-value"><a href="#attr-option-value">value</a></code> attribute set with the
  value of the argument as its value. If the <var title="">defaultSelected</var> argument is present and true, the new
  object must have a <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute set with no
  value. If the <var title="">selected</var> argument is present and
  true, the new object must have its <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> set to true;
  otherwise the fourth argument is absent or false, and the <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> must be set
  to false, even if the <var title="">defaultSelected</var> argument
  is present and true. The element's document must be the <a href="browsers.html#active-document">active
  document</a> of the <a href="browsers.html#browsing-context">browsing context</a> of the
  <code><a href="browsers.html#window">Window</a></code> object on which the interface object of the
  invoked constructor is found.</p>

  </div><h4 id="the-textarea-element"><span class="secno">4.10.13 </span>The <dfn><code>textarea</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#text-content" title="text content">Text</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code></dd>
   <dd><code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code></dd>
   <dd><code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code></dd>
   <dd><code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code></dd>
   <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
   <dd><code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code></dd>
   <dd><code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code></dd>
   <dd><code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code></dd>
   <dd><code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code></dd>
   <dd><code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code></dd>
   <dd><code title="attr-textarea-rows"><a href="#attr-textarea-rows">rows</a></code></dd>
   <dd><code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmltextareaelement">HTMLTextAreaElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="association-of-controls-and-forms.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute unsigned long <a href="#dom-textarea-cols" title="dom-textarea-cols">cols</a>;
           attribute DOMString <a href="#dom-textarea-dirname" title="dom-textarea-dirName">dirName</a>;
           attribute boolean <a href="association-of-controls-and-forms.html#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
  readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
           attribute long <a href="#dom-textarea-maxlength" title="dom-textarea-maxLength">maxLength</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fe-name" title="dom-fe-name">name</a>;
           attribute DOMString <a href="#dom-textarea-placeholder" title="dom-textarea-placeholder">placeholder</a>;
           attribute boolean <a href="#dom-textarea-readonly" title="dom-textarea-readOnly">readOnly</a>;
           attribute boolean <a href="#dom-textarea-required" title="dom-textarea-required">required</a>;
           attribute unsigned long <a href="#dom-textarea-rows" title="dom-textarea-rows">rows</a>;
           attribute DOMString <a href="#dom-textarea-wrap" title="dom-textarea-wrap">wrap</a>;

  readonly attribute DOMString <a href="#dom-textarea-type" title="dom-textarea-type">type</a>;
           attribute DOMString <a href="#dom-textarea-defaultvalue" title="dom-textarea-defaultValue">defaultValue</a>;
           attribute DOMString <a href="#dom-textarea-value" title="dom-textarea-value">value</a>;
  readonly attribute unsigned long <a href="#dom-textarea-textlength" title="dom-textarea-textLength">textLength</a>;

  readonly attribute boolean <a href="association-of-controls-and-forms.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
  readonly attribute <a href="association-of-controls-and-forms.html#validitystate">ValidityState</a> <a href="association-of-controls-and-forms.html#dom-cva-validity" title="dom-cva-validity">validity</a>;
  readonly attribute DOMString <a href="association-of-controls-and-forms.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
  boolean <a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
  void <a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="forms.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;

  void <a href="association-of-controls-and-forms.html#dom-textarea-input-select" title="dom-textarea/input-select">select</a>();
           attribute unsigned long <a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>;
           attribute unsigned long <a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>;
  void <a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(in unsigned long start, in unsigned long end, in optional DOMString direction);
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-textarea-element">textarea</a></code> element <a href="rendering.html#represents">represents</a> a
  multiline plain text edit control<span class="impl"> for the
  element's <dfn id="concept-textarea-raw-value" title="concept-textarea-raw-value">raw
  value</dfn></span>. The contents of the control represent the
  control's default value.</p><div class="impl">

  <p>The <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> of
  a <code><a href="#the-textarea-element">textarea</a></code> control must be initially the empty
  string.</p>

  <p>A newline in a <code><a href="#the-textarea-element">textarea</a></code> element, and in its <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>, should separate
  paragraphs for the purposes of the Unicode bidirectional algorithm.
  This requirement may be implemented indirectly through the style
  layer. For example, an HTML+CSS user agent could implement these
  requirements by implementing the CSS 'unicode-bidi' property. <a href="references.html#refsBIDI">[BIDI]</a> <a href="references.html#refsCSS">[CSS]</a></p>

  </div><p>The <dfn id="attr-textarea-readonly" title="attr-textarea-readonly"><code>readonly</code></dfn> attribute
  is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> used to control whether the text
  can be edited by the user or not.</p><div class="impl">

  <p><strong>Constraint validation</strong>: If the <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> attribute is
  specified on a <code><a href="#the-textarea-element">textarea</a></code> element, the element is
  <a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>

  <p>A <code><a href="#the-textarea-element">textarea</a></code> element is <dfn id="concept-textarea-mutable" title="concept-textarea-mutable">mutable</dfn> if it is neither
  <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a> nor has a <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> attribute
  specified.</p>

  <p>When a <code><a href="#the-textarea-element">textarea</a></code> is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, its <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> should be
  editable by the user: the user agent should allow the user to edit,
  insert, and remove text, and to insert and remove line breaks in the
  form of U+000A LINE FEED (LF) characters. Any time the user causes
  the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw
  value</a> to change, the user agent must <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-input">input</code> at the <code><a href="#the-textarea-element">textarea</a></code>
  element. User agents may wait for a suitable break in the user's
  interaction before queuing the task; for example, a user agent could
  wait for the user to have not hit a key for 100ms, so as to only
  fire the event when the user pauses, instead of continuously for
  each keystroke.</p>
  <p>A <code><a href="#the-textarea-element">textarea</a></code> element has a <dfn id="concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</dfn>, which must be
  initially set to false, and must be set to true whenever the user
  interacts with the control in a way that changes the <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>.</p>

  <p>When the <code><a href="#the-textarea-element">textarea</a></code> element's <code><a href="infrastructure.html#textcontent">textContent</a></code>
  IDL attribute changes value, if the element's <a href="#concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</a> is false,
  then the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw
  value</a> must be set to the value of the element's
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p>

  <p>The <a href="association-of-controls-and-forms.html#concept-form-reset-control" title="concept-form-reset-control">reset
  algorithm</a> for <code><a href="#the-textarea-element">textarea</a></code> elements is to set the
  element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">value</a> to
  the value of the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute.</p>


  <p>If the element is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, the user agent
  should allow the user to change the writing direction of the
  element, setting it either to a left-to-right writing direction or a
  right-to-left writing direction. If the user does so, the user agent
  must then run the following steps:</p>

  <ol><li><p>Set the element's <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code>
   attribute to "<code title="attr-dir-ltr"><a href="elements.html#attr-dir-ltr">ltr</a></code>" if the user
   selected a left-to-right writing direction, and "<code title="attr-dir-rtl"><a href="elements.html#attr-dir-rtl">rtl</a></code>" if the user selected a
   right-to-left writing direction.</p></li>

   <li><p><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-input">input</code> at the <code><a href="#the-textarea-element">textarea</a></code>
   element.</p></li>

  </ol></div><p>The <dfn id="attr-textarea-cols" title="attr-textarea-cols"><code>cols</code></dfn>
  attribute specifies the expected maximum number of characters per
  line. If the <code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code> attribute
  is specified, its value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a> greater than zero. <span class="impl">If applying the
  <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to the
  attribute's value results in a number greater than zero, then the
  element's <dfn id="attr-textarea-cols-value" title="attr-textarea-cols-value">character
  width</dfn> is that value; otherwise, it is 20.</span></p><div class="impl">

  <p>The user agent may use the <code><a href="#the-textarea-element">textarea</a></code> element's <a href="#attr-textarea-cols-value" title="attr-textarea-cols-value">character width</a> as a hint to
  the user as to how many characters the server prefers per line
  (e.g. for visual user agents by making the width of the control be
  that many characters). In visual renderings, the user agent should
  wrap the user's input in the rendering so that each line is no wider
  than this number of characters.</p>

  </div><p>The <dfn id="attr-textarea-rows" title="attr-textarea-rows"><code>rows</code></dfn>
  attribute specifies the number of lines to show. If the <code title="attr-textarea-rows"><a href="#attr-textarea-rows">rows</a></code> attribute is specified, its
  value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a> greater than
  zero. <span class="impl">If applying the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing
  non-negative integers</a> to the attribute's value results in a
  number greater than zero, then the element's <dfn id="attr-textarea-rows-value" title="attr-textarea-rows-value">character height</dfn> is that
  value; otherwise, it is 2.</span></p><div class="impl">

  <p>Visual user agents should set the height of the control to the
  number of lines given by <a href="#attr-textarea-rows-value" title="attr-textarea-rows-value">character height</a>.</p>

  </div><p>The <dfn id="attr-textarea-wrap" title="attr-textarea-wrap"><code>wrap</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> with two keywords
  and states: the <dfn id="attr-textarea-wrap-soft" title="attr-textarea-wrap-soft"><code>soft</code></dfn> keyword
  which maps to the <a href="#attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</a> state, and the
  <dfn id="attr-textarea-wrap-hard" title="attr-textarea-wrap-hard"><code>hard</code></dfn> keyword
  which maps to the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state. The
  <i>missing value default</i> is the <a href="#attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</a> state.</p><p>The <dfn id="attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</dfn> state
  indicates that the text in the <code><a href="#the-textarea-element">textarea</a></code> is not to be
  wrapped when it is submitted (though it can still be wrapped in the
  rendering).</p><p>The <dfn id="attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</dfn> state
  indicates that the text in the <code><a href="#the-textarea-element">textarea</a></code> is to have
  newlines added by the user agent so that the text is wrapped when it
  is submitted.</p><p>If the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code>
  attribute is in the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state, the <code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code> attribute must be
  specified.</p><div class="impl">

  <p>The element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is
  defined to be the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a> with the
  following transformation applied:</p>

  <ol><li><p>Replace every occurrence of a U+000D CARRIAGE RETURN (CR)
   character not followed by a U+000A LINE FEED (LF) character, and
   every occurrence of a U+000A LINE FEED (LF) character not preceded
   by a U+000D CARRIAGE RETURN (CR) character, by a two-character
   string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED
   (CRLF) character pair.</p></li>

   <li><p>If the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code> attribute is in the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state, insert
   U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs
   into the string using a UA-defined algorithm so that each line has
   no more than <a href="#attr-textarea-cols-value" title="attr-textarea-cols-value">character
   width</a> characters. For the purposes of this requirement,
   lines are delimited by the start of the string, the end of the
   string, and U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF)
   character pairs.</p></li>

  </ol></div><p>The <dfn id="attr-textarea-maxlength" title="attr-textarea-maxlength"><code>maxlength</code></dfn>
  attribute is a <a href="association-of-controls-and-forms.html#attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</a> controlled by the
  <code><a href="#the-textarea-element">textarea</a></code> element's <a href="#concept-textarea-dirty" title="concept-textarea-dirty">dirty value flag</a>.</p><p>If the <code><a href="#the-textarea-element">textarea</a></code> element has a <a href="association-of-controls-and-forms.html#maximum-allowed-value-length">maximum allowed
  value length</a>, then the element's children must be such that
  the <a href="common-microsyntaxes.html#code-point-length">code-point length</a> of the value of the element's
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute is equal to or less than the
  element's <a href="association-of-controls-and-forms.html#maximum-allowed-value-length">maximum allowed value length</a>.</p><p>The <dfn id="attr-textarea-required" title="attr-textarea-required"><code>required</code></dfn> attribute
  is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, the user will
  be required to enter a value before submitting the form.</p><div class="impl">

  <p><strong>Constraint validation</strong>: If the element has its
  <code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code> attribute
  specified, and the element is <a href="#concept-textarea-mutable" title="concept-textarea-mutable">mutable</a>, and the element's
  <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is the empty string,
  then the element is <a href="association-of-controls-and-forms.html#suffering-from-being-missing">suffering from being missing</a>.</p>

  </div><p>The <dfn id="attr-textarea-placeholder" title="attr-textarea-placeholder"><code>placeholder</code></dfn>
  attribute represents a hint (a word or short phrase) intended to aid
  the user with data entry. A hint could be a sample value or a brief
  description of the expected format. The attribute, if specified,
  must have a value that contains no U+000A LINE FEED (LF) or U+000D
  CARRIAGE RETURN (CR) characters.</p><p class="note">For a longer hint or other advisory text, the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute is more appropriate.</p><p>The <code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code>
  attribute should not be used as an alternative to a
  <code><a href="forms.html#the-label-element">label</a></code>.</p><div class="impl">

  <p>User agents should present this hint to the user, after having
  <a href="common-microsyntaxes.html#strip-line-breaks" title="strip line breaks">stripped line breaks</a> from it,
  when the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is
  the empty string and the control is not focused (e.g. by displaying
  it inside a blank unfocused control).</p>

  </div><p>The <dfn id="attr-textarea-dirname" title="attr-textarea-dirname"><code>dirname</code></dfn>
  attribute is a <a href="association-of-controls-and-forms.html#form-control-dirname-attribute">form control <code title="">dirname</code>
  attribute</a>.</p><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
  explicitly associate the <code><a href="#the-textarea-element">textarea</a></code> element with its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
  attribute represents the element's name. The <code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code>
  attribute controls focus.</p><dl class="domintro"><dt><var title="">textarea</var> . <code title="attr-textarea-type">type</code></dt>

   <dd>

    <p>Returns the string "<code title="">textarea</code>".</p>

   </dd>

   <dt><var title="">textarea</var> . <code title="attr-textarea-value">value</code></dt>

   <dd>

    <p>Returns the current value of the element.</p>

    <p>Can be set, to change the value.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-textarea-cols" title="dom-textarea-cols"><code>cols</code></dfn>, <dfn id="dom-textarea-placeholder" title="dom-textarea-placeholder"><code>placeholder</code></dfn>,
  <dfn id="dom-textarea-required" title="dom-textarea-required"><code>required</code></dfn>, <dfn id="dom-textarea-rows" title="dom-textarea-rows"><code>rows</code></dfn>, and <dfn id="dom-textarea-wrap" title="dom-textarea-wrap"><code>wrap</code></dfn> attributes must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name. The <code title="dom-textarea-cols"><a href="#dom-textarea-cols">cols</a></code> and <code title="dom-textarea-rows"><a href="#dom-textarea-rows">rows</a></code> attributes are <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited
  to only non-negative numbers greater than zero</a>. The <code title="dom-textarea-cols"><a href="#dom-textarea-cols">cols</a></code> attribute's default value is
  20. The <code title="dom-textarea-rows"><a href="#dom-textarea-rows">rows</a></code> attribute's
  default value is 2. The <dfn id="dom-textarea-dirname" title="dom-textarea-dirName"><code>dirName</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code> content attribute. The
  <dfn id="dom-textarea-maxlength" title="dom-textarea-maxLength"><code>maxLength</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code> content attribute,
  <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers">limited to only non-negative numbers</a>. The <dfn id="dom-textarea-readonly" title="dom-textarea-readOnly"><code>readOnly</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> content
  attribute.</p>

  <p>The <dfn id="dom-textarea-type" title="dom-textarea-type"><code>type</code></dfn> IDL
  attribute must return the value "<code title="">textarea</code>".</p>

  <p>The <dfn id="dom-textarea-defaultvalue" title="dom-textarea-defaultValue"><code>defaultValue</code></dfn>
  IDL attribute must act like the element's <code><a href="infrastructure.html#textcontent">textContent</a></code>
  IDL attribute.</p>

  <p>The <dfn id="dom-textarea-value" title="dom-textarea-value"><code>value</code></dfn>
  attribute must, on getting, return the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw value</a>; on setting, it
  must set the element's <a href="#concept-textarea-raw-value" title="concept-textarea-raw-value">raw
  value</a> to the new value.</p>

  <p>The <dfn id="dom-textarea-textlength" title="dom-textarea-textLength"><code>textLength</code></dfn> IDL
  attribute must return the <a href="common-microsyntaxes.html#code-point-length">code-point length</a> of the
  element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

  <p>The <code title="dom-cva-willValidate"><a href="association-of-controls-and-forms.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="association-of-controls-and-forms.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a></code>
  attributes, and the <code title="dom-cva-checkValidatity"><a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
  methods, are part of the <a href="association-of-controls-and-forms.html#the-constraint-validation-api">constraint validation API</a>. The
  <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides a list
  of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>, <code title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
  <code title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
  <code title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
  and <code title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>
  methods and attributes expose the element's text selection. The
  <code title="dom-fe-autofocus"><a href="association-of-controls-and-forms.html#dom-fe-autofocus">autofocus</a></code>, <code title="dom-fe-disabled"><a href="association-of-controls-and-forms.html#dom-fe-disabled">disabled</a></code>, <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code>, and <code title="dom-fe-name"><a href="association-of-controls-and-forms.html#dom-fe-name">name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div><div class="example">

   <p>Here is an example of a <code><a href="#the-textarea-element">textarea</a></code> being used for
   unrestricted free-form text input in a form:</p>

   <pre>&lt;p&gt;If you have any comments, please let us know: &lt;textarea cols=80 name=comments&gt;&lt;/textarea&gt;&lt;/p&gt;</pre>

   <p>To specify a maximum length for the comments, one can use
   the <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code>
   attribute:</p>

   <pre>&lt;p&gt;If you have any short comments, please let us know: &lt;textarea cols=80 name=comments maxlength=200&gt;&lt;/textarea&gt;&lt;/p&gt;</pre>

   <p>To give a default value, text can be included inside the element:</p>

   <pre>&lt;p&gt;If you have any comments, please let us know: &lt;textarea cols=80 name=comments&gt;You rock!&lt;/textarea&gt;&lt;/p&gt;</pre>

   <p>To have the browser submit <a href="elements.html#the-directionality">the directionality</a> of
   the element along with the value, the <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code> attribute can be
   specified:</p>

   <pre>&lt;p&gt;If you have any comments, please let us know (you may use either English or Hebrew for your comments):
&lt;textarea cols=80 name=comments dirname=comments.dir&gt;&lt;/textarea&gt;&lt;/p&gt;</pre>

  </div><h4 id="the-keygen-element"><span class="secno">4.10.14 </span>The <dfn><code>keygen</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code></dd>
   <dd><code title="attr-keygen-challenge"><a href="#attr-keygen-challenge">challenge</a></code></dd>
   <dd><code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code></dd>
   <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
   <dd><code title="attr-keygen-keytype"><a href="#attr-keygen-keytype">keytype</a></code></dd>
   <dd><code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlkeygenelement">HTMLKeygenElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="association-of-controls-and-forms.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute DOMString <a href="#dom-keygen-challenge" title="dom-keygen-challenge">challenge</a>;
           attribute boolean <a href="association-of-controls-and-forms.html#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
  readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
           attribute DOMString <a href="#dom-keygen-keytype" title="dom-keygen-keytype">keytype</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fe-name" title="dom-fe-name">name</a>;

  readonly attribute DOMString <a href="#dom-keygen-type" title="dom-keygen-type">type</a>;

  readonly attribute boolean <a href="association-of-controls-and-forms.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
  readonly attribute <a href="association-of-controls-and-forms.html#validitystate">ValidityState</a> <a href="association-of-controls-and-forms.html#dom-cva-validity" title="dom-cva-validity">validity</a>;
  readonly attribute DOMString <a href="association-of-controls-and-forms.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
  boolean <a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
  void <a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="forms.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-keygen-element">keygen</a></code> element <a href="rendering.html#represents">represents</a> a key
  pair generator control. When the control's form is submitted, the
  private key is stored in the local keystore, and the public key is
  packaged and sent to the server.</p><p>The <dfn id="attr-keygen-challenge" title="attr-keygen-challenge"><code>challenge</code></dfn> attribute
  may be specified. Its value will be packaged with the submitted
  key.</p><p>The <dfn id="attr-keygen-keytype" title="attr-keygen-keytype"><code>keytype</code></dfn>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following
  table lists the keywords and states for the attribute &#8212; the
  keywords in the left column map to the states listed in the cell in
  the second column on the same row as the keyword. User agents are
  not required to support these values, and must only recognize values
  whose corresponding algorithms they support.</p><table><thead><tr><th> Keyword </th><th> State
   </th></tr></thead><tbody><tr><td> <code title="">rsa</code>
     </td><td> <i title="">RSA</i>
  </td></tr></tbody></table><p>The <i>invalid value default</i> state is the <i title="">unknown</i> state. The <i>missing value default</i> state
  is the <i title="">RSA</i> state, if it is supported, or the <i title="">unknown</i> state otherwise.</p><p class="note">This specification does not specify what key types
  user agents are to support &#8212; it is possible for a user agent
  to not support any key types at all.</p><div class="impl">

  <p>The user agent may expose a user interface for each
  <code><a href="#the-keygen-element">keygen</a></code> element to allow the user to configure settings
  of the element's key pair generator, e.g. the key length.</p>

  <p>The <a href="association-of-controls-and-forms.html#concept-form-reset-control" title="concept-form-reset-control">reset
  algorithm</a> for <code><a href="#the-keygen-element">keygen</a></code> elements is to set these
  various configuration settings back to their defaults.</p>

  <p>The element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is the
  string returned from the following algorithm:</p>

  <ol><li>

    <p>Use the appropriate step from the following list:</p>

    <dl class="switch"><dt>If the <code title="attr-keygen-keytype"><a href="#attr-keygen-keytype">keytype</a></code>
     attribute is in the <i title="">RSA</i> state</dt>

     <dd>

      <p>Generate an RSA key pair using the settings given by the
      user, if appropriate, using the <code title="">md5WithRSAEncryption</code> RSA signature algorithm
      (the signature algorithm with MD5 and the RSA encryption
      algorithm) referenced in section 2.2.1 ("RSA Signature
      Algorithm") of RFC 3279, and defined in RFC 2313. <a href="references.html#refsRFC3279">[RFC3279]</a> <a href="references.html#refsRFC2313">[RFC2313]</a></p>

     </dd>

     <dt>Otherwise, the <code title="attr-keygen-keytype"><a href="#attr-keygen-keytype">keytype</a></code> attribute is in the <i title="">unknown</i> state</dt>

     <dd>

      <p>The given key type is not supported. Return the empty string
      and abort this algorithm.</p>

     </dd>

    </dl><p>Let <var title="">private key</var> be the generated private key.</p>

    <p>Let <var title="">public key</var> be the generated public key.</p>

    <p>Let <var title="">signature algorithm</var> be the selected
    signature algorithm.</p>

   </li>

   <li>

    <p>If the element has a <code title="attr-keygen-challenge"><a href="#attr-keygen-challenge">challenge</a></code> attribute, then let
    <var title="">challenge</var> be that attribute's value.
    Otherwise, let <var title="">challenge</var> be the empty
    string.</p>

   </li>

   <li>

    <p>Let <var title="">algorithm</var> be an ASN.1 <code title="">AlgorithmIdentifier</code> structure as defined by
    RFC 5280, with the <code title="">algorithm</code> field giving the
    ASN.1 OID used to identify <var title="">signature
    algorithm</var>, using the OIDs defined in section 2.2 ("Signature
    Algorithms") of RFC 3279, and the <code title="">parameters</code>
    field set up as required by RFC 3279 for <code title="">AlgorithmIdentifier</code> structures for that
    algorithm. <a href="references.html#refsX690">[X690]</a> <a href="references.html#refsRFC5280">[RFC5280]</a> <a href="references.html#refsRFC3279">[RFC3279]</a></p>

   </li>

   <li>

    <p>Let <var title="">spki</var> be an ASN.1 <code title="">SubjectPublicKeyInfo</code> structure as defined by
    RFC 5280, with the <code title="">algorithm</code> field set to the
    <var title="">algorithm</var> structure from the previous step,
    and the <code title="">subjectPublicKey</code> field set to the
    BIT STRING value resulting from ASN.1 DER encoding the <var title="">public key</var>. <a href="references.html#refsX690">[X690]</a> <a href="references.html#refsRFC5280">[RFC5280]</a></p>

   </li>

   <li>

    <p>Let <var title="">publicKeyAndChallenge</var> be an ASN.1
    <code><a href="#publickeyandchallenge">PublicKeyAndChallenge</a></code> structure as defined below,
    with the <code title="">spki</code> field set to the <var title="">spki</var> structure from the previous step, and the
    <code title="">challenge</code> field set to the string <var title="">challenge</var> obtained earlier. <a href="references.html#refsX690">[X690]</a></p>

   </li>

   <li>

    <p>Let <var title="">signature</var> be the BIT STRING value
    resulting from ASN.1 DER encoding the signature generated by
    applying the <var title="">signature algorithm</var> to the byte
    string obtained by ASN.1 DER encoding the <var title="">publicKeyAndChallenge</var> structure, using <var title="">private key</var> as the signing key. <a href="references.html#refsX690">[X690]</a></p>

   </li>

   <li>

    <p>Let <var title="">signedPublicKeyAndChallenge</var> be an ASN.1
    <code><a href="#signedpublickeyandchallenge">SignedPublicKeyAndChallenge</a></code> structure as defined
    below, with the <code title="">publicKeyAndChallenge</code> field
    set to the <var title="">publicKeyAndChallenge</var> structure,
    the <code title="">signatureAlgorithm</code> field set to the <var title="">algorithm</var> structure, and the <code title="">signature</code> field set to the BIT STRING <var title="">signature</var> from the previous step. <a href="references.html#refsX690">[X690]</a></p>

   </li>

   <li>

    <p>Return the result of base64 encoding the result of ASN.1 DER
    encoding the <var title="">signedPublicKeyAndChallenge</var>
    structure. <a href="references.html#refsRFC4648">[RFC4648]</a> <a href="references.html#refsX690">[X690]</a></p>

   </li>

  </ol><p>The data objects used by the above algorithm are defined as
  follows. These definitions use the same "ASN.1-like" syntax defined
  by RFC 5280. <a href="references.html#refsRFC5280">[RFC5280]</a></p>

  <pre class="asn"><dfn id="publickeyandchallenge">PublicKeyAndChallenge</dfn> ::= SEQUENCE {
    spki <span>SubjectPublicKeyInfo</span>,
    challenge IA5STRING
}

<dfn id="signedpublickeyandchallenge">SignedPublicKeyAndChallenge</dfn> ::= SEQUENCE {
    publicKeyAndChallenge <a href="#publickeyandchallenge">PublicKeyAndChallenge</a>,
    signatureAlgorithm <span>AlgorithmIdentifier</span>,
    signature BIT STRING
}</pre>

  <hr><p><strong>Constraint validation</strong>: The <code><a href="#the-keygen-element">keygen</a></code>
  element is <a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>

  </div><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
  explicitly associate the <code><a href="#the-keygen-element">keygen</a></code> element with its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
  attribute represents the element's name. The <code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code> attribute is used to make
  the control non-interactive and to prevent its value from being
  submitted. The <code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code>
  attribute controls focus.</p><dl class="domintro"><dt><var title="">keygen</var> . <code title="attr-keygen-type">type</code></dt>

   <dd>

    <p>Returns the string "<code title="">keygen</code>".</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-keygen-challenge" title="dom-keygen-challenge"><code>challenge</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name.</p>

  <p>The <dfn id="dom-keygen-keytype" title="dom-keygen-keytype"><code>keytype</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  <p>The <dfn id="dom-keygen-type" title="dom-keygen-type"><code>type</code></dfn> IDL
  attribute must return the value "<code title="">keygen</code>".</p>

  <p>The <code title="dom-cva-willValidate"><a href="association-of-controls-and-forms.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="association-of-controls-and-forms.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a></code>
  attributes, and the <code title="dom-cva-checkValidatity"><a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
  methods, are part of the <a href="association-of-controls-and-forms.html#the-constraint-validation-api">constraint validation API</a>. The
  <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides a list
  of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-fe-autofocus"><a href="association-of-controls-and-forms.html#dom-fe-autofocus">autofocus</a></code>, <code title="dom-fe-disabled"><a href="association-of-controls-and-forms.html#dom-fe-disabled">disabled</a></code>, <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code>, and <code title="dom-fe-name"><a href="association-of-controls-and-forms.html#dom-fe-name">name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div><p class="note">This specification does not specify how the private
  key generated is to be used. It is expected that after receiving the
  <code><a href="#signedpublickeyandchallenge">SignedPublicKeyAndChallenge</a></code> (SPKAC) structure, the
  server will generate a client certificate and offer it back to the
  user for download; this certificate, once downloaded and stored in
  the key store along with the private key, can then be used to
  authenticate to services that use TLS and certificate
  authentication.</p><div class="example">

   <p>To generate a key pair, add the private key to the user's key
   store, and submit the public key to the server, markup such as the
   following can be used:</p>

   <pre>&lt;form action="processkey.cgi" method="post" enctype="multipart/form-data"&gt;
 &lt;p&gt;&lt;keygen name="key"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit value="Submit key..."&gt;&lt;/p&gt;
&lt;/form&gt;</pre>

   <p>The server will then receive a form submission with a packaged
   RSA public key as the value of "<code title="">key</code>". This
   can then be used for various purposes, such as generating a client
   certificate, as mentioned above.</p>

  </div><h4 id="the-output-element"><span class="secno">4.10.15 </span>The <dfn><code>output</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-label" title="category-label">labelable</a>, and <a href="forms.html#category-reset" title="category-reset">resettable</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-output-for"><a href="#attr-output-for">for</a></code></dd>
   <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
   <dd><code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmloutputelement">HTMLOutputElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
  [PutForwards=<a href="common-dom-interfaces.html#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>] readonly attribute <a href="common-dom-interfaces.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-output-htmlfor" title="dom-output-htmlFor">htmlFor</a>;
  readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
           attribute DOMString <a href="association-of-controls-and-forms.html#dom-fe-name" title="dom-fe-name">name</a>;

  readonly attribute DOMString <a href="#dom-output-type" title="dom-output-type">type</a>;
           attribute DOMString <a href="#dom-output-defaultvalue" title="dom-output-defaultValue">defaultValue</a>;
           attribute DOMString <a href="#dom-output-value" title="dom-output-value">value</a>;

  readonly attribute boolean <a href="association-of-controls-and-forms.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
  readonly attribute <a href="association-of-controls-and-forms.html#validitystate">ValidityState</a> <a href="association-of-controls-and-forms.html#dom-cva-validity" title="dom-cva-validity">validity</a>;
  readonly attribute DOMString <a href="association-of-controls-and-forms.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
  boolean <a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
  void <a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error);

  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="forms.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-output-element">output</a></code> element <a href="rendering.html#represents">represents</a> the result of a
  calculation.</p><p>The <dfn id="attr-output-for" title="attr-output-for"><code>for</code></dfn> content
  attribute allows an explicit relationship to be made between the
  result of a calculation and the elements that represent the values
  that went into the calculation or that otherwise influenced the
  calculation. The <code title="attr-output-for"><a href="#attr-output-for">for</a></code> attribute,
  if specified, must contain a string consisting of an <a href="common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered
  set of unique space-separated tokens</a> that are
  <a href="infrastructure.html#case-sensitive">case-sensitive</a>, each of which must have the value of an
  <a href="elements.html#concept-id" title="concept-id">ID</a> of an element in the same
  <code><a href="infrastructure.html#document">Document</a></code>.</p><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
  explicitly associate the <code><a href="#the-output-element">output</a></code> element with its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
  attribute represents the element's name.</p><div class="impl">

  <p>The element has a <dfn id="concept-output-mode" title="concept-output-mode">value mode
  flag</dfn> which is either <i title="concept-output-mode-value">value</i> or <i title="concept-output-mode-default">default</i>. Initially, the
  <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a> must be set
  to <i title="concept-output-mode-default">default</i>.</p>

  <p>The element also has a <dfn id="concept-output-defaultvalue" title="concept-output-defaultValue">default value</dfn>. Initially,
  the <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a>
  must be the empty string.</p>

  <p>When the <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a>
  is in mode <i title="concept-output-mode-default">default</i>, the
  contents of the element represent both the value of the element and
  its <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default
  value</a>. When the <a href="#concept-output-mode" title="concept-output-mode">value mode
  flag</a> is in mode <i title="concept-output-mode-value">value</i>, the contents of the
  element represent the value of the element only, and the <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a> is only
  accessible using the <code title="dom-output-defaultValue"><a href="#dom-output-defaultvalue">defaultValue</a></code> IDL
  attribute.</p>

  <p>Whenever the element's descendants are changed in any way, if the
  <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a> is in mode
  <i title="concept-output-mode-default">default</i>, the element's
  <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a> must
  be set to the value of the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute.</p>

  <p>The <a href="association-of-controls-and-forms.html#concept-form-reset-control" title="concept-form-reset-control">reset
  algorithm</a> for <code><a href="#the-output-element">output</a></code> elements is to set the
  element's <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a>
  to <i title="concept-output-mode-default">default</i> and then to
  set the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute to the
  value of the element's <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a> (thus
  replacing the element's child nodes).</p>

  </div><dl class="domintro"><dt><var title="">output</var> . <code title="dom-output-value"><a href="#dom-output-value">value</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the element's current value.</p>

    <p>Can be set, to change the value.</p>

   </dd>

   <dt><var title="">output</var> . <code title="dom-output-defaultValue"><a href="#dom-output-defaultvalue">defaultValue</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the element's current default value.</p>

    <p>Can be set, to change the default value.</p>

   </dd>

   <dt><var title="">output</var> . <code title="dom-output-type"><a href="#dom-output-type">type</a></code></dt>

   <dd>

    <p>Returns the string "<code title="">output</code>".</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-output-value" title="dom-output-value"><code>value</code></dfn> IDL
  attribute must act like the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute, except that on setting, in addition, before the child
  nodes are changed, the element's <a href="#concept-output-mode" title="concept-output-mode">value mode flag</a> must be set to <i title="concept-output-mode-value">value</i>.</p>

  <p>The <dfn id="dom-output-defaultvalue" title="dom-output-defaultValue"><code>defaultValue</code></dfn> IDL
  attribute, on getting, must return the element's <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a>. On
  setting, the attribute must set the element's <a href="#concept-output-defaultvalue" title="concept-output-defaultValue">default value</a>, and, if
  the element's <a href="#concept-output-mode" title="concept-output-mode">value mode
  flag</a> is in the mode <i title="concept-output-mode-default">default</i>, set the element's
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute as well.</p>

  <p>The <dfn id="dom-output-type" title="dom-output-type"><code>type</code></dfn>
  attribute must return the string "<code title="">output</code>".</p>

  <p>The <dfn id="dom-output-htmlfor" title="dom-output-htmlFor"><code>htmlFor</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-output-for"><a href="#attr-output-for">for</a></code> content attribute.</p>

  <p>The <code title="dom-cva-willValidate"><a href="association-of-controls-and-forms.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="association-of-controls-and-forms.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a></code>
  attributes, and the <code title="dom-cva-checkValidatity"><a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
  methods, are part of the <a href="association-of-controls-and-forms.html#the-constraint-validation-api">constraint validation API</a>. The
  <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides a list
  of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> and <code title="dom-fe-name"><a href="association-of-controls-and-forms.html#dom-fe-name">name</a></code> IDL attributes are part of the
  element's forms API.</p>

  <p><strong>Constraint validation</strong>: <code><a href="#the-output-element">output</a></code>
  elements are always <a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from constraint
  validation</a>.</p>

  </div><div class="example">

   <p>A simple calculator could use <code><a href="#the-output-element">output</a></code> for its
   display of calculated results:</p>

   <pre>&lt;form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber"&gt;
 &lt;input name=a type=number step=any&gt; +
 &lt;input name=b type=number step=any&gt; =
 &lt;output name=o&gt;&lt;/output&gt;
&lt;/form&gt;</pre>

  </div><h4 id="the-progress-element"><span class="secno">4.10.16 </span>The <dfn><code>progress</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dd><a href="forms.html#category-label" title="category-label">Labelable</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>, but there must be no <code><a href="#the-progress-element">progress</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-progress-value"><a href="#attr-progress-value">value</a></code></dd>
   <dd><code title="attr-progress-max"><a href="#attr-progress-max">max</a></code></dd>
   <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlprogresselement">HTMLProgressElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute double <a href="#dom-progress-value" title="dom-progress-value">value</a>;
           attribute double <a href="#dom-progress-max" title="dom-progress-max">max</a>;
  readonly attribute double <a href="#dom-progress-position" title="dom-progress-position">position</a>;
  readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="forms.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-progress-element">progress</a></code> element <a href="rendering.html#represents">represents</a> the
  completion progress of a task. The progress is either indeterminate,
  indicating that progress is being made but that it is not clear how
  much more work remains to be done before the task is complete (e.g.
  because the task is waiting for a remote host to respond), or the
  progress is a number in the range zero to a maximum, giving the
  fraction of work that has so far been completed.</p><p>There are two attributes that determine the current task
  completion represented by the element. The <dfn id="attr-progress-value" title="attr-progress-value"><code>value</code></dfn> attribute
  specifies how much of the task has been completed, and the <dfn id="attr-progress-max" title="attr-progress-max"><code>max</code></dfn> attribute specifies
  how much work the task requires in total. The units are arbitrary
  and not specified.</p><p class="note">To make an determinate progress bar, add a <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute with the current
  progress (either a number from 0.0 to 1.0, or, if the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute is specified, a
  number from 0 to the value of the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute. To make an
  indeterminate progress bar, remove the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute.</p><p>Authors are encouraged to also include the current value and the
  maximum value inline as text inside the element, so that the
  progress is made available to users of legacy user agents.</p><div class="example">
   <p>Here is a snippet of a Web application that shows the progress
   of some automated task:</p>
   <pre>&lt;section&gt;
 &lt;h2&gt;Task Progress&lt;/h2&gt;
 &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
 &lt;script&gt;
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 &lt;/script&gt;
&lt;/section&gt;</pre>
   <p>(The <code>updateProgress()</code> method in this example would
   be called by some other code on the page to update the actual
   progress bar as the task progressed.)</p>
  </div><p>The <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> and <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attributes, when present, must
  have values that are <a href="common-microsyntaxes.html#valid-floating-point-number" title="valid floating point number">valid
  floating point numbers</a>. The <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute, if present, must
  have a value equal to or greater than zero, and less than or equal
  to the value of the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code>
  attribute, if present, or 1.0, otherwise. The <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute, if present, must
  have a value greater than zero.</p><p class="note">The <code><a href="#the-progress-element">progress</a></code> element is the wrong
  element to use for something that is just a gauge, as opposed to
  task progress. For instance, indicating disk space usage using
  <code><a href="#the-progress-element">progress</a></code> would be inappropriate. Instead, the
  <code><a href="#the-meter-element">meter</a></code> element is available for such use cases.</p><div class="impl">

  <p><strong>User agent requirements</strong>: If the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute is omitted, then
  the progress bar is an indeterminate progress bar. Otherwise, it is
  a determinate progress bar.</p>

  <p>If the progress bar is a determinate progress bar and the element
  has a <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute, the user
  agent must parse the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code>
  attribute's value according to the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating
  point number values</a>. If this does not result in an error, and
  if the parsed value is greater than zero, then the <dfn id="concept-progress-maximum" title="concept-progress-maximum">maximum value</dfn> of the progress
  bar is that value. Otherwise, if the element has no <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute, or if it has one but
  parsing it resulted in an error, or if the parsed value was less
  than or equal to zero, then the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a> of the
  progress bar is 1.0.</p>

  <p>If the progress bar is a determinate progress bar, user agents
  must parse the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code>
  attribute's value according to the <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating
  point number values</a>. If this does not result in an error, and
  if the parsed value is less than the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a> and greater
  than zero, then the <dfn id="concept-progress-value" title="concept-progress-value">current
  value</dfn> of the progress bar is that parsed value. Otherwise, if
  the parsed value was greater than or equal to the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a>, then the
  <a href="#concept-progress-value" title="concept-progress-value">current value</a> of the
  progress bar is the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum
  value</a> of the progress bar. Otherwise, if parsing the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute's value resulted
  in an error, or a number less than or equal to zero, then the <a href="#concept-progress-value" title="concept-progress-value">current value</a> of the
  progress bar is zero.</p>

  <p><strong>UA requirements for showing the progress bar</strong>:
  When representing a <code><a href="#the-progress-element">progress</a></code> element to the user, the
  UA should indicate whether it is a determinate or indeterminate
  progress bar, and in the former case, should indicate the relative
  position of the <a href="#concept-progress-value" title="concept-progress-value">current
  value</a> relative to the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a>.</p>

  <p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
  explicitly associate the <code><a href="#the-progress-element">progress</a></code> element with its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</p>

  </div><dl class="domintro"><dt><var title="">progress</var> . <code title="dom-progress-position"><a href="#dom-progress-position">position</a></code></dt>

   <dd>

    <p>For a determinate progress bar (one with known current and
    maximum values), returns the result of dividing the current value
    by the maximum value.</p>

    <p>For an indeterminate progress bar, returns &#8722;1.</p>

   </dd>

  </dl><div class="impl">

  <p>If the progress bar is an indeterminate progress bar, then the
  <dfn id="dom-progress-position" title="dom-progress-position"><code>position</code></dfn> IDL
  attribute must return &#8722;1. Otherwise, it must return the
  result of dividing the <a href="#concept-progress-value" title="concept-progress-value">current value</a> by the <a href="#concept-progress-maximum" title="concept-progress-maximum">maximum value</a>.</p>

  <p>If the progress bar is an indeterminate progress bar, then the
  <dfn id="dom-progress-value" title="dom-progress-value"><code>value</code></dfn> IDL
  attribute, on getting, must return 0. Otherwise, it must return the
  <a href="#concept-progress-value" title="concept-progress-value">current value</a>. On
  setting, the given value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best
  representation of the number as a floating point number</a> and
  then the <code title="dom-progress-value"><a href="#dom-progress-value">value</a></code> content
  attribute must be set to that string.</p>

  <p class="note">Setting the <code title="dom-progress-value"><a href="#dom-progress-value">value</a></code> IDL attribute to itself when
  the corresponding content attribute is absent would change the
  progress bar from an indeterminate progress bar to a determinate
  progress bar with no progress.</p>

  <p>The <dfn id="dom-progress-max" title="dom-progress-max"><code>max</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name. The default value for <code title="dom-progress-max"><a href="#dom-progress-max">max</a></code> is 1.0.</p>

  <p>The <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides
  a list of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute is part of the
  element's forms API.</p>

  </div><h4 id="the-meter-element"><span class="secno">4.10.17 </span>The <dfn><code>meter</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dd><a href="forms.html#category-label" title="category-label">Labelable</a> <a href="forms.html#form-associated-element">form-associated element</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>, but there must be no <code><a href="#the-meter-element">meter</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-meter-value"><a href="#attr-meter-value">value</a></code></dd>
   <dd><code title="attr-meter-min"><a href="#attr-meter-min">min</a></code></dd>
   <dd><code title="attr-meter-max"><a href="#attr-meter-max">max</a></code></dd>
   <dd><code title="attr-meter-low"><a href="#attr-meter-low">low</a></code></dd>
   <dd><code title="attr-meter-high"><a href="#attr-meter-high">high</a></code></dd>
   <dd><code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code></dd>
   <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlmeterelement">HTMLMeterElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute double <a href="#dom-meter-value" title="dom-meter-value">value</a>;
           attribute double <a href="#dom-meter-min" title="dom-meter-min">min</a>;
           attribute double <a href="#dom-meter-max" title="dom-meter-max">max</a>;
           attribute double <a href="#dom-meter-low" title="dom-meter-low">low</a>;
           attribute double <a href="#dom-meter-high" title="dom-meter-high">high</a>;
           attribute double <a href="#dom-meter-optimum" title="dom-meter-optimum">optimum</a>;
  readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
  readonly attribute <a href="infrastructure.html#nodelist">NodeList</a> <a href="forms.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-meter-element">meter</a></code> element <a href="rendering.html#represents">represents</a> a scalar
  measurement within a known range, or a fractional value; for example
  disk usage, the relevance of a query result, or the fraction of a
  voting population to have selected a particular candidate.</p><p>This is also known as a gauge.</p><p class="note">The <code><a href="#the-meter-element">meter</a></code> element should not be used to
  indicate progress (as in a progress bar). For that role, HTML
  provides a separate <code><a href="#the-progress-element">progress</a></code> element.</p><p class="note">The <code><a href="#the-meter-element">meter</a></code> element also does not
  represent a scalar value of arbitrary range &#8212; for example, it
  would be wrong to use this to report a weight, or height, unless
  there is a known maximum value.</p><p>There are six attributes that determine the semantics of the
  gauge represented by the element.</p><p>The <dfn id="attr-meter-min" title="attr-meter-min"><code>min</code></dfn> attribute
  specifies the lower bound of the range, and the <dfn id="attr-meter-max" title="attr-meter-max"><code>max</code></dfn> attribute specifies
  the upper bound. The <dfn id="attr-meter-value" title="attr-meter-value"><code>value</code></dfn> attribute
  specifies the value to have the gauge indicate as the "measured"
  value.</p><p>The other three attributes can be used to segment the gauge's
  range into "low", "medium", and "high" parts, and to indicate which
  part of the gauge is the "optimum" part. The <dfn id="attr-meter-low" title="attr-meter-low"><code>low</code></dfn> attribute specifies
  the range that is considered to be the "low" part, and the <dfn id="attr-meter-high" title="attr-meter-high"><code>high</code></dfn> attribute specifies
  the range that is considered to be the "high" part. The <dfn id="attr-meter-optimum" title="attr-meter-optimum"><code>optimum</code></dfn> attribute
  gives the position that is "optimum"; if that is higher than the
  "high" value  then this indicates that the higher the value, the
  better; if it's lower than the "low" mark then it indicates that
  lower values are better, and naturally if it is in between then it
  indicates that neither high nor low values are good.</p><p><span class="impl"><strong>Authoring
  requirements</strong>:</span> The <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code> attribute must be
  specified. The <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code>, <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code>, <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code>, <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code>, <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code>, and <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> attributes, when present,
  must have values that are <a href="common-microsyntaxes.html#valid-floating-point-number" title="valid floating point
  number">valid floating point numbers</a>.</p><p>In addition, the attributes' values are further constrained:</p><p>Let <var title="">value</var> be the <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code> attribute's number.</p><p>If the <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code> attribute
  attribute is specified, then let <var title="">minimum</var> be that
  attribute's value; otherwise, let it be zero.</p><p>If the <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code> attribute
  attribute is specified, then let <var title="">maximum</var> be that
  attribute's value; otherwise, let it be 1.0.</p><p>The following inequalities must hold, as applicable:</p><ul class="brief"><li><var title="">minimum</var> &#8804; <var title="">value</var> &#8804; <var title="">maximum</var></li>
   <li><var title="">minimum</var> &#8804; <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> &#8804; <var title="">maximum</var> (if <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> is specified)</li>
   <li><var title="">minimum</var> &#8804; <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> &#8804; <var title="">maximum</var> (if <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> is specified)</li>
   <li><var title="">minimum</var> &#8804; <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> &#8804; <var title="">maximum</var> (if <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> is specified)</li>
   <li><code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> &#8804; <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> (if both <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> and <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> are specified)</li>
  </ul><p class="note">If no minimum or maximum is specified, then the
  range is assumed to be 0..1, and the value thus has to be within
  that range.</p><p>Authors are encouraged to include a textual representation of the
  gauge's state in the element's contents, for users of user agents
  that do not support the <code><a href="#the-meter-element">meter</a></code> element.</p><div class="example">

   <p>The following examples show three gauges that would all be
   three-quarters full:</p>

   <pre>Storage space usage: &lt;meter value=6 max=8&gt;6 blocks used (out of 8 total)&lt;/meter&gt;
Voter turnout: &lt;meter value=0.75&gt;&lt;img alt="75%" src="graph75.png"&gt;&lt;/meter&gt;
Tickets sold: &lt;meter min="0" max="100" value="75"&gt;&lt;/meter&gt;</pre>

   <p>The following example is incorrect use of the element, because
   it doesn't give a range (and since the default maximum is 1, both
   of the gauges would end up looking maxed out):</p>

   <pre class="bad">&lt;p&gt;The grapefruit pie had a radius of &lt;meter value=12&gt;12cm&lt;/meter&gt;
and a height of &lt;meter value=2&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</strong> --&gt;</pre>

   <p>Instead, one would either not include the meter element, or use
   the meter element with a defined range to give the dimensions in
   context compared to other pies:</p>

   <pre>&lt;p&gt;The grapefruit pie had a radius of 12cm and a height of
2cm.&lt;/p&gt;
&lt;dl&gt;
 &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12&gt;12cm&lt;/meter&gt;
 &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2&gt;2cm&lt;/meter&gt;
&lt;/dl&gt;</pre>

  </div><p>There is no explicit way to specify units in the
  <code><a href="#the-meter-element">meter</a></code> element, but the units may be specified in the
  <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute in free-form text.</p><div class="example">

   <p>The example above could be extended to mention the units:</p>

   <pre>&lt;dl&gt;
 &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12 title="centimeters"&gt;12cm&lt;/meter&gt;
 &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2 title="centimeters"&gt;2cm&lt;/meter&gt;
&lt;/dl&gt;</pre>

  </div><div class="impl">

  <p><strong>User agent requirements</strong>: User agents must parse
  the <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code>, <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code>, <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code>, <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code>, <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code>, and <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> attributes using the
  <a href="common-microsyntaxes.html#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a>.</p>

  <p>User agents must then use all these numbers to obtain values for
  six points on the gauge, as follows. (The order in which these are
  evaluated is important, as some of the values refer to earlier
  ones.)</p>

  <dl><dt>The <dfn id="concept-meter-minimum" title="concept-meter-minimum">minimum value</dfn></dt>

   <dd>
    <p>If the <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code> attribute is
    specified and a value could be parsed out of it, then the minimum
    value is that value. Otherwise, the minimum value is zero.</p>
   </dd>

   <dt>The <dfn id="concept-meter-maximum" title="concept-meter-maximum">maximum value</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code> attribute is
    specified and a value could be parsed out of it, the maximum value
    is that value. Otherwise, the maximum value is 1.0.</p>

    <p>If the maximum value would be less than the minimum value, then
    the maximum value is actually the same as the minimum value.</p>

   </dd>

   <dt>The <dfn id="concept-meter-actual" title="concept-meter-actual">actual value</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code> attribute is
    specified and a value could be parsed out of it, then that value
    is the actual value. Otherwise, the actual value is zero.</p>

    <p>If the actual value would be less than the minimum value, then
    the actual value is actually the same as the minimum value.</p>

    <p>If, on the other hand, the actual value would be greater than
    the maximum value, then the actual value is the maximum value.</p>

   </dd>

   <dt>The <dfn id="concept-meter-low" title="concept-meter-low">low boundary</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> attribute is
    specified and a value could be parsed out of it, then the low
    boundary is that value. Otherwise, the low boundary is the same as
    the minimum value.</p>

    <p>If the low boundary is then less than the minimum value, then
    the low boundary is actually the same as the minimum
    value. Similarly, if the low boundary is greater than the maximum
    value, then it is actually the maximum value instead.</p>

   </dd>

   <dt>The <dfn id="concept-meter-high" title="concept-meter-high">high boundary</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> attribute is
    specified and a value could be parsed out of it, then the high
    boundary is that value. Otherwise, the high boundary is the same
    as the maximum value.</p>

    <p>If the high boundary is then less than the low boundary, then
    the high boundary is actually the same as the low
    boundary. Similarly, if the high boundary is greater than the
    maximum value, then it is actually the maximum value instead.</p>

   </dd>

   <dt>The <dfn id="concept-meter-optimum" title="concept-meter-optimum">optimum point</dfn></dt>

   <dd>

    <p>If the <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code>
    attribute is specified and a value could be parsed out of it, then
    the optimum point is that value. Otherwise, the optimum point is
    the midpoint between the minimum value and the maximum value.</p>

    <p>If the optimum point is then less than the minimum value, then
    the optimum point is actually the same as the minimum
    value. Similarly, if the optimum point is greater than the maximum
    value, then it is actually the maximum value instead.</p>

   </dd>

  </dl><p>All of which will result in the following inequalities all being
  true:</p>

  <ul class="brief"><li>minimum value &#8804; actual value &#8804; maximum value</li>
   <li>minimum value &#8804; low boundary &#8804; high boundary &#8804; maximum value</li>
   <li>minimum value &#8804; optimum point &#8804; maximum value</li>
  </ul><p><strong>UA requirements for regions of the gauge</strong>: If the
  optimum point is equal to the low boundary or the high boundary, or
  anywhere in between them, then the region between the low and high
  boundaries of the gauge must be treated as the optimum region, and
  the low and high parts, if any, must be treated as
  suboptimal. Otherwise, if the optimum point is less than the low
  boundary, then the region between the minimum value and the low
  boundary must be treated as the optimum region, the region between
  the low boundary and the high boundary must be treated as a
  suboptimal region, and the region between the high boundary and the
  maximum value must be treated as an even less good region. Finally,
  if the optimum point is higher than the high boundary, then the
  situation is reversed; the region between the high boundary and the
  maximum value must be treated as the optimum region, the region
  between the high boundary and the low boundary must be treated as a
  suboptimal region, and the remaining region between the low boundary
  and the minimum value must be treated as an even less good
  region.</p>

  <p><strong>UA requirements for showing the gauge</strong>: When
  representing a <code><a href="#the-meter-element">meter</a></code> element to the user, the UA should
  indicate the relative position of the actual value to the minimum
  and maximum values, and the relationship between the actual value
  and the three regions of the gauge.</p>

  </div><div class="example">
   <p>The following markup:</p>
   <pre>&lt;h3&gt;Suggested groups&lt;/h3&gt;
&lt;menu type="toolbar"&gt;
 &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()"&gt;Hide suggested groups&lt;/a&gt;
&lt;/menu&gt;
&lt;ul&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view"&gt;comp.infosystems.www.authoring.stylesheets&lt;/a&gt; -
     &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Group description: &lt;strong&gt;Layout/presentation on the WWW.&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.5"&gt;Moderate activity,&lt;/meter&gt;</strong> Usenet, 618 subscribers&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/netscape.public.mozilla.xpinstall/view"&gt;netscape.public.mozilla.xpinstall&lt;/a&gt; -
     &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Group description: &lt;strong&gt;Mozilla XPInstall discussion.&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 22 subscribers&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/mozilla.dev.general/view"&gt;mozilla.dev.general&lt;/a&gt; -
     &lt;a href="/group/mozilla.dev.general/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 66 subscribers&lt;/p&gt;
 &lt;/li&gt;
&lt;/ul&gt;</pre>
   <p>Might be rendered as follows:</p>
   <p><img alt="With the &lt;meter&gt; elements rendered as inline green bars of varying lengths." height="178" src="sample-meter.png" width="332"></p>
  </div><p>User agents <span class="impl">may</span> combine the value of
  the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute and the other
  attributes to provide context-sensitive help or inline text
  detailing the actual values.</p><div class="example">
   <p>For example, the following snippet:</p>
   <pre>&lt;meter min=0 max=60 value=23.2 title=seconds&gt;&lt;/meter&gt;</pre>
   <p>...might cause the user agent to display a gauge with a tooltip
   saying "Value: 23.2 out of 60." on one line and "seconds" on a
   second line.</p>
  </div><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
  explicitly associate the <code><a href="#the-meter-element">meter</a></code> element with its
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</p><div class="impl">

  <p>The <dfn id="dom-meter-value" title="dom-meter-value"><code>value</code></dfn> IDL
  attribute, on getting, must return the <a href="#concept-meter-actual" title="concept-meter-actual">actual value</a>. On setting, the
  given value must be converted to the <a href="common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number">best representation of
  the number as a floating point number</a> and then the <code title="dom-meter-value"><a href="#dom-meter-value">value</a></code> content attribute must be set
  to that string.</p>

  <p>The <dfn id="dom-meter-min" title="dom-meter-min"><code>min</code></dfn>, <dfn id="dom-meter-max" title="dom-meter-max"><code>max</code></dfn>, <dfn id="dom-meter-low" title="dom-meter-low"><code>low</code></dfn>, <dfn id="dom-meter-high" title="dom-meter-high"><code>high</code></dfn>, and <dfn id="dom-meter-optimum" title="dom-meter-optimum"><code>optimum</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name.</p>

  <p>The <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides
  a list of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute is part of the
  element's forms API.</p>

  </div><div class="example">

   <p>The following example shows how a gauge could fall back to
   localized or pretty-printed text.</p>

   <pre>&lt;p&gt;Disk usage: &lt;meter min=0 value=170261928 max=233257824&gt;170&#8201;261&#8201;928 bytes used
out of 233&#8201;257&#8201;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>

  </div></body></html>