states-of-the-type-attribute.html 166 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.7.1 States of the type attribute &#8212; HTML5 </title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   dt dfn { font-style: italic; }
   pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
   pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
   pre em { font-weight: bolder; font-style: normal; }
   @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
   var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
   table { border-collapse: collapse; border-style: hidden hidden none hidden; }
   table thead, table tbody { border-bottom: solid; }
   table tbody th:first-child { border-left: solid; }
   table tbody th { text-align: left; }
   table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
   blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }

   .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
   .matrix, .matrix td { border: none; text-align: right; }
   .matrix { margin-left: 2em; }
   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
   img.extra { float: right; }
   pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
   pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
   pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
   pre.css:first-line { color: #AAAA50; }
   dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
   hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
   dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
   dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
   dl.domintro dd p { margin: 0.5em 0; }
   dl.switch { padding-left: 2em; }
   dl.switch > dt { text-indent: -1.5em; }
   dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
   dl.triple { padding: 0 0 0 1em; }
   dl.triple dt, dl.triple dd { margin: 0; display: inline }
   dl.triple dt:after { content: ':'; }
   dl.triple dd:after { content: '\A'; white-space: pre; }
   .diff-old { text-decoration: line-through; color: silver; background: transparent; }
   .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
   a .diff-new { border-bottom: 1px blue solid; }

   h2 { page-break-before: always; }
   h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
   h1 + h2, hr + h2.no-toc { page-break-before: auto; }

   p  > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
   li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }

   div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
   div.head p { margin: 0; }
   div.head h1 { margin: 0; }
   div.head .logo { float: right; margin: 0 1em; }
   div.head .logo img { border: none } /* remove border from top image */
   div.head dl { margin: 1em 0; }
   div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }

   body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
   body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
   body > .toc > li > * { margin-bottom: 0.5em; }
   body > .toc > li > * > li > * { margin-bottom: 0.25em; }
   .toc, .toc li { list-style: none; }

   .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
   .brief li { margin: 0; padding: 0; }
   .brief li p { margin: 0; padding: 0; }

   .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
   .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
   .category-list li { display: inline; }
   .category-list li:not(:last-child)::after { content: ', '; }
   .category-list li > span, .category-list li > a { text-transform: lowercase; }
   .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */

   .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
   .XXX > :first-child { margin-top: 0; }
   p .XXX { line-height: 3em; }
   .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
   .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
   .annotation :link, .annotation :visited { color: inherit; }
   .annotation :link:hover, .annotation :visited:hover { background: transparent; }
   .annotation span { border: none ! important; }
   .note { color: green; background: transparent; font-family: sans-serif; }
   .warning { color: red; background: transparent; }
   .note, .warning { font-weight: bolder; font-style: italic; }
   p.note, div.note { padding: 0.5em 2em; }
   span.note { padding: 0 2em; }
   .note p:first-child, .warning p:first-child { margin-top: 0; }
   .note p:last-child, .warning p:last-child { margin-bottom: 0; }
   .warning:before { font-style: normal; }
   p.note:before { content: 'Note: '; }
   p.warning:before { content: '\26A0 Warning! '; }

   .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
   .bookkeeping { font-size: 0.8em; margin: 2em 0; }
   .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
   .bookkeeping dt { margin: 0.5em 2em 0; }
   .bookkeeping dd { margin: 0 3em 0.5em; }

   h4 { position: relative; z-index: 3; }
   h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
   .element {
     background: #EEEEFF;
     color: black;
     margin: 0 0 1em 0.15em;
     padding: 0 1em 0.25em 0.75em;
     border-left: solid #9999FF 0.25em;
     position: relative;
     z-index: 1;
   }
   .element:before {
     position: absolute;
     z-index: 2;
     top: 0;
     left: -1.15em;
     height: 2em;
     width: 0.9em;
     background: #EEEEFF;
     content: ' ';
     border-style: none none solid solid;
     border-color: #9999FF;
     border-width: 0.25em;
   }

   .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
   td > .example:only-child { margin: 0 0 0 0.1em; }

   ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
   ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
   ul.domTree li li { list-style: none; }
   ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
   ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
   ul.domTree span { font-style: italic; font-family: serif; }
   ul.domTree .t1 code { color: purple; font-weight: bold; }
   ul.domTree .t2 { font-style: normal; font-family: monospace; }
   ul.domTree .t2 .name { color: black; font-weight: bold; }
   ul.domTree .t2 .value { color: blue; font-weight: normal; }
   ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
   ul.domTree .t7 code, .domTree .t8 code { color: green; }
   ul.domTree .t10 code { color: teal; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
   #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
   #configUI p label { display: block; }
   #configUI #updateUI, #configUI .loginUI { text-align: center; }
   #configUI input[type=button] { display: block; margin: auto; }

   fieldset { margin: 1em; padding: 0.5em 1em; }
   fieldset > legend + * { margin-top: 0; }
   fieldset > :last-child { margin-bottom: 0; }
   fieldset p { margin: 0.5em 0; }

   .stability {
     position: fixed;
     bottom: 0;
     left: 0; right: 0;
     margin: 0 auto 0 auto !important;
    z-index: 1000;
     width: 50%;
     background: maroon; color: yellow;
     -webkit-border-radius: 1em 1em 0 0;
     -moz-border-radius: 1em 1em 0 0;
     border-radius: 1em 1em 0 0;
     -moz-box-shadow: 0 0 1em #500;
     -webkit-box-shadow: 0 0 1em #500;
     box-shadow: 0 0 1em red;
     padding: 0.5em 1em;
     text-align: center;
   }
   .stability strong {
     display: block;
   }
   .stability input {
     appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
     position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
   }
   .stability input:hover {
     color: white;
     text-shadow: 0 0 2px black;
   }
   .stability input:active {
     padding: 0.3em 0.45em 0.2em 0.55em;
   }
   .stability :link, .stability :visited,
   .stability :link:hover, .stability :visited:hover {
     background: transparent;
     color: white;
   }

  </style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">

   .applies thead th > * { display: block; }
   .applies thead code { display: block; }
   .applies tbody th { whitespace: nowrap; }
   .applies td { text-align: center; }
   .applies .yes { background: yellow; }

   .matrix, .matrix td { border: hidden; text-align: right; }
   .matrix { margin-left: 2em; }

   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   td.eg { border-width: thin; text-align: center; }

   #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
   #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
   #table-example-1 caption { padding-bottom: 0.5em; }
   #table-example-1 thead, #table-example-1 tbody { border: none; }
   #table-example-1 th, #table-example-1 td { border: solid thin; }
   #table-example-1 th { font-weight: normal; }
   #table-example-1 td { border-style: none solid; vertical-align: top; }
   #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
   #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
   #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
   #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
   #table-example-1 tbody td:first-child::after { content: leader(". "); }
   #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
   #table-example-1 tbody td:first-child + td { width: 10em; }
   #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
   #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }

   .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
   .apple-table-examples * { font-family: "Times", serif; }
   .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
   .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
   .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
   .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
   .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
   .apple-table-examples td { text-align: right; vertical-align: top; }
   .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
   .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
   .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
   .apple-table-examples sup { line-height: 0; }

   .details-example img { vertical-align: top; }

   #base64-table {
     white-space: nowrap;
     font-size: 0.6em;
     column-width: 6em;
     column-count: 5;
     column-gap: 1em;
     -moz-column-width: 6em;
     -moz-column-count: 5;
     -moz-column-gap: 1em;
     -webkit-column-width: 6em;
     -webkit-column-count: 5;
     -webkit-column-gap: 1em;
   }
   #base64-table thead { display: none; }
   #base64-table * { border: none; }
   #base64-table tbody td:first-child:after { content: ':'; }
   #base64-table tbody td:last-child { text-align: right; }

   #named-character-references-table {
     white-space: nowrap;
     font-size: 0.6em;
     column-width: 30em;
     column-gap: 1em;
     -moz-column-width: 30em;
     -moz-column-gap: 1em;
     -webkit-column-width: 30em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:first-child + td,
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
   #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }

   .glyph.control { color: red; }

   @font-face {
     font-family: 'Essays1743';
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-weight: bold;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     font-weight: bold;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
   }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><script type="text/javascript">
   function getCookie(name) {
     var params = location.search.substr(1).split("&");
     for (var index = 0; index < params.length; index++) {
       if (params[index] == name)
         return "1";
       var data = params[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     var cookies = document.cookie.split("; ");
     for (var index = 0; index < cookies.length; index++) {
       var data = cookies[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     return null;
   }
  </script>
  <script src="link-fixup.js" type="text/javascript"></script>
  <link href="style.css" rel="stylesheet"><link href="the-input-element.html" title="4.10.7 The input element" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="number-state.html" title="4.10.7.1.13 Number state" rel="next">
  </head><body><div class="head" id="head">
<div id="multipage-common">
  <p class="stability" id="wip"><strong>This is a work in
  progress!</strong> For the latest updates from the HTML WG, possibly
  including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
  There may also be a more
  <a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
   with changes based on resolution of Last Call issues.
  <input onclick="closeWarning(this.parentNode)" type="button" value="&#9587;&#8413;"></p>
  <script type="text/javascript">
   function closeWarning(element) {
     element.parentNode.removeChild(element);
     var date = new Date();
     date.setDate(date.getDate()+4);
     document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
   }
   if (getCookie('hide-obsolescence-warning') == '1')
     setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
  </script></div>

   <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>

   <h1>HTML5</h1>
   </div><div>
   <a href="the-input-element.html" class="prev">4.10.7 The input element</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="number-state.html" class="next">4.10.7.1.13 Number state</a>
  <ol class="toc"><li><ol><li><ol><li><ol><li><a href="states-of-the-type-attribute.html#states-of-the-type-attribute"><span class="secno">4.10.7.1 </span>States of the <code title="attr-input-type">type</code> attribute</a>
        <ol><li><a href="states-of-the-type-attribute.html#hidden-state"><span class="secno">4.10.7.1.1 </span>Hidden state</a></li><li><a href="states-of-the-type-attribute.html#text-state-and-search-state"><span class="secno">4.10.7.1.2 </span>Text state and Search state</a></li><li><a href="states-of-the-type-attribute.html#telephone-state"><span class="secno">4.10.7.1.3 </span>Telephone state</a></li><li><a href="states-of-the-type-attribute.html#url-state"><span class="secno">4.10.7.1.4 </span>URL state</a></li><li><a href="states-of-the-type-attribute.html#e-mail-state"><span class="secno">4.10.7.1.5 </span>E-mail state</a></li><li><a href="states-of-the-type-attribute.html#password-state"><span class="secno">4.10.7.1.6 </span>Password state</a></li><li><a href="states-of-the-type-attribute.html#date-and-time-state"><span class="secno">4.10.7.1.7 </span>Date and Time state</a></li><li><a href="states-of-the-type-attribute.html#date-state"><span class="secno">4.10.7.1.8 </span>Date state</a></li><li><a href="states-of-the-type-attribute.html#month-state"><span class="secno">4.10.7.1.9 </span>Month state</a></li><li><a href="states-of-the-type-attribute.html#week-state"><span class="secno">4.10.7.1.10 </span>Week state</a></li><li><a href="states-of-the-type-attribute.html#time-state"><span class="secno">4.10.7.1.11 </span>Time state</a></li><li><a href="states-of-the-type-attribute.html#local-date-and-time-state"><span class="secno">4.10.7.1.12 </span>Local Date and Time state</a></li></ol></li></ol></li></ol></li></ol></li></ol></div>

  <h5 id="states-of-the-type-attribute"><span class="secno">4.10.7.1 </span>States of the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute</h5><h6 id="hidden-state"><span class="secno">4.10.7.1.1 </span><dfn title="attr-input-type-hidden">Hidden</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#hidden-state" title="attr-input-type-hidden">Hidden</a> state, the rules in
  this section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a value
  that is not intended to be examined or manipulated by the user.</p><div class="impl">

  <p><strong>Constraint validation</strong>: If an <code><a href="the-input-element.html#the-input-element">input</a></code>
  element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in
  the <a href="#hidden-state" title="attr-input-type-hidden">Hidden</a> state, it is
  <a href="association-of-controls-and-forms.html#barred-from-constraint-validation">barred from constraint validation</a>.</p>

  </div><p>If the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">name</a></code> attribute is
  present and has a value that is a <a href="infrastructure.html#case-sensitive">case-sensitive</a> match
  for the string "<code title="attr-fe-name-charset"><a href="association-of-controls-and-forms.html#attr-fe-name-charset">_charset_</a></code>", then the element's
  <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute must be
  omitted.</p><div class="bookkeeping">

   <p>The
   <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>
   IDL attribute applies to this element and is
   in mode <a href="common-input-element-attributes.html#dom-input-value-default" title="dom-input-value-default">default</a>.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
   <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>,
   <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
   <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
   <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
   <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
   <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

   <p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events do not apply.</p>

  </div><h6 id="text-state-and-search-state"><span class="secno">4.10.7.1.2 </span><dfn title="attr-input-type-text">Text</dfn> state and <dfn title="attr-input-type-search">Search</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#text-state-and-search-state" title="attr-input-type-text">Text</a> state or the <a href="#text-state-and-search-state" title="attr-input-type-search">Search</a> state, the rules in
  this section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a one line
  plain text edit control for the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p><p class="note">The difference between the <a href="#text-state-and-search-state" title="attr-input-type-text">Text</a> state and the <a href="#text-state-and-search-state" title="attr-input-type-search">Search</a> state is primarily
  stylistic: on platforms where search fields are distinguished from
  regular text fields, the <a href="#text-state-and-search-state" title="attr-input-type-search">Search</a> state might result in
  an appearance consistent with the platform's search fields rather
  than appearing like a regular text field.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> should be editable
  by the user. User agents must not allow users to insert U+000A LINE
  FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the
  element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>


  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  the user agent should allow the user to change the 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-input-element.html#the-input-element">input</a></code>
   element.</p></li>

  </ol></div><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified, must have a value that contains no U+000A LINE FEED (LF)
  or U+000D CARRIAGE RETURN (CR) characters.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: <a href="common-microsyntaxes.html#strip-line-breaks">Strip line breaks</a> from the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</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-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attributes;
   <code title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</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.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>,
   <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
   <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
   <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

  </div><h6 id="telephone-state"><span class="secno">4.10.7.1.3 </span><dfn title="attr-input-type-tel">Telephone</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#telephone-state" title="attr-input-type-tel">Telephone</a> state, the rules in
  this section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
  for editing a telephone number given in the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> should be editable
  by the user. User agents may change the spacing and, with care, the
  punctuation of <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">values</a> that the
  user enters. User agents must not allow users to insert U+000A LINE
  FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the
  element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

  </div><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified, must have a value that contains no U+000A LINE FEED (LF)
  or U+000D CARRIAGE RETURN (CR) characters.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: <a href="common-microsyntaxes.html#strip-line-breaks">Strip line breaks</a> from the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

  </div><p class="note">Unlike the <a href="#url-state" title="attr-input-type-url">URL</a> and <a href="#e-mail-state" title="attr-input-type-email">E-mail</a> types, the <a href="#telephone-state" title="attr-input-type-tel">Telephone</a> type does not enforce a
  particular syntax. This is intentional; in practice, telephone
  number fields tend to be free-form fields, because there are a wide
  variety of valid phone numbers. Systems that need to enforce a
  particular format are encouraged to use the <code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code> attribute or the <code title="dom-cva-setCustomValidity"><a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code> method
  to hook into the client-side validation mechanism.</p><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</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-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attributes;
   <code title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</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.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>,
   <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
   <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
   <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

  </div><h6 id="url-state"><span class="secno">4.10.7.1.4 </span><dfn title="attr-input-type-url">URL</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#url-state" title="attr-input-type-url">URL</a> state, the rules in this
  section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
  for editing a single <a href="urls.html#absolute-url">absolute URL</a> given in the
  element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  the user agent should allow the user to change the URL represented
  by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>. User agents may
  allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string that is not a
  <a href="urls.html#valid-url" title="valid URL">valid</a> <a href="urls.html#absolute-url">absolute URL</a>, but
  may also or instead automatically escape characters entered by the
  user so that the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> is
  always a <a href="urls.html#valid-url" title="valid URL">valid</a> <a href="urls.html#absolute-url">absolute
  URL</a> (even if that isn't the actual value seen and edited by
  the user in the interface). User agents should allow the user to set
  the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty
  string. User agents must not allow users to insert U+000A LINE FEED
  (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

  </div><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified and not empty, must have a value that is a <a href="urls.html#valid-url-potentially-surrounded-by-spaces">valid URL
  potentially surrounded by spaces</a> that is also an
  <a href="urls.html#absolute-url">absolute URL</a>.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: <a href="common-microsyntaxes.html#strip-line-breaks">Strip line breaks</a> from the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, then <a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace">strip leading and
  trailing whitespace</a> from the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

  <p><strong>Constraint validation</strong>: While the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the element is neither the
  empty string nor a <a href="urls.html#valid-url" title="valid URL">valid</a>
  <a href="urls.html#absolute-url">absolute URL</a>, the element is <a href="association-of-controls-and-forms.html#suffering-from-a-type-mismatch">suffering from a
  type mismatch</a>.</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</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-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attributes;
   <code title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</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.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>,
   <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
   <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
   <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

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

   <p>If a document contained the following markup:</p>

   <pre>&lt;input type="url" name="location" list="urls"&gt;
&lt;datalist id="urls"&gt;
 &lt;option label="MIME: Format of Internet Message Bodies" value="http://tools.ietf.org/html/rfc2045"&gt;
 &lt;option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"&gt;
 &lt;option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"&gt;
 &lt;option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"&gt;
 &lt;option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"&gt;
 &lt;option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"&gt;
&lt;/datalist&gt;
</pre>

   <p>...and the user had typed "<kbd>www.w3</kbd>", and the user
   agent had also found that the user had visited
   <code>http://www.w3.org/Consortium/#membership</code> and
   <code>http://www.w3.org/TR/XForms/</code> in the recent past, then
   the rendering might look like this:</p>

   <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' height="134" src="sample-url.png" width="472"></p>

   <p>The first four URLs in this sample consist of the four URLs in
   the author-specified list that match the text the user has entered,
   sorted in some UA-defined manner (maybe by how frequently the user
   refers to those URLs). Note how the UA is using the knowledge that
   the values are URLs to allow the user to omit the scheme part and
   perform intelligent matching on the domain name.</p>

   <p>The last two URLs (and probably many more, given the scrollbar's
   indications of more values being available) are the matches from
   the user agent's session history data. This data is not made
   available to the page DOM. In this particular case, the UA has no
   titles to provide for those values.</p>

  </div><h6 id="e-mail-state"><span class="secno">4.10.7.1.5 </span><dfn title="attr-input-type-email">E-mail</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#e-mail-state" title="attr-input-type-email">E-mail</a> state, the rules in this
  section apply.</p>

  </div><p>How the <a href="#e-mail-state" title="attr-input-type-email">E-mail</a> state
  operates depends on whether the <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code> attribute is specified
  or not.</p><dl class="switch"><dt>When the <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>
   attribute is not specified on the element</dt>

   <dd>

    <p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a
    control for editing an e-mail address given in the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

    <div class="impl">

    <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
    the user agent should allow the user to change the e-mail address
    represented by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.
    User agents may allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string that is not a
    <a href="#valid-e-mail-address">valid e-mail address</a>. The user agent should act in a
    manner consistent with expecting the user to provide a single
    e-mail address. User agents should allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string. User
    agents must not allow users to insert U+000A LINE FEED (LF) or
    U+000D CARRIAGE RETURN (CR) characters into the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>. User agents may transform
    the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> for display and
    editing; in particular, user agents should convert punycode in the
    <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to IDN in the display
    and vice versa.</p>

    </div>

    <p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
    specified and not empty, must have a value that is a single
    <a href="#valid-e-mail-address">valid e-mail address</a>.</p>

    <div class="impl">

    <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
    follows</strong>: <a href="common-microsyntaxes.html#strip-line-breaks">Strip line breaks</a> from the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

    <p>When the <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>
    attribute is removed, the user agent must run the <a href="the-input-element.html#value-sanitization-algorithm">value
    sanitization algorithm</a>.</p>

    <p><strong>Constraint validation</strong>: While the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the element is neither
    the empty string nor a single <a href="#valid-e-mail-address">valid e-mail address</a>,
    the element is <a href="association-of-controls-and-forms.html#suffering-from-a-type-mismatch">suffering from a type mismatch</a>.</p>

    </div>

   </dd>

   <dt>When the <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>
   attribute <em>is</em> specified on the element</dt>

   <dd>

    <div class="impl">

    <p>The element's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a> are the result of
    <a href="common-microsyntaxes.html#split-a-string-on-commas" title="split a string on commas">splitting on commas</a>
    the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

    </div>

    <p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a
    control for adding, removing, and editing the e-mail addresses
    given in the element's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a>.</p>

    <div class="impl">

    <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
    the user agent should allow the user to add, remove, and edit the
    e-mail addresses represented by its <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a>. User agents may
    allow the user to set any individual value in the list of <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value<em>s</em></a> to a string that
    is not a <a href="#valid-e-mail-address">valid e-mail address</a>, but must not allow
    users to set any individual value to a string containing U+002C
    COMMA (,), U+000A LINE FEED (LF), or U+000D CARRIAGE RETURN (CR)
    characters. User agents should allow the user to remove all the
    addresses in the element's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a>. User agents may
    transform the <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a> for display and
    editing; in particular, user agents should convert punycode in the
    <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to IDN in the display
    and vice versa.</p>

    <p>Whenever the user changes the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value<em>s</em></a>, the user agent
    must run the following steps:</p>

    <ol><li><p>Let <var title="">latest values</var> be a copy of the
     element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value<em>s</em></a>.</p></li>


     <li><p><a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace">Strip leading and trailing whitespace</a> from
     each value in <var title="">latest values</var>.</p></li>

     <li><p>Let the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> be the result of
     concatenating all the values in <var title="">latest
     values</var>, separating each value from the next by a single
     U+002C COMMA character (,), maintaining the list's
     order.</p></li>

    </ol></div>

    <p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
    specified, must have a value that is a <a href="#valid-e-mail-address-list">valid e-mail address
    list</a>.</p>

    <div class="impl">

    <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
    follows</strong>:</p>

    <ol><li><p><a href="common-microsyntaxes.html#split-a-string-on-commas" title="split a string on commas">Split on
     commas</a> the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, <a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace">strip leading and
     trailing whitespace</a> from each resulting token, if any, and
     let the element's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a> be the (possibly
     empty) resulting list of (possibly empty) tokens, maintaining the
     original order.</p></li>

     <li><p>Let the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> be the result of
     concatenating the element's <a href="association-of-controls-and-forms.html#concept-fe-values" title="concept-fe-values">value<em>s</em></a>, separating each
     value from the next by a single U+002C COMMA character (,),
     maintaining the list's order.</p></li>

    </ol><p>When the <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>
    attribute is set, the user agent must run the <a href="the-input-element.html#value-sanitization-algorithm">value
    sanitization algorithm</a>.</p>

    <p><strong>Constraint validation</strong>: While the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> of the element is not a
    <a href="#valid-e-mail-address-list">valid e-mail address list</a>, the element is
    <a href="association-of-controls-and-forms.html#suffering-from-a-type-mismatch">suffering from a type mismatch</a>.</p>

    </div>

   </dd>

  </dl><p>A <dfn id="valid-e-mail-address">valid e-mail address</dfn> is a string that matches the
  ABNF production <code title="">1*(&#160;atext&#160;/&#160;"."&#160;)&#160;"@"&#160;ldh-str&#160;*(&#160;"."&#160;ldh-str&#160;)</code>
  where <code title="">atext</code> is defined in RFC 5322 section
  3.2.3, and <code title="">ldh-str</code> is defined in RFC 1034
  section 3.5. <a href="references.html#refsABNF">[ABNF]</a> <a href="references.html#refsRFC5322">[RFC5322]</a> <a href="references.html#refsRFC1034">[RFC1034]</a></p><p class="note">This requirement is a <a href="introduction.html#willful-violation">willful violation</a>
  of RFC 5322, which defines a syntax for e-mail addresses that is
  simultaneously too strict (before the "@" character), too vague
  (after the "@" character), and too lax (allowing comments, white
  space characters, and quoted strings in manners unfamiliar to most
  users) to be of practical use here.</p><p>A <dfn id="valid-e-mail-address-list">valid e-mail address list</dfn> is a <a href="common-microsyntaxes.html#set-of-comma-separated-tokens">set of
  comma-separated tokens</a>, where each token is itself a
  <a href="#valid-e-mail-address">valid e-mail address</a>. <span class="impl">To obtain the
  list of tokens from a <a href="#valid-e-mail-address-list">valid e-mail address list</a>, and
  implementation must <a href="common-microsyntaxes.html#split-a-string-on-commas" title="split a string on commas">split the
  string on commas</a>.</span></p><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code> and
   <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attributes.</p>

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element when
   the <code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code> attribute is
   not specified:
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attribute.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>,
   <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
   <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
   <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code>,
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
   <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

  </div><h6 id="password-state"><span class="secno">4.10.7.1.6 </span><dfn title="attr-input-type-password">Password</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#password-state" title="attr-input-type-password">Password</a> state, the rules in
  this section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a one line
  plain text edit control for the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>. The user agent should obscure
  the value so that people other than the user cannot see it.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> should be editable
  by the user. User agents must not allow users to insert U+000A LINE
  FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

  </div><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified, must have a value that contains no U+000A LINE FEED (LF)
  or U+000D CARRIAGE RETURN (CR) characters.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: <a href="common-microsyntaxes.html#strip-line-breaks">Strip line breaks</a> from the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>.</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code> content attributes;
   <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-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attributes;
   <code title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</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.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>,
   <code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
   <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
   <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
   <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

  </div><h6 id="date-and-time-state"><span class="secno">4.10.7.1.7 </span><dfn title="attr-input-type-datetime">Date and Time</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> state, the
  rules in this section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
  for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
  specific <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and
  time</a>. <span class="impl">User agents may display the date and
  time in whatever time zone is appropriate for the user.</span></p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  the user agent should allow the user to change the <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a> represented by
  its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as obtained by
  <a href="common-microsyntaxes.html#parse-a-global-date-and-time-string" title="parse a global date and time string">parsing a global
  date and time</a> from it. User agents must not allow the user to
  set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a non-empty
  string that is not a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and time string</a>
  expressed in UTC, though user agents may allow the user to set and
  view the time in another time zone and silently translate the time
  to and from the UTC time zone in the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>. If the user agent provides a
  user interface for selecting a <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global
  date and time</a>, then the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid
  global date and time string</a> expressed in UTC representing the
  user's selection. User agents should allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>

  </div><p class="note">The format shown to the user is independent of the
  format used for form submission. Browsers are encouraged to use user
  interfaces that present dates and times according to the conventions
  of the user's preferred locale.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid
  global date and time string</a>.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element is a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and time string</a>,
  then adjust the time so that the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> represents the same point in
  time but expressed in the UTC time zone, otherwise, set it to the
  empty string instead.</p>

  </div><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
  specified, must have a value that is a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and
  time string</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
  attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid
  global date and time string</a>.</p><p>The <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute is
  expressed in seconds. <span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is 1000
  (which converts the seconds to milliseconds, as used in the other
  algorithms).</span> The <a href="common-input-element-attributes.html#concept-input-step-default" title="concept-input-step-default">default step</a> is 60
  seconds.</p><div class="impl">

  <p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>,
  the user agent may round the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the nearest <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a> for which the
  element would not <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch" title="suffering from a step
  mismatch">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-global-date-and-time-string" title="parse a global date and time
  string">parsing a global date and time</a> from <var title="">input</var> results in an error, then return an error;
  otherwise, return the number of milliseconds elapsed from midnight
  UTC on the morning of 1970-01-01 (the time represented by the value
  "<code title="">1970-01-01T00:00:00.0Z</code>") to the parsed <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a>, ignoring leap
  seconds.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and time
  string</a> expressed in UTC that represents the <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a> that is <var title="">input</var> milliseconds after midnight UTC on the morning
  of 1970-01-01 (the time represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>").</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-global-date-and-time-string" title="parse
  a global date and time string">parsing a global date and time</a>
  from <var title="">input</var> results in an error, then return an
  error; otherwise, return a <code>Date</code> object representing the
  parsed <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a>,
  expressed in UTC.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and time
  string</a> expressed in UTC that represents the <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a> that is
  represented by <var title="">input</var>.</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>,
   <code title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>,
   <code title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code>, and
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
   <code title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>, and
   <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code> and
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>

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

   <p>The following fragment shows part of a calendar application. A
   user can specify a date and time for a meeting (in his local time
   zone, probably, though the user agent can allow the user to change
   that), and since the submitted data includes the time-zone offset,
   the application can ensure that the meeting is shown at the correct
   time regardless of the time zones used by all the participants.</p>

   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Add Meeting&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Meeting name: &lt;input type=text name="meeting.label"&gt;&lt;/label&gt;
 &lt;p&gt;&lt;label&gt;Meeting time: &lt;input type=datetime name="meeting.start"&gt;&lt;/label&gt;
&lt;/fieldset&gt;</pre>

   <p>Had the application used the <code title="attr-input-type-datetime-local"><a href="#local-date-and-time-state">datetime-local</a></code> type
   instead, the calendar application would have also had to explicitly
   determine which time zone the user intended.</p>

  </div><h6 id="date-state"><span class="secno">4.10.7.1.8 </span><dfn title="attr-input-type-date">Date</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#date-state" title="attr-input-type-date">Date</a> state, the rules in this
  section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
  for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
  specific <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a>.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  the user agent should allow the user to change the <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a> represented by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as obtained by <a href="common-microsyntaxes.html#parse-a-date-string" title="parse a date string">parsing a date</a> from it. User
  agents must not allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a non-empty string that is
  not a <a href="common-microsyntaxes.html#valid-date-string">valid date string</a>. If the user agent provides a
  user interface for selecting a <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a>, then the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to a <a href="common-microsyntaxes.html#valid-date-string">valid
  date string</a> representing the user's selection. User agents
  should allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>

  </div><p class="note">The format shown to the user is independent of the
  format used for form submission. Browsers are encouraged to use user
  interfaces that present dates according to the conventions of the
  user's preferred locale.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-date-string">valid
  date string</a>.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element is not a <a href="common-microsyntaxes.html#valid-date-string">valid date string</a>, then set it
  to the empty string instead.</p>

  </div><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
  specified, must have a value that is a <a href="common-microsyntaxes.html#valid-date-string">valid date
  string</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
  attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-date-string">valid
  date string</a>.</p><p>The <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute is
  expressed in days. <span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is
  86,400,000 (which converts the days to milliseconds, as used in the
  other algorithms).</span> The <a href="common-input-element-attributes.html#concept-input-step-default" title="concept-input-step-default">default step</a> is 1 day.</p><div class="impl">

  <p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>,
  the user agent may round the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the nearest <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a> for which the element would not
  <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch" title="suffering from a step mismatch">suffer from a step
  mismatch</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-date-string" title="parse a date string">parsing
  a date</a> from <var title="">input</var> results in an error,
  then return an error; otherwise, return the number of milliseconds
  elapsed from midnight UTC on the morning of 1970-01-01 (the time
  represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>") to midnight UTC on the
  morning of the parsed <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a>,
  ignoring leap seconds.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href="common-microsyntaxes.html#valid-date-string">valid date string</a> that
  represents the <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a> that, in UTC,
  is current <var title="">input</var> milliseconds after midnight UTC
  on the morning of 1970-01-01 (the time represented by the value
  "<code title="">1970-01-01T00:00:00.0Z</code>").</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-date-string" title="parse
  a date string">parsing a date</a> from <var title="">input</var>
  results in an error, then return an error; otherwise, return a
  <code>Date</code> object representing midnight UTC on the morning of
  the parsed <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href="common-microsyntaxes.html#valid-date-string">valid date string</a> that
  represents the <a href="common-microsyntaxes.html#concept-date" title="concept-date">date</a> current at the
  time represented by <var title="">input</var> in the UTC
  time zone.</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>,
   <code title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>,
   <code title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code>, and
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
   <code title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>, and
   <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code> and
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>

  </div><h6 id="month-state"><span class="secno">4.10.7.1.9 </span><dfn title="attr-input-type-month">Month</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#month-state" title="attr-input-type-month">Month</a> state, the rules in this
  section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
  for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
  specific <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a>.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  the user agent should allow the user to change the <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a> represented by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as obtained by <a href="common-microsyntaxes.html#parse-a-month-string" title="parse a month string">parsing a month</a> from it. User
  agents must not allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a non-empty string that is
  not a <a href="common-microsyntaxes.html#valid-month-string">valid month string</a>. If the user agent provides a
  user interface for selecting a <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a>, then the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to a <a href="common-microsyntaxes.html#valid-month-string">valid
  month string</a> representing the user's selection. User agents
  should allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>

  </div><p class="note">The format shown to the user is independent of the
  format used for form submission. Browsers are encouraged to use user
  interfaces that present months according to the conventions of the
  user's preferred locale.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-month-string">valid
  month string</a>.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element is not a <a href="common-microsyntaxes.html#valid-month-string">valid month string</a>, then set it
  to the empty string instead.</p>

  </div><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
  specified, must have a value that is a <a href="common-microsyntaxes.html#valid-month-string">valid month
  string</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
  attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-month-string">valid
  month string</a>.</p><p>The <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute is
  expressed in months. <span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is 1
  (there is no conversion needed as the algorithms use months).</span>
  The <a href="common-input-element-attributes.html#concept-input-step-default" title="concept-input-step-default">default step</a> is
  1 month.</p><div class="impl">

  <p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>,
  the user agent may round the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the nearest <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a> for which the element would not
  <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch" title="suffering from a step mismatch">suffer from a step
  mismatch</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-month-string" title="parse a month
  string">parsing a month</a> from <var title="">input</var>
  results in an error, then return an error; otherwise, return the
  number of months between January 1970 and the parsed <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href="common-microsyntaxes.html#valid-month-string">valid month string</a>
  that represents the <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a> that
  has <var title="">input</var> months between it and January
  1970.</p>


  <p><strong>The <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-month-string" title="parse
  a month string">parsing a month</a> from <var title="">input</var> results in an error, then return an error;
  otherwise, return a <code>Date</code> object representing midnight
  UTC on the morning of the first day of the parsed <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href="common-microsyntaxes.html#valid-month-string">valid month string</a> that
  represents the <a href="common-microsyntaxes.html#concept-month" title="concept-month">month</a> current at
  the time represented by <var title="">input</var> in the UTC
  time zone.</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>,
   <code title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>,
   <code title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code>, and
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
   <code title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>, and
   <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code> and
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>

  </div><h6 id="week-state"><span class="secno">4.10.7.1.10 </span><dfn title="attr-input-type-week">Week</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#week-state" title="attr-input-type-week">Week</a> state, the rules in this
  section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
  for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
  specific <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a>.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  the user agent should allow the user to change the <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a> represented by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as obtained by <a href="common-microsyntaxes.html#parse-a-week-string" title="parse a week string">parsing a week</a> from it. User
  agents must not allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a non-empty string that is
  not a <a href="common-microsyntaxes.html#valid-week-string">valid week string</a>. If the user agent provides a
  user interface for selecting a <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a>, then the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to a <a href="common-microsyntaxes.html#valid-week-string">valid
  week string</a> representing the user's selection. User agents
  should allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>

  </div><p class="note">The format shown to the user is independent of the
  format used for form submission. Browsers are encouraged to use user
  interfaces that present weeks according to the conventions of the
  user's preferred locale.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-week-string">valid
  week string</a>.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element is not a <a href="common-microsyntaxes.html#valid-week-string">valid week string</a>, then set it
  to the empty string instead.</p>

  </div><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
  specified, must have a value that is a <a href="common-microsyntaxes.html#valid-week-string">valid week
  string</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
  attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-week-string">valid
  week string</a>.</p><p>The <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute is
  expressed in weeks. <span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is
  604,800,000 (which converts the weeks to milliseconds, as used in
  the other algorithms).</span> The <a href="common-input-element-attributes.html#concept-input-step-default" title="concept-input-step-default">default step</a> is 1
  week. <span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-default-base" title="concept-input-step-default-base">default step base</a> is
  &#8722;259,200,000 (the start of week 1970-W01).</span></p><div class="impl">

  <p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>,
  the user agent may round the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the nearest <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a> for which the element would not
  <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch" title="suffering from a step mismatch">suffer from a step
  mismatch</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-week-string" title="parse a week string">parsing
  a week string</a> from <var title="">input</var> results in an
  error, then return an error; otherwise, return the number of
  milliseconds elapsed from midnight UTC on the morning of 1970-01-01
  (the time represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>") to midnight UTC on the
  morning of the Monday of the parsed <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a>, ignoring leap seconds.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href="common-microsyntaxes.html#valid-week-string">valid week string</a> that
  represents the <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a> that, in UTC,
  is current <var title="">input</var> milliseconds after midnight UTC
  on the morning of 1970-01-01 (the time represented by the value
  "<code title="">1970-01-01T00:00:00.0Z</code>").</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-week-string" title="parse
  a week string">parsing a week</a> from <var title="">input</var>
  results in an error, then return an error; otherwise, return a
  <code>Date</code> object representing midnight UTC on the morning of
  the Monday of the parsed <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href="common-microsyntaxes.html#valid-week-string">valid week string</a> that
  represents the <a href="common-microsyntaxes.html#concept-week" title="concept-week">week</a> current at the
  time represented by <var title="">input</var> in the UTC
  time zone.</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>,
   <code title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>,
   <code title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code>, and
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
   <code title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>, and
   <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code> and
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>

  </div><h6 id="time-state"><span class="secno">4.10.7.1.11 </span><dfn title="attr-input-type-time">Time</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#time-state" title="attr-input-type-time">Time</a> state, the rules in this
  section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
  for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
  specific <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a>.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  the user agent should allow the user to change the <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a> represented by its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as obtained by <a href="common-microsyntaxes.html#parse-a-time-string" title="parse a time string">parsing a time</a> from it. User
  agents must not allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a non-empty string that is
  not a <a href="common-microsyntaxes.html#valid-time-string">valid time string</a>. If the user agent provides a
  user interface for selecting a <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a>, then the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to a <a href="common-microsyntaxes.html#valid-time-string">valid
  time string</a> representing the user's selection. User agents
  should allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>

  </div><p class="note">The format shown to the user is independent of the
  format used for form submission. Browsers are encouraged to use user
  interfaces that present times according to the conventions of the
  user's preferred locale.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-time-string">valid
  time string</a>.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element is not a <a href="common-microsyntaxes.html#valid-time-string">valid time string</a>, then set it
  to the empty string instead.</p>

  </div><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
  specified, must have a value that is a <a href="common-microsyntaxes.html#valid-time-string">valid time
  string</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
  attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-time-string">valid
  time string</a>.</p><p>The <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute is
  expressed in seconds. <span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is 1000
  (which converts the seconds to milliseconds, as used in the other
  algorithms).</span> The <a href="common-input-element-attributes.html#concept-input-step-default" title="concept-input-step-default">default step</a> is 60
  seconds.</p><div class="impl">

  <p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>,
  the user agent may round the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the nearest <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a> for which the element would not
  <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch" title="suffering from a step mismatch">suffer from a step
  mismatch</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-time-string" title="parse a time string">parsing
  a time</a> from <var title="">input</var> results in an error,
  then return an error; otherwise, return the number of milliseconds
  elapsed from midnight to the parsed <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a> on a day with no time changes.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href="common-microsyntaxes.html#valid-time-string">valid time string</a> that
  represents the <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a> that is <var title="">input</var> milliseconds after midnight on a day with no
  time changes.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-date" title="concept-input-value-string-date">algorithm to convert a
  string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-time-string" title="parse
  a time string">parsing a time</a> from <var title="">input</var>
  results in an error, then return an error; otherwise, return a
  <code>Date</code> object representing the parsed <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a> in UTC on 1970-01-01.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-date-string" title="concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a
  <code>Date</code> object <var title="">input</var>, is as
  follows</strong>: Return a <a href="common-microsyntaxes.html#valid-time-string">valid time string</a> that
  represents the UTC <a href="common-microsyntaxes.html#concept-time" title="concept-time">time</a> component
  that is represented by <var title="">input</var>.</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>,
   <code title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>,
   <code title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code>, and
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
   <code title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>, and
   <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code> and
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>

  </div><h6 id="local-date-and-time-state"><span class="secno">4.10.7.1.12 </span><dfn title="attr-input-type-datetime-local">Local Date and Time</dfn> state</h6><div class="impl">

  <p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a>
  state, the rules in this section apply.</p>

  </div><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="rendering.html#represents">represents</a> a control
  for setting the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
  <a href="common-microsyntaxes.html#concept-datetime-local" title="concept-datetime-local">local date and time</a>,
  with no time-zone offset information.</p><div class="impl">

  <p>If the element is <i title="concept-input-mutable"><a href="the-input-element.html#concept-input-mutable">mutable</a></i>,
  the user agent should allow the user to change the <a href="common-microsyntaxes.html#concept-datetime-local" title="concept-datetime-local">date and time</a> represented by
  its <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>, as obtained by
  <a href="common-microsyntaxes.html#parse-a-local-date-and-time-string" title="parse a local date and time string">parsing a date and
  time</a> from it. User agents must not allow the user to set the
  <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to a non-empty string
  that is not a <a href="common-microsyntaxes.html#valid-local-date-and-time-string">valid local date and time string</a>. If the
  user agent provides a user interface for selecting a <a href="common-microsyntaxes.html#concept-datetime-local" title="concept-datetime-local">local date and time</a>, then the
  <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> must be set to a
  <a href="common-microsyntaxes.html#valid-local-date-and-time-string">valid local date and time string</a> representing the
  user's selection. User agents should allow the user to set the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the empty string.</p>

  </div><p class="note">The format shown to the user is independent of the
  format used for form submission. Browsers are encouraged to use user
  interfaces that present dates and times according to the conventions
  of the user's preferred locale.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
  specified and not empty, must have a value that is a <a href="common-microsyntaxes.html#valid-local-date-and-time-string">valid
  local date and time string</a>.</p><div class="impl">

  <p><strong>The <a href="the-input-element.html#value-sanitization-algorithm">value sanitization algorithm</a> is as
  follows</strong>: If the <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a>
  of the element is not a <a href="common-microsyntaxes.html#valid-local-date-and-time-string">valid local date and time
  string</a>, then set it to the empty string instead.</p>

  </div><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
  specified, must have a value that is a <a href="common-microsyntaxes.html#valid-local-date-and-time-string">valid local date and
  time string</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
  attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-local-date-and-time-string">valid
  local date and time string</a>.</p><p>The <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute is
  expressed in seconds. <span class="impl">The <a href="common-input-element-attributes.html#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is 1000
  (which converts the seconds to milliseconds, as used in the other
  algorithms).</span> The <a href="common-input-element-attributes.html#concept-input-step-default" title="concept-input-step-default">default step</a> is 60
  seconds.</p><div class="impl">

  <p>When the element is <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch">suffering from a step mismatch</a>,
  the user agent may round the element's <a href="association-of-controls-and-forms.html#concept-fe-value" title="concept-fe-value">value</a> to the nearest <a href="common-microsyntaxes.html#concept-datetime-local" title="concept-datetime-local">local date and time</a> for which
  the element would not <a href="association-of-controls-and-forms.html#suffering-from-a-step-mismatch" title="suffering from a step
  mismatch">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-string-number" title="concept-input-value-string-number">algorithm to convert a
  string to a number</a>, given a string <var title="">input</var>,
  is as follows</strong>: If <a href="common-microsyntaxes.html#parse-a-local-date-and-time-string" title="parse a local date and time
  string">parsing a date and time</a> from <var title="">input</var> results in an error, then return an error;
  otherwise, return the number of milliseconds elapsed from midnight
  on the morning of 1970-01-01 (the time represented by the value
  "<code title="">1970-01-01T00:00:00.0</code>") to the parsed <a href="common-microsyntaxes.html#concept-datetime-local" title="concept-datetime-local">local date and time</a>, ignoring
  leap seconds.</p>

  <p><strong>The <a href="the-input-element.html#concept-input-value-number-string" title="concept-input-value-number-string">algorithm to convert a
  number to a string</a>, given a number <var title="">input</var>,
  is as follows</strong>: Return a <a href="common-microsyntaxes.html#valid-local-date-and-time-string">valid local date and time
  string</a> that represents the date and time that is <var title="">input</var> milliseconds after midnight on the morning of
  1970-01-01 (the time represented by the value "<code title="">1970-01-01T00:00:00.0</code>").</p>

  </div><div class="bookkeeping">

   <p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
   attributes, IDL attributes, and methods apply to the element:
   <code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
   <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
   <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
   <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
   <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
   <code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
   <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
   <code title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code>,
   <code title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code>, and
   <code title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
   <code title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code> and
   <code title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

   <p>The <code title="dom-input-value"><a href="common-input-element-attributes.html#dom-input-value">value</a></code> IDL attribute is
   in mode <a href="common-input-element-attributes.html#dom-input-value-value" title="dom-input-value-value">value</a>.</p>

   <p>The <code title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events apply.</p>

   <p>The following content attributes must not be specified and do not
   apply to the element:
   <code class="no-backref" title="attr-input-accept"><a href="number-state.html#attr-input-accept">accept</a></code>,
   <code class="no-backref" title="attr-input-alt"><a href="number-state.html#attr-input-alt">alt</a></code>,
   <code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
   <code class="no-backref" title="attr-input-dirname"><a href="common-input-element-attributes.html#attr-input-dirname">dirname</a></code>,
   <code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
   <code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
   <code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
   <code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
   <code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
   <code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
   <code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
   <code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
   <code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
   <code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
   <code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
   <code class="no-backref" title="attr-input-src"><a href="number-state.html#attr-input-src">src</a></code>, and
   <code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>

   <p>The following IDL attributes and methods do not apply to the
   element:
   <code class="no-backref" title="dom-input-checked"><a href="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="association-of-controls-and-forms.html#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
   <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="association-of-controls-and-forms.html#dom-textarea-input-select">select()</a></code> and
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="association-of-controls-and-forms.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>

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

   <p>The following example shows part of a flight booking
   application. The application uses an <code><a href="the-input-element.html#the-input-element">input</a></code> element
   with its <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute set to
   <code title="attr-input-type-datetime-local"><a href="#local-date-and-time-state">datetime-local</a></code>,
   and it then interprets the given date and time in the time zone of
   the selected airport.</p>

   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Destination&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Airport: &lt;input type=text name=to list=airports&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Departure time: &lt;input type=datetime-local name=totime step=3600&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;datalist id=airports&gt;
 &lt;option value=ATL label="Atlanta"&gt;
 &lt;option value=MEM label="Memphis"&gt;
 &lt;option value=LHR label="London Heathrow"&gt;
 &lt;option value=LAX label="Los Angeles"&gt;
 &lt;option value=FRA label="Frankfurt"&gt;
&lt;/datalist&gt;</pre>

   <p>If the application instead used the <code title="attr-input-type-datetime"><a href="#date-and-time-state">datetime</a></code> type, then the
   user would have to work out the time-zone conversions himself,
   which is clearly not a good user experience!</p>

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