semantics-forms.include

<section>

<h3 id="sec-forms"><dfn>Forms</dfn></h3>

<h4 id="forms-introduction">Introduction</h4>

  <em>This section is non-normative.</em>

  A form is a component of a Web page that has form controls, such as text fields, buttons,
  checkboxes, range controls, or color pickers. A user can interact with such a form, providing data
  that can then be sent to the server for further processing (e.g., returning the results of a search
  or calculation). No client-side scripting is needed in many cases, though an API is available so
  that scripts can augment the user experience or use forms for purposes other than submitting data
  to a server.

  Writing a form consists of several steps, which can be performed in any order: writing the user
  interface, implementing the server-side processing, and configuring the user interface to
  communicate with the server.

<h5 id="writing-a-forms-user-interface">Writing a form's user interface</h5>

  <em>This section is non-normative.</em>

  For the purposes of this brief introduction, we will create a pizza ordering form.

  Any form starts with a <{form}> element, inside which are placed the controls. Most
  controls are represented by the <{input}> element, which by default provides a one-line
  text field. To label a control, the <{label}> element is used; the label text and the
  control itself go inside the <{label}> element. Each area within a form is typically represented
  using a <{div}> element. Putting this together, here is how one might ask for the customer's name:

  <pre highlight="html">
    &lt;form&gt;
      &lt;div&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/div&gt;
    &lt;/form&gt;
  </pre>

  To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons
  also use the <{input}> element, this time with a <{input/type}> attribute with the value <code>radio</code>. To make the radio buttons work as a group, they are
  given a common name using the <{input/name}> attribute. To group a batch
  of controls together, such as, in this case, the radio buttons, one can use the
  <{fieldset}> element. The title of such a group of controls is given by the first element
  in the <{fieldset}>, which has to be a <{legend}> element.

  <pre highlight="html">
    &lt;form&gt;
      &lt;div&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Size &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  </pre>

  <p class="note">
    Changes from the previous step are highlighted.
  </p>

  To pick toppings, we can use checkboxes. These use the <{input}> element with a <{input/type}> attribute with the value <code>checkbox</code>:

  <pre highlight="html">
    &lt;form&gt;
      &lt;div&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Size &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  </pre>

  The pizzeria for which this form is being written is always making mistakes, so it needs a way
  to contact the customer. For this purpose, we can use form controls specifically for telephone
  numbers (<{input}> elements with their <{input/type}>
  attribute set to <code>tel</code>) and e-mail addresses
  (<{input}> elements with their <{input/type}> attribute set to
  <code>email</code>):

  <pre highlight="html">
    &lt;form&gt;
      &lt;div&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Size &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  </pre>

  We can use an <{input}> element with its <{input/type}>
  attribute set to <code>time</code> to ask for a delivery time. Many
  of these form controls have attributes to control exactly what values can be specified; in this
  case, three attributes of particular interest are <{input/min}>, <{input/max}>, and <{input/step}>. These set the
  minimum time, the maximum time, and the interval between allowed values (in seconds). This
  pizzeria only delivers between 11am and 9pm, and doesn't promise anything better than 15 minute
  increments, which we can mark up as follows:

  <pre highlight="html">
    &lt;form&gt;
      &lt;div&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Size &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;div&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/div&gt;
    &lt;/form&gt;
  </pre>

  The <{textarea}> element can be used to provide a free-form text field. In this
  instance, we are going to use it to provide a space for the customer to give delivery
  instructions:

  <pre highlight="html">
    &lt;form&gt;
      &lt;div&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Size &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;div&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/div&gt;
    &lt;/form&gt;
  </pre>

  Finally, to make the form submittable we use the <{button}> element:

  <pre highlight="html">
    &lt;form&gt;
      &lt;div&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Size &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
      &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;div&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/div&gt;
    &lt;/form&gt;
  </pre>

<h5 id="implementing-the-serverside-processing-for-a-form">Implementing the server-side processing for a form</h5>

  <em>This section is non-normative.</em>

  The exact details for writing a server-side processor are out of scope for this specification.
  For the purposes of this introduction, we will assume that the script at <code>https://pizza.example.com/order.cgi</code> is configured to accept submissions using the
  <code>application/x-www-form-urlencoded</code> format,
  expecting the following parameters sent in an HTTP POST body:

  : <code>custname</code>
  :: Customer's name
  : <code>custtel</code>
  :: Customer's telephone number
  : <code>custemail</code>
  :: Customer's e-mail address
  : <code>size</code>
  :: The pizza size, either <code>small</code>, <code>medium</code>, or <code>large</code>
  : <code>topping</code>
  :: A topping, specified once for each selected topping, with the allowed values being
     <code>bacon</code>, <code>cheese</code>, <code>onion</code>, and <code>mushroom</code>
  : <code>delivery</code>
  :: The requested delivery time
  : <code>comments</code>
  :: The delivery instructions

<h5 id="configuring-a-form-to-communicate-with-a-server">Configuring a form to communicate with a server</h5>

  <em>This section is non-normative.</em>

  <a>Form submissions</a> are exposed to servers in a variety of ways, most commonly as HTTP GET or
  POST requests. To specify the exact method used, the <{form/method}>
  attribute is specified on the <{form}> element. This doesn't specify how the form data is
  encoded, though; to specify that, you use the <{form/enctype}>
  attribute. You also have to specify the <a for="url">URL</a> of the service that will handle the
  submitted data, using the <{form/action}> attribute.

  For each form control you want submitted, you then have to give a name that will be used to
  refer to the data in the submission. We already specified the name for the group of radio buttons;
  the same attribute (<{formelements/name}>) also specifies the submission name.
  Radio buttons can be distinguished from each other in the submission by giving them different
  values, using the <code>value</code> attribute.

  Multiple controls can have the same name; for example, here we give all the checkboxes the same
  name, and the server distinguishes which checkbox was checked by seeing which values are submitted
  with that name — like the radio buttons, they are also given unique values with the <code>value</code> attribute.

  Given the settings in the previous section, this all becomes:

  <pre highlight="html">
&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
  &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

  <p class="note">
    There is no particular significance to the way some of the attributes have their
  values quoted and others don't. The HTML syntax allows a variety of equally valid ways to specify
  attributes, as discussed in [[#syntax]].
  </p>

  For example, if the customer entered "Denise Lawrence" as their name, "555-321-8642" as their
  telephone number, did not specify an e-mail address, asked for a medium-sized pizza, selected the
  Extra Cheese and Mushroom toppings, entered a delivery time of 7pm, and left the delivery
  instructions text field blank, the user agent would submit the following to the online Web
  service:

  <pre>custname=Denise+Lawrence&amp;custtel=555-321-8642&amp;custemail=&amp;size=medium&amp;topping=cheese&amp;topping=mushroom&amp;delivery=19%3A00&amp;comments=</pre>

<h5 id="clientside-form-validation">Client-side form validation</h5>

  <em>This section is non-normative.</em>

  Forms can be annotated in such a way that the user agent will check the user's input before the
  form is submitted. The server still has to verify the input is valid (since hostile users can
  easily bypass the form validation), but it allows the user to avoid the wait incurred by having
  the server be the sole checker of the user's input.

  The simplest annotation is the <code>required</code> attribute,
  which can be specified on <{input}> elements to indicate that the form is not to be
  submitted until a value is given. By adding this attribute to the customer name, pizza size, and
  delivery time fields, we allow the user agent to notify the user when the user submits the form
  without filling in those fields:

  <pre highlight="html">
&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
  &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

  It is also possible to limit the length of the input, using the <{input/maxlength}> attribute. By adding this to the <{textarea}>
  element, we can limit users to 1000 characters, preventing them from writing huge essays to the
  busy delivery drivers instead of staying focused and to the point:

  <pre highlight="html">
&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
  &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments" maxlength=1000&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

  <p class="note">
    When a form is submitted, <code>invalid</code> events are
  fired at each form control that is invalid, and then at the <{form}> element itself. This
  can be useful for displaying a summary of the problems with the form, since typically the browser
  itself will only report one problem at a time.
  </p>

<h5 id="enabling-clientside-automatic-filling-of-form-controls">Enabling client-side automatic filling of form controls</h5>

  <em>This section is non-normative.</em>

  Some browsers attempt to aid the user by automatically filling form controls rather than having
  the user reenter their information each time. For example, a field asking for the user's telephone
  number can be automatically filled with the user's phone number.

  To help the user agent with this, the <{autocompleteelements/autocomplete}>
  attribute can be used to describe the field's purpose. In the case of this form, we have three
  fields that can be usefully annotated in this way: the information about who the pizza is to be
  delivered to. Adding this information looks like this:

  <pre highlight="html">
&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
  &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required autocomplete="shipping name"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel" autocomplete="shipping tel"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail" autocomplete="shipping email"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments" maxlength=1000&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

<h5 id="improving-the-user-experience-on-mobile-devices">Improving the user experience on mobile devices</h5>

  <em>This section is non-normative.</em>

  Some devices, in particular those with on-screen keyboards and those in locales with languages
  with many characters (e.g., Japanese), can provide the user with multiple input modalities. For
  example, when typing in a credit card number the user may wish to only see keys for digits 0-9,
  while when typing in their name they may wish to see a form field that by default capitalizes each
  word.

  Using the <code>inputmode</code> attribute we can select appropriate
  input modalities:

  <pre highlight="html">
&lt;form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi"&gt;
  &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required autocomplete="shipping name" inputmode="latin-name"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel" autocomplete="shipping tel"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail" autocomplete="shipping email"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Size &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size required value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments" maxlength=1000 inputmode="latin-prose"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

<h5 id="the-difference-between-the-field-type-the-autofill-field-name-and-the-input-modality">The difference between the field type, the autofill field name, and the input modality</h5>

  <em>This section is non-normative.</em>

  The <code>type</code>, <{autocompleteelements/autocomplete}>, and <code>inputmode</code> attributes can seem confusingly similar. For instance,
  in all three cases, the string "<code>email</code>" is a valid value. This section
  attempts to illustrate the difference between the three attributes and provides advice suggesting
  how to use them.

  The <{input/type}> attribute on <{input}> elements decides
  what kind of control the user agent will use to expose the field. Choosing between different
  values of this attribute is the same choice as choosing whether to use an <{input}>
  element, a <{textarea}> element, a <{select}> element, a <{keygen}> element, etc.

  The <{autocompleteelements/autocomplete}> attribute, in contrast, describes
  what the value that the user will enter actually represents. Choosing between different values of
  this attribute is the same choice as choosing what the label for the element will be.

  First, consider telephone numbers. If a page is asking for a telephone number from the user,
  the right form control to use is <code>&lt;input type=tel&gt;</code>.
  However, which <{input/autocomplete}> value to use depends on
  which phone number the page is asking for, whether they expect a telephone number in the
  international format or just the local format, and so forth.

  For example, a page that forms part of a checkout process on an e-commerce site for a customer
  buying a gift to be shipped to a friend might need both the buyer's telephone number (in case of
  payment issues) and the friend's telephone number (in case of delivery issues). If the site
  expects international phone numbers (with the country code prefix), this could thus look like
  this:

  <pre highlight="html">
&lt;p&gt;&lt;label&gt;Your phone number: &lt;input type=tel name=custtel autocomplete="billing tel"&gt;&lt;/label&gt;
&lt;p&gt;&lt;label&gt;Recipient's phone number: &lt;input type=tel name=shiptel autocomplete="shipping tel"&gt;&lt;/label&gt;
&lt;p&gt;Please enter complete phone numbers including the country code prefix, as in "+1 555 123 4567".
    </pre>

  But if the site only supports British customers and recipients, it might instead look like this
  (notice the use of <code>tel-national</code> rather than
  <code>tel</code>):

  <pre highlight="html">
&lt;p&gt;&lt;label&gt;Your phone number: &lt;input type=tel name=custtel autocomplete="billing tel-national"&gt;&lt;/label&gt;
&lt;p&gt;&lt;label&gt;Recipient's phone number: &lt;input type=tel name=shiptel autocomplete="shipping tel-national"&gt;&lt;/label&gt;
&lt;p&gt;Please enter complete UK phone numbers, as in "(01632) 960 123".
    </pre>

  Now, consider a person's preferred languages. The right <{input/autocomplete}> value is <code>language</code>. However, there could be a number of
  different form controls used for the purpose: a free text field (<code>&lt;input type=text&gt;</code>), a drop-down list (<code>&lt;select&gt;</code>), radio buttons (<code>&lt;input
  type=radio&gt;</code>), etc. It only depends on what kind of interface is desired.

  The <code>inputmode</code> decides what kind of input modality (e.g.,
  keyboard) to use, when the control is a free-form text field.

  Consider names. If a page just wants one name from the user, then the relevant control is <code>&lt;input type=text&gt;</code>. If the page is asking for the user's
  full name, then the relevant <{input/autocomplete}> value is <code>name</code>. But if the user is Japanese, and the page is asking
  for the user's Japanese name and the user's romanized name, then it would be helpful to the user
  if the first field defaulted to a Japanese input modality, while the second defaulted to a Latin
  input modality (ideally with automatic capitalization of each word). This is where the <code>inputmode</code> attribute can help:

  <pre highlight="html">
&lt;p&gt;&lt;label&gt;Japanese name: &lt;input name="j" type="text" autocomplete="section-jp name" inputmode="kana"&gt;&lt;/label&gt;
&lt;label&gt;Romanized name: &lt;input name="e" type="text" autocomplete="section-en name" inputmode="latin-name"&gt;&lt;/label&gt;
    </pre>

  In this example, the "<code>section-*</code>" keywords in
  the <{input/autocomplete}> attributes' values tell the user agent
  that the two fields expect <em>different</em> names. Without them, the user agent could
  automatically fill the second field with the value given in the first field when the user gave a
  value to the first field.

  <p class="note">
    The "<code>-jp</code>" and "<code>-en</code>" parts of the
  keywords are opaque to the user agent; the user agent cannot guess, from those, that the two names
  are expected to be in Japanese and English respectively.
  </p>

<h5 id="date-time-and-number-formats">Date, time, and number formats</h5>

  <em>This section is non-normative.</em>

  In this pizza delivery example, the times are specified in the format "HH:MM": two digits for
  the hour, in 24-hour format, and two digits for the time. (Seconds could also be specified, though
  they are not necessary in this example.)

  In some locales, however, times are often expressed differently when presented to users. For
  example, in the United States, it is still common to use the 12-hour clock with an am/pm
  indicator, as in "2pm". In France, it is common to separate the hours from the minutes using an
  "h" character, as in "14h00".

  Similar issues exist with dates, with the added complication that even the order of the
  components is not always consistent — for example, in Cyprus the first of February 2003
  would typically be written "1/2/03", while that same date in Japan would typically be written as
  "2003年02月01日" — and even with numbers, where locales differ, for
  example, in what punctuation is used as the decimal separator and the thousands separator.

  It is therefore important to distinguish the time, date, and number formats used in HTML and in
  <a>form submissions</a>, which are always the formats defined in this specification (and based on
  the well-established ISO 8601 standard for computer-readable date and time formats), from the time,
  date, and number formats presented to the user by the browser and accepted as input from the user
  by the browser.

  The format used "on the wire", i.e., in HTML markup and in <a>form submissions</a>, is intended to
  be computer-readable and consistent irrespective of the user's locale. Dates, for instance, are
  always written in the format "YYYY-MM-DD", as in "2003-02-01". Users are not expected to ever see
  this format.

  The time, date, or number given by the page in the wire format is then translated to the user's
  preferred presentation (based on user preferences or on the locale of the page itself), before
  being displayed to the user. Similarly, after the user inputs a time, date, or number using their
  preferred format, the user agent converts it back to the wire format before putting it in the DOM
  or submitting it.

  This allows scripts in pages and on servers to process times, dates, and numbers in a
  consistent manner without needing to support dozens of different formats, while still supporting
  the users' needs.

  <div class="impl">
  <p class="note">
    See also the <a>implementation notes</a> regarding
  localization of form controls.
  </p>
  </div>

<h4 id="form-categories">Categories</h4>

  Mostly for historical reasons, elements in this section fall into several overlapping (but
  subtly different) categories in addition to the usual ones like <a>flow content</a>,
  <a>phrasing content</a>, and <a>interactive content</a>.

  A number of the elements are <dfn lt="form-associated elements|form-associated">form-associated elements</dfn>, which means they can have a <a>form owner</a>.

  <ul class="brief category-list">
    <li><{button}></li>
    <li><{fieldset}></li>
    <li><{input}></li>
    <li><{keygen}></li>
    <li><{label}></li>
    <li><{object}></li>
    <li><{output}></li>
    <li><{select}></li>
    <li><{textarea}></li>
    <li><{img}></li>
  </ul>

  The <a>form-associated elements</a> fall into several
  subcategories:

  <dl>

    <dt><dfn lt="Listed element|Listed elements">Listed elements</dfn></dt>

    <dd>

    Denotes elements that are listed in the <code><var>form</var>.elements</code> and <code><var>fieldset</var>.elements</code> APIs.

    <ul class="brief category-list">
      <li><{button}></li>
      <li><{fieldset}></li>
      <li><{input}></li>
      <li><{keygen}></li>
      <li><{object}></li>
      <li><{output}></li>
      <li><{select}></li>
      <li><{textarea}></li>
    </ul>

    </dd>

    <dt><dfn lt="Submittable element|Submittable elements|submittable">Submittable elements</dfn></dt>

    <dd>

    Denotes elements that can be used for <a>constructing the form data set</a> when a <{form}> element is <a>submitted</a>.

    <ul class="brief category-list">
      <li><{button}></li>
      <li><{input}></li>
      <li><{keygen}></li>
      <li><{object}></li>
      <li><{select}></li>
      <li><{textarea}></li>
    </ul>

    Some <a>submittable elements</a> can be, depending on their
    attributes, <dfn>buttons</dfn>. The prose below defines when an element
    is a button. Some buttons are specifically <dfn lt="submit button|submit buttons">submit
    buttons</dfn>.

    </dd>

    <dt><dfn lt="Resettable element|Resettable elements|resettable">Resettable elements</dfn></dt>

    <dd>

    Denotes elements that can be affected when a <{form}> element is <a>reset</a>.

    <ul class="brief category-list">
      <li><{input}></li>
      <li><{keygen}></li>
      <li><{output}></li>
      <li><{select}></li>
      <li><{textarea}></li>
    </ul>

    </dd>

    <dt><dfn lt="Reassociateable element|Reassociateable elements|reassociateable">Reassociateable elements</dfn></dt>

    <dd>

    Denotes elements that have a <{formelements/form}> content attribute, and a
    matching {{FormIDLAttribute/form}} IDL attribute, that allow authors to specify an
    explicit <a>form owner</a>.

    <ul class="brief category-list">
      <li><{button}></li>
      <li><{fieldset}></li>
      <li><{input}></li>
      <li><{keygen}></li>
      <li><{label}></li>
      <li><{object}></li>
      <li><{output}></li>
      <li><{select}></li>
      <li><{textarea}></li>
    </ul>

    </dd>

  </dl>

  Some elements, not all of them <a>form-associated</a>,
  are categorized as <dfn lt="labelable element|labelable elements|labelable">labelable elements</dfn>. These are elements that
  can be associated with a <{label}> element.

  <ul class="brief category-list">
    <li><{button}></li>
    <li><{input}> (if the <{input/type}> attribute is <em>not</em> in the <a>Hidden</a> state)</li>
    <li><{keygen}></li>
    <li><{meter}></li>
    <li><{output}></li>
    <li><{progress}></li>
    <li><{select}></li>
    <li><{textarea}></li>
  </ul>

  The following table is non-normative and summarizes the above categories of form elements:

  <table class="applies">
    <thead>
      <tr>
        <th></th>
        <th>form-associated</th>
        <th>listed</th>
        <th>submittable</th>
        <th>resettable</th>
        <th>reassociateable</th>
        <th>labelable</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td>can have a form owner</td>
        <td>listed in the {{HTMLFormElement/elements|form.elements}} and {{HTMLFieldSetElement/elements|fieldset.elements}} APIs</td>
        <td>can be used for constructing the form data set when a form element is submitted</td>
        <td>can be affected when a form element is reset</td>
        <td>have a <{formelements/form}> attribute (allows authors to specify an explicit form owner)</td>
        <td>can be associated with a <{label}> element</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td><{input}></td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes (except "hidden")</td>
      </tr>
      <tr>
        <td><{button}></td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td>no</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
      </tr>
      <tr>
        <td><{select}></td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
      </tr>
      <tr>
        <td><{textarea}></td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
      </tr>
      <tr>
        <td><{fieldset}></td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td>no</td>
        <td>no</td>
        <td class="yes">yes</td>
        <td>no</td>
      </tr>
      <tr>
        <td><{output}></td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td>no</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
      </tr>
      <tr>
        <td><{object}></td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td class="yes">yes</td>
        <td>no</td>
        <td class="yes">yes</td>
        <td>no</td>
      </tr>
      <tr>
        <td><{meter}></td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td class="yes">yes</td>
      </tr>
      <tr>
        <td><{progress}></td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td class="yes">yes</td>
      </tr>
      <tr>
        <td><{label}></td>
        <td class="yes">yes</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
      </tr>
      <tr>
        <td><{img}></td>
        <td class="yes">yes</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        <td>no</td>
      </tr>
    </tbody>
  </table>
  <!-- Special thanks to Šime Vidas (https://twitter.com/simevidas) for the table content -->

<h4 id="the-form-element">The <dfn element><code>form</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>flow content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Flow content</a>, but with no <{form}> element descendants.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{form/accept-charset}> - Character encodings to use for [[#forms-form-submission]]</dd>
    <dd><{form/action}> - <a for="url">URL</a> to use for [[#forms-form-submission]]</dd>
    <dd><{form/autocomplete}> - Default setting for autofill feature for controls in the form </dd>
    <dd><{form/enctype}> - Form data set encoding type to use for [[#forms-form-submission]]</dd>
    <dd><{form/method}> - HTTP method to use for [[#forms-form-submission]]</dd>
    <dd><{form/name}> -  Name of form to use in the {{Document/forms|document.forms}} API</dd>
    <dd><{form/novalidate}> - Bypass form control validation for [[#forms-form-submission]]</dd>
    <dd><{form/target}> - <a>browsing context</a> for [[#forms-form-submission]]</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a href="#allowed-aria-roles-states-and-properties">Any role value</a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLFormElement">
        [OverrideBuiltins]
        interface HTMLFormElement : HTMLElement {
          attribute DOMString acceptCharset;
          attribute DOMString action;
          attribute DOMString autocomplete;
          attribute DOMString enctype;
          attribute DOMString encoding;
          attribute DOMString method;
          attribute DOMString name;
          attribute boolean noValidate;
          attribute DOMString target;

          [SameObject] readonly attribute HTMLFormControlsCollection elements;
          readonly attribute unsigned long length;
          getter Element (unsigned long index);
          getter (RadioNodeList or Element) (DOMString name);

          void submit();
          void reset();
          boolean checkValidity();
          boolean reportValidity();
        };
      </pre>
    </dd>
  </dl>

  The <{form}> element <a>represents</a> a collection of <a>form-associated elements</a>, some of which can represent
  editable values that can be submitted to a server for processing.

  The <dfn element-attr for="form"><code>accept-charset</code></dfn> content attribute gives the
  character encodings that are to be used for the submission. If specified, the value must be an
  <a>ordered set of unique space-separated tokens</a> that are <a>ASCII
  case-insensitive</a>, and each token must be an <a>ASCII case-insensitive</a> match for
  one of the <a lt="character encoding">labels</a> of an <a>ASCII-compatible encoding</a>. [[!ENCODING]]

  The <dfn element-attr for="form"><code>name</code></dfn> content attribute represents the
  <{form}>'s name within the {{Document/forms}} collection. The
  value must not be the empty string, and the value must be unique amongst the <{form}>
  elements in the {{Document/forms}} collection that it is in, if any.

  The <{form/autocomplete}> content attribute is an
  <a>enumerated attribute</a>. The attribute has two states. The <dfn attr-value for="form/autocomplete"><code>on</code></dfn> keyword maps to the <dfn state for="form/autocomplete">on</dfn> state, and the <dfn attr-value for="form/autocomplete"><code>off</code></dfn> keyword maps to the <dfn state for="form/autocomplete">off</dfn> state. The attribute may also be omitted. The
  <i>missing value default</i> is the <a state for="form/autocomplete">on</a> state. The <a state for="form/autocomplete">off</a> state indicates that by default, form
  controls in the form will have their <a>autofill field name</a> set to "<code>off</code>"; the <a state for="form/autocomplete">on</a> state indicates that by default, form controls
  in the form will have their <a>autofill field name</a> set to "<code>on</code>".

  The <{form/action}>, <{form/enctype}>, <{form/method}>, <{form/enctype}>, <{form/novalidate}>, and
  <{form/target}> attributes are <a>attributes for form submission</a>.

  <dl class="domintro">

    <dt><var>form</var> . {{HTMLFormElement/elements}}</dt>

    <dd>

    Returns an {{HTMLFormControlsCollection}} of the form controls in the form (excluding image
    buttons for historical reasons).

    </dd>

    <dt><var>form</var> . {{HTMLFormElement/length}}</dt>

    <dd>

    Returns the number of form controls in the form (excluding image buttons for historical
    reasons).

    </dd>

    <dt><var>form</var>[<var>index</var>]</dt>

    <dd>

    Returns the <var>index</var>th element in the form (excluding image buttons for
    historical reasons).

    </dd>

    <dt><var>form</var>[<var>name</var>]</dt>

    <dd>

    Returns the form control (or, if there are several, a {{RadioNodeList}} of the form
    controls) in the form with the given <a>ID</a> or <{formelements/name}> (excluding image buttons for historical reasons); or, if there
    are none, returns the <{img}> element with the given ID.

    Once an element has been referenced using a particular name, that name will continue being
    available as a way to reference that element in this method, even if the element's actual <a>ID</a> or <{formelements/name}> changes, for as long as
    the element remains in the {{Document}}.

    If there are multiple matching items, then a {{RadioNodeList}} object containing all
    those elements is returned.

    </dd>

    <dt><var>form</var> . {{HTMLFormElement/submit()}}</dt>

    <dd>

    Submits the form.

    </dd>

    <dt><var>form</var> . {{HTMLFormElement/reset()}}</dt>

    <dd>

    Resets the form.

    </dd>

    <dt><var>form</var> . {{HTMLFormElement/checkValidity()}}</dt>

    <dd>

    Returns true if the form's controls are all valid; otherwise, returns false.

    </dd>

    <dt><var>form</var> . {{HTMLFormElement/reportValidity()}}</dt>

    <dd>

    Returns true if the form's controls are all valid; otherwise, returns false and informs the user.

    </dd>

  </dl>

  <div class="impl">

  The <dfn attribute for="HTMLFormElement"><code>autocomplete</code></dfn> IDL attribute must
  <a>reflect</a> the content attribute of the same name, <a>limited to only known
  values</a>.

  The <dfn attribute for="HTMLFormElement"><code>name</code></dfn> IDL attribute must <a>reflect</a>
  the content attribute of the same name.

  The <dfn attribute for="HTMLFormElement"><code>acceptCharset</code></dfn> IDL attribute must
  <a>reflect</a> the <{form/accept-charset}> content attribute.

  <hr />

  The <dfn attribute for="HTMLFormElement"><code>elements</code></dfn> IDL attribute must return an
  {{HTMLFormControlsCollection}} rooted at the <{form}> element's <a>home
  subtree</a>'s <a>root element</a>, whose filter matches <a>listed elements</a> whose <a>form owner</a> is the
  <{form}> element, with the exception of <{input}> elements whose <{input/type}> attribute is in the <a element-state for="input">image button</a> state, which must, for historical reasons, be
  excluded from this particular collection.

  The <dfn attribute for="HTMLFormElement"><code>length</code></dfn> IDL attribute must return the number
  of nodes <a>represented</a> by the <code>elements</code> collection.

  The <a>supported property indices</a> at any instant are the indices supported by the
  object returned by the <code>elements</code> attribute at that
  instant.

  When a <{form}> element is <dfn>indexed for indexed property
  retrieval</dfn>, the user agent must return the value returned by the <code>item</code> method on the <code>elements</code> collection, when invoked with the given index as its
  argument.

  <hr />

  Each <{form}> element has a mapping of names to elements called the <dfn>past names
  map</dfn>. It is used to persist names of controls even when they change names.

  The <a spec="webidl">supported property names</a> consist of the names obtained from the following
  algorithm, in the order obtained from this algorithm:

  <ol>

    <li>Let <var>sourced names</var> be an initially empty ordered list of tuples
    consisting of a string, an element, a source, where the source is either <i>id</i>, <i>name</i>,
    or <i>past</i>, and, if the source is <i>past</i>, an age.</li>

    <li>

    For each <a>listed element</a> <var>candidate</var>
    whose <a>form owner</a> is the <{form}> element, with the exception of any
    <{input}> elements whose <{input/type}> attribute is in the
    <a element-state for="input">image button</a> state, run these substeps:

    <ol>

      <li>If <var>candidate</var> has an <code>id</code> attribute, add
      an entry to <var>sourced names</var> with that <code>id</code>
      attribute's value as the string, <var>candidate</var> as the element, and <i>id</i> as
      the source.</li>

      <li>If <var>candidate</var> has a <{input/name}> attribute,
      add an entry to <var>sourced names</var> with that <{input/name}> attribute's value as the string, <var>candidate</var>
      as the element, and <i>name</i> as the source.</li>

    </ol>

    </li>

    <li>

    For each <{img}> element <var>candidate</var> whose <a>form owner</a>
    is the <{form}> element, run these substeps:

    <ol>

      <li>If <var>candidate</var> has an <code>id</code> attribute, add
      an entry to <var>sourced names</var> with that <code>id</code>
      attribute's value as the string, <var>candidate</var> as the element, and <i>id</i> as
      the source.</li>

      <li>If <var>candidate</var> has a <{img/name}> attribute,
      add an entry to <var>sourced names</var> with that <{img/name}> attribute's value as the string, <var>candidate</var>
      as the element, and <i>name</i> as the source.</li>

    </ol>

    </li>

    <li>

    For each entry <var>past entry</var> in the <a>past names map</a> add an entry
    to <var>sourced names</var> with the <var>past entry</var>'s name as the
    string, <var>past entry</var>'s element as the element, <i>past</i> as the source, and
    the length of time <var>past entry</var> has been in the <a>past names map</a> as
    the age.

    </li>

    <li>Sort <var>sourced names</var> by <a>tree order</a> of the element entry of
    each tuple, sorting entries with the same element by putting entries whose source is <i>id</i>
    first, then entries whose source is <i>name</i>, and finally entries whose source is <i>past</i>,
    and sorting entries with the same element and source by their age, oldest first.</li>

    <li>Remove any entries in <var>sourced names</var> that have the empty string as
    their name.</li>

    <li>Remove any entries in <var>sourced names</var> that have the same name as an
    earlier entry in the map.</li>

    <li>Return the list of names from <var>sourced names</var>, maintaining their
    relative order.</li>

  </ol>

  The properties exposed in this way must be <a>unenumerable</a>.

  When a <{form}> element is <dfn>indexed for named property
  retrieval</dfn>, the user agent must run the following steps:

  <ol>

    <li>Let <var>candidates</var> be a <a>live</a> <code>RadioNodeList</code>
    object containing all the <a>listed elements</a> whose <a>form
    owner</a> is the <{form}> element that have either an <code>id</code>
    attribute or a <{formelements/name}> attribute equal to <var>name</var>, with the exception of <{input}> elements whose <{input/type}> attribute is in the <a element-state for="input">Image Button</a> state, in <a>tree order</a>.</li>

    <li>If <var>candidates</var> is empty, let <var>candidates</var> be a
    <a>live</a> <code>RadioNodeList</code> object containing all the <{img}> elements
    that are descendants of the <{form}> element and that have either an <code>id</code> attribute or a <{formelements/name}> attribute equal
    to <var>name</var>, in <a>tree order</a>.</li>

    <li>If <var>candidates</var> is empty, <var>name</var> is the name of one of
    the entries in the <{form}> element's <a>past names map</a>: return the object
    associated with <var>name</var> in that map.</li>

    <li>If <var>candidates</var> contains more than one node, return <var>candidates</var> and abort these steps.</li>

    <li>Otherwise, <var>candidates</var> contains exactly one node. Add a mapping from
    <var>name</var> to the node in <var>candidates</var> in the <{form}>
    element's <a>past names map</a>, replacing the previous entry with the same name, if
    any.</li>

    <li>Return the node in <var>candidates</var>.</li>

  </ol>

  If an element listed in a <{form}> element's <a>past names map</a> changes
  <a>form owner</a>, then its entries must be removed from that map.

  <hr />

  The <dfn method for="HTMLFormElement"><code>submit()</code></dfn> method, when invoked, must <a>submit</a> the <{form}> element from the <{form}>
  element itself, with the <var>submitted from {{HTMLFormElement/submit()}} method</var> flag set.

  The <dfn method for="HTMLFormElement"><code>reset()</code></dfn> method, when invoked, must run the
  following steps:

  <ol>

    <li>If the <{form}> element is marked as <i>locked for reset</i>, then abort these
    steps.</li>

    <li>Mark the <{form}> element as <dfn>locked for reset</dfn>.</li>

    <li><a>Reset</a> the <{form}> element.</li>

    <li>Unmark the <{form}> element as <i>locked for reset</i>.</li>

  </ol>

  If the <dfn method for="HTMLFormElement"><code>checkValidity()</code></dfn> method is
  invoked, the user agent must <a>statically validate the constraints</a> of the
  <{form}> element, and return true if the constraint validation return a <i>positive</i>
  result, and false if it returned a <i>negative</i> result.

  If the <dfn method for="HTMLFormElement"><code>reportValidity()</code></dfn> method is
  invoked, the user agent must <a>interactively validate the constraints</a> of the
  <{form}> element, and return true if the constraint validation return a <i>positive</i>
  result, and false if it returned a <i>negative</i> result.

  </div>

  <div class="example">
    This example shows two search forms:

    <pre highlight="html">
&lt;form action="https://www.google.com/search" method="get"&gt;
  &lt;label&gt;Google: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
&lt;/form&gt;
&lt;form action="https://www.bing.com/search" method="get"&gt;
  &lt;label&gt;Bing: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
&lt;/form&gt;
    </pre>

  </div>

<h4 id="the-label-element">The <dfn element><code>label</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd><a>Interactive content</a>.</dd>
    <dd><a>Reassociateable</a> <a>form-associated element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Phrasing content</a>, but with no descendant <a>labelable elements</a> unless it is the element's <a>labeled control</a>, and no descendant <{label}> elements.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissable</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{label/for}> - Associate the label with form control</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLLabelElement">
        interface HTMLLabelElement : HTMLElement {
          readonly attribute HTMLFormElement? form;
          attribute DOMString htmlFor;
          readonly attribute HTMLElement? control;
        };
      </pre>
    </dd>
  </dl>

  The <{label}> element <a>represents</a> a caption in a user interface. The
  caption can be associated with a specific form control<span class="impl">, known as the
  <{label}> element's <dfn>labeled control</dfn></span>, either using the <{label/for}> attribute,
  or by putting the form control inside the <{label}> element itself.

  <div class="impl">

  Except where otherwise specified by the following rules, a <{label}> element has no
  <a>labeled control</a>.

  </div>

  The <dfn element-attr for="label"><code>for</code></dfn> attribute may be specified to indicate a
  form control with which the caption is to be associated. If the attribute is specified, the
  attribute's value must be the <a>ID</a> of a <a>labelable element</a> in the same {{Document}} as the
  <{label}> element. <span class="impl">If the attribute is specified and there is an
  element in the {{Document}} whose <a>ID</a> is equal to the
  value of the <{label/for}> attribute, and the first such element is a
  <a>labelable element</a>, then that element is the <{label}>
  element's <a>labeled control</a>.</span>

<div class="example">

  The following example shows the use of a <{label/for}> attribute, to associate <{label}>s
  which do not contain the element they label.

  <pre highlight="html">
&lt;form&gt;
  &lt;table&gt;
    &lt;caption&gt;Example of using <{label/for}> with <{label}>&lt;/caption&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;label for="name"&gt;Customer name: &lt;/label&gt;&lt;/th&gt;
      &lt;td&gt;&lt;input name="name" id="name"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/form&gt;
    </pre>
<p>Note that the <code>id</code> attribute is required to associate the <{label/for}> attribute,
while the <{label/name}> attribute is required so the value of the input will be submitted as
part of the form.</p>
</div>
  <div class="impl">

  If the <{label/for}> attribute is not specified, but the
  <{label}> element has a <a>labelable element</a> descendant,
  then the first such descendant in <a>tree order</a> is the <{label}> element's
  <a>labeled control</a>.

  The <{label}> element's <a>activation behavior</a> should match the platform's label
  behavior. Similarly, any additional presentation hints should match the platform's
  label presentation.

  <div class="example">
    On many platforms activating a checkbox label checks the checkbox, while activating a
    text input's label focuses the input. Clicking the <{label}> "Lost" in the following
    snippet could trigger the user agent to <a>run synthetic click activation steps</a>
    on the checkbox, as if the element itself had been triggered by the user, while clicking
    the <{label}> "Where?" would <a>queue a task</a> that runs the <a>focusing steps</a>
    for the element to the text input:

    <pre highlight="html">
&lt;label&gt;&lt;input type="checkbox" name="lost"&gt; Lost&lt;/label&gt;&lt;br&gt; &lt;label&gt;Where? &lt;input type="text" name="where"&gt;&lt;/label&gt;
    </pre>

  </div>

  If a <{label}> element has <a>interactive content</a> other than its <a>labeled control</a>, the <a>activation behavior</a> of the <{label}> element for events targeted
  at those <a>interactive content</a> descendants and any
  descendants of those must be to do nothing.

  <div class="example">
  <p>In the following example, clicking on the link does not toggle the checkbox, even if the platform normally toggles a checkbox when clicking on a label. Instead, clicking the link triggers the normal <a>activation behavior</a> of following the link.</p>
  <pre highlight="html">
  &lt;!-- bad example - link inside label reduces checkbox activation area --&gt;
  &lt;label&gt;&lt;input type=checkbox name=tac&gt;I agree to &lt;a href="tandc.html"&gt;the terms and conditions&lt;/a&gt;&lt;/label&gt;
    </pre>
  </div>
  </div>

 <br>
  <p class="note">
  The ability to click or press a <{label}> to trigger an event on a control provides
  usability and accessibility benefits by increasing the <em>hit area</em> of a control, making it easier for a user to operate.
  These benefits may be lost or reduced, if the <{label}> element contains an element with its own activation
  behavior, such as a link:

  <div class="example">
  <pre highlight="html">
  &lt;!-- bad example - all label text inside the link reduces activation area to checkbox only --&gt;
  &lt;label&gt;&lt;input type=checkbox name=tac&gt;&lt;a href="tandc.html"&gt;I agree to the terms and conditions&lt;/a&gt;&lt;/label&gt;
    </pre>

  The usability and accessibility benefits can be maintained by placing such elements outside the <{label}> element:

  <pre highlight="html">
  &lt;!-- good example - link outside label means checkbox activation area includes the checkbox and all the label text --&gt;
  &lt;label&gt;&lt;input type=checkbox name=tac&gt;I agree to the terms and conditions&lt;/label&gt;
(read &lt;a href="tandc.html"&gt;Terms and Conditions&lt;/a&gt;)
    </pre></div>
  </p>

  <div class="example">
    The following example shows three form controls each with a label, two of which have small
    text showing the right format for users to use.

    <pre highlight="html">
&lt;p&gt;&lt;label&gt;Full name: &lt;input name=fn&gt; &lt;small&gt;Format: First Last&lt;/small&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Age: &lt;input name=age type=number min=0&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Post code: &lt;input name=pc&gt; &lt;small&gt;Format: AB12 3CD&lt;/small&gt;&lt;/label&gt;&lt;/p&gt;
    </pre>

  </div>

  <dl class="domintro">

    <dt><var>label</var> . <code>control</code></dt>

    <dd>

    Returns the form control that is associated with this element.

    </dd>

  </dl>

  <div class="impl">

  The <dfn attribute for="HTMLLabelElement"><code>htmlFor</code></dfn> IDL attribute must
  <a>reflect</a> the <{label/for}> content attribute.

  The <dfn attribute for="HTMLLabelElement"><code>control</code></dfn> IDL attribute must return the
  <{label}> element's <a>labeled control</a>, if any, or null if there isn't one.

  </div>

  <hr />

  <dl class="domintro">

    <dt><var>control</var> . <code>labels</code></dt>

    <dd>

    Returns a <code>NodeList</code> of all the <{label}> elements that the form control
    is associated with.

    </dd>

  </dl>

  <div class="impl">

  <a>Labelable elements</a> have a <code>NodeList</code> object
  associated with them that represents the list of <{label}> elements, in <a>tree
  order</a>, whose <a>labeled control</a> is the element in question. The
  <dfn attribute for="HTMLLabelElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLProgressElement,HTMLMeterElement"><code>labels</code></dfn>
  IDL attribute of <a>labelable elements</a>, on getting, must return that
  <code>NodeList</code> object.

  </div>

<h4 id="the-input-element">The <dfn element><code>input</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd>If the <{input/type}> attribute is <em>not</em> in the <a>Hidden</a> state: <a>interactive content</a>.</dd>
    <dd>If the <{input/type}> attribute is <em>not</em> in the <a>Hidden</a> state: <a lt="listed element">listed</a>, <a>labelable</a>, <a>submittable</a>, <a>resettable</a>, and <a>reassociateable</a> <a>form-associated element</a>.</dd>
    <dd>If the <{input/type}> attribute is in the <a>Hidden</a> state: <a lt="listed element">listed</a>, <a>submittable</a>, <a>resettable</a>, and <a>reassociateable</a> <a>form-associated element</a>.</dd>
    <dd>If the <{input/type}> attribute is <em>not</em> in the <a>Hidden</a> state: <a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Nothing</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>No <a>end tag</a></dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{input/accept}> - Hint for expected file type in <a element-state for="input">file upload controls</a></dd>
    <dd><{input/alt}> - Replacement text for use when images are not available</dd>
    <dd><{input/autocomplete}> - Hint for form autofill feature</dd>
    <dd><{input/autofocus}> - Automatically focus the form control when the page is loaded</dd>
    <dd><{input/checked}> - Whether the command or control is checked</dd>
    <dd><{input/dirname}> - Name of form field to use for sending the element's <a>directionality</a> in [[#forms-form-submission]]</dd>
    <dd><{input/disabled}> - Whether the form control is disabled</dd>
    <dd><{input/form}> - Associates the control with a <{form}> element</dd>
    <dd><{input/formaction}> - <a for="url">URL</a> to use for [[#forms-form-submission]]</dd>
    <dd><{input/formenctype}> - Form data set encoding type to use for [[#forms-form-submission]]</dd>
    <dd><{input/formmethod}> - HTTP method to use for [[#forms-form-submission]]</dd>
    <dd><{input/formnovalidate}> - Bypass form control validation for [[#forms-form-submission]]</dd>
    <dd><{input/formtarget}> - <a>browsing context</a> for [[#forms-form-submission]]</dd>
    <dd><{input/height}> - Vertical dimension</dd>
    <dd><{input/inputmode}> - Hint for selecting an input modality</dd>
    <dd><{input/list}> - List of autocomplete options</dd>
    <dd><{input/max}> - Maximum value</dd>
    <dd><{input/maxlength}> - Maximum length of value</dd>
    <dd><{input/min}> - Minimum value</dd>
    <dd><{input/minlength}> - Minimum length of value</dd>
    <dd><{input/multiple}> - Whether to allow multiple values</dd>
    <dd><{input/name}> - Name of form control to use for [[#forms-form-submission]] and in the {{HTMLFormElement/elements|form.elements}} API </dd>
    <dd><{input/pattern}> - Pattern to be matched by the form control's value</dd>
    <dd><{input/placeholder}> - User-visible label to be placed within the form control</dd>
    <dd><{input/readonly}> - Whether to allow the value to be edited by the user</dd>
    <dd><{input/required}> - Whether the control is required for [[#forms-form-submission]]</dd>
    <dd><{input/size}> - Size of the control</dd>
    <dd><{input/src}> - Address of the resource</dd>
    <dd><{input/step}> - Granularity to be matched by the form control's value</dd>
    <dd><{input/type}> - Type of form control</dd>
    <dd><{input/value}> - Value of the form control</dd>
    <dd><{input/width}> - Horizontal dimension</dd>
    <dd>Also, the <{input/title}> attribute has special semantics on this element
    when used in conjunction with the <{input/pattern}> attribute.</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>Depends upon <a>state of the <code>type</code> attribute</a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLInputElement">
        interface HTMLInputElement : HTMLElement {
          attribute DOMString accept;
          attribute DOMString alt;
          attribute DOMString autocomplete;
          attribute boolean autofocus;
          attribute boolean defaultChecked;
          attribute boolean checked;
          attribute DOMString dirName;
          attribute boolean disabled;
          readonly attribute HTMLFormElement? form;
          readonly attribute FileList? files;
          attribute DOMString formAction;
          attribute DOMString formEnctype;
          attribute DOMString formMethod;
          attribute boolean formNoValidate;
          attribute DOMString formTarget;
          attribute unsigned long height;
          attribute boolean indeterminate;
          attribute DOMString inputMode;
          readonly attribute HTMLElement? list;
          attribute DOMString max;
          attribute long maxLength;
          attribute DOMString min;
          attribute long minLength;
          attribute boolean multiple;
          attribute DOMString name;
          attribute DOMString pattern;
          attribute DOMString placeholder;
          attribute boolean readOnly;
          attribute boolean required;
          attribute unsigned long size;
          attribute DOMString src;
          attribute DOMString step;
          attribute DOMString type;
          attribute DOMString defaultValue;
          [TreatNullAs=EmptyString] attribute DOMString value;
          attribute object? valueAsDate;
          attribute unrestricted double valueAsNumber;
          attribute unsigned long width;

          void stepUp(optional long n = 1);
          void stepDown(optional long n = 1);

          readonly attribute boolean willValidate;
          readonly attribute ValidityState validity;
          readonly attribute DOMString validationMessage;
          boolean checkValidity();
          boolean reportValidity();
          void setCustomValidity(DOMString error);

          [SameObject] readonly attribute NodeList labels;

          void select();
          attribute unsigned long selectionStart;
          attribute unsigned long selectionEnd;
          attribute DOMString selectionDirection;
          void setRangeText(DOMString replacement);
          void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
          void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
        };
      </pre>
    </dd>
  </dl>

  The <{input}> element <a>represents</a> a typed data field, usually with a form
  control to allow the user to edit the data.

  The <dfn element-attr for="input"><code>type</code></dfn> attribute controls the data type of the
  element. It is an <a>enumerated attribute</a>. The data type is used to select the control to
  use for the <{input}>. Some data types allow either a text field or combo box control to be used,
  based on the absence or presence of a <code>list</code> attribute on the element.
  The following table lists the keywords and states for the attribute — the keywords in the
  left column map to the state, data type and control(s) in the cells on the same row.

  <table id="attr-input-type-keywords">
    <thead>
    <tr>
      <th> Keyword
      </th><th> State
      </th><th> Data type
      </th><th> Control type
    </th></tr></thead><tbody>
    <tr>
      <td> <dfn attr-value for="input/type"><code>hidden</code></dfn>
      </td><td> <a element-state for="input">Hidden</a>
      </td><td> An arbitrary string
      </td><td> n/a
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>text</code></dfn>
      </td><td> <a element-state for="input">Text</a>
      </td><td> Text with no line breaks
      </td><td> A text field or combo box
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>search</code></dfn>
      </td><td> <a element-state for="input">Search</a>
      </td><td> Text with no line breaks
      </td><td> Search field or combo box
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>tel</code></dfn>
      </td><td> <a element-state for="input">Telephone</a>
      </td><td> Text with no line breaks
      </td><td> A text field or combo box
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>url</code></dfn>
      </td><td> <a element-state for="input">URL</a>
      </td><td> An absolute URL
      </td><td> A text field or combo box
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>email</code></dfn>
      </td><td> <a element-state for="input">E-mail</a>
      </td><td> An e-mail address or list of e-mail addresses
      </td><td> A text field or combo box
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>password</code></dfn>
      </td><td> <a element-state for="input">Password</a>
      </td><td> Text with no line breaks (sensitive information)
      </td><td> A text field that obscures data entry
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>datetime</code></dfn>
      </td><td> <a element-state for="input">Date and Time</a>
      </td><td> A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC
      </td><td> A date and time control
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>date</code></dfn>
      </td><td> <a element-state for="input">Date</a>
      </td><td> A date (year, month, day) with no time zone
      </td><td> A date control
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>month</code></dfn>
      </td><td> <a element-state for="input">Month</a>
      </td><td> A date consisting of a year and a month with no time zone
      </td><td> A month control
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>week</code></dfn>
      </td><td> <a element-state for="input">Week</a>
      </td><td> A date consisting of a week-year number and a week number with no time zone
      </td><td> A week control
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>time</code></dfn>
      </td><td> <a element-state for="input">Time</a>
      </td><td> A time (hour, minute, seconds, fractional seconds) with no time zone
      </td><td> A time control
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>number</code></dfn>
      </td><td> <a element-state for="input">Number</a>
      </td><td> A numerical value
      </td><td> A text field or combo box or spinner control
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>range</code></dfn>
      </td><td> <a element-state for="input">Range</a>
      </td><td> A numerical value, with the extra semantic that the exact value is not important
      </td><td> A slider control or similar
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>color</code></dfn>
      </td><td> <a element-state for="input">Color</a>
      </td><td> An sRGB color with 8-bit red, green, and blue components
      </td><td> A color well
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>checkbox</code></dfn>
      </td><td> <a element-state for="input">Checkbox</a>
      </td><td> A set of zero or more values from a predefined list
      </td><td> A checkbox
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>radio</code></dfn>
      </td><td> <a element-state for="input">Radio Button</a>
      </td><td> An enumerated value
      </td><td> A radio button
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>file</code></dfn>
      </td><td> <a element-state for="input">File Upload</a>
      </td><td> Zero or more files each with a <a>MIME type</a> and optionally a file name
      </td><td> A label and a button
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>submit</code></dfn>
      </td><td> <a element-state for="input">submit button</a>
      </td><td> An enumerated value, with the extra semantic that it must be the last value selected and initiates <a>form submission</a>
      </td><td> A button
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>image</code></dfn>
      </td><td> <a element-state for="input">image button</a>
      </td><td> A coordinate, relative to a particular image's size, with the extra semantic that it must
      be the last value selected and initiates <a>form submission</a>
      </td><td> Either a clickable image, or a button
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>reset</code></dfn>
      </td><td> <a element-state for="input">reset button</a>
      </td><td> n/a
      </td><td> A button
    </td></tr><tr>
      <td> <dfn attr-value for="input/type"><code>button</code></dfn>
      </td><td> <a element-state for="input">Button</a>
      </td><td> n/a
      </td><td> A button
  </td></tr></tbody></table>

  The <i>missing value default</i> is the <a>Text</a>
  state.

  Which of the
    <{input/accept}>,
    <{input/alt}>,
    <{input/autocomplete}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}> content attributes, the
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/valueAsDate}},
    {{HTMLInputElement/valueAsNumber}}, and
    {{HTMLInputElement/list}} IDL attributes, the
    {{HTMLInputElement/select()}} method, the
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}}, and
    {{HTMLInputElement/selectionDirection}}, IDL attributes, the
    {{HTMLInputElement/setRangeText()}} and
    {{HTMLInputElement/setSelectionRange()}} methods, the
    {{HTMLInputElement/stepUp()}} and
    {{HTMLInputElement/stepDown()}} methods, and the
    <code>input</code> and
    <code>change</code> events <dfn>apply</dfn> to an
    <{input}> element depends on the state of its
    <{input/type}> attribute.
  The subsections that define each type also clearly define in normative "bookkeeping" sections
  which of these feature apply, and which <dfn lt="does not apply|do not apply|doesn't apply|don't apply">do not apply</dfn>, to each type. The behavior of
  these features depends on whether they apply or not, as defined in their various sections (q.v.
  for <a>Content attributes</a>, for <a>APIs</a>, for <a>events</a>).

  The following table <span class="impl">is non-normative and</span> summarizes which of those
  content attributes, IDL attributes, methods, and events <a>apply</a> to each state:

  <table class="applies">
    <thead>
    <tr>
      <th>
      </th><th> <a element-state for="input">Hidden</a>
      </th><th> <a element-state for="input">Text</a>,
          <a element-state for="input">Search</a>
      </th><th> <a element-state for="input">URL</a>,
          <a element-state for="input">Telephone</a>
      </th><th> <a element-state for="input">E-mail</a>
      </th><th> <a element-state for="input">Password</a>
      </th><th> <a element-state for="input">Date and Time</a>,
          <a element-state for="input">Date</a>,
          <a element-state for="input">Month</a>,
          <a element-state for="input">Week</a>,
          <a element-state for="input">Time</a>

      </th><th> <a element-state for="input">Number</a>
      </th><th> <a element-state for="input">Range</a>
      </th><th> <a element-state for="input">Color</a>
      </th><th> <a element-state for="input">Checkbox</a>,
          <a element-state for="input">Radio Button</a>
      </th><th> <a element-state for="input">File Upload</a>
      </th><th> <a element-state for="input">submit button</a>
      </th><th> <a element-state for="input">image button</a>
      </th><th> <a element-state for="input">reset button</a>,
          <a element-state for="input">Button</a>

    </th></tr></thead><tbody>
    <tr>

      <th scope="rowgroup" colspan="15">Content attributes

    </th></tr><tr>
      <th> <{input/accept}>
      </th><td class="no"> · <!-- Hidden -->
      </td><td class="no"> · <!-- Text -->

      </td><td class="no"> · <!-- URL, Telephone -->
      </td><td class="no"> · <!-- E-mail -->
      </td><td class="no"> · <!-- Password -->
      </td><td class="no"> · <!-- Date and Time, Date, Month, Week, Time -->

      </td><td class="no"> · <!-- Number -->
      </td><td class="no"> · <!-- Range -->
      </td><td class="no"> · <!-- Color -->
      </td><td class="no"> · <!-- Checkbox, Radio -->

      </td><td class="yes"> Yes <!-- File -->
      </td><td class="no"> · <!-- Submit -->
      </td><td class="no"> · <!-- Image -->
      </td><td class="no"> · <!-- Reset, Button -->

    </td></tr><tr>
      <th> <{input/alt}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/autocomplete}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/checked}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/dirname}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/formaction}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/formenctype}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/formmethod}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/formnovalidate}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/formtarget}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/height}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/inputmode}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/list}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/max}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/maxlength}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/min}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/minlength}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/multiple}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/pattern}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/placeholder}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/readonly}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/required}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/size}>
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/src}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/step}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <{input/width}>
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

    </td></tr></tbody><tbody>
    <tr>
      <th scope="rowgroup" colspan="15">IDL attributes and methods

    </th></tr><tr>
      <th> {{HTMLInputElement/checked}}
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/files}}
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr class="impl">
      <th> {{HTMLInputElement/value}}
      </th><td class="yes"> <a mode for="input">default</a>
      </td><td class="yes"> <a mode for="input">value</a>

      </td><td class="yes"> <a mode for="input">value</a>
      </td><td class="yes"> <a mode for="input">value</a>
      </td><td class="yes"> <a mode for="input">value</a>
      </td><td class="yes"> <a mode for="input">value</a>

      </td><td class="yes"> <a mode for="input">value</a>
      </td><td class="yes"> <a mode for="input">value</a>
      </td><td class="yes"> <a mode for="input">value</a>
      </td><td class="yes"> <a mode for="input">default/on</a>

      </td><td class="yes"> <a mode for="input">filename</a>
      </td><td class="yes"> <a mode for="input">default</a>
      </td><td class="yes"> <a mode for="input">default</a>
      </td><td class="yes"> <a mode for="input">default</a>

    </td></tr><tr>
      <th> {{HTMLInputElement/valueAsDate}}
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/valueAsNumber}}
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/list}}
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/select()}}
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes&dagger;
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes&dagger;
      </td><td class="yes"> Yes&dagger;

      </td><td class="yes"> Yes&dagger;
      </td><td class="no"> ·
      </td><td class="Yes"> Yes&dagger;
      </td><td class="no"> ·

      </td><td class="yes"> Yes&dagger;
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/selectionStart}}
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/selectionEnd}}
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/selectionDirection}}
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/setRangeText()}}
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/setSelectionRange()}}
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="yes"> Yes
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/stepDown()}}
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> {{HTMLInputElement/stepUp()}}
      </th><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·

      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr></tbody><tbody>
    <tr>
      <th scope="rowgroup" colspan="15">Events

    </th></tr><tr>
      <th> <code>input</code> event
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

    </td></tr><tr>
      <th> <code>change</code> event
      </th><td class="no"> ·
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes
      </td><td class="yes"> Yes

      </td><td class="yes"> Yes
      </td><td class="no"> ·
      </td><td class="no"> ·
      </td><td class="no"> ·

  </td></tr></tbody></table>

  <p class="tablenote">
    <small>&dagger; If the control has no text field, the {{HTMLInputElement/select()}} method
    results in a no-op, with no "<code>InvalidStateError</code>" <code>DOMException</code>.</small>
  </p>

  Some states of the <{input/type}> attribute define a <dfn>value sanitization algorithm</dfn>.

  Each <{input}> element has a <a for="forms">value</a>, which is
  exposed by the {{HTMLInputElement/value}} IDL attribute. Some states define an
  <dfn>algorithm to convert a string to a number</dfn>,
  an <dfn>algorithm to convert a number to a
  string</dfn>, an <dfn>algorithm to convert a string to a
  {{Date}} object</dfn>, and an <dfn>algorithm to
  convert a {{Date}} object to a string</dfn>, which are used by <{input/max}>, <{input/min}>, <{input/step}>, {{HTMLInputElement/valueAsDate}},
  {{HTMLInputElement/valueAsNumber}},
  {{HTMLInputElement/stepDown()}}, and {{HTMLInputElement/stepUp()}}.

  Each <{input}> element has a boolean <dfn for="input">dirty value flag</dfn>. The <a for="input">dirty value flag</a> must be
  initially set to false when the element is created, and must be set to true whenever the user
  interacts with the control in a way that changes the <a for="forms">value</a>.
  (It is also set to true when the value is programmatically changed, as described in the definition
  of the {{HTMLInputElement/value}} IDL attribute.)

  The <dfn element-attr for="input"><code>value</code></dfn> content attribute gives the default
  <a for="forms">value</a> of the <{input}> element. <span class="impl">When the <{input/value}> content attribute is added, set,
  or removed, if the control's <a for="input">dirty value flag</a>
  is false, the user agent must set the <a for="forms">value</a> of the element
  to the value of the <{input/value}> content attribute, if there is
  one, or the empty string otherwise, and then run the current <a>value sanitization
  algorithm</a>, if one is defined.</span>

  <div class="impl">

  Each <{input}> element has a <a for="forms">checkedness</a>,
  which is exposed by the {{HTMLInputElement/checked}} IDL attribute.

  Each <{input}> element has a boolean <dfn>dirty checkedness flag</dfn>. When it is true, the
  element is said to have a <dfn><i>dirty checkedness</i></dfn>.
  The <a>dirty checkedness flag</a> must be initially
  set to false when the element is created, and must be set to true whenever the user interacts with
  the control in a way that changes the <a for="forms">checkedness</a>.

  </div>

  The <dfn element-attr for="input"><code>checked</code></dfn> content attribute is a
  <a>boolean attribute</a> that gives the default <a for="forms">checkedness</a> of the <{input}> element. <span class="impl">When the <{input/checked}> content attribute is added,
  if the control does not have <i>dirty checkedness</i>, the
  user agent must set the <a for="forms">checkedness</a> of the element to
  true; when the <{input/checked}> content attribute is removed, if
  the control does not have <i>dirty checkedness</i>, the user
  agent must set the <a for="forms">checkedness</a> of the element to
  false.</span>

  <div class="impl">

  The <a>reset algorithm</a> for <{input}>
  elements is to set the <a for="input">dirty value flag</a> and
  <a>dirty checkedness flag</a> back to false, set
  the <a for="forms">value</a> of the element to the value of the <{input/value}> content attribute, if there is one, or the empty string
  otherwise, set the <a for="forms">checkedness</a> of the element to true if
  the element has a <{input/checked}> content attribute and false if
  it does not, empty the list of <a>selected
  files</a>, and then invoke the <a>value sanitization algorithm</a>, if the <{input/type}> attribute's current state defines one.

  Each <{input}> element can be <i>mutable</i>. Except where
  otherwise specified, an <{input}> element is always <i>mutable</i>. Similarly, except where otherwise specified, the user
  agent should not allow the user to modify the element's <a for="forms">value</a> or <a for="forms">checkedness</a>.

  When an <{input}> element is disabled, it is not <i>mutable</i>.

  <p class="note">
    The <{input/readonly}> attribute can also in some
  cases (e.g., for the <a element-state for="input">Date</a> state, but not the <a element-state for="input">Checkbox</a> state) stop an <{input}> element from
  being <i>mutable</i>.
  </p>

  The <a>cloning steps</a> for <{input}> elements
  must propagate the <a for="forms">value</a>, <a for="input">dirty value flag</a>, <a for="forms">checkedness</a>, and <a>dirty checkedness flag</a> from the node being cloned
  to the copy.

  <hr />

  When an <{input}> element is first created, the element's rendering and behavior must
  be set to the rendering and behavior defined for the <{input/type}>
  attribute's state, and the <a>value sanitization algorithm</a>, if one is defined for the
  <{input/type}> attribute's state, must be invoked.

  </div>

  <div id="input-type-change" class="impl">

  When an <{input}> element's <{input/type}> attribute
  changes state, the user agent must run the following steps:

  <ol>

    <li>If the previous state of the element's <{input/type}> attribute
    put the {{HTMLInputElement/value}} IDL attribute in the <i>value</i> mode, and the element's <a for="forms">value</a> is not the empty string, and the new state of the element's
    <{input/type}> attribute puts the {{HTMLInputElement/value}} IDL attribute in either the <i>default</i> mode or the <i>default/on</i> mode, then set the element's <{input/value}> content attribute to the element's <a for="forms">value</a>.</li>

    <li>Otherwise, if the previous state of the element's <{input/type}> attribute put the {{HTMLInputElement/value}}
    IDL attribute in any mode other than the <i>value</i> mode, and the
    new state of the element's <{input/type}> attribute puts the {{HTMLInputElement/value}} IDL attribute in the <i>value</i> mode, then set the <a for="forms">value</a> of the element to the value of the <{input/value}> content attribute, if there is one, or the empty string
    otherwise, and then set the control's <a for="input">dirty value flag</a> to false.</li>

    <li>Otherwise, if the previous state of the element's <{input/type}> attribute put the {{HTMLInputElement/value}} IDL attribute in any mode other than the <i>filename</i> mode, and the new state of the element's <{input/type}> attribute puts the {{HTMLInputElement/value}} IDL attribute in the <i>filename</i> mode, then set the <a for="forms">value</a> of the element to the empty string.</li>

    <li>Update the element's rendering and behavior to the new state's.</li>

    <li><dfn lt="a type change is signalled|signal a type change">Signal a type change</dfn> for the element. (The <a element-state for="input">Radio Button</a> state uses this, in particular.)</li>

    <li>Invoke the <a>value sanitization algorithm</a>, if one is defined for the <{input/type}> attribute's new state.</li>

  </ol>

  </div>

  <hr />

  The <{input/name}> attribute represents the element's name.
  The <{input/dirname}> attribute controls how the element's <a>directionality</a> is submitted.
  The <{input/disabled}> attribute is used to make the control non-interactive and to prevent its value from being submitted.
  The <{input/form}> attribute is used to explicitly associate the <{input}> element with its <a>form owner</a>.
  The <{input/autofocus}> attribute controls focus.
  The <{input/inputmode}> attribute controls the user interface's input modality for the control.
  The <{input/autocomplete}> attribute controls how the user agent provides autofill behavior.

  <div class="impl">

  The <dfn attribute for="HTMLInputElement"><code>indeterminate</code></dfn> IDL attribute must
  initially be set to false. On getting, it must return the last value it was set to. On setting, it
  must be set to the new value. It has no effect except for changing the appearance of <a element-state for="input">checkbox</a> controls.

  The <dfn attribute for="HTMLInputElement"><code>accept</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>alt</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>max</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>min</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>multiple</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>pattern</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>placeholder</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>required</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>size</code></dfn>,
  <dfn attribute for="HTMLInputElement"><code>src</code></dfn>, and
  <dfn attribute for="HTMLInputElement"><code>step</code></dfn>
  IDL attributes must <a>reflect</a> the respective content attributes of the same name.
  The <dfn attribute for="HTMLInputElement"><code>dirName</code></dfn> IDL attribute must
  <a>reflect</a> the <{input/dirname}> content attribute.
  The <dfn attribute for="HTMLInputElement"><code>readOnly</code></dfn> IDL attribute must
  <a>reflect</a> the <{input/readonly}> content attribute.
  The <dfn attribute for="HTMLInputElement"><code>defaultChecked</code></dfn> IDL attribute must
  <a>reflect</a> the <{input/checked}> content attribute.
  The <dfn attribute for="HTMLInputElement"><code>defaultValue</code></dfn> IDL attribute must
  <a>reflect</a> the <{input/value}> content attribute.

  The <dfn attribute for="HTMLInputElement"><code>type</code></dfn> IDL attribute must
  <a>reflect</a> the respective content attribute of the same name,
  <a>limited to only known values</a>.
  The <dfn attribute for="HTMLInputElement"><code>inputMode</code></dfn> IDL attribute must
  <a>reflect</a> the <{input/inputmode}> content attribute,
  <a>limited to only known values</a>.
  The <dfn attribute for="HTMLInputElement"><code>maxLength</code></dfn> IDL attribute must
  <a>reflect</a> the <{input/maxlength}> content attribute,
  <a>limited to only non-negative numbers</a>.
  The <dfn attribute for="HTMLInputElement"><code>minLength</code></dfn> IDL attribute must
  <a>reflect</a> the <{input/minlength}> content attribute,
  <a>limited to only non-negative numbers</a>.

  The IDL attributes
  <dfn attribute for="HTMLInputElement"><code>width</code></dfn> and
  <dfn attribute for="HTMLInputElement"><code>height</code></dfn> must return the rendered
  width and height of the image, in CSS pixels, if an image is <a>being rendered</a>, and is
  being rendered to a visual medium; or else the <a>intrinsic width and height</a> of the image,
  in CSS pixels, if an image is <i>available</i> but not being rendered to a visual medium;
  or else 0, if no image is <i>available</i>. When the <{input}> element's
  <{input/type}> attribute is not in the <a element-state for="input">image button</a> state,
  then no image is <i>available</i>. [[!CSS-2015]]

  On setting, they must act as if they <a>reflected</a> the respective
  content attributes of the same name.

  The {{HTMLInputElement/willValidate}},
  {{HTMLInputElement/validity}}, and
  {{HTMLInputElement/validationMessage}} IDL attributes, and
  the {{HTMLInputElement/checkValidity()}},
  {{HTMLInputElement/reportValidity()}}, and
  {{HTMLInputElement/setCustomValidity()}} methods, are part of
  the <a>constraint validation API</a>.
  The {{HTMLInputElement/labels}} IDL attribute provides a list of the element's <{label}>s.
  The {{HTMLInputElement/select()}},
  {{HTMLInputElement/selectionStart}},
  {{HTMLInputElement/selectionEnd}},
  {{HTMLInputElement/selectionDirection}},
  {{HTMLInputElement/setRangeText()}}, and
  {{HTMLInputElement/setSelectionRange()}} methods and IDL
  attributes expose the element's text selection.
  The {{HTMLInputElement/autofocus}},
  {{HTMLInputElement/disabled}},
  {{HTMLInputElement/form}}, and
  {{HTMLInputElement/name}} IDL attributes are part of the
  element's forms API.

  </div>

<h5 id="sec-states-of-the-type-attribute"><dfn lt="state of the type attribute|states of the type attribute">States of the <code>type</code> attribute</dfn></h5>

<h6 id="hidden-state-typehidden"><dfn element-state for="input">Hidden</dfn> state (<code>type=hidden</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a>Hidden</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a value that is not intended to be
  examined or manipulated by the user.

  <div class="impl">

  <strong>Constraint validation</strong>: If an <{input}> element's <{input/type}> attribute is in the <a>Hidden</a> state, it is <a>barred from constraint
  validation</a>.

  </div>

  If the <{input/name}> attribute is present and has a value that is a
  <a>case-sensitive</a> match for the string "<code>_charset_</code>", then the element's <code>value</code> attribute must be omitted.

  <div class="bookkeeping">

    The
    {{HTMLInputElement/value}}
    IDL attribute <a>applies</a> to this element and is
    in mode <a mode for="input">default</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/autocomplete}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The <code>input</code> and <code>change</code> events <a>do not apply</a>.

  </div>

<h6 id="text-typetext-state-and-search-state-typesearch"><dfn element-state for="input">Text</dfn> (<code>type=text</code>) state and <dfn element-state for="input">Search</dfn> state (<code>type=search</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>textbox</code></a>
    (default - <a><em>do not set</em></a>) or
    <a value for="role"><code>combobox</code></a>.</dd><dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Text</a> state or the <a element-state for="input">Search</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a one line plain text edit control for
  the element's <a for="forms">value</a>.

  <p class="note">
    The difference between the <a element-state for="input">Text</a> state
  and the <a element-state for="input">Search</a> state is primarily stylistic: on
  platforms where search fields are distinguished from regular text fields, the <a element-state for="input">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">

  If the element is <i>mutable</i>, its <a for="forms">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 for="forms">value</a>.

  If the element is <i>mutable</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:

  <ol>

    <li>Set the element's <{global/dir}> attribute to "<a attr-value for="global/dir">ltr</a>" if the user selected a left-to-right writing direction, and
    "<a attr-value for="global/dir"><code>rtl</code></a>" if the user selected a right-to-left writing
    direction.</li>

    <li><a>Queue a task</a> to <a>fire a simple event</a> that bubbles named <code>input</code> at the <{input}> element.</li>

  </ol>

  </div>

  The <code>value</code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: <a>Strip line
  breaks</a> from the <a for="forms">value</a>.

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/dirname}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/size}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}}, and
    {{HTMLInputElement/value}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/max}>,
    <{input/min}>,
    <{input/multiple}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/stepDown()}} and
    {{HTMLInputElement/stepUp()}} methods.

  </div>

<h6 id="telephone-state-typetel"><dfn element-state for="input">Telephone</dfn> state (<code>type=tel</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>textbox</code></a>
    (default - <a><em>do not set</em></a>) or
    <a value for="role"><code>combobox</code></a>.</dd><dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Telephone</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a control for editing a telephone number
  given in the element's <a for="forms">value</a>.

  <div class="impl">

  If the element is <i>mutable</i>, its <a for="forms">value</a> should be editable by the user. User agents may change the
  spacing and, with care, the punctuation of <a for="forms">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 for="forms">value</a>.

  </div>

  The <code>value</code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: <a>Strip line
  breaks</a> from the <a for="forms">value</a>.

  </div>

  <p class="note">
    Unlike the <a element-state for="input">URL</a> and <a element-state for="input">E-mail</a> types, the <a element-state for="input">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>pattern</code> attribute or the {{HTMLInputElement/setCustomValidity()}} method to hook into the client-side
  validation mechanism.
  </p>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/size}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}}, and
    {{HTMLInputElement/value}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/max}>,
    <{input/min}>,
    <{input/multiple}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/stepDown()}} and
    {{HTMLInputElement/stepUp()}} methods.

  </div>

<h6 id="url-state-typeurl"><dfn element-state for="input">URL</dfn> state (<code>type=url</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>textbox</code></a>
    (default - <a><em>do not set</em></a>) or
    <a value for="role"><code>combobox</code></a>.</dd><dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">URL</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a control for editing a single
  <a>absolute URL</a> given in the element's <a for="forms">value</a>.

  <div class="impl">

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the URL represented by its <a for="forms">value</a>. User agents
  may allow the user to set the <a for="forms">value</a> to a string that is not
  a <a lt="valid url">valid</a> <a>absolute URL</a>, but may also or instead
  automatically escape characters entered by the user so that the <a for="forms">value</a> is always a <a lt="valid url">valid</a>
  <a>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 for="forms">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 for="forms">value</a>.

  </div>

  The <{input/value}> attribute, if specified and not empty, must
  have a value that is a <a>valid URL potentially surrounded by spaces</a> that is also an
  <a>absolute URL</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: <a>Strip line
  breaks</a> from the <a for="forms">value</a>, then <a>strip leading and
  trailing whitespace</a> from the <a for="forms">value</a>.

  <strong>Constraint validation</strong>: While the <a for="forms">value</a>
  of the element is neither the empty string nor a <a lt="valid url">valid</a>
  <a>absolute URL</a>, the element is <a>suffering from a type mismatch</a>.

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/size}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}}, and
    {{HTMLInputElement/value}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/max}>,
    <{input/min}>,
    <{input/multiple}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/stepDown()}} and
    {{HTMLInputElement/stepUp()}} methods.

  </div>

  <div class="example">
    If a document contained the following markup:

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

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

    <img src="images/sample-url.png" width="472" height="134" alt="A text box with an icon on the left followed by the text &quot;www.w3&quot; 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 drop down box, indicating further values are available." />

    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 user agent-defined manner (maybe by how frequently
    the user refers to those URLs). Note how the user agent 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.

    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 user agent has no titles to provide for
    those values.

  </div>

<h6 id="email-state-typeemail"><dfn element-state for="input" lt="e-mail|email">E-mail</dfn> state (<code>type=email</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>textbox</code></a>
    (default - <a><em>do not set</em></a>) or
    <a value for="role"><code>combobox</code></a>.</dd><dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">E-mail</a> state, the rules in this section apply.

  </div>

  How the <a element-state for="input">E-mail</a> state operates depends on whether the
  <code>multiple</code> attribute is specified or not.

  <dl class="switch">

    <dt>When the <code>multiple</code> attribute is not specified on the
    element</dt>

    <dd>

    The <{input}> element <a>represents</a> a control for editing an e-mail
    address given in the element's <a for="forms">value</a>.

    <div class="impl">

    If the element is <i>mutable</i>, the user agent should allow the
    user to change the e-mail address represented by its <a for="forms">value</a>. User agents may allow the user to set the <a for="forms">value</a> to a string that is not a <a>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 for="forms">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 for="forms">value</a>. User agents may transform the <a for="forms">value</a> for display and editing; in particular, user agents should
    convert punycode in the domain labels of the <a for="forms">value</a> to IDN in the display and
    vice versa.

    <strong>Constraint validation</strong>: While the user interface is representing input that
    the user agent cannot convert to punycode, the control is <a>suffering from bad
    input</a>.

    </div>

    The <code>value</code> attribute, if specified and not empty, must
    have a value that is a single <a>valid e-mail address</a>.

    <div class="impl">

    <strong>The <a>value sanitization algorithm</a> is as follows</strong>: <a>Strip
    line breaks</a> from the <a for="forms">value</a>, then <a>strip
    leading and trailing whitespace</a> from the <a for="forms">value</a>.

    <strong>Constraint validation</strong>: While the <a for="forms">value</a>
    of the element is neither the empty string nor a single <a>valid e-mail address</a>, the
    element is <a>suffering from a type mismatch</a>.

    </div>

    </dd>

    <dt>When the <code>multiple</code> attribute <em>is</em> specified on
    the element</dt>

    <dd>

    The <{input}> element <a>represents</a> a control for adding, removing, and
    editing the e-mail addresses given in the element's <a for="forms">value<em>s</em></a>.

    <div class="impl">

    If the element is <i>mutable</i>, the user agent should allow the
    user to add, remove, and edit the e-mail addresses represented by its <a for="forms">values</a>. User agents may allow the user to set any
    individual value in the list of <a for="forms">value<em>s</em></a> to a
    string that is not a <a>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 for="forms">values</a>. User agents may
    transform the <a for="forms">values</a> for display and editing; in
    particular, user agents should convert punycode in the domain labels of the <a for="forms">value</a> to IDN in the display and vice versa.

    <strong>Constraint validation</strong>: While the user interface describes a situation where
    an individual value contains a U+002C COMMA (,) or is representing input that the user agent
    cannot convert to punycode, the control is <a>suffering from bad input</a>.

    Whenever the user changes the element's <a for="forms">value<em>s</em></a>, the user agent must run the following
    steps:

    <ol>

      <li>Let <var>latest values</var> be a copy of the element's <a for="forms">value<em>s</em></a>.</li>

      <li><a>Strip leading and trailing whitespace</a> from each value in <var>latest values</var>.</li>

      <li>Let the element's <a for="forms">value</a> be the result of
      concatenating all the values in <var>latest values</var>, separating each value from
      the next by a single U+002C COMMA character (,), maintaining the list's order.</li>

    </ol>

    </div>

    The <code>value</code> attribute, if specified, must have a value
    that is a <a>valid e-mail address list</a>.

    <div class="impl">

    <strong>The <a>value sanitization algorithm</a> is as follows</strong>:

    <ol>

      <li><a lt="split a string on commas">Split on commas</a> the element's <a for="forms">value</a>, <a>strip leading and trailing whitespace</a> from
      each resulting token, if any, and let the element's <a for="forms">values</a> be the (possibly empty) resulting list of
      (possibly empty) tokens, maintaining the original order.</li>

      <li>Let the element's <a for="forms">value</a> be the result of
      concatenating the element's <a for="forms">values</a>, separating
      each value from the next by a single U+002C COMMA character (,), maintaining the list's
      order.</li>

    </ol>

    <strong>Constraint validation</strong>: While the <a for="forms">value</a>
    of the element is not a <a>valid e-mail address list</a>, the element is <a>suffering
    from a type mismatch</a>.

    </div>

    </dd>

  </dl>

  When the <code>multiple</code> attribute is set or removed, the
  user agent must run the <a>value sanitization algorithm</a>.

  A <dfn>valid e-mail address</dfn> is a string that matches the <code>email</code>
  production of the following ABNF, the character set for which is Unicode. This ABNF implements the
  extensions described in RFC 1123. [[!ABNF]] [[!RFC5322]] [[!RFC1034]] [[!RFC1123]]

  <pre data-highlight="abnf">
email         = 1*( atext / "." ) "@" label *( "." label )
label         = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by <a>RFC 1034 section 3.5</a>
atext         = &lt; as defined in <a>RFC 5322 section 3.2.3</a> &gt;
let-dig       = &lt; as defined in <a>RFC 1034 section 3.5</a> &gt;
ldh-str       = &lt; as defined in <a>RFC 1034 section 3.5</a> &gt;
    </pre>

  <p class="note">
    This requirement is a <a>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, whitespace characters, and quoted
  strings in manners unfamiliar to most users) to be of practical use here.
  </p>

  <div class="note">

    The following JavaScript- and Perl-compatible regular expression is an implementation of the
    above definition.

    <pre highlight="javascript">
/^[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
    </pre>

  </div>

  A <dfn>valid e-mail address list</dfn> is a <a>set of comma-separated tokens</a>, where
  each token is itself a <a>valid e-mail address</a>. <span class="impl">To obtain the list of
  tokens from a <a>valid e-mail address list</a>, an implementation must <a lt="split a string on commas">split the string on commas</a>.</span>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/size}> content attributes;
    {{HTMLInputElement/list}} and
    {{HTMLInputElement/value}} IDL attributes;
    {{HTMLInputElement/select()}} method.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/max}>,
    <{input/min}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}} and
    {{HTMLInputElement/stepUp()}} methods.

  </div>

<h6 id="password-state-typepassword"><dfn element-state for="input">Password</dfn> state (<code>type=password</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>textbox</code></a>
    (default - <a><em>do not set</em></a>).</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a>Password</a> state, the rules in this section
  apply.

  </div>

  The <{input}> element <a>represents</a> a one line plain text edit control for
  the element's <a for="forms">value</a>. The user agent should obscure the value
  so that people other than the user cannot see it.

  <div class="impl">

  If the element is <i>mutable</i>, its <a for="forms">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 for="forms">value</a>.

  </div>

  The <code>value</code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: <a>Strip line
  breaks</a> from the <a for="forms">value</a>.

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/size}> content attributes;
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}}, and
    {{HTMLInputElement/value}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/multiple}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/stepDown()}} and
    {{HTMLInputElement/stepUp()}} methods.

  </div>

<h6 id="date-and-time-state-typedatetime"><dfn element-state for="input">Date and Time</dfn> state (<code>type=datetime</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Date and Time</a> state, the rules in this section
  apply.

  </div>

  The <{input}> element <a>represents</a> a control for setting the element's
  <a for="forms">value</a> to a string representing a specific <a>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>

  <div class="impl">

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the <a>global date and time</a> represented by its
  <a for="forms">value</a>, as obtained by <a>parsing a floating date and time</a> from it. User agents must not allow the user to
  set the <a for="forms">value</a> to a non-empty string that is not a
  <a>valid normalized global date and time string</a>, 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 for="forms">value</a>. If the user agent provides a
  user interface for selecting a <a>global date and time</a>, then
  the <a for="forms">value</a> must be set to a <a>valid normalized global date and time string</a> representing the user's selection. User agents should allow the
  user to set the <a for="forms">value</a> to the empty string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid normalized global date and time string</a>,
  the control is <a>suffering from bad input</a>.

  </div>

  <p class="note">
    See [[#date-time-and-number-formats]] for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls<span class="impl">, and the <a>implementation notes</a>
  regarding localization of form controls</span>.
  </p>

  The <code>value</code> attribute, if specified and not empty, must
  have a value that is a <a>valid global date and time string</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the <a for="forms">value</a> of the element is a <a>valid global date and time
  string</a>, then adjust the time so that the <a for="forms">value</a>
  represents the same point in time but expressed in the UTC time zone as a <a>valid normalized global date and time string</a>, otherwise, set it to the empty string instead.

  </div>

  The <{input/min}> attribute, if specified, must have a value that is
  a <a>valid global date and time string</a>. The <{input/max}>
  attribute, if specified, must have a value that is a <a>valid global date and time
  string</a>.

  The <{input/step}> attribute is expressed in seconds. The <a>step scale factor</a> is 1000 (which
  converts the seconds to milliseconds, which is the base unit of comparison for the conversion
  algorithms below). The <a>default step</a> is 60 seconds.

  <div class="impl">

  When the element is <a>suffering from a step mismatch</a>, the user agent may round the
  element's <a for="forms">value</a> to the nearest <a>global date and time</a> for which the element would not <a>suffer from a step mismatch</a>.

  <strong>The <a>algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a>parsing a floating date and time</a> from <var>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>1970-01-01T00:00:00.0Z</code>") to the parsed <a>global date and time</a>, ignoring leap seconds.

  <strong>The <a>algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a>valid normalized global date and time string</a> that represents the <a>global date and time</a> that is <var>input</var>
  milliseconds after midnight UTC on the morning of 1970-01-01 (the time represented by the value
  "<code>1970-01-01T00:00:00.0Z</code>").

  <strong>The <a>algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as follows</strong>:
  If <a>parsing a floating date and time</a> from
  <var>input</var> results in an error, then return an error; otherwise, return <a>a new <code>Date</code> object</a> representing the parsed <a>global date and time</a>, expressed in UTC.

  <strong>The <a>algorithm to convert a
  <code>Date</code> object to a string</a>, given a {{Date}} object <var>input</var>, is as follows</strong>: Return a <a>valid normalized global date and time string</a> that represents the <a>global date and
  time</a> that is represented by <var>input</var>.

  </div>

  <div class="note" id="only-contemporary-times">

    The <a element-state for="input">Date and Time</a> state (and other date- and
    time-related states described in subsequent sections) is not intended for the entry of values for
    which a precise date and time relative to the contemporary calendar cannot be established. For
    example, it would be inappropriate for the entry of times like "one millisecond after the big
    bang", "the early part of the Jurassic period", or "a winter around 250 BCE".

    For the input of dates before the introduction of the Gregorian calendar, authors are
    encouraged to not use the <a element-state for="input">Date and Time</a> state (and
    the other date- and time-related states described in subsequent sections), as user agents are not
    required to support converting dates and times from earlier periods to the Gregorian calendar,
    and asking users to do so manually puts an undue burden on users. (This is complicated by the
    manner in which the Gregorian calendar was phased in, which occurred at different times in
    different countries, ranging from partway through the 16th century all the way to early in the
    20th.) Instead, authors are encouraged to provide fine-grained input controls using the
    <{select}> element and <{input}> elements with the <a element-state for="input">Number</a> state.

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/step}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/value}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/size}>,
    <{input/src}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}}, and
    {{HTMLInputElement/selectionDirection}} IDL attributes;
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

  </div>

  <div class="example">
    The following fragment shows part of a calendar application. A user can specify a date and
    time for a meeting (in the 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.

    <pre highlight="html">
&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>

    Had the application used the <code>date</code> and/or
    <code>time</code> types instead, the calendar application would
    have also had to explicitly determine which time zone the user intended.

    For events where the precise time is to vary as the user travels (e.g., "celebrate the new
    year!"), and for recurring events that are to stay at the same time for a specific geographic
    location even though that location may go in and out of daylight savings time (e.g., "bring the
    kid to school"), the <code>date</code> and/or
    <code>time</code> types combined with a <{select}> element
    (or other similar control) to pick the specific geographic location to which to anchor the time
    would be more appropriate.

  </div>

<h6 id="date-state-typedate"><dfn element-state for="input">Date</dfn> state (<code>type=date</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Date</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a control for setting the element's
  <a for="forms">value</a> to a string representing a specific <a for="dates">date</a>.

  <p class="note"><a for="dates">date</a> values represent a "floating" time and do
  not include <a>time zone</a> information. Care is needed when
  converting values of this type to or from date data types in JavaScript and other programming
  languages. In many cases, an implicit time-of-day and time zone are used to create a global
  ("incremental") time (an integer value that represents the offset from some arbitrary epoch time).
  Processing or conversion of these values, particularly across time zones, can change the value of
  the date itself. [[TIMEZONE]]</p>

  <div class="impl">

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the <a for="dates">date</a> represented by its <a for="forms">value</a>, as obtained by <a>parsing a
  date</a> from it. User agents must not allow the user to set the <a for="forms">value</a> to a non-empty string that is not a <a>valid date
  string</a>. If the user agent provides a user interface for selecting a <a for="dates">date</a>, then the <a for="forms">value</a> must be set
  to a <a>valid date string</a> representing the user's selection. User agents should allow
  the user to set the <a for="forms">value</a> to the empty string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid date string</a>, the control is <a>suffering from bad
  input</a>.

  </div>

  <p class="note">
    See [[#date-time-and-number-formats]] for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls<span class="impl">, and the <a>implementation notes</a>
  regarding localization of form controls</span>.
  </p>

  The <code>value</code> attribute, if specified and not empty, must
  have a value that is a <a>valid date string</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the <a for="forms">value</a> of the element is not a <a>valid date string</a>, then
  set it to the empty string instead.

  </div>

  The <{input/min}> attribute, if specified, must have a value that is
  a <a>valid date string</a>. The <{input/max}> attribute, if
  specified, must have a value that is a <a>valid date string</a>.

  The <{input/step}> attribute is expressed in days. The <a>step scale factor</a>
  is 86,400,000 (which converts the days to milliseconds, which is the base unit of comparison for
  the conversion algorithms below). The <a>default step</a> is 1 day.

  <div class="impl">

  When the element is <a>suffering from a step mismatch</a>, the user agent may round the
  element's <a for="forms">value</a> to the nearest <a for="dates">date</a> for which the element would not <a>suffer from a step mismatch</a>.

  <strong>The <a>algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a>parsing a date</a> from <var>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>1970-01-01T00:00:00.0Z</code>") to midnight UTC on the morning of the parsed <a for="dates">date</a>, ignoring leap seconds.

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

  <strong>The <a>algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as follows</strong>:
  If <a>parsing a date</a> from <var>input</var> results
  in an error, then return an error; otherwise, return <a>a new
  <code>Date</code> object</a> representing midnight UTC on the morning of the parsed <a for="dates">date</a>.

  <strong>The <a>algorithm to convert a
  <code>Date</code> object to a string</a>, given a {{Date}} object <var>input</var>, is as follows</strong>: Return a <a>valid date string</a> that
  represents the <a for="dates">date</a> current at the time represented by <var>input</var> in the UTC time zone.

  </div>

  <p class="note">
    See <a href="#only-contemporary-times">the note on historical dates</a> in the
  <a element-state for="input">Date and Time</a> state section.
  </p>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/step}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/value}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/size}>,
    <{input/src}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}}, and
    {{HTMLInputElement/selectionDirection}} IDL attributes;
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

  </div>

<h6 id="month-state-typemonth"><dfn element-state for="input">Month</dfn> state (<code>type=month</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a>Month</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a control for setting the element's
  <a for="forms">value</a> to a string representing a specific <a>month</a>.

  <div class="impl">

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the <a>month</a> represented by its <a for="forms">value</a>, as obtained by <a>parsing a
  month</a> from it. User agents must not allow the user to set the <a for="forms">value</a> to a non-empty string that is not a <a>valid month
  string</a>. If the user agent provides a user interface for selecting a <a>month</a>, then the <a for="forms">value</a> must be
  set to a <a>valid month string</a> representing the user's selection. User agents should
  allow the user to set the <a for="forms">value</a> to the empty string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid month string</a>, the control is <a>suffering from bad
  input</a>.

  </div>

  <p class="note">
    See [[#date-time-and-number-formats]] for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls<span class="impl">, and the <a>implementation notes</a>
  regarding localization of form controls</span>.
  </p>

  The <{input/value}> attribute, if specified and not empty, must
  have a value that is a <a>valid month string</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the <a for="forms">value</a> of the element is not a <a>valid month string</a>,
  then set it to the empty string instead.

  </div>

  The <{input/min}> attribute, if specified, must have a value that is
  a <a>valid month string</a>. The <{input/max}> attribute, if
  specified, must have a value that is a <a>valid month string</a>.

  The <{input/step}> attribute is expressed in months. The <a>step scale factor</a> is 1
  (units of whole months are the base unit of comparison for the conversion algorithms below).
  The <a>default step</a> is 1 month.

  <div class="impl">

  When the element is <a>suffering from a step mismatch</a>, the user agent may round the
  element's <a for="forms">value</a> to the nearest <a>month</a> for which the element would not <a>suffer from a step mismatch</a>.

  <strong>The <a>algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a>parsing a month</a> from <var>input</var> results in an
  error, then return an error; otherwise, return the number of months between January 1970 and the
  parsed <a>month</a>.

  <strong>The <a>algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a>valid month string</a> that represents the <a>month</a> that
  has <var>input</var> months between it and January 1970.

  <strong>The <a>algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as follows</strong>:
  If <a>parsing a month</a> from <var>input</var>
  results in an error, then return an error; otherwise, return <a>a
  new <code>Date</code> object</a> representing midnight UTC on the morning of the first day of
  the parsed <a>month</a>.

  <strong>The <a>algorithm to convert a
  <code>Date</code> object to a string</a>, given a {{Date}} object <var>input</var>, is as follows</strong>: Return a <a>valid month string</a> that
  represents the <a>month</a> current at the time represented by <var>input</var> in the UTC time zone.

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/step}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/value}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/size}>,
    <{input/src}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}}, and
    {{HTMLInputElement/selectionDirection}} IDL attributes;
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

  </div>

<h6 id="week-state-typeweek"><dfn element-state for="input">Week</dfn> state (<code>type=week</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a>Week</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a control for setting the element's
  <a for="forms">value</a> to a string representing a specific <a>week</a>.

  <div class="impl">

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the <a>week</a> represented by its <a for="forms">value</a>, as obtained by <a>parsing a
  week</a> from it. User agents must not allow the user to set the <a for="forms">value</a> to a non-empty string that is not a <a>valid week
  string</a>. If the user agent provides a user interface for selecting a <a>week</a>, then the <a for="forms">value</a> must be set
  to a <a>valid week string</a> representing the user's selection. User agents should allow
  the user to set the <a for="forms">value</a> to the empty string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid week string</a>, the control is <a>suffering from bad
  input</a>.

  </div>

  <p class="note">
    See [[#date-time-and-number-formats]] for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls<span class="impl">, and the <a>implementation notes</a>
  regarding localization of form controls</span>.
  </p>

  The <code>value</code> attribute, if specified and not empty, must
  have a value that is a <a>valid week string</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the <a for="forms">value</a> of the element is not a <a>valid week string</a>, then
  set it to the empty string instead.

  </div>

  The <{input/min}> attribute, if specified, must have a value that is
  a <a>valid week string</a>. The <{input/max}> attribute, if
  specified, must have a value that is a <a>valid week string</a>.

  The <{input/step}> attribute is expressed in weeks. The <a>step scale factor</a> is 604,800,000
  (which converts the weeks to milliseconds, which is the base unit of comparison for the conversion
  algorithms below). The <a>default step</a> is 1 week. The <a>default step base</a> is -259,200,000
  (the start of week 1970-W01 which is the Monday 3 days before 1970-01-01).

  <div class="impl">

  When the element is <a>suffering from a step mismatch</a>, the user agent may round the
  element's <a for="forms">value</a> to the nearest <a>week</a> for which the element would not <a>suffer from a step mismatch</a>.

  <strong>The <a>algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a>parsing a week string</a> from <var>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>1970-01-01T00:00:00.0Z</code>") to midnight UTC on the morning of the Monday of the
  parsed <a>week</a>, ignoring leap seconds.

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

  <strong>The <a>algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as follows</strong>:
  If <a>parsing a week</a> from <var>input</var> results
  in an error, then return an error; otherwise, return <a>a new
  <code>Date</code> object</a> representing midnight UTC on the morning of the Monday of the
  parsed <a>week</a>.

  <strong>The <a>algorithm to convert a
  <code>Date</code> object to a string</a>, given a {{Date}} object <var>input</var>, is as follows</strong>: Return a <a>valid week string</a> that
  represents the <a>week</a> current at the time represented by <var>input</var> in the UTC time zone.

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content attributes, IDL attributes, and
    methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/step}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/value}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/size}>,
    <{input/src}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}}, and
    {{HTMLInputElement/selectionDirection}} IDL attributes;
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

  </div>

<h6 id="time-state-typetime"><dfn element-state for="input">Time</dfn> state (<code>type=time</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a>Time</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a control for setting the element's
  <a for="forms">value</a> to a string representing a specific <a>time</a>.

  <div class="impl">

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the <a>time</a> represented by its <a for="forms">value</a>, as obtained by <a>parsing a
  time</a> from it. User agents must not allow the user to set the <a for="forms">value</a> to a non-empty string that is not a <a>valid time
  string</a>. If the user agent provides a user interface for selecting a <a>time</a>, then the <a for="forms">value</a> must be set
  to a <a>valid time string</a> representing the user's selection. User agents should allow
  the user to set the <a for="forms">value</a> to the empty string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid time string</a>, the control is <a>suffering from bad
  input</a>.

  </div>

  <p class="note">
    See [[#date-time-and-number-formats]] for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls<span class="impl">, and the <a>implementation notes</a>
  regarding localization of form controls</span>.
  </p>

  The <code>value</code> attribute, if specified and not empty, must
  have a value that is a <a>valid time string</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the <a for="forms">value</a> of the element is not a <a>valid time string</a>, then
  set it to the empty string instead.

  The form control <a>has a periodic domain</a>.

  </div>

  The <{input/min}> attribute, if specified, must have a value that is
  a <a>valid time string</a>. The <{input/max}> attribute, if
  specified, must have a value that is a <a>valid time string</a>.

  The <{input/step}> attribute is expressed in seconds. The <a>step scale factor</a> is 1000
  (which converts the seconds to milliseconds, which is the base unit of comparison for the
  conversion algorithms below). The <a>default step</a> is 60 seconds.

  <div class="impl">

  When the element is <a>suffering from a step mismatch</a>, the user agent may round the
  element's <a for="forms">value</a> to the nearest <a>time</a> for which the element would not <a>suffer from a step mismatch</a>.

  <strong>The <a>algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a>parsing a time</a> from <var>input</var> results in an
  error, then return an error; otherwise, return the number of milliseconds elapsed from midnight to
  the parsed <a>time</a> on a day with no time changes.

  <strong>The <a>algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a>valid time string</a> that represents the <a>time</a> that is
  <var>input</var> milliseconds after midnight on a day with no time changes.

  <strong>The <a>algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as follows</strong>:
  If <a>parsing a time</a> from <var>input</var> results
  in an error, then return an error; otherwise, return <a>a new
  <code>Date</code> object</a> representing the parsed <a>time</a> in
  UTC on 1970-01-01.

  <strong>The <a>algorithm to convert a
  <code>Date</code> object to a string</a>, given a {{Date}} object <var>input</var>, is as follows</strong>: Return a <a>valid time string</a> that
  represents the UTC <a>time</a> component that is represented by <var>input</var>.

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content attributes, IDL attributes, and
    methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/step}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/value}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/size}>,
    <{input/src}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}}, and
    {{HTMLInputElement/selectionDirection}} IDL attributes;
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

  </div>

<h6 id="local-date-and-time-state-typedatetimelocal"><dfn element-state for="input">Local Date and Time</dfn> state (<code>type=datetime-local</code>)</h6>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Local Date and Time</a> state, the rules in
  this section apply.

  </div>

  The <{input}> element <a>represents</a> a control for setting the element's
  <a for="forms">value</a> to a string representing a <a element-state for="input">local date and time</a>, with no time-zone offset
  information.

  <div class="impl">

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the <a element-state for="input">date and time</a> represented by its
  <a for="forms">value</a>, as obtained by <a>parsing a date and time</a> from it. User agents must not allow the user to set
  the <a for="forms">value</a> to a non-empty string that is not a <a>valid normalized global date and time string</a>. If the user agent provides a user interface for
  selecting a <a element-state for="input">local date and time</a>, then the <a for="forms">value</a> must be set to a <a>valid normalized global date and time string</a> representing the user's selection. User agents should allow the user to set the
  <a for="forms">value</a> to the empty string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid normalized global date and time string</a>, the control is
  <a>suffering from bad input</a>.

  </div>

  <p class="note">
    See [[#date-time-and-number-formats]] for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls<span class="impl">, and the <a>implementation notes</a>
  regarding localization of form controls</span>.
  </p>

  The <{input/value}> attribute, if specified and not empty, must
  have a value that is a <a>valid floating date and time string</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the <a for="forms">value</a> of the element is a <a>valid floating date and time string</a>, then set it to a <a>valid normalized floating date and time string</a>
  representing the same date and time; otherwise, set it to the empty string instead.

  </div>

  The <{input/min}> attribute, if specified, must have a value that is
  a <a>valid floating date and time string</a>. The <{input/max}>
  attribute, if specified, must have a value that is a <a>valid floating date and time string</a>.

  The <{input/step}> attribute is expressed in seconds. The <a>step scale factor</a> is 1000
  (which converts the seconds to milliseconds, which is the base unit of comparison for the
  conversion algorithms below). The <a>default step</a> is 60 seconds.

  <div class="impl">

  When the element is <a>suffering from a step mismatch</a>, the user agent may round the
  element's <a for="forms">value</a> to the nearest <a>floating date and time</a> for which the element would not <a>suffer from a step mismatch</a>.

  <strong>The <a>algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a>parsing a date and time</a> from <var>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>1970-01-01T00:00:00.0</code>") to the parsed <a>floating date and time</a>, ignoring leap seconds.

  <strong>The <a>algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a>valid normalized floating date and time string</a> that represents the date and time that is
  <var>input</var> milliseconds after midnight on the morning of 1970-01-01 (the time
  represented by the value "<code>1970-01-01T00:00:00.0</code>").

  </div>

  <p class="note">
    See <a href="#only-contemporary-times">the note on historical dates</a> in the
  <a element-state for="input">Date and Time</a> state section.
  </p>

  <div class="bookkeeping">

    The following common <{input}> element content
    attributes, IDL attributes, and methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/step}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/value}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is
    in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not
    apply</a> to the element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/size}>,
    <{input/src}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the
    element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}}, and
    {{HTMLInputElement/valueAsDate}} IDL attributes;
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

  </div>

  <div class="example">
    The following example shows part of a flight booking application. The application uses an
    <{input}> element with its <{input/type}> attribute set to
    <code>datetime-local</code>, and it then interprets the
    given date and time in the time zone of the selected airport.

    <pre highlight="html">
&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>

    If the application instead used the <code>datetime</code>
    type, then the user would have to work out the time-zone conversions themself, which is clearly
    not a good user experience!

  </div>

<h6 id="number-state-typenumber"><dfn element-state for="input">Number</dfn> state (<code>type=number</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>spinbutton</code></a>
    (default - <a><em>do not set</em></a>).</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Number</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a control for setting the element's
  <a for="forms">value</a> to a string representing a number.

  <div class="impl">

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the number represented by its <a for="forms">value</a>, as
  obtained from applying the <a>rules for parsing floating-point number values</a> to it. User
  agents must not allow the user to set the <a for="forms">value</a> to a
  non-empty string that is not a <a>valid floating-point number</a>. If the user agent
  provides a user interface for selecting a number, then the <a for="forms">value</a> must be set to the
  <a lt="best floating-point number">best representation of the number representing the user's selection as a floating-point number</a>.
  User agents should allow the user to set the <a for="forms">value</a> to the empty string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid floating-point number</a>, the control is <a>suffering
  from bad input</a>.

  </div>

  <p class="note">
    This specification does not define what user interface user agents are to use;
  user agent vendors are encouraged to consider what would best serve their users' needs. For
  example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input
  (converting it to the format required for submission as described above). Similarly, a user agent
  designed for Romans might display the value in Roman numerals rather than in decimal; or (more
  realistically) a user agent designed for the French market might display the value with
  apostrophes between thousands and commas before the decimals, and allow the user to enter a value
  in that manner, internally converting it to the submission format described above.
  </p>

  The <{input/value}> attribute, if specified and not empty, must
  have a value that is a <a>valid floating-point number</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the <a for="forms">value</a> of the element is not a <a>valid floating-point
  number</a>, then set it to the empty string instead.

  </div>

  The <{input/min}> attribute, if specified, must have a value that is
  a <a>valid floating-point number</a>. The <{input/max}> attribute,
  if specified, must have a value that is a <a>valid floating-point number</a>.

  <span class="impl">The <a>step scale factor</a> is
  1.</span> The <a>default step</a> is 1 (allowing only
  integers to be selected by the user, unless the <a>step
  base</a> has a non-integer value).

  <div class="impl">

  When the element is <a>suffering from a step mismatch</a>, the user agent may round the
  element's <a for="forms">value</a> to the nearest number for which the element
  would not <a>suffer from a step mismatch</a>. If
  there are two such numbers, user agents are encouraged to pick the one nearest positive
  infinity.

  <strong>The <a>algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If applying the
  <a>rules for parsing floating-point number values</a> to <var>input</var> results
  in an error, then return an error; otherwise, return the resulting number.

  <strong>The <a>algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a>valid floating-point number</a> that represents <var>input</var>.

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content attributes, IDL attributes, and
    methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>, and
    <{input/step}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/value}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/size}>,
    <{input/src}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}}, and
    {{HTMLInputElement/valueAsDate}} IDL attributes;
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.

  </div>

  <div class="example">
    Here is an example of using a numeric input control:

    <pre highlight="html">
&lt;label&gt;How much do you want to charge? $&lt;input type=number min=0 step=0.01 name=price&gt;&lt;/label&gt;
    </pre>

    As described above, a user agent might support numeric input in the user's local format,
    converting it to the format required for submission as described above. This might include
    handling grouping separators (as in "872,000,000,000") and various decimal separators (such as
    "3,99" vs "3.99") or using local digits (such as those in Arabic, Devanagari, Persian, and
    Thai).

  </div>

  <p class="note">
    The <code>type=number</code> state is not appropriate for input that
  happens to only consist of numbers but isn't strictly speaking a number. For example, it would be
  inappropriate for credit card numbers or US postal codes. A simple way of determining whether to
  use <code>type=number</code> is to consider whether it would make sense for the input
  control to have a spinbox interface (e.g., with "up" and "down" arrows). Getting a credit card
  number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit
  incorrect. So it would not make sense for the user to select a credit card number using "up" and
  "down" buttons. When a spinbox interface is not appropriate, <code>type=text</code> is
  probably the right choice (possibly with a <code>pattern</code>
  attribute).
  </p>

<h6 id="range-state-typerange"><dfn element-state for="input">Range</dfn> state (<code>type=range</code>)</h6>

  <div class="note">
    : Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:
    :: <a value for="role"><code>slider</code></a> (default - <a><em>do not set</em></a>).

    : Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:
    :: <a>Global aria-* attributes</a>
    :: Any <code>aria-*</code> attributes
        <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
  </div>

  When an <{input}> element's <{input/type}> attribute is in the
  <a element-state for="input">Range</a> state, the rules in this section apply.

  The <{input}> element <a>represents</a> a control for setting the element's
  <a for="forms">value</a> to a string representing a number, but with the caveat that the exact
  value is not important, letting user agents provide a simpler interface than they do for the
  <a element-state for="input">Number</a> state.

  If the element is <i>mutable</i>, the user agent should allow the user to change the number
  represented by its <a for="forms">value</a>, as obtained from applying the
  <a>rules for parsing floating-point number values</a> to it. User agents must not allow the user
  to set the <a for="forms">value</a> to a string that is not a <a>valid floating-point number</a>.
  If the user agent provides a user interface for selecting a number, then the
  <a for="forms">value</a> must be set to a
  <a lt="best floating-point number">best representation of the number representing the user's selection as a floating-point number</a>.
  User agents must not allow the user to set the <a for="forms">value</a> to the empty string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid floating-point number</a>, the control is
  <a>suffering from bad input</a>.

  The <{input/value}> attribute, if specified, must have a value that is a
  <a>valid floating-point number</a>.

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the
  <a for="forms">value</a> of the element is not a <a>valid floating-point number</a>, then set it
  to the
  <a lt="best floating-point number">best representation, as a floating-point number</a>, of the
  <a for="range">default value</a>.

  The <dfn for="range">default value</dfn> is the <a>minimum</a> plus half the difference between
  the <a>minimum</a> and the <a>maximum</a>, unless the <a>maximum</a> is less than the
  <a>minimum</a>, in which case the <a for="range">default value</a> is the <a>minimum</a>.

  When the element is <a>suffering from an underflow</a>, the user agent must set the element's
  <a for="forms">value</a> to the
  <a lt="best floating-point number">best representation, as a floating-point number</a>, of the
  <a>minimum</a>.

  When the element is <a>suffering from an overflow</a>, if the <a>maximum</a> is not less than the
  <a>minimum</a>, the user agent must set the element's <a for="forms">value</a> to a
  <a>valid floating-point number</a> that represents the <a>maximum</a>.

  When the element is <a>suffering from a step mismatch</a>, the user agent must round the element's
  <a for="forms">value</a> to the nearest number for which the element would not
  <a>suffer from a step mismatch</a>, and which is greater than or equal to the <a>minimum</a>, and,
  if the <a>maximum</a> is not less than the <a>minimum</a>, which is less than or equal to the
  <a>maximum</a>, if there is a number that matches these constraints. If two numbers match these
  constraints, then user agents must use the one nearest to positive infinity.

  <p class="example">For example, the markup
  <code>&lt;input&nbsp;type="range"&nbsp;min=0&nbsp;max=100&nbsp;step=20&nbsp;value=50&gt;</code>
  results in a range control whose initial value is 60.</p>

  <div class="example">
    Here is an example of a range control using an autocomplete list with the <{input/list}>
    attribute. This could be useful if there are values along the full range of the control that are
    especially important, such as preconfigured light levels or typical speed limits in a range
    control used as a speed control. The following markup fragment:

    <pre highlight="html">
&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
&lt;datalist id="powers"&gt;
  &lt;option value="0"&gt;
  &lt;option value="-30"&gt;
  &lt;option value="30"&gt;
<span class="bad"> &lt;option value="++50"&gt;</span>
&lt;/datalist&gt;
    </pre>

    ...with the following style sheet applied:

    <pre highlight="css">
input { height: 75px; width: 49px; background: #D5CCBB; color: black; }
    </pre>

    ...might render as:

    <img src="images/sample-range.png" width="49" height="75" alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." />

    Note how the user agent determined the orientation of the control from the ratio of the
    style-sheet-specified height and width properties. The colors were similarly derived from the
    style sheet. The tick marks, however, were derived from the markup. In particular, the
    <{input/step}> attribute has not affected the placement of tick marks, the user agent deciding
    to only use the author-specified completion values and then adding longer tick marks at the
    extremes.

    Note also how the invalid value <code>++50</code> was completely ignored.
  </div>

  <div class="example">
    For another example, consider the following markup fragment:

    <pre highlight="html">
&lt;input name=x type=range min=100 max=700 step=9.09090909 value=509.090909&gt;
    </pre>

    A user agent could display in a variety of ways, for instance:

    <img src="images/sample-range-2a.png" width="231" height="57" alt="As a dial." />

    Or, alternatively, for instance:

    <img src="images/sample-range-2b.png" width="445" height="56" alt="As a long horizontal slider with tick marks." />

    The user agent could pick which one to display based on the dimensions given in the style sheet.
    This would allow it to maintain the same resolution for the tick marks, despite the differences
    in width.
  </div>

  <div class="example">
    Finally, here is an example of a range control with two labeled values:

    <pre highlight="html">
&lt;input type="range" name="a" list="a-values"&gt;
&lt;datalist id="a-values"&gt;
&lt;option value="10" label="Low"&gt;
&lt;option value="90" label="High"&gt;
&lt;/datalist&gt;
    </pre>

    With styles that make the control draw vertically, it might look as follows:

    <img src="images/sample-range-labels.png" width="103" height="164" alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." />
  </div>

  <p class="note">In this state, the range and step constraints are enforced even during user input,
  and there is no way to set the value to the empty string.</p>

  The <{input/min}> attribute, if specified, must have a value that is a
  <a>valid floating-point number</a>. The <a>default minimum</a> is 0. The <{input/max}> attribute,
  if specified, must have a value that is a <a>valid floating-point number</a>. The
  <a>default maximum</a> is 100.

  The <a>step scale factor</a> is 1. The <a>default step</a> is 1 (allowing only integers, unless
  the <{input/min}> attribute has a non-integer value).

  <strong>The <a>algorithm to convert a string to a number</a>, given a string <var>input</var>, is
  as follows</strong>: If applying the <a>rules for parsing floating-point number values</a> to
  <var>input</var> results in an error, then return an error; otherwise, return the resulting
  number.

  <strong>The <a>algorithm to convert a number to a string</a>, given a number <var>input</var>, is
  as follows</strong>: Return the
  <a lt="best floating-point number">best representation, as a floating-point number</a>, of
  <var>input</var>.

  <div class="bookkeeping">
    The following common <{input}> element content attributes, IDL attributes, and
    methods <a>apply</a> to the element:
    <{input/autocomplete}>,
    <{input/list}>,
    <{input/max}>,
    <{input/min}>,
    <{input/multiple}>, and
    <{input/step}> content attributes;
    {{HTMLInputElement/list}},
    {{HTMLInputElement/value}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/stepDown()}} and
    {{HTMLInputElement/stepUp()}} methods.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/maxlength}>,
    <{input/minlength}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>,
    <{input/size}>,
    <{input/src}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}}, and
    {{HTMLInputElement/valueAsDate}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}}, and
    {{HTMLInputElement/setSelectionRange()}} methods.
  </div>

<h6 id="color-state-typecolor"><dfn element-state for="input">Color</dfn> state (<code>type=color</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Color</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a color well control, for setting the
  element's <a for="forms">value</a> to a string representing a <a>simple
  color</a>.

  <div class="impl">

  <p class="note">
    In this state, there is always a color picked, and there is no way to set the
  value to the empty string.
  </p>

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the color represented by its <a for="forms">value</a>, as
  obtained from applying the <a>rules for parsing simple color values</a> to it. User agents
  must not allow the user to set the <a for="forms">value</a> to a string that is
  not a <a>valid lowercase simple color</a>. If the user agent provides a user interface for
  selecting a color, then the <a for="forms">value</a> must be set to the result
  of using the <a>rules for serializing simple color values</a> to the user's selection. User
  agents must not allow the user to set the <a for="forms">value</a> to the empty
  string.

  <strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a>valid lowercase simple color</a>, the control is
  <a>suffering from bad input</a>.

  </div>

  The <{input/value}> attribute, if specified and not empty, must
  have a value that is a <a>valid simple color</a>.

  <div class="impl">

  <strong>The <a>value sanitization algorithm</a> is as follows</strong>: If the <a for="forms">value</a> of the element is a <a>valid simple color</a>, then
  set it to the <a for="forms">value</a> of the element <a>converted to ASCII
  lowercase</a>; otherwise, set it to the string "<code>#000000</code>".

  </div>

  <div class="bookkeeping">

    The following common <{input}> element content attributes and IDL attributes <a>apply</a> to the element:
    <{input/autocomplete}> and
    <{input/list}> content attributes;
    {{HTMLInputElement/list}} and
    {{HTMLInputElement/value}} IDL attributes;
    {{HTMLInputElement/select()}} method.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a for="forms">value</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.
  </div>

<h6 id="checkbox-state-typecheckbox"><dfn element-state for="input">Checkbox</dfn> state (<code>type=checkbox</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>checkbox</code></a>
    (default - <a><em>do not set</em></a>) or <a value for="role"><code>menuitemcheckbox</code></a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Checkbox</a> state, the rules in this section
  apply.

  </div>

  The <{input}> element <a>represents</a> a two-state control that represents the
  element's <a for="forms">checkedness</a> state. If the element's <a for="forms">checkedness</a> state is true, the control represents a positive
  selection, and if it is false, a negative selection. If the element's <code>indeterminate</code> IDL attribute is set to true, then the
  control's selection should be obscured as if the control was in a third, indeterminate, state.

  <p class="note">
    The control is never a true tri-state control, even if the element's <code>indeterminate</code> IDL attribute is set to true. The <code>indeterminate</code> IDL attribute only gives the appearance of a
  third state.
  </p>

  <div class="impl">

  If the element is <i>mutable</i>, then: The <a>pre-click
  activation steps</a> consist of setting the element's <a for="forms">checkedness</a> to its opposite value (i.e., true if it is false,
  false if it is true), and of setting the element's <code>indeterminate</code> IDL attribute to false. The <a>canceled
  activation steps</a> consist of setting the <a for="forms">checkedness</a> and the element's <code>indeterminate</code> IDL attribute back to the values they had
  before the <a>pre-click activation steps</a> were run. The <a>activation behavior</a>
  is to <a>fire a simple event</a> that bubbles named <code>input</code> at the element and then <a>fire a simple event</a>
  that bubbles named <code>change</code> at the element.

  If the element is not <i>mutable</i>, it has no <a>activation
  behavior</a>.

  <strong>Constraint validation</strong>: If the element is <i>required</i> and its <a for="forms">checkedness</a> is false, then the element is <a>suffering from
  being missing</a>.

  </div>

  <dl class="domintro">

    <dt><var>input</var> . <code>indeterminate</code> [ = <var>value</var> ]</dt>

    <dd>

    When set, overrides the rendering of <a element-state for="input">checkbox</a>
    controls so that the current value is not visible.

    </dd>

  </dl>

  <div class="bookkeeping">

    The following common <{input}> element content attributes and IDL attributes <a>apply</a> to the element:
    <{input/checked}>, and
    <{input/required}> content attributes;
    {{HTMLInputElement/checked}} and
    {{HTMLInputElement/value}} IDL attributes.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a mode for="input">default/on</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/autocomplete}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/files}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

  </div>

<h6 id="radio-button-state-typeradio"><dfn element-state for="input">Radio Button</dfn> state (<code>type=radio</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>radio</code></a>
    (default - <a><em>do not set</em></a>) or <a value for="role"><code>menuitemradio</code></a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Radio Button</a> state, the rules in this section
  apply.

  </div>

  The <{input}> element <a>represents</a> a control that, when used in conjunction
  with other <{input}> elements, forms a <i>radio button group</i> in which only one
  control can have its <a for="forms">checkedness</a> state set to true. If
  the element's <a for="forms">checkedness</a> state is true, the control
  represents the selected control in the group, and if it is false, it indicates a control in the
  group that is not selected.

  The <dfn><i>radio button group</i></dfn> that contains an <{input}> element
  <var>a</var> also contains all the other <{input}> elements <var>b</var> that fulfill all
  of the following conditions:

  <ul>

    <li>The <{input}> element <var>b</var>'s <{input/type}> attribute is in the <a element-state for="input">Radio
    Button</a> state.</li>

    <li>Either <var>a</var> and <var>b</var> have the same <a>form owner</a>,
    or they both have no <a>form owner</a>.</li>

    <li>Both <var>a</var> and <var>b</var> are in the same <a>home
    subtree</a>.</li>

    <li>They both have a <{input/name}> attribute, their <{input/name}> attributes are not empty, and the value of <var>a</var>'s <{input/name}> attribute is a <a>compatibility
    caseless</a> match for the value of <var>b</var>'s <{input/name}> attribute.</li>

  </ul>

  A document must not contain an <{input}> element whose <i>radio button group</i>
  contains only that element.

  <div class="impl">

  When any of the following phenomena occur, if the element's <a for="forms">checkedness</a> state is true after the occurrence, the <a for="forms">checkedness</a> state of all the other elements in the same <i>radio
  button group</i> must be set to false:

  <ul>

    <li>The element's <a for="forms">checkedness</a> state is set to true (for
    whatever reason).</li>

    <li>The element's <{input/name}> attribute is set, changed, or
    removed.</li>

    <li>The element's <a>form owner</a> changes.</li>

    <li><a>A type change is signalled</a> for the element.</li>

  </ul>

  If the element <var>R</var> is <i>mutable</i>, then: The
  <a>pre-click activation steps</a> for <var>R</var> consist of getting a reference to the
  element in <var>R</var>'s <a>radio button group</a> that has its <a for="forms">checkedness</a> set to true, if any, and then setting
  <var>R</var>'s <a for="forms">checkedness</a> to true. The <a>canceled
  activation steps</a> for <var>R</var> consist of checking if the element to which a reference
  was obtained in the <a>pre-click activation steps</a>, if any, is still in what is now
  <var>R</var>'s <a>radio button group</a>, if it still has one, and if so, setting that
  element's <a for="forms">checkedness</a> to true; or else, if there was no
  such element, or that element is no longer in <var>R</var>'s <a>radio button group</a>, or
  if <var>R</var> no longer has a <a>radio button group</a>, setting <var>R</var>'s <a for="forms">checkedness</a> to false. The <a>activation behavior</a> for
  <var>R</var> is to <a>fire a simple event</a> that bubbles named <code>input</code> at <var>R</var> and then <a>fire a simple event</a>
  that bubbles named <code>change</code> at <var>R</var>.

  If the element is not <i>mutable</i>, it has no <a>activation
  behavior</a>.

  <strong>Constraint validation</strong>: If an element in the <i>radio button group</i> is <i>required</i>, and all of the <{input}> elements in the
  <i>radio button group</i> have a <a for="forms">checkedness</a> that is
  false, then the element is <a>suffering from being missing</a>.

  </div>

  <p class="note">
    If none of the radio buttons in a <a>radio button group</a> are checked when
  they are <a for="document">inserted into the document</a>, then they will all be initially unchecked in the interface,
  until such time as one of them is checked (either by the user or by script).
  </p>

  <div class="bookkeeping">

    The following common <{input}> element content attributes and IDL attributes <a>apply</a> to the element:
    <{input/checked}> and
    <{input/required}> content attributes;
    {{HTMLInputElement/checked}} and
    {{HTMLInputElement/value}} IDL attributes.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a mode for="input">default/on</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/autocomplete}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/files}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

  </div>

<h6 id="file-upload-state-typefile"><dfn element-state for="input" lt="file upload|file upload controls">File Upload</dfn> state (<code>type=file</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">File Upload</a> state, the rules in this section
  apply.

  </div>

  The <{input}> element <a>represents</a> a list of <dfn>selected files</dfn>, each file consisting of a file
  name, a file type, and a file body (the contents of the file).

  <div class="impl">

  File names must not contain <a>path components</a>, even
  in the case that a user has selected an entire directory hierarchy or multiple files with the same
  name from different directories. <dfn>Path components</dfn>, for
  the purposes of the <a element-state for="input">File Upload</a> state, are those parts
  of file names that are separated by U+005C REVERSE SOLIDUS character (\) characters.

  Unless the <code>multiple</code> attribute is set, there must be
  no more than one file in the list of <a>selected
  files</a>.

  If the element is <i>mutable</i>, then the element's
  <a>activation behavior</a> is to run the following steps:

  <ol>

    <li>If the algorithm is not <a>allowed to show a popup</a>, then abort these steps
    without doing anything else.</li>

    <li>Return, but continue running these steps <a>in parallel</a>.</li>

    <li>Optionally, wait until any prior execution of this algorithm has terminated.

    </li><li>Display a prompt to the user requesting that the user specify some files. If the <{input/multiple}> attribute is not set, there must be no more than one
    file selected; otherwise, any number may be selected. Files can be from the filesystem or created
    on the fly, e.g., a picture taken from a camera connected to the user's device.

    </li><li>Wait for the user to have made their selection.</li>

    <li><a>Queue a task</a> to first update the element's <a>selected files</a> so that it represents the user's
    selection, then <a>fire a simple event</a> that bubbles named <code>input</code> at the <{input}> element, and finally <a>fire
    a simple event</a> that bubbles named <code>change</code> at the
    <{input}> element.</li>

  </ol>

  If the element is <i>mutable</i>, the user agent should allow the
  user to change the files on the list in other ways also, e.g., adding or removing files by
  drag-and-drop. When the user does so, the user agent must <a>queue a task</a> to first
  update the element's <a>selected files</a> so that
  it represents the user's new selection, then <a>fire a simple event</a> that bubbles named
  <code>input</code> at the <{input}> element, and finally
  <a>fire a simple event</a> that bubbles named <code>change</code> at the <{input}> element.

  If the element is not <i>mutable</i>, it has no <a>activation
  behavior</a> and the user agent must not allow the user to change the element's selection.

  <strong>Constraint validation</strong>: If the element is <i>required</i> and the list of <a>selected files</a> is empty, then the element is
  <a>suffering from being missing</a>.

  </div>

  <hr />

  The <dfn element-attr for="input"><code>accept</code></dfn> attribute may be specified to
  provide user agents with a hint of what file types will be accepted.

  If specified, the attribute must consist of a <a>set of comma-separated tokens</a>, each
  of which must be an <a>ASCII case-insensitive</a> match for one of the following:

  <dl>

    <dt>The string "<code>audio/*</code>"</dt>

    <dd>Indicates that sound files are accepted.</dd>

    <dt>The string "<code>video/*</code>"</dt>

    <dd>Indicates that video files are accepted.</dd>

    <dt>The string "<code>image/*</code>"</dt>

    <dd>Indicates that image files are accepted.</dd>

    <dt>A <a>valid MIME type with no parameters</a></dt>

    <dd>Indicates that files of the specified type are accepted.</dd>

    <dt>A string whose first character is a U+002E FULL STOP character (.)</dt>

    <dd>Indicates that files with the specified file extension are accepted.</dd>

  </dl>

  The tokens must not be <a>ASCII case-insensitive</a> matches for any of the other tokens
  (i.e., duplicates are not allowed). <span class="impl">To obtain the list of tokens from the
  attribute, the user agent must <a lt="split a string on commas">split the attribute value on
  commas</a>.</span>

  User agents may use the value of this attribute to display a more appropriate user interface
  than a generic file picker. For instance, given the value <code>image/*</code>, a user
  agent could offer the user the option of using a local camera or selecting a photograph from their
  photo collection; given the value <code>audio/*</code>, a user agent could offer the user
  the option of recording a clip using a headset microphone.

  <div class="impl">
    User agents should prevent the user from selecting files that are not accepted by one (or more)
    of these tokens.
  </div>

  <p class="note">
    Authors are encouraged to specify both any MIME types and any corresponding
  extensions when looking for data in a specific format.
  </p>

  <div class="example">
    For example, consider an application that converts Microsoft Word documents to Open Document
    Format files. Since Microsoft Word documents are described with a wide variety of MIME types and
    extensions, the site can list several, as follows:

    <pre highlight="html">
      &lt;input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;
    </pre>

    On platforms that only use file extensions to describe file types, the extensions listed here
    can be used to filter the allowed documents, while the MIME types can be used with the system's
    type registration table (mapping MIME types to extensions used by the system), if any, to
    determine any other extensions to allow. Similarly, on a system that does not have file names or
    extensions but labels documents with MIME types internally, the MIME types can be used to pick
    the allowed files, while the extensions can be used if the system has an extension registration
    table that maps known extensions to MIME types used by the system.
  </div>

  <p class="warning">Extensions tend to be ambiguous (e.g., there are an untold number of formats
  that use the "<code>.dat</code>" extension, and users can typically quite easily rename
  their files to have a "<code>.doc</code>" extension even if they are not Microsoft Word
  documents), and MIME types tend to be unreliable (e.g., many formats have no formally registered
  types, and many formats are in practice labeled using a number of different MIME types). Authors
  are reminded that, as usual, data received from a client should be treated with caution, as it may
  not be in an expected format even if the user is not hostile and the user agent fully obeyed the
  <{input/accept}> attribute's requirements.</p>

  <div class="example">
    For historical reasons, the {{HTMLInputElement/value}} IDL attribute prefixes
    the file name with the string "<code>C:\fakepath\</code>". Some legacy user agents
    actually included the full path (which was a security vulnerability). As a result of this,
    obtaining the file name from the {{HTMLInputElement/value}} IDL attribute in a
    backwards-compatible way is non-trivial. The following function extracts the file name in a
    suitably compatible manner:

    <pre highlight="javascript">
      function extractFilename(path) {
        if (path.substr(0, 12) == "C:\\fakepath\\")
          return path.substr(12); // modern browser
        var x;
        x = path.lastIndexOf('/');
        if (x &gt;= 0) // Unix-based path
          return path.substr(x+1);
        x = path.lastIndexOf('\\');
        if (x &gt;= 0) // Windows-based path
          return path.substr(x+1);
        return path; // just the file name
      }
    </pre>

    This can be used as follows:

    <pre highlight="html">
      &lt;p&gt;&lt;input type=file name=image onchange="updateFilename(this.value)"&gt;&lt;/p&gt;
      &lt;p&gt;The name of the file you picked is: &lt;span id="filename"&gt;(none)&lt;/span&gt;&lt;/p&gt;
      &lt;script&gt;
        function updateFilename(path) {
          var name = extractFilename(path);
          document.getElementById('filename').textContent = name;
        }
      &lt;/script&gt;
    </pre>
  </div>

  <hr />

  <div class="bookkeeping">
    The following common <{input}> element content attributes and IDL attributes <a>apply</a> to the element:
    <{input/accept}>,
    <{input/multiple}>, and
    <{input/required}> content attributes;
    {{HTMLInputElement/files}} and
    {{HTMLInputElement/value}} IDL attributes;
    {{HTMLInputElement/select()}} method.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a mode for="input">filename</a>.

    The <code>input</code> and <code>change</code> events <a>apply</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/alt}>,
    <{input/autocomplete}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The element's <{input/value}> attribute must be omitted.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.
  </div>

<h6 id="submit-button-state-typesubmit"><dfn element-state for="input">Submit Button</dfn> state (<code>type=submit</code>)</h6>

  <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>button</code></a>
    (default - <a><em>do not set</em></a>).</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
  </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">submit button</a> state, the rules in this section
  apply.

  </div>

  The <{input}> element <a>represents</a> a button that, when activated, submits
  the form. <span class="impl">If the element has a <{input/value}>
  attribute, the button's label must be the value of that attribute; otherwise, it must be an
  implementation-defined string that means "Submit" or some such.</span> The element is a <a>button</a>, specifically a <a>submit
  button</a>.
  <a class="fingerprint" href="#fingerprinting-vector"><img height="21" src="images/fingerprint.png" width="15" alt="(This is a fingerprinting vector.)" /></a>

  <p class="note">
    Since the default label is implementation-defined, and the width of the button
  typically depends on the button's label, the button's width can leak a few bits of fingerprintable
  information. These bits are likely to be strongly correlated to the identity of the user agent and
  the user's locale.
  </p>

  <div class="impl">

  If the element is <i>mutable</i>, then the element's
  <a>activation behavior</a> is as follows: if the element has a <a>form owner</a>,
  and the element's <a>node document</a> is <a>fully active</a>,
  <a>submit</a> the <a>form owner</a> from the
  <{input}> element; otherwise, do nothing.

  If the element is not <i>mutable</i>, it has no <a>activation
  behavior</a>.

  </div>

  The <{input/formaction}>, <{input/formenctype}>, <{input/formmethod}>, <{input/formnovalidate}>, and <{input/formtarget}> attributes are <a>attributes for form
  submission</a>.

  <p class="note">
    The <{input/formnovalidate}> attribute can be
  used to make submit buttons that do not trigger the constraint validation.
  </p>

  <div class="bookkeeping">

    The following common <{input}> element content attributes and IDL attributes <a>apply</a> to the element:
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>, and
    <{input/formtarget}> content attributes;
    {{HTMLInputElement/value}} IDL attribute.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a mode for="input">default</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/autocomplete}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The <code>input</code> and <code>change</code> events <a>do not apply</a>.

  </div>

<h6 id="image-button-state-typeimage"><dfn element-state for="input">Image Button</dfn> state (<code>type=image</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>button</code></a>
    (default - <a><em>do not set</em></a>),
    <a value for="role"><code>link</code></a>,
      <a value for="role"><code>menuitem</code></a>,
    <a value for="role"><code>menuitemcheckbox</code></a>,
      <a value for="role"><code>menuitemradio</code></a>
    or <a value for="role"><code>radio</code></a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">image button</a> state, the rules in this section
  apply.

  </div>

  The <{input}> element <a>represents</a> either an image from which a user can
  select a coordinate and submit the form, or alternatively a button from which the user can submit
  the form. The element is a <a>button</a>, specifically a <a element-state for="input">submit button</a>.

  <p class="note">
    The coordinate is sent to the server <a>during form submission</a> by sending two entries for the element, derived from the name
  of the control but with "<code>.x</code>" and "<code>.y</code>" appended to the
  name with the <var>x</var> and <var>y</var> components of the coordinate
  respectively.
  </p>

  <hr />

  The image is given by the <dfn element-attr for="input"><code>src</code></dfn> attribute. The
  <{input/src}> attribute must be present, and must contain a <a>valid
  non-empty URL potentially surrounded by spaces</a> referencing a non-interactive, optionally
  animated, image resource that is neither paged nor scripted.

  <div class="impl">

  When any of the these events occur

  <ul>

    <li>the <{input}> element's <{input/type}> attribute is
    first set to the <a element-state for="input">Image Button</a> state (possibly when
    the element is first created), and the <{input/src}> attribute is
    present</li>

    <li>the <{input}> element's <{input/type}> attribute is
    changed back to the <a element-state for="input">Image Button</a> state, and the <{input/src}> attribute is present, and its value has changed since the last
    time the <{input/type}> attribute was in the <a element-state for="input">Image Button</a> state</li>

    <li>the <{input}> element's <{input/type}> attribute is in
    the <a element-state for="input">Image Button</a> state, and the <{input/src}> attribute is set or changed</li>

  </ul>

  then unless the user agent cannot support images, or its support for images has been disabled,
  or the user agent only fetches images on demand, or the <{input/src}>
  attribute's value is the empty string, the user agent must <a>parse</a> the value of the <{input/src}>
  attribute value, relative to the element's <a>node document</a>, and if that is successful, run these substeps:

  <ol>
    <li>Let <var>request</var> be a new <a>request</a> whose
    <a for="url">URL</a> is the <a>resulting URL string</a>,
    <a>client</a> is the element's <a>node document</a>'s
    <code>Window</code> object's <a>environment settings object</a>, <a for="request">type</a> is "<code>image</code>", <a>destination</a> is "<code>subresource</code>",
    <a>omit-<code>Origin</code>-header flag</a> is set, <a>credentials mode</a> is "<code>include</code>", and whose <a>use-URL-credentials flag</a> is set.</li>

    <li><a>Fetch</a> <var>request</var>.</li>
  </ol>

  Fetching the image must <a>delay the load event</a> of the element's <a>node document</a> until the
  <a>task</a> that is <a>queued</a> by the
  <a>networking task source</a> once the resource has been fetched (defined below) has been
  run.

  If the image was successfully obtained, with no network errors, and the image's type is a
  supported image type, and the image is a valid image of that type, then the image is said to be
  <dfn><i>available</i></dfn>. If this is true before the image is
  completely downloaded, each <a>task</a> that is <a>queued</a> by the <a>networking task source</a> while the image is being fetched
  must update the presentation of the image appropriately.

  The user agent should apply the <a>image sniffing
  rules</a> to determine the type of the image, with the image's <a>associated Content-Type headers</a> giving the <var>official
  type</var>. If these rules are not applied, then the type of the image must be the type given by
  the image's <a>associated Content-Type headers</a>.

  User agents must not support non-image resources with the <{input}> element. User
  agents must not run executable code embedded in the image resource. User agents must only display
  the first page of a multipage resource. User agents must not allow the resource to act in an
  interactive fashion, but should honor any animation in the resource.

  The <a>task</a> that is <a>queued</a>
  by the <a>networking task source</a> once the resource has been fetched, must, if the
  download was successful and the image is <i>available</i>,
  <a>queue a task</a> to <a>fire a simple event</a> named <code>load</code> at the <{input}> element; and otherwise, if the fetching
  process fails without a response from the remote server, or completes but the image is not a valid
  or supported image, <a>queue a task</a> to <a>fire a simple event</a> named <code>error</code> on the <{input}> element.

  <hr />

  </div>

  The <dfn element-attr for="input"><code>alt</code></dfn> attribute provides the textual label for
  the button for users and user agents who cannot use the image. The <{input/alt}> attribute must be present, and must contain a non-empty string
  giving the label that would be appropriate for an equivalent button if the image was
  unavailable.

  The <{input}> element supports <a>dimension attributes</a>.

  <div class="impl">

  <hr />

  If the <{input/src}> attribute is set, and the image is <i>available</i> and the user agent is configured to display that image,
  then: The element <a>represents</a> a control for selecting a <a>coordinate</a> from the image specified by the
  <{input/src}> attribute; if the element is <i>mutable</i>, the user agent should allow the user to select this <a>coordinate</a>, and the element's <a>activation
  behavior</a> is as follows: if the element has a <a>form owner</a>, and the element's
  <a>node document</a> is <a>fully active</a>, take the user's selected <a>coordinate</a>, and <a>submit</a> the <{input}> element's <a>form owner</a>
  from the <{input}> element. If the user activates the control without explicitly
  selecting a coordinate, then the coordinate (0,0) must be assumed.

  Otherwise, the element <a>represents</a> a submit button whose label is given by the
  value of the <{input/alt}> attribute; if the element is <i>mutable</i>, then the element's <a>activation behavior</a> is as
  follows: if the element has a <a>form owner</a>, and the element's <a>node document</a> is
  <a>fully active</a>, set the <a>selected
  coordinate</a> to (0,0), and <a>submit</a> the
  <{input}> element's <a>form owner</a> from the <{input}> element.

  In either case, if the element is <i>mutable</i> but has no
  <a>form owner</a> or the element's <a>node document</a> is not <a>fully active</a>,
  then its <a>activation behavior</a> must be to do nothing. If the element is not <i>mutable</i>, it has no <a>activation behavior</a>.

  The <dfn lt="coordinate|selected coordinate|indicated a coordinate">selected coordinate</dfn> must consist of
  an <var>x</var>-component and a <var>y</var>-component. The coordinates
  represent the position relative to the edge of the image, with the coordinate space having the
  positive <var>x</var> direction to the right, and the positive <var>y</var>
  direction downwards.

  The <var>x</var>-component must be a <a>valid integer</a> representing a number
  <var>x</var> in the range -(<var>border<sub>left</sub></var>+<var>padding<sub>left</sub></var>) ≤ <var>x</var> ≤ <var>width</var>+<var>border<sub>right</sub></var>+<var>padding<sub>right</sub></var>, where <var>width</var> is the rendered width of the image, <var>border<sub>left</sub></var> is the width of the border on the left of the image, <var>padding<sub>left</sub></var> is the width of the padding on the left of the
  image, <var>border<sub>right</sub></var> is the width of the border on the right
  of the image, and <var>padding<sub>right</sub></var> is the width of the padding
  on the right of the image, with all dimensions given in CSS pixels.

  The <var>y</var>-component must be a <a>valid integer</a> representing a number
  <var>y</var> in the range -(<var>border<sub>top</sub></var>+<var>padding<sub>top</sub></var>) ≤ <var>y</var> ≤ <var>height</var>+<var>border<sub>bottom</sub></var>+<var>padding<sub>bottom</sub></var>, where
  <var>height</var> is the rendered height of the image, <var>border<sub>top</sub></var> is the width of the border above the image, <var>padding<sub>top</sub></var> is the width of the padding above the image, <var>border<sub>bottom</sub></var> is the width of the border below the image, and <var>padding<sub>bottom</sub></var> is the width of the padding below the image, with
  all dimensions given in CSS pixels.

  Where a border or padding is missing, its width is zero CSS pixels.

  <hr />

  </div>

  The <{input/formaction}>, <{input/formenctype}>, <{input/formmethod}>, <{input/formnovalidate}>, and <{input/formtarget}> attributes are <a>attributes for form
  submission</a>.

  <dl class="domintro">

    <dt><var>image</var> . <code>width</code> [ = <var>value</var> ]</dt>
    <dt><var>image</var> . <code>height</code> [ = <var>value</var> ]</dt>

    <dd>

    These attributes return the actual rendered dimensions of the image, or zero if the
    dimensions are not known.

    They can be set, to change the corresponding content attributes.

    </dd>

  </dl>

  <div class="bookkeeping">

    The following common <{input}> element content attributes and IDL attributes <a>apply</a> to the element:
    <{input/alt}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/src}>, and
    <{input/width}> content attributes;
    {{HTMLInputElement/value}} IDL attribute.

    The {{HTMLInputElement/value}} IDL attribute is in mode <a mode for="input">default</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/autocomplete}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>,
    <{input/size}>, and
    <{input/step}>.

    The element's <{input/value}> attribute must be omitted.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The <code>input</code> and <code>change</code> events <a>do not apply</a>.

  </div>

  <p class="note">
    Many aspects of this state's behavior are similar to the behavior of the
  <{img}> element. Readers are encouraged to read that section, where many of the same
  requirements are described in more detail.
  </p>

  <div class="example">
    Take the following form:

    <pre highlight="html">
&lt;form action="process.cgi"&gt;
  &lt;input type=image src=map.png name=where alt="Show location list"&gt;
&lt;/form&gt;
    </pre>

    If the user clicked on the image at coordinate (127,40) then the URL used to submit the form
    would be "<code>process.cgi?where.x=127&amp;where.y=40</code>".

    (In this example, it's assumed that for users who don't see the map, and who instead just see
    a button labeled "Show location list", clicking the button will cause the server to show a list
    of locations to pick from instead of the map.)

  </div>

<h6 id="reset-button-state-typereset"><dfn element-state for="input">Reset Button</dfn> state (<code>type=reset</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>button</code></a>
    (default - <a><em>do not set</em></a>).</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a element-state for="input">Reset Button</a> state, the rules in this section
  apply.

  </div>

  The <{input}> element <a>represents</a> a button that, when activated, resets
  the form. <span class="impl">If the element has a <{input/value}>
  attribute, the button's label must be the value of that attribute; otherwise, it must be an
  implementation-defined string that means "Reset" or some such.</span> The element is a <a>button</a>.
  <a class="fingerprint" href="#fingerprinting-vector"><img height="21" src="images/fingerprint.png" width="15" alt="(This is a fingerprinting vector.)" /></a>

  <p class="note">
    Since the default label is implementation-defined, and the width of the button
  typically depends on the button's label, the button's width can leak a few bits of fingerprintable
  information. These bits are likely to be strongly correlated to the identity of the user agent and
  the user's locale.
  </p>

  <div class="impl">

  If the element is <i>mutable</i>, then the element's
  <a>activation behavior</a>, if the element has a <a>form owner</a> and the element's
  <a>node document</a> is <a>fully active</a>, is to <a>reset</a> the <a>form owner</a>; otherwise, it is to do
  nothing.

  If the element is not <i>mutable</i>, it has no <a>activation
  behavior</a>.

  <strong>Constraint validation</strong>: The element is <a>barred from constraint
  validation</a>.

  </div>

  <div class="bookkeeping">

    The {{HTMLInputElement/value}} IDL attribute <a>applies</a> to this element and is in mode <a mode for="input">default</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/autocomplete}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The <code>input</code> and <code>change</code> events <a>do not apply</a>.

  </div>

<h6 id="button-state-typebutton"><dfn element-state for="input">Button</dfn> state (<code>type=button</code>)</h6>

    <div class="note">
    <dl>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>button</code></a>
    (default - <a><em>do not set</em></a>),
    <a value for="role"><code>link</code></a>,
      <a value for="role"><code>menuitem</code></a>,
    <a value for="role"><code>menuitemcheckbox</code></a>,
      <a value for="role"><code>menuitemradio</code></a>
    or <a value for="role"><code>radio</code></a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    </dl>
    </div>

  <div class="impl">

  When an <{input}> element's <{input/type}> attribute is in
  the <a>Button</a> state, the rules in this section apply.

  </div>

  The <{input}> element <a>represents</a> a button with no default behavior. A
  label for the button must be provided in the <{input/value}>
  attribute, though it may be the empty string. <span class="impl">If the element has a <{input/value}> attribute, the button's label must be the value of that
  attribute; otherwise, it must be the empty string.</span> The element is a <a>button</a>.

  <div class="impl">

  If the element is <i>mutable</i>, the element's <a>activation
  behavior</a> is to do nothing.

  If the element is not <i>mutable</i>, it has no <a>activation
  behavior</a>.

  <strong>Constraint validation</strong>: The element is <a>barred from constraint
  validation</a>.

  </div>

  <div class="bookkeeping">

    The {{HTMLInputElement/value}} IDL attribute <a>applies</a> to this element and is in mode <a mode for="input">default</a>.

    The following content attributes must not be specified and <a>do not apply</a> to the
    element:
    <{input/accept}>,
    <{input/alt}>,
    <{input/autocomplete}>,
    <{input/checked}>,
    <{input/dirname}>,
    <{input/formaction}>,
    <{input/formenctype}>,
    <{input/formmethod}>,
    <{input/formnovalidate}>,
    <{input/formtarget}>,
    <{input/height}>,
    <{input/inputmode}>,
    <{input/list}>,
    <{input/max}>,
    <{input/maxlength}>,
    <{input/min}>,
    <{input/minlength}>,
    <{input/multiple}>,
    <{input/pattern}>,
    <{input/placeholder}>,
    <{input/readonly}>,
    <{input/required}>,
    <{input/size}>,
    <{input/src}>,
    <{input/step}>, and
    <{input/width}>.

    The following IDL attributes and methods <a>do not apply</a> to the element:
    {{HTMLInputElement/checked}},
    {{HTMLInputElement/files}},
    {{HTMLInputElement/list}},
    {{HTMLInputElement/selectionStart}},
    {{HTMLInputElement/selectionEnd}},
    {{HTMLInputElement/selectionDirection}},
    {{HTMLInputElement/valueAsDate}}, and
    {{HTMLInputElement/valueAsNumber}} IDL attributes;
    {{HTMLInputElement/select()}},
    {{HTMLInputElement/setRangeText()}},
    {{HTMLInputElement/setSelectionRange()}},
    {{HTMLInputElement/stepDown()}}, and
    {{HTMLInputElement/stepUp()}} methods.

    The <code>input</code> and <code>change</code> events <a>do not apply</a>.

  </div>

  <div class="impl">

<h5 id="implementation-notes-regarding-localization-of-form-controls"><dfn lt="implementation notes">Implementation notes regarding localization of form controls</dfn></h5>

  <em>This section is non-normative.</em>

  The formats shown to the user in date, time, and number controls is independent of the format
  used for <a>form submission</a>.

  Browsers are encouraged to use user interfaces that present dates, times, and numbers according
  to the conventions of either the locale implied by the <{input}> element's
  <a>language</a> or the user's preferred locale. Using the page's locale will ensure
  consistency with page-provided data.

  <p class="example">For example, it would be confusing to users if an American English page claimed
  that a Cirque De Soleil show was going to be showing on 02/03, but their
  browser, configured to use the British English locale, only showed the date 03/02 in the ticket purchase date picker. Using the page's locale would at least ensure that the
  date was presented in the same format everywhere. (There's still a risk that the user would end up
  arriving a month late, of course, but there's only so much that can be done about such cultural
  differences...)

  </p></div>

<h5 id="common-input-element-attributes">Common <{input}> element attributes</h5>

  <div class="impl">

  These attributes only <a>apply</a> to an <{input}>
  element if its <{input/type}> attribute is in a state whose definition
  declares that the attribute <a>applies</a>. When an attribute
  <a>doesn't apply</a> to an <{input}> element, user agents must
  <a>ignore</a> the attribute, regardless of the requirements and definitions below.

  </div>

<h6 id="the-maxlength-and-minlength-attributes">The <code>maxlength</code> and <code>minlength</code> attributes</h6>

  The <dfn element-attr for="input"><code>maxlength</code></dfn> attribute<span class="impl">, when it <a>applies</a>,</span> is a <a>form control <code>maxlength</code> attribute</a><span class="impl"> controlled by the <{input}> element's <a for="input">dirty value flag</a></span>.

  The <dfn element-attr for="input"><code>minlength</code></dfn> attribute<span class="impl">, when it <a>applies</a>,</span> is a <a>form control <code>minlength</code> attribute</a><span class="impl"> controlled by the <{input}> element's <a for="input">dirty value flag</a></span>.

  If the <{input}> element has a <a>maximum allowed value length</a>, then the
  <a>code-unit length</a> of the value of the element's <code>value</code> attribute must be equal to or less than the element's
  <a>maximum allowed value length</a>.

  <div class="example">
    The following extract shows how a messaging client's text entry could be arbitrarily
    restricted to a fixed number of characters, thus forcing any conversation through this medium to
    be terse and discouraging intelligent discourse.

    <pre highlight="html">
&lt;label&gt;What are you doing? &lt;input name=status maxlength=140&gt;&lt;/label&gt;
    </pre>

  </div>

  <div class="example">
    Here, a password is given a minimum length:

    <pre highlight="html">
&lt;p&gt;&lt;label&gt;Username: &lt;input name=u required&gt;&lt;/label&gt;
&lt;p&gt;&lt;label&gt;Password: &lt;input name=p required minlength=12&gt;&lt;/label&gt;
    </pre>

  </div>

<h6 id="the-size-attribute">The <code>size</code> attribute</h6>

  The <dfn element-attr for="input"><code>size</code></dfn> attribute gives the number of
  characters that, in a visual rendering, the user agent is to allow the user to see while editing
  the element's <a for="forms">value</a>.

  The <code>size</code> attribute, if specified, must have a value that
  is a <a>valid non-negative integer</a> greater than zero.

  <div class="impl">

  If the attribute is present, then its value must be parsed using the <a>rules for parsing
  non-negative integers</a>, and if the result is a number greater than zero, then the user agent
  should ensure that at least that many characters are visible.

  The <code>size</code> IDL attribute is <a>limited to only
  non-negative numbers greater than zero</a> and has a default value of 20.

  </div>

<h6 id="the-readonly-attribute">The <code>readonly</code> attribute</h6>

  The <dfn element-attr for="input"><code>readonly</code></dfn> attribute is a <a>boolean
  attribute</a> that controls whether or not the user can edit the form control. <span class="impl">When specified, the element is not <i>mutable</i>.</span>

  <div class="impl">

  <strong>Constraint validation</strong>: If the <code>readonly</code> attribute is specified on an <{input}>
  element, the element is <a>barred from constraint validation</a>.

  </div>

  <p class="note">
    The difference between <code>disabled</code> and <code>readonly</code> is that read-only controls are still focusable, so the
  user can still select the text and interact with it, whereas disabled controls are entirely
  non-interactive. (For this reason, only text controls can be made read-only: it wouldn't make
  sense for checkboxes or buttons, for instances.)
  </p>

  <div class="example">
    In the following example, the existing product identifiers cannot be modified, but they are
    still displayed as part of the form, for consistency with the row representing a new product
    (where the identifier is not yet filled in).

    <pre highlight="html">
&lt;form action="products.cgi" method="post" enctype="multipart/form-data"&gt;
  &lt;table&gt;
  &lt;tr&gt; &lt;th&gt; Product ID &lt;th&gt; Product name &lt;th&gt; Price &lt;th&gt; Action
  &lt;tr&gt;
    &lt;td&gt; &lt;input readonly="readonly" name="1.pid" value="H412"&gt;
    &lt;td&gt; &lt;input required="required" name="1.pname" value="Floor lamp Ulke"&gt;
    &lt;td&gt; $&lt;input required="required" type="number" min="0" step="0.01" name="1.pprice" value="49.99"&gt;
    &lt;td&gt; &lt;button formnovalidate="formnovalidate" name="action" value="delete:1"&gt;Delete&lt;/button&gt;
  &lt;tr&gt;
    &lt;td&gt; &lt;input readonly="readonly" name="2.pid" value="FG28"&gt;
    &lt;td&gt; &lt;input required="required" name="2.pname" value="Table lamp Ulke"&gt;
    &lt;td&gt; $&lt;input required="required" type="number" min="0" step="0.01" name="2.pprice" value="24.99"&gt;
    &lt;td&gt; &lt;button formnovalidate="formnovalidate" name="action" value="delete:2"&gt;Delete&lt;/button&gt;
  &lt;tr&gt;
    &lt;td&gt; &lt;input required="required" name="3.pid" value="" pattern="\[A-Z0-9]+"&gt;
    &lt;td&gt; &lt;input required="required" name="3.pname" value=""&gt;
    &lt;td&gt; $&lt;input required="required" type="number" min="0" step="0.01" name="3.pprice" value=""&gt;
    &lt;td&gt; &lt;button formnovalidate="formnovalidate" name="action" value="delete:3"&gt;Delete&lt;/button&gt;
  &lt;/table&gt;
  &lt;p&gt; &lt;button formnovalidate="formnovalidate" name="action" value="add"&gt;Add&lt;/button&gt; &lt;/p&gt;
  &lt;p&gt; &lt;button name="action" value="update"&gt;Save&lt;/button&gt; &lt;/p&gt;
&lt;/form&gt;
    </pre>

  </div>

<h6 id="the-required-attribute">The <code>required</code> attribute</h6>

  The <dfn element-attr for="input"><code>required</code></dfn> attribute is a <a>boolean
  attribute</a>. When specified, the element is <dfn><i>required</i></dfn>.

  <div class="impl">

  <strong>Constraint validation</strong>: If the element is <i>required</i>, and its <code>value</code>
  IDL attribute <a>applies</a> and is in the mode <a for="forms">value</a>, and the element is <i>mutable</i>, and the element's <a for="forms">value</a> is the empty string, then the element is <a>suffering
  from being missing</a>.

  </div>

  <div class="example">
    The following form has two required fields, one for an e-mail address and one for a password.
    It also has a third field that is only considered valid if the user types the same password in
    the password field and this third field.

    <pre highlight="html">
&lt;h1&gt;Create new account&lt;/h1&gt;
&lt;form action="/newaccount" method=post
      oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')"&gt;
  &lt;p&gt;
  &lt;label for="username"&gt;E-mail address:&lt;/label&gt;
  &lt;input id="username" type=email required name=un&gt;
  &lt;p&gt;
  &lt;label for="password1"&gt;Password:&lt;/label&gt;
  &lt;input id="password1" type=password required name=up&gt;
  &lt;p&gt;
  &lt;label for="password2"&gt;Confirm password:&lt;/label&gt;
  &lt;input id="password2" type=password name=up2&gt;
  &lt;p&gt;
  &lt;input type=submit value="Create account"&gt;
&lt;/form&gt;
    </pre>

  </div>

  <div class="example">
    For radio buttons, the <code>required</code> attribute is
    satisfied if any of the radio buttons in the <a>group</a> is
    selected. Thus, in the following example, any of the radio buttons can be checked, not just the
    one marked as required:

    <pre highlight="html">
&lt;fieldset&gt;
  &lt;legend&gt;Did the movie pass the Bechdel test?&lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="bechdel" value="no-characters"&gt; No, there are not even two female characters in the movie. &lt;/label&gt;
  &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="bechdel" value="no-names"&gt; No, the female characters never talk to each other. &lt;/label&gt;
  &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="bechdel" value="no-topic"&gt; No, when female characters talk to each other it's always about a male character. &lt;/label&gt;
  &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="bechdel" value="yes" <strong>required</strong>&gt; Yes. &lt;/label&gt;
  &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="bechdel" value="unknown"&gt; I don't know. &lt;/label&gt;
&lt;/fieldset&gt;
    </pre>

    To avoid confusion as to whether a <a>radio button group</a> is required or not, authors
    are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general,
    authors are encouraged to avoid having radio button groups that do not have any initially checked
    controls in the first place, as this is a state that the user cannot return to, and is therefore
    generally considered a poor user interface.

  </div>

<h6 id="the-multiple-attribute">The <code>multiple</code> attribute</h6>

  The <dfn element-attr for="input"><code>multiple</code></dfn> attribute is a <a>boolean
  attribute</a> that indicates whether the user is to be allowed to specify more than one
  value.

  <div class="example">
    The following extract shows how an e-mail client's "Cc" field could accept multiple e-mail
    addresses.

    <pre highlight="html">
&lt;label&gt;Cc: &lt;input type=email multiple name=cc&gt;&lt;/label&gt;
    </pre>

    If the user had, amongst many friends in their user contacts database, two friends "Arthur Dent"
    (with address "art@example.net") and "Adam Josh" (with address "adamjosh@example.net"), then,
    after the user has typed "a", the user agent might suggest these two e-mail addresses to the
    user.

    <img src="images/sample-email-1.png" width="500" height="140" alt="Form control group containing 'Send', 'Save now' and 'Discard' buttons, a 'To:' combo box with an 'a' displayed in the text box and 2 list items below.">

    The page could also link in the user's contacts database from the site:

    <pre highlight="html">
&lt;label&gt;Cc: &lt;input type=email multiple name=cc list=contacts&gt;&lt;/label&gt;
...
&lt;datalist id="contacts"&gt;
  &lt;option value="hedral@damowmow.com"&gt;
  &lt;option value="pillar@example.com"&gt;
  &lt;option value="astrophy@cute.example"&gt;
  &lt;option value="astronomy@science.example.org"&gt;
&lt;/datalist&gt;
    </pre>

    Suppose the user had entered "bob@example.net" into this text field, and then started typing a
    second e-mail address starting with "a". The user agent might show both the two friends mentioned
    earlier, as well as the "astrophy" and "astronomy" values given in the <{datalist}>
    element.

    <img src="images/sample-email-2.png" width="500" height="171" alt="Form control group containing 'send',
    'save now' and 'discard' buttons and a 'To:' combo box with 'bob@example.net,a' displayed in the text box and 4 list items below.">

  </div>

  <div class="example">
    The following extract shows how an e-mail client's "Attachments" field could accept multiple
    files for upload.

    <pre highlight="html">
&lt;label&gt;Attachments: &lt;input type=file multiple name=att&gt;&lt;/label&gt;
    </pre>

  </div>

<h6 id="the-pattern-attribute">The <code>pattern</code> attribute</h6>

  The <dfn element-attr for="input"><code>pattern</code></dfn> attribute specifies a regular
  expression against which the control's <a for="forms">value</a>, or, when the
  <code>multiple</code> attribute <a>applies</a> and is set, the control's <a for="forms">values</a>, are to be checked.

  If specified, the attribute's value must match the JavaScript <i>Pattern</i>
  production. [[!ECMA-262]]

  <div class="impl">

  If an <{input}> element has a <code>pattern</code>
  attribute specified, and the attribute's value, when compiled as a JavaScript regular expression
  with only the "<code>u</code>" flag specified, compiles successfully, then the resulting regular expression is the element's
  <dfn>compiled pattern regular expression</dfn>. If the element has no such attribute, or if the
  value doesn't compile successfully, then the element has no <a>compiled pattern regular
  expression</a>. [[!ECMA-262]]

  <p class="note">
    If the value doesn't compile successfully, user agents are encouraged to log this fact in a
    developer console, to aid debugging.
  </p>

  <strong>Constraint validation</strong>: If the element's <a for="forms">value</a> is not the empty string, and either the element's <code>multiple</code> attribute is not specified or it <a>does not apply</a> to the <{input}> element given its <{input/type}> attribute's current state, and the element has a
  <a>compiled pattern regular expression</a> but that regular expression does not match the
  entirety of the element's <a for="forms">value</a>, then the element is
  <a>suffering from a pattern mismatch</a>.

  <strong>Constraint validation</strong>: If the element's <a for="forms">value</a> is not the empty string, and the element's <code>multiple</code> attribute is specified and <a>applies</a> to the <{input}> element, and the element has
  a <a>compiled pattern regular expression</a> but that regular expression does not match the
  entirety of each of the element's <a for="forms">values</a>, then the
  element is <a>suffering from a pattern mismatch</a>.

  The <a>compiled pattern regular expression</a>, when matched against a string, must have
  its start anchored to the start of the string and its end anchored to the end of the string.

  <p class="note">
    This implies that the regular expression language used for this attribute is the
  same as that used in JavaScript, except that the <code>pattern</code>
  attribute is matched against the entire value, not just any subset (somewhat as if it implied a
  <code>^(?:</code> at the start of the pattern and a <code>)$</code> at the
  end).
  </p>

  </div>

  When an <{input}> element has a <code>pattern</code>
  attribute specified, authors should provide a description of the pattern in text near the
  control. Authors may also include a
  <dfn element-attr for="input"><code>title</code></dfn>
  attribute to give a description of the pattern. User agents may use
  the contents of this attribute, if it is present, when informing the
  user that the pattern is not matched, or at any other suitable time,
  such as in a tooltip or read out by assistive technology when the
  control gains focus.

  <p class="warning">Relying on the <code>title</code> attribute for the visual display
  of text content is currently discouraged as many user agents do not expose the attribute in an accessible manner
  as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear,
  which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or
  tablet).</p>

  <div class="example">
    For example, the following snippet:
    <pre highlight="html">
&lt;label&gt; Part number:
  &lt;input pattern="\[0-9]\[A-Z]{3}" name="part"
        title="A part number is a digit followed by three uppercase letters."/&gt;
&lt;/label&gt;
    </pre>
    ...could cause the user agent to display an alert such as:
    <pre><samp>A part number is a digit followed by three uppercase letters.
You cannot submit this form when the field is incorrect.</samp></pre>
  </div>

  When a control has a <code>pattern</code> attribute, the <code>title</code> attribute, if used, must describe the pattern. Additional
  information could also be included, so long as it assists the user in filling in the control.
  Otherwise, assistive technology would be impaired.

  <p class="example">For instance, if the title attribute contained the caption of the control,
  assistive technology could end up saying something like <samp>The text you have entered does not
  match the required pattern. Birthday</samp>, which is not useful.</p>

  user agents may still show the <code>title</code> in non-error situations (for
  example, as a tooltip when hovering over the control), so authors should be careful not to word
  <code>title</code>s as if an error has necessarily occurred.

<h6 id="the-min-and-max-attributes">The <code>min</code> and <code>max</code> attributes</h6>

  Some form controls can have explicit constraints applied limiting the allowed range of values
  that the user can provide. Normally, such a range would be linear and continuous. A form control
  can <dfn lt="has a periodic domain|have a periodic domain">have a periodic domain</dfn>, however, in which case the
  form control's broadest possible range is finite, and authors can specify explicit ranges within
  it that span the boundaries.

  <p class="example">Specifically, the broadest range of a <code>type=time</code> control is midnight to midnight (24 hours), and
  authors can set both continuous linear ranges (such as 9pm to 11pm) and discontinuous ranges
  spanning midnight (such as 11pm to 1am).</p>

  The <dfn element-attr for="input"><code>min</code></dfn> and <dfn element-attr for="input"><code>max</code></dfn> attributes indicate the allowed range of values for
  the element.

  <div class="impl">

  Their syntax is defined by the section that defines the <{input/type}> attribute's current state.

  If the element has a <{input/min}> attribute, and the result of
  applying the <a>algorithm to convert a string to a
  number</a> to the value of the <{input/min}> attribute is a number,
  then that number is the element's <dfn for="min">minimum</dfn>; otherwise, if the
  <{input/type}> attribute's current state defines a <dfn>default minimum</dfn>, then that is the <a for="min">minimum</a>; otherwise, the element has no <a for="min">minimum</a>.

  The <{input/min}> attribute also defines the <a>step base</a>.

  If the element has a <{input/max}> attribute, and the result of
  applying the <a>algorithm to convert a string to a
  number</a> to the value of the <{input/max}> attribute is a number,
  then that number is the element's <dfn for="max">maximum</dfn>; otherwise, if the
  <{input/type}> attribute's current state defines a <dfn>default maximum</dfn>, then that is the <a for="max">maximum</a>; otherwise, the element has no <a for="max">maximum</a>.

  </div>

  If the element does not <a>have a periodic domain</a>, the <{input/max}> attribute's value
  (the <a for="max">maximum</a>) must not be less than the <{input/min}> attribute's value
  (its <a for="min">minimum</a>).

  <div class="impl">

  <p class="note">
    If an element that does not <a>have a periodic
  domain</a> has a <a for="max">maximum</a> that is less than its <a for="min">minimum</a>, then so long as the element has a <a for="forms">value</a>, it will either be <a>suffering from an underflow</a>
  or <a>suffering from an overflow</a>.
  </p>

  An element <dfn lt="have a reversed range|has a reversed range">has a reversed range</dfn> if it <a>has a periodic domain</a> and its
  <a for="max">maximum</a> is less than its <a for="min">minimum</a>.

  </div>

  An element <dfn lt="have range limitations|has range limitations">has range limitations</dfn> if it has a defined
  <a for="min">minimum</a> or a defined <a for="max">maximum</a>.

  <div class="impl">

  How these range limitations apply depends on whether the element has a <code>multiple</code> attribute.

  <dl class="switch">

    <dt>If the element does not have a <code>multiple</code> attribute
    specified or if the <code>multiple</code> attribute <a>does not apply</a></dt>

    <dd>

    <strong>Constraint validation</strong>: When the element has a <a for="min">minimum</a> and does not <a>have a
    reversed range</a>, and the result of applying the <a>algorithm to convert a string to a number</a> to
    the string given by the element's <a for="forms">value</a> is a number, and
    the number obtained from that algorithm is less than the <a for="min">minimum</a>, the element is <a>suffering from an
    underflow</a>.

    <strong>Constraint validation</strong>: When the element has a <a for="max">maximum</a> and does not <a>have a
    reversed range</a>, and the result of applying the <a>algorithm to convert a string to a number</a> to
    the string given by the element's <a for="forms">value</a> is a number, and
    the number obtained from that algorithm is more than the <a for="max">maximum</a>, the element is <a>suffering from an
    overflow</a>.

    <strong>Constraint validation</strong>: When an element <a>has a reversed range</a>,
    and the result of applying the <a>algorithm to
    convert a string to a number</a> to the string given by the element's <a for="forms">value</a> is a number, and the number obtained from that algorithm
    is more than the <a for="max">maximum</a> <em>and</em> less than the <a for="min">minimum</a>, the element is simultaneously <a>suffering from an
    underflow</a> and <a>suffering from an overflow</a>.

    </dd>

    <dt>If the element does have a <code>multiple</code> attribute
    specified and the <code>multiple</code> attribute does <a>apply</a></dt>

    <dd>

    <strong>Constraint validation</strong>: When the element has a <a for="min">minimum</a>, and the result of applying the <a>algorithm to convert a string to a number</a> to
    any of the strings in the element's <a for="forms">values</a> is a number
    that is less than the <a for="min">minimum</a>, the element is
    <a>suffering from an underflow</a>.

    <strong>Constraint validation</strong>: When the element has a <a for="max">maximum</a>, and the result of applying the <a>algorithm to convert a string to a number</a> to
    any of the strings in the element's <a for="forms">values</a> is a number
    that is more than the <a for="max">maximum</a>, the element is
    <a>suffering from an overflow</a>.

    </dd>

  </dl>

  </div>

  <div class="example">
    The following date control limits input to dates that are before the 1980s:

    <pre highlight="html">
&lt;input name=bday type=date max="1979-12-31"&gt;
    </pre>

  </div>

  <div class="example">
    The following number control limits input to whole numbers greater than zero:

    <pre highlight="html">
&lt;input name=quantity required="" type="number" min="1" value="1"&gt;
    </pre>

  </div>

  <div class="example">
    The following time control limits input to those minutes that occur between 9pm and 6am,
    defaulting to midnight:

    <pre highlight="html">
&lt;input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00"&gt;
    </pre>

  </div>

<h6 id="the-step-attribute">The <code>step</code> attribute</h6>

  The <dfn element-attr for="input"><code>step</code></dfn> attribute indicates the granularity
  that is expected (and required) of the <a for="forms">value</a> or <a for="forms">values</a>, by limiting the allowed values. <span class="impl">The
  section that defines the <{input/type}> attribute's current state also
  defines the <dfn>default step</dfn>, the <dfn>step scale factor</dfn>, and in some cases the <dfn>default step base</dfn>, which are used in processing the
  attribute as described below.</span>

  The <{input/step}> attribute, if specified, must either have a
  value that is a <a>valid floating-point number</a> that <a lt="parse it as an integer">parses</a>
  to a number that is greater than zero, or must have a
  value that is an <a>ASCII case-insensitive</a> match for the string "<code>any</code>".

  The attribute provides the <dfn>allowed value step</dfn> for the
  element, as follows:

  1. If the <{input/step}> attribute is absent, then the <a>allowed value step</a> is the
      <a>default step</a> multiplied by the <a>step scale factor</a>.
  2. Otherwise, if the attribute's value is an <a>ASCII case-insensitive</a> match for the string
      "<code>any</code>", then there is no <a>allowed value step</a>.
  3. Otherwise, let <var>step value</var> be the result of running the
      <a>rules for parsing floating-point number values</a>, when they are applied to the
      <{input/step}> attribute's value.
  4. If the previous step returned an error, or <var>step value</var> is zero, or a number less than
      zero, then the <a>allowed value step</a> is the <a>default step</a> multiplied by the
      <a>step scale factor</a>.
  5. If the element's <{input/type}> attribute is in the
      <a element-state for="input">Date and Time</a>,
      <a element-state for="input">Date</a>,
      <a element-state for="input">Month</a>,
      <a element-state for="input">Week</a>, or
      <a element-state for="input">Time</a> state, then round <var>step value</var> to the nearest
      whole number using the "round to nearest + round half up" technique, unless the value is
      less-than one, in which case let <var>step value</var> be 1.
  6. The <a>allowed value step</a> is <var>step value</var> multiplied by the
      <a>step scale factor</a>.

  The <dfn>step base</dfn> is the value returned by the following algorithm:

  1. If the element has a <{input/min}> content attribute, and the result of applying the
      <a>algorithm to convert a string to a number</a> to the value of the <{input/min}> content
      attribute is not an error, then return that result and abort these steps.
  2. If the element has a <code>value</code> content attribute, and the result of applying the
      <a>algorithm to convert a string to a number</a> to the value of the <{input/value}> content
      attribute is not an error, then return that result and abort these steps.
  3. If a <a>default step base</a> is defined for this element given its <{input/type}> attribute's
      state, then return it and abort these steps.
  4. Return zero.

  How these range limitations apply depends on whether the element has a <code>multiple</code> attribute.

  <dl class="switch">

    <dt>If the element does not have a <code>multiple</code> attribute
    specified or if the <code>multiple</code> attribute <a>does not apply</a></dt>

    <dd>

    <strong>Constraint validation</strong>: When the element has an <a>allowed value step</a>, and
    the result of applying the <a>algorithm to convert a string to a number</a> to the string given
    by the <a for="forms">value</a> is a number, and that number <a>is not step aligned</a>, the
    element is <a>suffering from a step mismatch</a>.

    </dd>

    <dt>If the element does have a <code>multiple</code> attribute
    specified and the <code>multiple</code> attribute does <a>apply</a></dt>

    <dd>

    <strong>Constraint validation</strong>: When the element has an <a>allowed value step</a>, and
    the result of applying the <a>algorithm to convert a string to a number</a> to any of the
    strings in the <a for="forms">values</a> is a number that <a>is not step aligned</a>, the
    element is <a>suffering from a step mismatch</a>.

    </dd>

  </dl>

  </div>

  <div class="example">
    The following range control only accepts values in the range 0..1, and allows 256 steps in
    that range:

    <pre highlight="html">
&lt;input name=opacity type=range min=0 max=1 step=0.00392156863&gt;
    </pre>

  </div>

  <div class="example">
    The following control allows any time in the day to be selected, with any accuracy (e.g.,
    thousandth-of-a-second accuracy or more):

    <pre highlight="html">
&lt;input name=favtime type=time step=any&gt;
    </pre>

    Normally, time controls are limited to an accuracy of one minute.

  </div>

<h6 id="the-list-attribute">The <code>list</code> attribute</h6>

  The <dfn element-attr for="input"><code>list</code></dfn> attribute is used to identify an
  element that lists predefined options suggested to the user.

  If present, its value must be the <a>ID</a> of a <{datalist}>
  element in the same document.

  <div class="impl">

  The <dfn>suggestions source element</dfn> is the first element in
  the document in <a>tree order</a> to have an <a>ID</a> equal to the
  value of the <code>list</code> attribute, if that element is a
  <{datalist}> element. If there is no <code>list</code> attribute,
  or if there is no element with that <a>ID</a>, or if the first element
  with that <a>ID</a> is not a <{datalist}> element, then there is
  no <a>suggestions source element</a>.

  If there is a <a>suggestions source element</a>, then, when
  the user agent is allowing the user to edit the <{input}> element's <a for="forms">value</a>, the user agent should offer the suggestions represented by
  the <a>suggestions source element</a> to the user in a manner
  suitable for the type of control used. The user agent may use the suggestion's <a>label</a> to identify the suggestion if appropriate.

  User agents are encouraged to filter the suggestions represented by the <a>suggestions source element</a> when the number of suggestions is
  large, including only the most relevant ones (e.g., based on the user's input so far). No precise
  threshold is defined, but capping the list at four to seven values is reasonable.

  How user selections of suggestions are handled depends on whether the element is a control
  accepting a single value only, or whether it accepts multiple values:

  <dl class="switch">

    <dt>If the element does not have a <code>multiple</code> attribute
    specified or if the <code>multiple</code> attribute <a>does not apply</a></dt>

    <dd>

    When the user selects a suggestion, the <{input}> element's <a for="forms">value</a> must be set to the selected suggestion's <a for="forms">value</a>, as if the user had written that value themself.

    </dd>

    <dt>If the element's <{input/type}> attribute is in the <a element-state for="input">Range</a> state and the element has a <code>multiple</code> attribute specified</dt>

    <dd>

    When the user selects a suggestion, the user agent must identify which value in the element's
    <a for="forms">values</a> the user intended to update, and must then update
    the element's <a for="forms">values</a> so that the relevant value is
    changed to the value given by the selected suggestion's <a for="forms">value</a>, as if the user had themself set it to that value.

    </dd>

    <dt>If the element's <{input/type}> attribute is in the <a element-state for="input">E-mail</a> state and the element has a <code>multiple</code> attribute specified</dt>

    <dd>

    When the user selects a suggestion, the user agent must either add a new entry to the
    <{input}> element's <a for="forms">values</a>, whose value
    is the selected suggestion's <a for="forms">value</a>, or change an
    existing entry in the <{input}> element's <a for="forms">values</a> to have the value given by the selected
    suggestion's <a for="forms">value</a>, as if the user had themself added
    an entry with that value, or edited an existing entry to be that value. Which behavior is to be
    applied depends on the user interface in a user-agent-defined manner.

    </dd>

  </dl>

  <hr />

  If the <code>list</code> attribute <a>does not
  apply</a>, there is no <a>suggestions source element</a>.

  </div>

  <div class="example">
    This URL field offers some suggestions.

    <pre highlight="html">
&lt;label&gt;Homepage: &lt;input name=hp type=url list=hpurls&gt;&lt;/label&gt;
&lt;datalist id=hpurls&gt;
  &lt;option value="https://www.google.com/" label="Google"&gt;
  &lt;option value="https://www.reddit.com/" label="Reddit"&gt;
&lt;/datalist&gt;
    </pre>

    Other URLs from the user's history might show also; this is up to the user agent.

  </div>

  <div class="example">
    This example demonstrates how to design a form that uses the autocompletion list feature while
    still degrading usefully in legacy user agents.

    If the autocompletion list is merely an aid, and is not important to the content, then simply
    using a <{datalist}> element with children <{option}> elements is enough. To
    prevent the values from being rendered in legacy user agents, they need to be placed inside the
    <code>value</code> attribute instead of inline.

    <pre highlight="html">
&lt;p&gt;
  &lt;label&gt;
  Enter a breed:
  &lt;input type="text" name="breed" list="breeds"&gt;
  &lt;datalist id="breeds"&gt;
    &lt;option value="Abyssinian"&gt;
    &lt;option value="Alpaca"&gt;
    &lt;!-- ... --&gt;
  &lt;/datalist&gt;
  &lt;/label&gt;
&lt;/p&gt;
    </pre>

    However, if the values need to be shown in legacy user agents, then fallback content can be placed
    inside the <{datalist}> element, as follows:

    <pre highlight="html">
&lt;p&gt;
  &lt;label&gt;
  Enter a breed:
  &lt;input type="text" name="breed" list="breeds"&gt;
  &lt;/label&gt;
  &lt;datalist id="breeds"&gt;
  &lt;label&gt;
    or select one from the list:
    &lt;select name="breed"&gt;
    &lt;option value=""&gt; (none selected)
    &lt;option&gt;Abyssinian
    &lt;option&gt;Alpaca
    &lt;!-- ... --&gt;
    &lt;/select&gt;
  &lt;/label&gt;
  &lt;/datalist&gt;
&lt;/p&gt;
    </pre>

    The fallback content will only be shown in user agents that don't support <{datalist}>. The
    options, on the other hand, will be detected by all user agents, even though they are not children of the
    <{datalist}> element.

    Note that if an <{option}> element used in a <{datalist}> is <code>selected</code>, it will be selected by default by legacy user agents
    (because it affects the <{select}>), but it will not have any effect on the
    <{input}> element in user agents that support <{datalist}>.

  </div>

<h6 id="the-placeholder-attribute">The <code>placeholder</code> attribute</h6>

  The <dfn element-attr for="input"><code>placeholder</code></dfn> attribute represents a
  <em>short</em> hint (a word or short phrase) intended to aid the user with data entry when the
  control has no value. A hint could be a sample value or a brief description of the expected
  format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or
  U+000D CARRIAGE RETURN (CR) characters.

  The <code>placeholder</code> attribute should not be used as a
  replacement for a <{label}>. For a longer hint or other advisory text, place the text
  next to the control.

    <p class="warning">Use of the <code>placeholder</code>
    attribute as a replacement for a <{label}> can reduce the
    accessibility and usability of the control for a range of users including older
    users and users with cognitive, mobility, fine motor skill or vision impairments.
    While the hint given by the control's <{label}> is shown at all times, the short
    hint given in the <code>placeholder</code>
    attribute is only shown before the user enters a value. Furthermore,
    <code>placeholder</code> text may be mistaken for
    a pre-filled value, and as commonly implemented the default color of the placeholder text
    provides insufficient contrast and the lack of a separate visible <{label}>
    reduces the size of the hit region available for setting focus on the control.</p>

  <div class="impl">

  User agents should present this hint to the user, after having <a>stripped line breaks</a> from it, when the element's <a for="forms">value</a> is the empty string, especially if the control is not <a>focused</a>.

  If a user agent normally doesn't show this hint to the user when the control is
  <a>focused</a>, then the user agent should nonetheless show the hint for the control if it
  was focused as a result of the <{formelements/autofocus}> attribute, since
  in that case the user will not have had an opportunity to examine the control before focusing
  it.

  </div>

  <div class="example">
    Here is an example of a mail configuration user interface that uses the <code>placeholder</code> attribute:

    <pre highlight="html">
&lt;fieldset&gt;
  &lt;legend&gt;Mail Account&lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;Name: &lt;input type="text" name="fullname" placeholder="John Ratzenberger"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Address: &lt;input type="email" name="address" placeholder="john@example.net"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Password: &lt;input type="password" name="password"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Description: &lt;input type="text" name="desc" placeholder="My Email Account"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
    </pre>

  </div>

  <div class="example">
    In situations where the control's content has one directionality but the placeholder needs to
    have a different directionality, Unicode's bidirectional-algorithm formatting characters can be
    used in the attribute value:

    <pre highlight="html">
&lt;input name=t1 type=tel placeholder="&amp;#x202B; <bdo dir="rtl">رقم&nbsp;الهاتف&nbsp;1</bdo> &amp;#x202E;"&gt;
&lt;input name=t2 type=tel placeholder="&amp;#x202B; <bdo dir="rtl">رقم&nbsp;الهاتف&nbsp;2</bdo> &amp;#x202E;"&gt;
    </pre>

    For slightly more clarity, here's the same example using numeric character references instead of inline Arabic:

    <pre highlight="html">
&lt;input name=t1 type=tel placeholder="&amp;#x202B;&amp;#1585;&amp;#1602;&amp;#1605;&nbsp;&amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601;&nbsp;1&amp;#x202E;"&gt;
&lt;input name=t2 type=tel placeholder="&amp;#x202B;&amp;#1585;&amp;#1602;&amp;#1605;&nbsp;&amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601;&nbsp;2&amp;#x202E;"&gt;
    </pre>

  </div>

<h5 id="common-input-element-apis">Common <{input}> element <dfn>APIs</dfn></h5>

  <dl class="domintro">
    <dt><var>input</var> . {{HTMLInputElement/value}} [ = <var>value</var> ]</dt>
    <dd>Returns the current <a for="forms">value</a> of the form control.

    Can be set, to change the value.

    Throws an "{{InvalidStateError}}" {{DOMException}} if it is set to any value other than the empty
    string when the control is a <a element-state for="input">file upload</a> control.</dd>

    <dt><var>input</var> . {{HTMLInputElement/checked}} [ = <var>value</var> ]</dt>
    <dd>Returns the current <a for="forms">checkedness</a> of the form control.

    Can be set, to change the <a for="forms">checkedness</a>.</dd>

    <dt><var>input</var> . {{HTMLInputElement/files}}</dt>
    <dd>Returns a <code>FileList</code> object listing the <a>selected files</a> of the form
    control.

    Returns null if the control isn't a file control.</dd>

    <dt><var>input</var> . {{HTMLInputElement/valueAsDate}} [ = <var>value</var> ]</dt>
    <dd>Returns a {{Date}} object representing the form control's <a for="forms">value</a>, if
    applicable; otherwise, returns null.

    Can be set, to change the value.

    Throws an "{{InvalidStateError}}" {{DOMException}} if the control isn't date- or time-based.
    </dd>

    <dt><var>input</var> . {{HTMLInputElement/valueAsNumber}} [ = <var>value</var> ]</dt>
    <dd>Returns a number representing the form control's <a for="forms">value</a>, if applicable;
    otherwise, returns NaN.

    Can be set, to change the value. Setting this to NaN will set the underlying value to the
    empty string.

    Throws an "{{InvalidStateError}}" {{DOMException}} if the control is neither date- or time-based
    nor numeric.</dd>

    <dt><var>input</var> . {{HTMLInputElement/stepUp()|stepUp}}( [ <var>n</var> ] )</dt>
    <dt><var>input</var> . {{HTMLInputElement/stepDown()|stepDown}}( [ <var>n</var> ] )</dt>
    <dd>Changes the form control's <a for="forms">value</a> by the value given in the <{input/step}>
    attribute, multiplied by <var>n</var>. The default value for <var>n</var> is 1.

    Throws "{{InvalidStateError}}" {{DOMException}} if the control is neither date- or time-based
    nor numeric, or if the <{input/step}> attribute's value is "<code>any</code>".</dd>

    <dt><var>input</var> . {{HTMLInputElement/list}}</dt>
    <dd>Returns the <{datalist}> element indicated by the <code>list</code> attribute.</dd>
  </dl>

  The <dfn attribute for="HTMLInputElement"><code>value</code></dfn> IDL attribute allows scripts to
  manipulate the <a for="forms">value</a> of an <{input}> element. The
  attribute is in one of the following modes, which define its behavior:

  : <dfn mode for="input">value</dfn>
  :: On getting, it must return the current <a for="forms">value</a> of the element. On setting, it
      must set the element's <a for="forms">value</a> to the new value, set the element's
      <a for="input">dirty value flag</a> to true, invoke the <a>value sanitization algorithm</a>,
      if the element's <{input/type}> attribute's current state defines one, and then, if the
      element has a text entry cursor position, should move the text entry cursor position to the
      end of the text field, unselecting any selected text and resetting the selection direction to
      <em>none</em>.

  : <dfn mode for="input">default</dfn>
  :: On getting, if the element has a <{input/value}> attribute, it must return that attribute's
      value; otherwise, it must return the empty string. On setting, it must set the element's
      <{input/value}> attribute to the new value.

  : <dfn mode for="input">default/on</dfn>
  :: On getting, if the element has a <{input/value}> attribute, it must return that attribute's
      value; otherwise, it must return the string "<code>on</code>". On setting, it must set the
      element's <{input/value}> attribute to the new value.

  : <dfn mode for="input">filename</dfn>
  :: On getting, it must return the string "<code>C:\fakepath\</code>" followed by the name of the
      first file in the list of <a>selected files</a>, if any, or the empty string if the list is
      empty. On setting, if the new value is the empty string, it must empty the list of
      <a>selected files</a>; otherwise, it must throw an "{{InvalidStateError}}" {{DOMException}}.

      <p class="note">This "fakepath" requirement is a sad accident of history. See the example in
      the <a element-state for="input">File Upload</a> state section for more information.</p>

      <p class="note">Since <a>path components</a> are not permitted in file names in the list of
      <a>selected files</a>, the "<code>\fakepath\</code>" cannot be mistaken for a path component.
      </p>

  <hr />

  The <dfn attribute for="HTMLInputElement"><code>checked</code></dfn> IDL attribute allows scripts to
  manipulate the <a for="forms">checkedness</a> of an <{input}>
  element. On getting, it must return the current <a for="forms">checkedness</a> of the element; and on setting, it must set the
  element's <a for="forms">checkedness</a> to the new value and set the
  element's <a>dirty checkedness flag</a> to
  true.

  <hr />

  The <dfn attribute for="HTMLInputElement"><code>files</code></dfn> IDL attribute allows scripts to
  access the element's <a>selected files</a>. On
  getting, if the IDL attribute <a>applies</a>, it must return a
  <code>FileList</code> object that represents the current <a>selected files</a>. The same object must be returned
  until the list of <a>selected files</a> changes. If
  the IDL attribute <a>does not apply</a>, then it must instead return
  null. [[!FILEAPI]]

  <hr />

  The <dfn attribute for="HTMLInputElement"><code>valueAsDate</code></dfn> IDL attribute represents
  the <a for="forms">value</a> of the element, interpreted as a date.

  On getting, if the <code>valueAsDate</code> attribute <a>does not apply</a>, as defined for the <{input}> element's <{input/type}> attribute's current state, then return null. Otherwise, run
  the <a>algorithm to convert a string to a
  <code>Date</code> object</a> defined for that state to the element's <a for="forms">value</a>; if the algorithm returned a {{Date}} object, then
  return it, otherwise, return null.

  On setting, if the <code>valueAsDate</code> attribute <a>does not apply</a>, as defined for the <{input}> element's <{input/type}> attribute's current state, then throw an
  <code>InvalidStateError</code> exception; otherwise, if the new value is not null and not a {{Date}} object throw a <code>TypeError</code> exception; otherwise if the new value is null or a
  {{Date}} object representing the NaN time value, then set the <a for="forms">value</a> of the element to the empty string; otherwise, run the
  <a>algorithm to convert a <code>Date</code> object to
  a string</a>, as defined for that state, on the new value, and set the <a for="forms">value</a> of the element to the resulting string.

  <hr />

  The <dfn attribute for="HTMLInputElement"><code>valueAsNumber</code></dfn> IDL attribute
  represents the <a for="forms">value</a> of the element, interpreted as a
  number.

  On getting, if the <code>valueAsNumber</code> attribute <a>does not apply</a>, as defined for the <{input}> element's <{input/type}> attribute's current state, then return a Not-a-Number (NaN)
  value. Otherwise, if the <code>valueAs<em>Date</em></code>
  attribute <a>applies</a>, run the <a>algorithm to convert a string to a <code>Date</code>
  object</a> defined for that state to the element's <a for="forms">value</a>; if the algorithm returned a {{Date}} object, then
  return the <i>time value</i> of the object (the number of milliseconds from midnight UTC the
  morning of 1970-01-01 to the time represented by the {{Date}} object), otherwise, return
  a Not-a-Number (NaN) value. Otherwise, run the <a>algorithm to convert a string to a number</a>
  defined for that state to the element's <a for="forms">value</a>; if the
  algorithm returned a number, then return it, otherwise, return a Not-a-Number (NaN) value.

  On setting, if the new value is infinite, then throw a <code>TypeError</code> exception.
  Otherwise, if the <code>valueAsNumber</code> attribute <a>does not apply</a>, as defined for the <{input}> element's <{input/type}> attribute's current state, then throw an
  <code>InvalidStateError</code> exception. Otherwise, if the new value is a Not-a-Number (NaN)
  value, then set the <a for="forms">value</a> of the element to the empty
  string. Otherwise, if the <code>valueAs<em>Date</em></code>
  attribute <a>applies</a>, run the <a>algorithm to convert a <code>Date</code> object to a
  string</a> defined for that state, passing it a {{Date}} object whose <i>time
  value</i> is the new value, and set the <a for="forms">value</a> of the
  element to the resulting string. Otherwise, run the <a>algorithm to convert a number to a string</a>, as
  defined for that state, on the new value, and set the <a for="forms">value</a>
  of the element to the resulting string.

  <hr />

  The
  <dfn method for="HTMLInputElement"><code>stepDown(<var>n</var>)</code></dfn> and
  <dfn method for="HTMLInputElement"><code>stepUp(<var>n</var>)</code></dfn>
  methods, when invoked, must run the following algorithm:

  1. If the <code>stepDown()</code> and <code>stepUp()</code> methods <a>do not apply</a>, as
      defined for the <{input}> element's <{input/type}> attribute's current state, then throw an
      "{{InvalidStateError}}" {{DOMException}}, and abort these steps.
  2. If the element has no <a>allowed value step</a>, then throw an "{{InvalidStateError}}"
      {{DOMException}}, and abort these steps.
  3. If the element has a <a for="min">minimum</a> and a <a for="max">maximum</a> and the
      <a for="min">minimum</a> is greater than the <a for="max">maximum</a>, then abort these steps.
  4. If the element has a <a for="min">minimum</a> and a <a for="max">maximum</a> and there is no
      <a lt="is step aligned">step aligned</a> value greater than or equal to the element's
      <a for="min">minimum</a> and less than or equal to the element's <a for="max">maximum</a>,
      then abort these steps.
  5. If applying the <a>algorithm to convert a string to a number</a> to the string given by the
      element's <a for="forms">value</a> does not result in an error, then let <var>value</var> be
      the result of that algorithm. Otherwise, let <var>value</var> be zero.
  6. Let <var>valueBeforeStepping</var> be <var>value</var>.
  7. If <var>value</var> <a>is not step aligned</a>, then:
      1. If the method invoked was the <code>stepDown()</code> method, then <a>step-align</a>
          <var>value</var> with <var>negative preference</var>. Otherwise <a>step-align</a>
          <var>value</var> with <var>positive preference</var>. In either case, let <var>value</var>
          be the result.

          <div class="example">
            This ensures that the value first snaps to a <a>step-aligned</a> value when it doesn't
            start step-aligned. For example, starting with the following <{input}> with
            <{input/value}> of 3:

            <pre highlight="html">
              &lt;input type="number" value="3" min="1" max="10" step="2.6">
            </pre>
            Invoking the {{HTMLInputElement/stepUp()}} method will snap the <{input/value}> to 3.6;
            subsequent invocations will increment the value by 2.6 (e.g., 6.2, then 8.8). Likewise,
            the following <{input}> element in the <a element-state for="input">Week</a> state will
            also <a>step-align</a> in similar fashion, though in this state, the <{input/step}>
            value is rounded to 3, per the derivation of the <a>allowed value step</a>.

            <pre highlight="html">
              &lt;input type="week" value="2016-W20" min="2016-W01" max="2017-W01" step="2.6">
            </pre>
            Invoking {{HTMLInputElement/stepUp()}} will result in a <{input/value}> of
            "<code>2016-W22</code>" because the nearest <a>step-aligned</a> value from the
            <a>step base</a> of "<code>2016-W01</code>" (the <{input/min}> value) with 3 week
            <{input/step}>s that is greater than the <{input/value}> of "<code>2016-W20</code>" is
            "<code>2016-W22</code>" (i.e.: W01, W04, W07, W10, W13, W16, W19, W22).
          </div>

      Otherwise (<var>value</var> <a>is step aligned</a>), run the following substeps:

      1. Let <var>n</var> be the argument.
      2. Let <var>delta</var> be the <a>allowed value step</a> multiplied by <var>n</var>.
      3. If the method invoked was the <code>stepDown()</code> method, negate <var>delta</var>.
      4. Let <var>value</var> be the result of adding <var>delta</var> to <var>value</var>.
  8. If the element has a <a for="min">minimum</a>, and <var>value</var> is less than that
      <a for="min">minimum</a>, then set <var>value</var> to the <a>step-aligned</a>
      <a for="min">minimum</a> value with <var>positive preference</var>.
  9. If the element has a <a for="max">maximum</a>, and <var>value</var> is greater than that
      <a for="max">maximum</a>, then set <var>value</var> to the <a>step-aligned</a>
      <a for="max">maximum</a> value with <var>negative preference</var>.
  10. If either the method invoked was the {{HTMLInputElement/stepDown()}} method and
       <var>value</var> is greater than <var>valueBeforeStepping</var>, or the method invoked was
       the {{HTMLInputElement/stepUp()}} method and <var>value</var> is less than
       <var>valueBeforeStepping</var>, then abort these steps.

       <div class="example">
         This ensures that invoking the {{HTMLInputElement/stepUp()}} method on the <{input}>
         element in the following example does not change the <a for="forms">value</a> of that
         element:

         <pre highlight="html">
           &lt;input type=number value=1 max=0&gt;
         </pre>
       </div>
  11. Let <var>value as string</var> be the result of running the
       <a>algorithm to convert a number to a string</a>, as defined for the <{input}> element's
       <{input/type}> attribute's current state, on <var>value</var>.
  12. Set the <a for="forms">value</a> of the element to <var>value as string</var>.

  To determine if a value <var>v</var> <dfn>is step aligned</dfn> do the following:

  <p class="note">This algorithm checks to see if a value falls along an <{input}> element's
  defined <{input/step}> intervals, with the interval's origin at the <a>step base</a> value. It is
  used to determine if the element's <a for="forms">value</a> is
  <a>suffering from a step mismatch</a> and for various checks in the {{HTMLInputElement/stepUp()}}
  and {{HTMLInputElement/stepDown()}} methods.</p>

  1. Subtract the <a>step base</a> from <var>v</var> and let the result be
      <var>relative distance</var>.
  2. If dividing the <var>relative distance</var> by the <a>allowed value step</a> results in a
      value with a remainder then <var>v</var> <dfn>is not step aligned</dfn>. Otherwise it is step
      aligned.

  To <dfn lt="step-align|step-aligned|step-aligns">step-align</dfn> a value <var>v</var> with either
  <var>negative preference</var> or <var>positive preference</var>, do the following:

  <p class="note"><var>negative preference</var> selects a <a>step-aligned</a> value that is less
  than or equal to <var>v</var>, while <var>positive preference</var> <a>step-aligns</a> with a
  value greater than or equal to <var>v</var>.</p>

  1. Subtract the <a>step base</a> from <var>v</var> and let the result be
      <var>relative distance</var>.
  2. Let <var>step interval count</var> be the result of integer dividing (or divide and throw out
      any remainder) <var>relative distance</var> by the <a>allowed value step</a>.
  3. Let <var>candidate</var> be the <var>step interval count</var> multiplied by the
      <a>allowed value step</a>.
  4. If this algorithm was invoked with <var>negative preference</var> and the value of <var>v</var>
      is less than <var>candidate</var>, then decrement <var>candidate</var> by the
      <a>allowed value step</a>.

      Otherwise, if this algorithm was invoked with <var>positive preference</var> and the value of
      <var>v</var> is greater than <var>candidate</var>, then increment <var>candidate</var> by the
      <a>allowed value step</a>.
  5. The <a>step-aligned</a> value is <var>candidate</var>. Return <var>candidate</var>.

  <hr />

  The <dfn attribute for="HTMLInputElement"><code>list</code></dfn> IDL attribute must return the
  current <a>suggestions source element</a>, if any, or null otherwise.

  <div class="impl">

<h5 id="common-event-behaviors">Common event behaviors</h5>

  When the <code>input</code> and <code>change</code> events <a>apply</a>
  (which is the case for all <{input}> controls other than <a>buttons</a> and those with the <{input/type}> attribute in the <a>Hidden</a> state), the events are fired to indicate that the
  user has interacted with the control. The <dfn event for="input"><code>input</code></dfn>
  event fires whenever the user has modified the data of the control. The <dfn event for="input"><code>change</code></dfn> event fires when the value is committed, if
  that makes sense for the control, or else when the control <a>loses focus</a>. In all cases, the <code>input</code> event comes before the corresponding <code>change</code> event (if any).

  When an <{input}> element has a defined <a>activation behavior</a>, the rules
  for dispatching these events, if they <a>apply</a>, are given
  in the section above that defines the <{input/type}> attribute's
  state. (This is the case for all <{input}> controls with the <{input/type}> attribute in the <a element-state for="input">Checkbox</a> state, the <a element-state for="input">Radio Button</a> state, or the <a element-state for="input">File Upload</a> state.)

  For <{input}> elements without a defined <a>activation behavior</a>, but to
  which these events <a>apply</a>, and for which the user
  interface involves both interactive manipulation and an explicit commit action, then when the user
  changes the element's <a for="forms">value</a>, the user agent must
  <a>queue a task</a> to <a>fire a simple event</a> that bubbles named <code>input</code> at the <{input}> element, and any time the user
  commits the change, the user agent must <a>queue a task</a> to <a>fire a simple
  event</a> that bubbles named <code>change</code> at the
  <{input}> element.

  <p class="example">An example of a user interface involving both interactive manipulation and a
  commit action would be a <a element-state for="input">Range</a> controls that use a
  slider, when manipulated using a pointing device. While the user is dragging the control's knob,
  <code>input</code> events would fire whenever the position changed,
  whereas the <code>change</code> event would only fire when the user
  let go of the knob, committing to a specific value.</p>

  For <{input}> elements without a defined <a>activation behavior</a>, but to
  which these events <a>apply</a>, and for which the user
  interface involves an explicit commit action but no intermediate manipulation, then any time the
  user commits a change to the element's <a for="forms">value</a>, the user
  agent must <a>queue a task</a> to first <a>fire a simple event</a> that bubbles named
  <code>input</code> at the <{input}> element, and then
  <a>fire a simple event</a> that bubbles named <code>change</code> at the <{input}> element.

  <p class="example">An example of a user interface with a commit action would be a
  <a element-state for="input">Color</a> control that consists of a single button that brings
  up a color wheel: if the <a for="forms">value</a> only changes when the dialog
  is closed, then that would be the explicit commit action. On the other hand, if manipulating the
  control changes the color interactively, then there might be no commit action.</p>

  <p class="example">Another example of a user interface with a commit action would be a
  <a element-state for="input">Date</a> control that allows both text-based user input and user
  selection from a drop-down calendar: while text input does not have an explicit commit step,
  selecting a date from the drop down calendar and then dismissing the drop down would be a commit
  action.</p>

  <p class="example">The <a element-state for="input">Range</a> control is also an example of a
  user interface that has a commit action when used with a pointing device (rather than a keyboard):
  during the time that the pointing device starts manipulating the slider until the time that the
  slider is released, no commit action is taken (though <code>input</code> events are fired as the
  value is changed). Only after the slider is release is the commit action taken.</p>

  For <{input}> elements without a defined <a>activation behavior</a>, but to
  which these events <a>apply</a>, any time the user causes the
  element's <a for="forms">value</a> to change without an explicit commit
  action, the user agent must <a>queue a task</a> to <a>fire a simple event</a> that
  bubbles named <code>input</code> at the <{input}> element. The
  corresponding <code>change</code> event, if any, will be fired when
  the control <a>loses focus</a>.

  <p class="example">Examples of a user changing the element's <a for="forms">value</a> would include the user typing into a text field, pasting a
  new value into the field, or undoing an edit in that field. Some user interactions do not cause
  changes to the value, e.g., hitting the "delete" key in an empty text field, or replacing some text
  in the field with text from the clipboard that happens to be exactly the same text.</p>

  <p class="example">A <a element-state for="input">Range</a> control in the form of a
  slider that the user has <a>focused</a> and is interacting with using a keyboard would be
  another example of the user changing the element's <a for="forms">value</a>
  without a commit step.</p>

  In the case of <a>tasks</a> that just fire an <code>input</code> event, user agents may wait for a suitable break in the
  user's interaction before <a>queuing</a> the tasks; for example, a
  user agent could wait for the user to have not hit a key for 100ms, so as to only fire the event
  when the user pauses, instead of continuously for each keystroke.

  When the user agent is to change an <{input}> element's <a for="forms">value</a> on behalf of the user (e.g., as part of a form prefilling
  feature), the user agent must <a>queue a task</a> to first update the <a for="forms">value</a> accordingly, then <a>fire a simple event</a> that
  bubbles named <code>input</code> at the <{input}> element,
  then <a>fire a simple event</a> that bubbles named <code>change</code> at the <{input}> element.

  <p class="note">
    These events are not fired in response to changes made to the values of form
  controls by scripts. (This is to make it easier to update the values of form controls in response
  to the user manipulating the controls, without having to then filter out the script's own changes
  to avoid an infinite loop.)
  </p>

  The <a>task source</a> for these <a>tasks</a> is the
  <a>user interaction task source</a>.

  </div>

<h4 id="the-button-element">The <dfn element><code>button</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd><a>Interactive content</a>.</dd>
    <dd><a lt="listed element">listed</a>, <a>labelable</a>, <a>submittable</a>, and <a>reassociateable</a> <a>form-associated element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Phrasing content</a>, but there must be no <a>interactive content</a> descendant.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{button/autofocus}> - Automatically focus the form control when the page is loaded</dd>
    <dd><{button/disabled}> - Whether the form control is disabled</dd>
    <dd><{button/form}> - Associates the control with a <{form}> element</dd>
    <dd><{button/formaction}> - <a for="url">URL</a> to use for [[#forms-form-submission]]</dd>
    <dd><{button/formenctype}> - Form data set encoding type to use for [[#forms-form-submission]]</dd>
    <dd><{button/formmethod}> - HTTP method to use for [[#forms-form-submission]]</dd>
    <dd><{button/formnovalidate}> - Bypass form control validation for [[#forms-form-submission]]</dd>
    <dd><{button/formtarget}> - <a>browsing context</a> for [[#forms-form-submission]]</dd>
    <dd><{button/menu}> - Specifies the element's <a>designated pop-up menu</a></dd>
    <dd><{button/name}> - Name of form control to use for [[#forms-form-submission]] and in the {{HTMLFormElement/elements|form.elements}} API </dd>
    <dd><{button/type}> - Type of button</dd>
    <dd><{button/value}> - Value to be used for [[#forms-form-submission]]</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>button</code></a>
    (default - <a><em>do not set</em></a>),
    <a value for="role"><code>link</code></a>,
      <a value for="role"><code>menuitem</code></a>,
    <a value for="role"><code>menuitemcheckbox</code></a>,
      <a value for="role"><code>menuitemradio</code></a>
    or <a value for="role"><code>radio</code></a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLButtonElement">
        interface HTMLButtonElement : HTMLElement {
          attribute boolean autofocus;
          attribute boolean disabled;
          readonly attribute HTMLFormElement? form;
          attribute DOMString formAction;
          attribute DOMString formEnctype;
          attribute DOMString formMethod;
          attribute boolean formNoValidate;
          attribute DOMString formTarget;
          attribute DOMString name;
          attribute DOMString type;
          attribute DOMString value;
          attribute HTMLMenuElement? menu;

          readonly attribute boolean willValidate;
          readonly attribute ValidityState validity;
          readonly attribute DOMString validationMessage;
          boolean checkValidity();
          boolean reportValidity();
          void setCustomValidity(DOMString error);

          [SameObject] readonly attribute NodeList labels;
        };
      </pre>
    </dd>
  </dl>

  The <{button}> element <a>represents</a> a button labeled by its contents.

  The element is a <a>button</a>.

  The <dfn element-attr for="button"><code>type</code></dfn> attribute controls the behavior of
  the button when it is activated. It is an <a>enumerated attribute</a>. The following table
  lists the keywords and states for the attribute — the keywords in the left column map to the
  states in the cell in the second column on the same row as the keyword.

  <table>
    <thead>
    <tr>
      <th> Keyword
      </th><th> State
      </th><th> Brief description
    </th></tr></thead><tbody>
    <tr>
      <td><dfn attr-value for="button/type"><code>submit</code></dfn>
      </td><td><dfn element-state for="button/type">submit button</dfn>
      </td><td>Submits the form.
    </td></tr><tr>
      <td><dfn attr-value for="button/type"><code>reset</code></dfn>
      </td><td><dfn element-state for="button/type">reset button</dfn>
      </td><td>Resets the form.
    </td></tr><tr>
      <td><dfn attr-value for="button/type"><code>button</code></dfn>
      </td><td><dfn element-state for="button/type">Button</dfn>
      </td><td>Does nothing.
    </td></tr><tr>
      <td><dfn attr-value for="button/type"><code>menu</code></dfn>
      </td><td><dfn element-state for="button/type" lt="Menu|menu button">Menu</dfn>
      </td><td>Shows a menu.
  </td></tr></tbody></table>

  The <i>missing value default</i> is the <a element-state for="button/type">submit button</a> state.

  If the <{input/type}> attribute is in the <a element-state for="button/type">submit button</a> state, the element is specifically a
  <a element-state for="button/type">submit button</a>.

  <div class="impl">

  <strong>Constraint validation</strong>: If the <{input/type}>
  attribute is in the <a element-state for="button/type">reset button</a> state, the
  <a element-state for="button/type">Button</a> state, or the <a element-state for="button/type">Menu</a> state, the element is barred from constrain validation.

  When a <{button}> element is not disabled,
  its <a>activation behavior</a> element is to run the steps defined in the following list for
  the current state of the element's <{input/type}> attribute:

  <dl>

    <dt> <a element-state for="button/type">submit button</a> </dt>

    <dd>If the element has a <a>form owner</a> and the element's <a>node document</a> is
    <a>fully active</a>, the element must <a>submit</a> the
    <a>form owner</a> from the <{button}> element.</dd>

    <dt> <a element-state for="button/type">reset button</a> </dt>

    <dd>If the element has a <a>form owner</a> and the element's <a>node document</a> is
    <a>fully active</a>, the element must <a>reset</a> the
    <a>form owner</a>.</dd>

    <dt> <a element-state for="button/type">Button</a>

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

    <dt> <a element-state for="button/type">Menu</a>

    </dt><dd>

    The element must follow these steps:

    <ol>

      <li>If the <{button}> is not <a>being rendered</a>, abort these
      steps.</li>

      <li>If the <{button}> element's <a>node document</a> is not <a>fully
      active</a>, abort these steps.</li>

      <li>Let <var>menu</var> be the element's <a>designated pop-up menu</a>, if
      any. If there isn't one, then abort these steps.</li>

      <li><a>Fire</a> a <a>trusted</a> event with the name <code>show</code> at <var>menu</var>, using the <code>RelatedEvent</code>
      interface, with the <code>relatedTarget</code> attribute
      initialized to the <{button}> element. The event must be cancelable. </li>

      <li>If the event is not canceled, then <a>build and
      show</a> the menu for <var>menu</var>, with the <{button}> element as the
      subject.</li>

    </ol>

    </dd>

  </dl>

  </div>

  The <{button/form}> attribute is used to explicitly associate the
  <{button}> element with its <a>form owner</a>. The <{button/name}> attribute represents the element's name. The <{button/disabled}> attribute is used to make the control non-interactive and
  to prevent its value from being submitted. The <{button/autofocus}>
  attribute controls focus. The <{button/formaction}>, <{button/formenctype}>, <{button/formmethod}>, <{button/formnovalidate}>, and <{button/formtarget}> attributes are <a>attributes for form
  submission</a>.

  <p class="note">
    The <{button/formnovalidate}> attribute can be
  used to make submit buttons that do not trigger the constraint validation.
  </p>

  The <{button/formaction}>, <{button/formenctype}>, <{button/formmethod}>, <{button/formnovalidate}>, and <{button/formtarget}> must not be specified if the element's <{input/type}> attribute is not in the <a element-state for="button/type">submit button</a> state.

  The <dfn element-attr for="button"><code>value</code></dfn> attribute gives the element's value
  for the purposes of <a>form submission</a>. The element's <a for="forms">value</a> is
  the value of the element's <code>value</code> attribute, if there is
  one, or the empty string otherwise.

  <p class="note">
    A button (and its value) is only included in the <a>form submission</a> if the button
  itself was used to initiate the <a>form submission</a>.
  </p>

  <hr />

  If the element's <{input/type}> attribute is in the <a element-state for="button/type">Menu</a> state, the <dfn element-attr for="button"><code>menu</code></dfn> attribute must be specified to give the element's
  menu. The value must be the <a>ID</a> of a <{menu}> element in
  the same <a>home subtree</a> whose <{input/type}> attribute is in
  the <a state for="menu">popup menu</a> state. The attribute must not be specified if
  the element's <{input/type}> attribute is not in the <a element-state for="button/type">Menu</a> state.

  <div class="impl">

  A <{button}> element's <dfn>designated pop-up menu</dfn> is the first element in the
  <{button}>'s <a>home subtree</a> whose ID is that given by the <{button}>
  element's <code>menu</code> attribute, if there is such an element and
  its <{input/type}> attribute is in the <a state for="menu">popup menu</a> state; otherwise, the element has no <a>designated pop-up
  menu</a>.

  <hr />

  The <dfn attribute for="HTMLButtonElement"><code>value</code></dfn> and
  <dfn attribute for="HTMLButtonElement"><code>menu</code></dfn> IDL attributes must <a>reflect</a>
  the content attributes of the same name.

  The <dfn attribute for="HTMLButtonElement"><code>type</code></dfn> IDL attribute must
  <a>reflect</a> the content attribute of the same name, <a>limited to only known values</a>.

  The {{HTMLButtonElement/willValidate}},
  {{HTMLButtonElement/validity}}, and
  {{HTMLButtonElement/validationMessage}} IDL attributes, and
  the {{HTMLButtonElement/checkValidity()}},
  {{HTMLButtonElement/reportValidity()}}, and
  {{HTMLButtonElement/setCustomValidity()}} methods, are part of
  the <a>constraint validation API</a>.
  The {{HTMLButtonElement/labels}} IDL attribute provides a list of the element's <{label}>s.
  The {{HTMLButtonElement/autofocus}},
  {{HTMLButtonElement/disabled}},
  {{HTMLButtonElement/form}}, and
  {{HTMLButtonElement/name}} IDL attributes are
  part of the element's forms API.

  </div>

  <div class="example">
    The following button is labeled "Show hint" and pops up a dialog box when activated:

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

  </div>

<h4 id="the-select-element">The <dfn element><code>select</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd><a>Interactive content</a>.</dd>
    <dd><a lt="listed element">listed</a>, <a>labelable</a>, <a>submittable</a>, <a>resettable</a>, and <a>reassociateable</a> <a>form-associated element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd>Zero or more <{option}>, <{optgroup}>, and <a>script-supporting elements</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{select/autofocus}> - Automatically focus the form control when the page is loaded</dd>
    <dd><{select/disabled}> - Whether the form control is disabled</dd>
    <dd><{select/form}> - Associates the control with a <{form}> element</dd>
    <dd><{select/multiple}> - Whether to allow multiple values</dd>
    <dd><{select/name}> - Name of form control to use for [[#forms-form-submission]] and in the {{HTMLFormElement/elements|form.elements}} API </dd>
    <dd><{select/required}> - Whether the control is required for [[#forms-form-submission]]</dd>
    <dd><{select/size}> - Size of the control</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>listbox</code></a>
    (default - <a><em>do not set</em></a>) or
    <a value for="role"><code>menu</code></a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLSelectElement">
        interface HTMLSelectElement : HTMLElement {
          attribute DOMString autocomplete;
          attribute boolean autofocus;
          attribute boolean disabled;
          readonly attribute HTMLFormElement? form;
          attribute boolean multiple;
          attribute DOMString name;
          attribute boolean required;
          attribute unsigned long size;

          readonly attribute DOMString type;

          [SameObject] readonly attribute HTMLOptionsCollection options;
          attribute unsigned long length;
          getter Element? item(unsigned long index);
          HTMLOptionElement? namedItem(DOMString name);
          void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
          void remove(); // ChildNode overload
          void remove(long index);
          setter void (unsigned long index, HTMLOptionElement? option);

          [SameObject] readonly attribute HTMLCollection selectedOptions;
          attribute long selectedIndex;
          attribute DOMString value;

          readonly attribute boolean willValidate;
          readonly attribute ValidityState validity;
          readonly attribute DOMString validationMessage;
          boolean checkValidity();
          boolean reportValidity();
          void setCustomValidity(DOMString error);

          [SameObject] readonly attribute NodeList labels;
        };
      </pre>
    </dd>
  </dl>

  The <{select}> element represents a control for selecting amongst a set of
  options.

  The <dfn element-attr for="select"><code>multiple</code></dfn> attribute is a <a>boolean
  attribute</a>. If the attribute is present, then the <{select}> element
  <a>represents</a> a control for selecting zero or more options from the <a>list of options</a>. If the attribute is absent, then the
  <{select}> element <a>represents</a> a control for selecting a single option from
  the <a>list of options</a>.

  The <dfn element-attr for="select"><code>size</code></dfn> attribute gives the number of options
  to show to the user. The <code>size</code> attribute, if specified, must
  have a value that is a <a>valid non-negative integer</a> greater than zero.

  <div class="impl">

  The <dfn>display size</dfn> of a <{select}> element is the
  result of applying the <a>rules for parsing non-negative integers</a> to the value of
  element's <code>size</code> attribute, if it has one and parsing it is
  successful. If applying those rules to the attribute's value is not successful, or if the <code>size</code> attribute is absent, then the element's <a>display size</a> is 4 if the element's <code>multiple</code> content attribute is present, and 1 otherwise.

  </div>

  The <dfn>list of options</dfn> for a <{select}>
  element consists of all the <{option}> element children of the <{select}>
  element, and all the <{option}> element children of all the <{optgroup}> element
  children of the <{select}> element, in <a>tree order</a>.

  The <dfn element-attr for="select"><code>required</code></dfn> attribute is a <a>boolean
  attribute</a>. When specified, the user will be required to select a value before submitting
  the form.

  If a <{select}> element has a <code>required</code>
  attribute specified, does not have a <code>multiple</code> attribute
  specified, and has a <a>display size</a> of 1; and if the <a for="forms">value</a> of the first <{option}> element in the
  <{select}> element's <a>list of options</a> (if
  any) is the empty string, and that <{option}> element's parent node is the
  <{select}> element (and not an <{optgroup}> element), then that
  <{option}> is the <{select}> element's <dfn>placeholder label option</dfn>.

  If a <{select}> element has a <code>required</code>
  attribute specified, does not have a <code>multiple</code> attribute
  specified, and has a <a>display size</a> of 1, then the
  <{select}> element must have a <a>placeholder label option</a>.

  <p class="note">
    In practice, the requirement stated in the paragraph above can only apply when a
  <{select}> element does not have a <code>sizes</code> attribute
  with a value greater than 1.
  </p>

  <strong>Constraint validation</strong>: If the element has its <code>required</code> attribute specified, and either none of the
  <{option}> elements in the <{select}> element's <a>list of options</a> have their <a state for="option">selectedness</a> set to true, or the only
  <{option}> element in the <{select}> element's <a>list of options</a> with its <a state for="option">selectedness</a> set to true is the <a>placeholder label
  option</a>, then the element is <a>suffering from being missing</a>.

  </div>

  <div class="impl">

  If the <code>multiple</code> attribute is absent, and the element
  is not disabled, then the user agent should allow the
  user to pick an <{option}> element in its <a>list
  of options</a> that is itself not disabled. Upon
  this <{option}> element being <dfn>picked</dfn> (either
  through a click, or through unfocusing the element after changing its value, or through a <a>menu command</a>, or through any other mechanism), and before the
  relevant user interaction event  is queued (e.g., before the
  <code>click</code> event), the user agent must set the <a state for="option">selectedness</a> of the picked <{option}> element
  to true, set its <a state for="option">dirtiness</a> to true, and then
  <a>send <code>select</code> update notifications</a>.

  If the <code>multiple</code> attribute is absent, whenever an
  <{option}> element in the <{select}> element's <a>list of options</a> has its <a state for="option">selectedness</a> set to true, and whenever an
  <{option}> element with its <a state for="option">selectedness</a> set to true is added to the
  <{select}> element's <a>list of options</a>,
  the user agent must set the <a state for="option">selectedness</a> of all
  the other <{option}> elements in its <a>list of
  options</a> to false.

  If the <code>multiple</code> attribute is absent and the
  element's <a>display size</a> is greater than 1, then the user
  agent should also allow the user to request that the <{option}> whose <a state for="option">selectedness</a> is true, if any, be unselected. Upon this
  request being conveyed to the user agent, and before the relevant user interaction event  is queued (e.g., before the <code>click</code> event), the user agent must set the <a state for="option">selectedness</a> of that <{option}> element to
  false, set its <a state for="option">dirtiness</a> to true, and then
  <a>send <code>select</code> update notifications</a>.

  If <a for="Node" lt="insert">nodes are inserted</a> or <a for="Node" lt="remove">nodes are removed</a> causing the <a>list of options</a> to gain or lose one or more
  <{option}> elements, or if an <{option}> element in the <a>list of options</a> <dfn lt="ask for a reset|asks for a reset">asks for a reset</dfn>, then, if the <{select}> element's <code>multiple</code> attribute is absent, the user agent must run the
  first applicable set of steps from the following list:

  <dl class="switch">

    <dt>If the <{select}>
    element's <a>display size</a> is 1, and no <{option}>
    elements in the <{select}> element's <a>list of
    options</a> have their <a state for="option">selectedness</a> set to
    true</dt>

    <dd>Set the <a state for="option">selectedness</a> of the first
    <{option}> element in the <a>list of
    options</a> in <a>tree order</a> that is not disabled, if any, to true.</dd>

    <dt>If two or more <{option}> elements in the <{select}> element's <a>list of options</a> have their <a state for="option">selectedness</a> set to true</dt>

    <dd>Set the <a state for="option">selectedness</a> of all but the last
    <{option}> element with its <a state for="option">selectedness</a> set to true in the <a>list of options</a> in <a>tree order</a> to
    false.</dd>

  </dl>

  If the <code>multiple</code> attribute is present, and the
  element is not disabled, then the user agent should
  allow the user to <dfn>toggle</dfn> the <a state for="option">selectedness</a> of the <{option}> elements in
  its <a>list of options</a> that are themselves not disabled. Upon such an element being <a>toggled</a> (either through a click, or through a <a>menu command</a>, or any other mechanism), and before the relevant user
  interaction event  is queued (e.g., before a related <code>click</code> event), the <a state for="option">selectedness</a> of the <{option}> element must
  be changed (from true to false or false to true), the <a state for="option">dirtiness</a> of the element must be set to true, and the
  user agent must <a>send <code>select</code> update notifications</a>.

  When the user agent is to <dfn>send <code>select</code> update notifications</dfn>, <a>queue
  a task</a> to first <a>fire a simple event</a> that bubbles named <code>input</code> at the <{select}> element, and then <a>fire a simple
  event</a> that bubbles named <code>change</code> at the
  <{select}> element, using the <a>user interaction task source</a> as the task
  source. If the <a>JavaScript execution context stack</a> was not empty when the user agent was
  to <a>send <code>select</code> update notifications</a>, then the resulting <code>input</code> and <code>change</code> events must not be
  <a>trusted</a>.

  The <a>reset algorithm</a> for <{select}>
  elements is to go through all the <{option}> elements in the element's <a>list of options</a>, set their <a state for="option">selectedness</a> to true if the <{option}>
  element has a <code>selected</code> attribute, and false otherwise,
  set their <a state for="option">dirtiness</a> to false, and then have the
  <{option}> elements <a>ask for a reset</a>.

  </div>

  The <{select/form}> attribute is used to explicitly associate the <{select}> element with its <a>form owner</a>.
  The <{select/name}> attribute represents the element's name.
  The <{select/disabled}> attribute is used to make the control non-interactive and to prevent its value from being submitted.
  The <{select/autofocus}> attribute controls focus.
  The <{select/autocomplete}> attribute controls how the user agent provides autofill behavior.

  A <{select}> element that is not disabled is
  <i>mutable</i>.

  <dl class="domintro">

    <dt><var>select</var> . <code>type</code></dt>

    <dd>

    Returns "<code>select-multiple</code>" if the element has a <code>multiple</code> attribute, and "<code>select-one</code>"
    otherwise.

    </dd>

    <dt><var>select</var> . <code>options</code></dt>

    <dd>

    Returns an <code>HTMLOptionsCollection</code> of the <a>list of options</a>.

    </dd>

    <dt><var>select</var> . <code>length</code> [ = <var>value</var> ]</dt>
    <dd>

    Returns the number of elements in the <a>list of
    options</a>.

    When set to a smaller number, truncates the number of <{option}> elements in the
    <{select}>.

    When set to a greater number, adds new blank <{option}> elements to the
    <{select}>.

    </dd>

    <dt><var>element</var> = <var>select</var> . <code>item</code>(<var>index</var>)</dt>
    <dt><var>select</var>[<var>index</var>]</dt>
    <dd>

    Returns the item with index <var>index</var> from the <a>list of options</a>. The items are sorted in <a>tree
    order</a>.

    </dd>

    <dt><var>element</var> = <var>select</var> . <code>namedItem</code>(<var>name</var>)</dt>
    <dd>

    Returns the first item with <a>ID</a> or <{select/name}> <var>name</var> from the <a>list of options</a>.

    Returns null if no element with that <a>ID</a> could be found.

    </dd>

    <dt><var>select</var> . <code>add</code>(<var>element</var> [, <var>before</var> ] )</dt>
    <dd>

    Inserts <var>element</var> before the node given by <var>before</var>.

    The <var>before</var> argument can be a number, in which case <var>element</var> is inserted before the item with that number, or an element from the
    <a>list of options</a>, in which case <var>element</var> is inserted before that element.

    If <var>before</var> is omitted, null, or a number out of range, then <var>element</var> will be added at the end of the list.

    This method will throw a <code>HierarchyRequestError</code> exception if <var>element</var> is an ancestor of the element into which it is to be inserted.

    </dd>

    <dt><var>select</var> . <code>selectedOptions</code></dt>

    <dd>

    Returns an <code>HTMLCollection</code> of the <a>list
    of options</a> that are selected.

    </dd>

    <dt><var>select</var> . <code>selectedIndex</code> [ = <var>value</var> ]</dt>

    <dd>

    Returns the index of the first selected item, if any, or -1 if there is no selected
    item.

    Can be set, to change the selection.

    </dd>

    <dt><var>select</var> . <code>value</code> [ = <var>value</var> ]</dt>

    <dd>

    Returns the <a for="forms">value</a> of the first selected item, if
    any, or the empty string if there is no selected item.

    Can be set, to change the selection.

    </dd>

  </dl>

  <div class="impl">

  The <dfn attribute for="HTMLSelectElement"><code>type</code></dfn> IDL attribute, on getting, must
  return the string "<code>select-one</code>" if the <code>multiple</code> attribute is absent, and the string "<code>select-multiple</code>" if the <code>multiple</code>
  attribute is present.

  The <dfn attribute for="HTMLSelectElement"><code>options</code></dfn> IDL attribute must return an
  <code>HTMLOptionsCollection</code> rooted at the <code>select</code> node, whose filter matches
  the elements in the <a>list of options</a>.

  The <code>options</code> collection is also mirrored on the
  <code>HTMLSelectElement</code> object. The <a>supported property indices</a> at any instant
  are the indices supported by the object returned by the <code>options</code> attribute at that instant.

  The <dfn attribute for="HTMLSelectElement"><code>length</code></dfn> IDL attribute must return the
  number of nodes <a>represented</a> by the <code>options</code> collection. On setting, it must act like the attribute
  of the same name on the <code>options</code> collection.

  The <dfn method for="HTMLSelectElement"><code>item(<var>index</var>)</code></dfn> method
  must return the value returned by <a method for="NodeList" lt="item()">the method of the same
  name</a> on the <code>options</code> collection, when invoked with
  the same argument.

  The <dfn method for="HTMLSelectElement"><code>namedItem(<var>name</var>)</code></dfn>
  method must return the value returned by <a method for="NodeList" lt="item()">the
  method of the same name</a> on the <code>options</code> collection,
  when invoked with the same argument.

  When the user agent is to <dfn>set the value of a new
  indexed property</dfn> for a given property index <var>index</var> to a new value <var>value</var>, it must instead <a>set the
  value of a new indexed property</a> with the given property index <var>index</var> to
  the new value <var>value</var> on the <code>options</code>
  collection.

  Similarly, the <dfn method for="HTMLSelectElement"><code>add()</code></dfn> method must act like its
  namesake method on that same <code>options</code> collection.

  The <dfn method for="HTMLSelectElement"><code>remove()</code></dfn> method must act like its
  namesake method on that same <code>options</code> collection when it
  has arguments, and like its namesake method on the <code>ChildNode</code> interface implemented by
  the {{HTMLSelectElement}} ancestor interface {{Element}} when it has no
  arguments.

  The <dfn attribute for="HTMLSelectElement"><code>selectedOptions</code></dfn> IDL attribute
  must return an <code>HTMLCollection</code> rooted at the <{select}> node, whose filter
  matches the elements in the <a>list of options</a> that
  have their <a state for="option">selectedness</a> set to true.

  The <dfn attribute for="HTMLSelectElement"><code>selectedIndex</code></dfn> IDL attribute, on
  getting, must return the <a for="option">index</a> of the first
  <{option}> element in the <a>list of
  options</a> in <a>tree order</a> that has its <a state for="option">selectedness</a> set to true, if any. If there isn't one,
  then it must return -1.

  On setting, the <code>selectedIndex</code> attribute must set
  the <a state for="option">selectedness</a> of all the <{option}>
  elements in the <a>list of options</a> to false, and
  then the <{option}> element in the <a>list of
  options</a> whose <a for="option">index</a> is the given new value, if
  any, must have its <a state for="option">selectedness</a> set to true and
  its <a state for="option">dirtiness</a> set to true.

  <p class="note">
    This can result in no element having a <a state for="option">selectedness</a> set to true even in the case of the
  <{select}> element having no <code>multiple</code>
  attribute and a <a>display size</a> of 1.
  </p>

  The <dfn attribute for="HTMLSelectElement"><code>value</code></dfn> IDL attribute, on getting, must
  return the <a for="forms">value</a> of the first <{option}>
  element in the <a>list of options</a> in <a>tree
  order</a> that has its <a state for="option">selectedness</a> set to
  true, if any. If there isn't one, then it must return the empty string.

  On setting, the <code>value</code> attribute must set the <a state for="option">selectedness</a> of all the <{option}> elements
  in the <a>list of options</a> to false, and then the
  first <{option}> element in the <a>list of
  options</a>, in <a>tree order</a>, whose <a for="forms">value</a>
  is equal to the given new value, if any, must have its <a state for="option">selectedness</a> set to true and its <a state for="option">dirtiness</a> set to true.

  <p class="note">
    This can result in no element having a <a state for="option">selectedness</a> set to true even in the case of the
  <{select}> element having no <code>multiple</code>
  attribute and a <a>display size</a> of 1.
  </p>

  The <dfn attribute for="HTMLSelectElement"><code>multiple</code></dfn>, <dfn attribute for="HTMLSelectElement"><code>required</code></dfn>, and <dfn attribute for="HTMLSelectElement"><code>size</code></dfn> IDL attributes must <a>reflect</a> the
  respective content attributes of the same name. The <code>size</code> IDL
  attribute has a default value of zero.

  <p class="note">
    For historical reasons, the default value of the <code>size</code> IDL attribute does not return the actual size used, which, in
  the absence of the <code>size</code> content attribute, is either 1 or 4
  depending on the presence of the <code>multiple</code>
  attribute.
  </p>

  The {{HTMLSelectElement/willValidate}},
  {{HTMLSelectElement/validity}}, and
  {{HTMLSelectElement/validationMessage}} IDL attributes, and
  the {{HTMLSelectElement/checkValidity()}},
  {{HTMLSelectElement/reportValidity()}}, and
  {{HTMLSelectElement/setCustomValidity()}} methods, are part of
  the <a>constraint validation API</a>.
  The {{HTMLSelectElement/labels}} IDL attribute provides a list of the element's <{label}>s.
  The {{HTMLSelectElement/autofocus}},
  {{HTMLSelectElement/disabled}},
  {{HTMLSelectElement/form}}, and
  {{HTMLSelectElement/name}} IDL attributes are part of the
  element's forms API.

  </div>

  <div class="example">
    The following example shows how a <{select}> element can be used to offer the user
    with a set of options from which the user can select a single option. The default option is
    preselected.

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

    When there is no default option, a value that provides instructions or a hint (placeholder option) can be used instead:

    <pre highlight="html">
&lt;select name="unittype" required&gt;
  &lt;option value=""&gt; Select unit type &lt;/option&gt;
  &lt;option value="1"&gt; Miner &lt;/option&gt;
  &lt;option value="2"&gt; Puffer &lt;/option&gt;
  &lt;option value="3"&gt; Snipey &lt;/option&gt;
  &lt;option value="4"&gt; Max &lt;/option&gt;
  &lt;option value="5"&gt; Firebot &lt;/option&gt;
&lt;/select&gt;
    </pre>

  </div>

  <div class="example">
    Here, the user is offered a set of options from which he can select any number. By default,
    all five options are selected.

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

  </div>

  <div class="example">
    Sometimes, a user has to select one or more items. This example shows such an interface.

    <pre highlight="html">
&lt;p&gt;Select the songs from that you would like on your Act II Mix Tape:&lt;/p&gt;
&lt;select multiple required name="act2"&gt;
  &lt;option value="s1"&gt;It Sucks to Be Me (Reprize)
  &lt;option value="s2"&gt;There is Life Outside Your Apartment
  &lt;option value="s3"&gt;The More You Ruv Someone
  &lt;option value="s4"&gt;Schadenfreude
  &lt;option value="s5"&gt;I Wish I Could Go Back to College
  &lt;option value="s6"&gt;The Money Song
  &lt;option value="s7"&gt;School for Monsters
  &lt;option value="s8"&gt;The Money Song (Reprize)
  &lt;option value="s9"&gt;There's a Fine, Fine Line (Reprize)
  &lt;option value="s10"&gt;What Do You Do With a B.A. in English? (Reprize)
  &lt;option value="s11"&gt;For Now
&lt;/select&gt;
    </pre>

  </div>

<h4 id="the-datalist-element">The <dfn element><code>datalist</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd>Either: <a>phrasing content</a>.</dd>
    <dd>Or: Zero or more <{option}> and <a>script-supporting elements</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>listbox</code></a>
    (default - <a><em>do not set</em></a>).</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLDataListElement">
        interface HTMLDataListElement : HTMLElement {
          [SameObject] readonly attribute HTMLCollection options;
        };
      </pre>
    </dd>
  </dl>

  The <{datalist}> element represents a set of <{option}> elements that
  represent predefined options for other controls. In the rendering, the <{datalist}>
  element <a>represents</a> nothing<span class="impl"> and it, along with its children, should
  be hidden</span>.

  The <{datalist}> element can be used in two ways. In the simplest case, the
  <{datalist}> element has just <{option}> element children.

  <div class="example">
    <pre highlight="html">
&lt;label&gt;
  Sex:
  &lt;input name=sex list=sexes&gt;
  &lt;datalist id=sexes&gt;
  &lt;option value="Female"&gt;
  &lt;option value="Male"&gt;
  &lt;/datalist&gt;
&lt;/label&gt;
    </pre>

  </div>

  In the more elaborate case, the <{datalist}> element can be given contents that are to
  be displayed for down-level clients that don't support <{datalist}>. In this case, the
  <{option}> elements are provided inside a <{select}> element inside the
  <{datalist}> element.

  <div class="example">
    <pre highlight="html">
&lt;label&gt;
  Sex:
  &lt;input name=sex list=sexes&gt;
&lt;/label&gt;
&lt;datalist id=sexes&gt;
  &lt;label&gt;
  or select from the list:
  &lt;select name=sex&gt;
    &lt;option value=""&gt;
    &lt;option&gt;Female
    &lt;option&gt;Male
  &lt;/select&gt;
  &lt;/label&gt;
&lt;/datalist&gt;
    </pre>

  </div>

  The <{datalist}> element is hooked up to an <{input}> element using the <code>list</code> attribute on the <{input}> element.

  Each <{option}> element that is a descendant of the <{datalist}> element,
  that is not disabled, and whose <a for="forms">value</a> is a string that isn't the empty string, represents a
  suggestion. Each suggestion has a <a for="forms">value</a> and a <a>label</a>.

  <dl class="domintro">

    <dt><var>datalist</var> . <code>options</code></dt>

    <dd>
    Returns an <code>HTMLCollection</code> of the <{option}> elements of the
    <{datalist}> element.
    </dd>

  </dl>

  <div class="impl">

  The <dfn attribute for="HTMLDataListElement"><code>options</code></dfn> IDL attribute must return an
  <code>HTMLCollection</code> rooted at the <{datalist}> node, whose filter matches
  <{option}> elements.

  <strong>Constraint validation</strong>: If an element has a <{datalist}> element
  ancestor, it is <a>barred from constraint validation</a>.

  </div>

<h4 id="the-optgroup-element">The <dfn element><code>optgroup</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd>None.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>As a child of a <{select}> element.</dd>
    <dt><a>Content model</a>:</dt>
    <dd>Zero or more <{option}> and <a>script-supporting elements</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>An <{optgroup}> element's <a>end tag</a> may be omitted
    if the <{optgroup}> element  is
    immediately followed by another <{optgroup}> element, or if  there is no more content in
    the parent element.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{optgroup/disabled}> - Whether the form control is disabled</dd>
    <dd><{optgroup/label}> - User-visible label</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLOptGroupElement">
        interface HTMLOptGroupElement : HTMLElement {
          attribute boolean disabled;
          attribute DOMString label;
        };
      </pre>
    </dd>
  </dl>

  The <{optgroup}> element <a>represents</a> a group of <{option}>
  elements with a common label.

  The element's group of <{option}> elements consists of the <{option}>
  elements that are children of the <{optgroup}> element.

  <div class="impl">

  When showing <{option}> elements in <{select}> elements, user agents should
  show the <{option}> elements of such groups as being related to each other and separate
  from other <{option}> elements.

  </div>

  The <dfn element-attr for="optgroup"><code>disabled</code></dfn> content attribute is a
  <a>boolean attribute</a> and can be used to <a lt="actually disabled">disable</a> a group of <{option}> elements
  together.

  The <dfn element-attr for="optgroup"><code>label</code></dfn> content attribute must be specified. Its
  value gives the name of the group, for the purposes of the user interface. <span class="impl">User
  agents should use this attribute's value when labeling the group of <{option}> elements
  in a <{select}> element.</span>

  <div class="impl">

  The <dfn attribute for="HTMLOptGroupElement"><code>disabled</code></dfn> and <dfn attribute for="HTMLOptGroupElement"><code>label</code></dfn> IDL attributes must <a>reflect</a> the
  respective content attributes of the same name.

  </div>

  <p class="note">
    There is no way to select an <{optgroup}> element. Only
  <{option}> elements can be selected. An <{optgroup}> element merely provides a
  label for a group of <{option}> elements.
  </p>

  <div class="example">
    The following snippet shows how a set of lessons from three courses could be offered in a
    <{select}> drop-down widget:

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

  </div>

<h4 id="the-option-element">The <dfn element><code>option</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd>None.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>As a child of a <{select}> element.</dd>
    <dd>As a child of a <{datalist}> element.</dd>
    <dd>As a child of an <{optgroup}> element.</dd>
    <dt><a>Content model</a>:</dt>
    <dd>If the element has a <{option/label}> attribute and a <{option/value}> attribute: <a>Nothing</a>.</dd>
    <dd>If the element has a <{option/label}> attribute but no <{option/value}> attribute: <a>Text</a>.</dd>
    <dd>If the element has no <{option/label}> attribute: <a>Text</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>An <{option}> element's <a>end tag</a> may be omitted if
    the <{option}> element is immediately followed by another <{option}> element, or
    if it is immediately followed by an <{optgroup}> element, or if there is no more content
    in the parent element.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{option/disabled}> - Whether the form control is disabled</dd>
    <dd><{option/label}> - User-visible label</dd>
    <dd><{option/selected}> - Whether the option is selected by default</dd>
    <dd><{option/value}> - Value to be used for [[#forms-form-submission]]</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>option</code></a>
    (default - <a><em>do not set</em></a>),
    <a value for="role"><code>menuitem</code></a>,
    <a value for="role"><code>menuitemradio</code></a>
    or <a value for="role"><code>separator</code></a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLOptionElement">
        [NamedConstructor=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]
        interface HTMLOptionElement : HTMLElement {
          attribute boolean disabled;
          readonly attribute HTMLFormElement? form;
          attribute DOMString label;
          attribute boolean defaultSelected;
          attribute boolean selected;
          attribute DOMString value;

          attribute DOMString text;
          readonly attribute long index;
        };
      </pre>
    </dd>
  </dl>

  The <{option}> element <a>represents</a> an option in a <{select}> element or as part of a list of
  suggestions in a <{datalist}> element.

  In certain circumstances described in the definition of the <{select}> element, an <{option}>
  element can be a <{select}> element's <a>placeholder label option</a>. A
  <a>placeholder label option</a> does not represent an actual option, but instead represents a
  label for the <{select}> control.

  The <dfn element-attr for="option"><code>disabled</code></dfn> content attribute is a
  <a>boolean attribute</a>. An <{option}> element is disabled if its <{option/disabled}> attribute
  is present or if it is a child of an <{optgroup}> element whose <{optgroup/disabled}> attribute is
  present.

  An <{option}> element that is disabled must prevent any <a event><code>click</code></a> events
  that are <a>queued</a> on the <a>user interaction task source</a> from being dispatched on the
  element.

  The <dfn element-attr for="option"><code>label</code></dfn> content attribute provides a label for
  the element. The <dfn>label</dfn> of an <{option}> element is the value of the <{option/label}>
  content attribute, if there is one and its value is not the empty string, or, otherwise, the value
  of the element's {{HTMLOptionElement/text}} IDL attribute if its value is not the empty string.

  The <{option/label}> content attribute, if specified, must not be empty.

  The <dfn element-attr for="option"><code>value</code></dfn> content attribute provides a value for
  element. The <i>value</i> of an <{option}> element is the value of the <code>value</code> content
  attribute, if there is one, or, if there is not, the value of the element's
  {{HTMLOptionElement/text}} IDL attribute (which may be the empty string).

  The <dfn element-attr for="option"><code>selected</code></dfn> content attribute is a
  <a>boolean attribute</a>. It represents the default <a state for="option">selectedness</a> of the
  element.

  The <dfn state for="option">dirtiness</dfn> of an <{option}> element is a boolean state, initially
  false. It controls whether adding or removing the <{option/selected}> content attribute has any
  effect.

  The <dfn state for="option">selectedness</dfn> of an <{option}> element is a boolean state,
  initially false. Except where otherwise specified, when the element is created, its
  <a state for="option">selectedness</a> must be set to true if the element has a
  <{option/selected}> attribute. Whenever an <{option}> element's <{option/selected}> attribute is
  added, if its <a state for="option">dirtiness</a> is false, its
  <a state for="option">selectedness</a> must be set to true. Whenever an <{option}> element's
  <{option/selected}> attribute is <em>removed</em>, if its <a state for="option">dirtiness</a> is
  false, its <a state for="option">selectedness</a> must be set to false.

  <p class="note">The <a constructor for="HTMLOptionElement"><code>Option()</code></a> constructor,
  when called with three or fewer arguments, overrides the initial state of the
  <a state for="option">selectedness</a> state to always be false even if the third argument is true
  (implying that a <{option/selected}> attribute is to be set). The fourth argument can be used to
  explicitly set the initial <a state for="option">selectedness</a> state when using the
  constructor.</p>

  A <{select}> element whose <{select/multiple}> attribute is not specified must not have more than
  one descendant <{option}> element with its <{option/selected}> attribute set.

  An <{option}> element's <dfn for="option">index</dfn> is the number of <{option}> elements that are
  in the same <a>list of options</a> but that come before it in <a>tree order</a>. If the <{option}>
  element is not in a <a>list of options</a>, then the <{option}> element's
  {{HTMLOptionElement/index}} is zero.

  <dl class="domintro">
    <dt><var>option</var> . {{HTMLOptionElement/selected}}</dt>
    <dd>Returns true if the element is selected, and false otherwise.

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

    <dt><var>option</var> . {{HTMLOptionElement/index}}</dt>
    <dd>Returns the index of the element in its <{select}> element's {{HTMLSelectElement/options}}
    list.</dd>

    <dt><var>option</var> . {{HTMLOptionElement/form}}</dt>
    <dd>Returns the element's <{form}> element, if any, or null otherwise.</dd>

    <dt><var>option</var> . {{HTMLOptionElement/text}}</dt>
    <dd>Same as {{Node/textContent}}, except that spaces are collapsed and <{script}> elements are
    skipped.</dd>

    <dt><var>option</var> = new {{Option()}}( [ <var>text</var> [, <var>value</var> [, <var>defaultSelected</var> [, <var>selected</var> ] ] ] ] )</dt>
    <dd>Returns a new <{option}> element.

    The <var>text</var> argument sets the contents of the element.

    The <var>value</var> argument sets the <{option/value}> attribute.

    The <var>defaultSelected</var> argument sets the <{option/selected}> attribute.

    The <var>selected</var> argument sets whether or not the element is selected. If it is omitted,
    even if the <var>defaultSelected</var> argument is true, the element is not selected.</dd>
  </dl>

  The <dfn attribute for="HTMLOptionElement"><code>disabled</code></dfn> IDL attribute must
  <a>reflect</a> the content attribute of the same name. The
  <dfn attribute for="HTMLOptionElement"><code>defaultSelected</code></dfn> IDL attribute must
  <a>reflect</a> the <{option/selected}> content attribute.

  The <dfn attribute for="HTMLOptionElement"><code>label</code></dfn> IDL attribute, on getting, if
  there is a <{option/label}> content attribute, must return that attribute's value; otherwise, it
  must return the element's <a>label</a>. On setting, the element's <{option/label}> content
  attribute must be set to the new value.

  The <dfn attribute for="HTMLOptionElement"><code>value</code></dfn> IDL attribute, on getting,
  must return the element's <a for="forms">value</a>. On setting, the element's <{option/value}>
  content attribute must be set to the new value.

  The <dfn attribute for="HTMLOptionElement"><code>selected</code></dfn> IDL attribute, on getting,
  must return true if the element's <a state for="option">selectedness</a> is true, and false
  otherwise. On setting, it must set the element's <a state for="option">selectedness</a> to the new
  value, set its <a state for="option">dirtiness</a> to true, and then cause the element to
  <a>ask for a reset</a>.

  The <dfn attribute for="HTMLOptionElement"><code>index</code></dfn> IDL attribute must return the
  element's <a>index</a>.

  The <dfn attribute for="HTMLOptionElement"><code>text</code></dfn> IDL attribute, on getting, must
  return the result of <a>stripping and collapsing whitespace</a> from the concatenation of
  <a>data</a> of all the {{Text}} node descendants of the <{option}> element, in <a>tree order</a>,
  excluding any that are descendants of descendants of the <{option}> element that are themselves
  <{script}> elements in the <a>HTML namespace</a> or <{script}> elements in the
  <a>SVG namespace</a>.

  On setting, the {{HTMLOptionElement/text}} attribute must act as if the {{Node/textContent}} IDL
  attribute on the element had been set to the new value.

  The {{HTMLOptionElement/form}} IDL attribute's behavior depends on whether the <{option}> element
  is in a <{select}> element or not. If the <{option}> has a <{select}> element as its parent, or
  has an <{optgroup}> element as its parent and that <{optgroup}> element has a <{select}> element
  as its parent, then the {{HTMLOptionElement/form}} IDL attribute must return the same value as the
  {{HTMLSelectElement/form}} IDL attribute on that <{select}> element. Otherwise, it must return
  null.

  A constructor is provided for creating {{HTMLOptionElement}} objects (in addition to the factory
  methods from DOM such as {{Document/createElement()}}):
  <dfn constructor for="HTMLOptionElement"><code>Option(<var>text</var>, <var>value</var>, <var>defaultSelected</var>, <var>selected</var>)</code></dfn>.
  When invoked as a constructor, it must return a new {{HTMLOptionElement}} object (a new <{option}>
  element). If the first argument is not the empty string, the new object must have as its only
  child a {{Text}} node whose data is the value of that argument. Otherwise, it must have no
  children. If the <var>value</var> argument is present, the new object must have a
  <code>value</code> attribute set with the value of the argument as its value. If the
  <var>defaultSelected</var> argument is true, the new object must have a <{option/selected}>
  attribute set with no value. If the <var>selected</var> argument is true, the new object must have
  its <a state for="option">selectedness</a> set to true; otherwise the
  <a state for="option">selectedness</a> must be set to false, even if the
  <var>defaultSelected</var> argument is true. The element's <a>node document</a> must be the
  <a>active document</a> of the <a>browsing context</a> of the {{Window}} object on which the
  interface object of the invoked constructor is found.

<h4 id="the-textarea-element">The <dfn element><code>textarea</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd><a>Interactive content</a>.</dd>
    <dd><a lt="listed element">listed</a>, <a>labelable</a>, <a>submittable</a>, <a>resettable</a>, and <a>reassociateable</a> <a>form-associated element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Text</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{textarea/autocomplete}> - Hint for form autofill feature</dd>
    <dd><{textarea/autofocus}> - Automatically focus the form control when the page is loaded</dd>
    <dd><{textarea/cols}> - Maximum number of characters per line</dd>
    <dd><{textarea/dirname}> - Name of form field to use for sending the element's <a>directionality</a> in [[#forms-form-submission]]</dd>
    <dd><{textarea/disabled}>  - Whether the form control is disabled</dd>
    <dd><{textarea/form}> - Associates the control with a <{form}> element</dd>
    <dd><{textarea/inputmode}> - Hint for selecting an input modality</dd>
    <dd><{textarea/maxlength}> - Maximum length of value</dd>
    <dd><{textarea/minlength}> - Minimum length of value</dd>
    <dd><{textarea/name}> - Name of form control to use for [[#forms-form-submission]] and in the {{HTMLFormElement/elements|form.elements}} API </dd>
    <dd><{textarea/placeholder}> - User-visible label to be placed within the form control</dd>
    <dd><{textarea/readonly}> - Whether to allow the value to be edited by the user</dd>
    <dd><{textarea/required}> - Whether the control is required for [[#forms-form-submission]]</dd>
    <dd><{textarea/rows}> - Number of lines to show</dd>
    <dd><{textarea/wrap}> - How the value of the form control is to be wrapped for [[#forms-form-submission]]</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>textbox</code></a>
    (default - <a><em>do not set</em></a>).</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLTextAreaElement">
        interface HTMLTextAreaElement : HTMLElement {
          attribute DOMString autocomplete;
          attribute boolean autofocus;
          attribute unsigned long cols;
          attribute DOMString dirName;
          attribute boolean disabled;
          readonly attribute HTMLFormElement? form;
          attribute DOMString inputMode;
          attribute long maxLength;
          attribute long minLength;
          attribute DOMString name;
          attribute DOMString placeholder;
          attribute boolean readOnly;
          attribute boolean required;
          attribute unsigned long rows;
          attribute DOMString wrap;

          readonly attribute DOMString type;
          attribute DOMString defaultValue;
          [TreatNullAs=EmptyString] attribute DOMString value;
          readonly attribute unsigned long textLength;

          readonly attribute boolean willValidate;
          readonly attribute ValidityState validity;
          readonly attribute DOMString validationMessage;
          boolean checkValidity();
          boolean reportValidity();
          void setCustomValidity(DOMString error);

          [SameObject] readonly attribute NodeList labels;

          void select();
          attribute unsigned long selectionStart;
          attribute unsigned long selectionEnd;
          attribute DOMString selectionDirection;
          void setRangeText(DOMString replacement);
          void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
          void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
        };
      </pre>
    </dd>
  </dl>

  The <{textarea}> element <a>represents</a> a multiline plain text edit
  control<span class="impl"> for the element's <dfn>raw
  value</dfn></span>. The contents of the control represent the control's default value.

  <div class="impl">

  The <a>raw value</a> of a <{textarea}>
  control must be initially the empty string.

  <p class="note">
    This element <a href="#bidireq">has rendering requirements involving the bidirectional algorithm</a>.
  </p>

  </div>

  The <dfn element-attr for="textarea"><code>readonly</code></dfn> attribute is a
  <a>boolean attribute</a> used to control whether the text can be edited by the user or
  not.

  <div class="example">
    In this example, a text field is marked read-only because it represents a read-only file:

    <pre highlight="html">
Filename: &lt;code&gt;/etc/bash.bashrc&lt;/code&gt;
&lt;textarea name="buffer" readonly&gt;
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don't do anything
[ -z "$PS1" ] &amp;amp;&amp;amp; return

...&lt;/textarea&gt;
    </pre>

  </div>

  <div class="impl">

  <strong>Constraint validation</strong>: If the <{textarea/readonly}> attribute is specified on a <{textarea}>
  element, the element is <a>barred from constraint validation</a>.

  A <{textarea}> element is <a>mutable</a> if it is
  neither disabled nor has a <{textarea/readonly}> attribute specified.

  When a <{textarea}> is <a>mutable</a>, its <a>raw value</a> should be editable by the user: the user agent
  should allow the user to edit, insert, and remove text, and to insert and remove line breaks in
  the form of U+000A LINE FEED (LF) characters. Any time the user causes the element's <a>raw value</a> to change, the user agent must <a>queue a
  task</a> to <a>fire a simple event</a> that bubbles named <code>input</code> at the <{textarea}> element. User agents may wait for a
  suitable break in the user's interaction before queuing the task; for example, a user agent could
  wait for the user to have not hit a key for 100ms, so as to only fire the event when the user
  pauses, instead of continuously for each keystroke.

  A <{textarea}> element has a <dfn for="textarea">dirty value flag</dfn>, which must be initially set to false, and must be set to true whenever the user
  interacts with the control in a way that changes the <a>raw
  value</a>.

  When the <{textarea}> element's {{Node/textContent}} IDL attribute changes value,
  if the element's <a for="textarea">dirty value flag</a> is false, then the
  element's <a>raw value</a> must be set to the value of
  the element's {{Node/textContent}} IDL attribute.

  The <a>reset algorithm</a> for <{textarea}>
  elements is to set the element's <a>raw value</a> to the
  value of the element's {{Node/textContent}} IDL attribute.

  When a <{textarea}> element is popped off the <a>stack of open elements</a> of
  an <a>HTML parser</a> or <a>XML parser</a>, then the user agent must invoke the
  element's <a>reset algorithm</a>.

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

  <ol>

    <li>Set the element's <{global/dir}> attribute to "<a attr-value for="global/dir"><code>ltr</code></a>" if the user selected a left-to-right writing direction, and
    "<a attr-value for="global/dir"><code>rtl</code></a>" if the user selected a right-to-left writing
    direction.</li>

    <li><a>Queue a task</a> to <a>fire a simple event</a> that bubbles named <code>input</code> at the <{textarea}> element.</li>

  </ol>

  </div>

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

  <div class="impl">

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

  </div>

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

  <div class="impl">

  Visual user agents should set the height of the control to the number of lines given by <a>character height</a>.

  </div>

  The <dfn element-attr for="textarea"><code>wrap</code></dfn> attribute is an <a>enumerated
  attribute</a> with two keywords and states: the <dfn attr-value for="textarea/wrap"><code>soft</code></dfn> keyword which maps to the <a state for="textarea">Soft</a> state, and the <dfn attr-value for="textarea/wrap"><code>hard</code></dfn> keyword which maps to the <a state for="textarea">Hard</a> state. The <i>missing value default</i> is the
  <a state for="textarea">Soft</a> state.

  The <dfn state for="textarea">Soft</dfn> state indicates that the text in the
  <{textarea}> is not to be wrapped when it is submitted (though it can still be wrapped in
  the rendering).

  The <dfn state for="textarea">Hard</dfn> state indicates that the text in the
  <{textarea}> is to have newlines added by the user agent so that the text is wrapped when
  it is submitted.

  If the element's <code>wrap</code> attribute is in the <a state for="textarea">Hard</a> state, the <code>cols</code> attribute must be specified.

  <div class="impl">

  For historical reasons, the element's value is normalized in three different ways for three
  different purposes. The <a>raw value</a> is the value as
  it was originally set. It is not normalized. The <a>API
  value</a> is the value used in the <code>value</code> IDL
  attribute. It is normalized so that line breaks use U+000A LINE FEED (LF) characters. Finally,
  there is the <a for="forms">value</a>, as used in <a>form submission</a> and other
  processing models in this specification. It is normalized so that line breaks use U+000D CARRIAGE
  RETURN U+000A LINE FEED (CRLF) character pairs, and in addition, if necessary given the element's
  <code>wrap</code> attribute, additional line breaks are inserted to
  wrap the text at the given width.

  The element's <dfn>API value</dfn> is defined to be the
  element's <a>raw value</a> with the following
  transformation applied:

  <ol>

    <li>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair from the <a>raw value</a> with a single U+000A LINE FEED (LF)
    character.</li>

    <li>Replace every remaining U+000D CARRIAGE RETURN character from the <a>raw value</a> with a single U+000A LINE FEED (LF)
    character.</li>

  </ol>

  The element's <a for="forms">value</a> is defined to be the element's <a>raw value</a> with the <a>textarea wrapping
  transformation</a> applied. The <dfn>textarea wrapping transformation</dfn> is the following
  algorithm, as applied to a string:

  <ol>

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

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

  </ol>

  </div>

  The <dfn element-attr for="textarea"><code>maxlength</code></dfn> attribute is a <a>form control <code>maxlength</code> attribute</a> controlled
  by the <{textarea}> element's <a for="textarea">dirty value flag</a>.

  If the <{textarea}> element has a <a>maximum allowed value length</a>, then the
  element's children must be such that the <a>code-unit length</a> of the value of the
  element's {{Node/textContent}} IDL attribute with the <a>textarea wrapping
  transformation</a> applied is equal to or less than the element's <a>maximum allowed value
  length</a>.

  The <dfn element-attr for="textarea"><code>minlength</code></dfn> attribute is a <a>form control <code>minlength</code> attribute</a>
  controlled by the <{textarea}> element's <a for="textarea">dirty value flag</a>.

  The <dfn element-attr for="textarea"><code>required</code></dfn> attribute is a
  <a>boolean attribute</a>. When specified, the user will be required to enter a value before
  submitting the form.

  <div class="impl">

  <strong>Constraint validation</strong>: If the element has its <code>required</code> attribute specified, and the element is <a>mutable</a>, and the element's <a for="forms">value</a> is the empty string, then the element is <a>suffering
  from being missing</a>.

  </div>

  The <dfn element-attr for="textarea"><code>placeholder</code></dfn> attribute represents
  a <em>short</em> hint (a word or short phrase) intended to aid the user with data entry when the
  control has no value. A hint could be a sample value or a brief description of the expected
  format.

  The <code>placeholder</code> attribute
  should not be used as a replacement for a <{label}>. For a
  longer hint or other advisory text, place the text next to the control.

    <p class="note">
    Use of the <code>placeholder</code>
    attribute as a replacement for a <{label}> can reduce the
    accessibility and usability of the control for a range of users including older
    users and users with cognitive, mobility, fine motor skill or vision impairments.
    While the hint given by the control's <{label}> is shown at all times, the short
    hint given in the <code>placeholder</code>
    attribute is only shown before the user enters a value. Furthermore,
    <code>placeholder</code> text may be mistaken for
    a pre-filled value, and as commonly implemented the default color of the placeholder text
    provides insufficient contrast and the lack of a separate visible <{label}>
    reduces the size of the hit region available for setting focus on the control.
  </p>

  <div class="impl">

  User agents should present this hint to the user when the element's <a for="forms">value</a> is the empty string and the control is not
  <a>focused</a> (e.g., by displaying it inside a blank unfocused control). All U+000D CARRIAGE
  RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE
  RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when
  rendering the hint.

  </div>

  The <{textarea/name}> attribute represents the element's name.
  The <{textarea/dirname}> attribute controls how the element's <a>directionality</a> is submitted.
  The <{textarea/disabled}> attribute is used to make the control non-interactive and to prevent its
  value from being submitted.
  The <{textarea/form}> attribute is used to explicitly associate the
  <{textarea}> element with its <a>form owner</a>.
  The <{textarea/autofocus}> attribute controls focus.
  The <dfn element-attr for="textarea"><code>inputmode</code></dfn> attribute controls the user interface's input
  modality for the control.
  The <{textarea/autocomplete}> attribute controls how the user agent provides autofill behavior.

  <dl class="domintro">

    <dt><var>textarea</var> . <code>type</code></dt>

    <dd>

    Returns the string "<code>textarea</code>".

    </dd>

    <dt><var>textarea</var> . <code>value</code></dt>

    <dd>

    Returns the current value of the element.

    Can be set, to change the value.

    </dd>

  </dl>

  <div class="impl">
    The <dfn attribute for="HTMLTextAreaElement"><code>cols</code></dfn>, <dfn attribute for="HTMLTextAreaElement"><code>placeholder</code></dfn>,
    <dfn attribute for="HTMLTextAreaElement"><code>required</code></dfn>, <dfn attribute for="HTMLTextAreaElement"><code>rows</code></dfn>, and <dfn attribute for="HTMLTextAreaElement"><code>wrap</code></dfn>
    attributes must <a>reflect</a> the respective content attributes of the same name. The
    <code>cols</code> and <code>rows</code> attributes are <a>limited to only non-negative numbers
    greater than zero</a>. The <code>cols</code> attribute's default value is 20. The
    <{textarea/rows}> attribute's default value is 2. The <dfn attribute for="HTMLTextAreaElement"><code>dirName</code></dfn> IDL
    attribute must <a>reflect</a> the <{textarea/dirname}> content attribute. The
    <dfn attribute for="HTMLTextAreaElement"><code>inputMode</code></dfn> IDL attribute must <a>reflect</a> the <{textarea/inputmode}>
    content attribute, <a>limited to only known values</a>. The <dfn attribute for="HTMLTextAreaElement"><code>maxLength</code></dfn>
    IDL attribute must <a>reflect</a> the <{textarea/maxlength}> content attribute,
    <a>limited to only non-negative numbers</a>. The <dfn attribute for="HTMLTextAreaElement"><code>minLength</code></dfn> IDL attribute
    must <a>reflect</a> the <{textarea/minlength}> content attribute,
    <a>limited to only non-negative numbers</a>. The <dfn attribute for="HTMLTextAreaElement"><code>readOnly</code></dfn> IDL attribute
    must <a>reflect</a> the <{textarea/readonly}> content attribute.

    The <dfn attribute for="HTMLTextAreaElement"><code>type</code></dfn> IDL attribute must return the value "<code>textarea</code>".

    The <dfn attribute for="HTMLTextAreaElement"><code>defaultValue</code></dfn> IDL attribute must act like the element's
    {{Node/textContent}} IDL attribute.

    The <dfn attribute for="HTMLTextAreaElement"><code>value</code></dfn> attribute must, on getting, return the element's
    <a>API value</a>; on setting, it must set the element's <a>raw value</a> to the new value, set
    the element's <a for="textarea">dirty value flag</a> to true, and should then move the text entry cursor
    position to the end of the text field, unselecting any selected text and resetting the selection
    direction to <i>none</i>.

    The <dfn attribute for="HTMLTextAreaElement"><code>textLength</code></dfn> IDL attribute must return the <a>code-unit length</a> of
    the element's <a>API value</a>.

    The {{HTMLTextAreaElement/willValidate}}, {{HTMLTextAreaElement/validity}}, and
    {{HTMLTextAreaElement/validationMessage}} IDL attributes,
    and the {{HTMLTextAreaElement/checkValidity()}}, {{HTMLTextAreaElement/reportValidity()}}, and
    {{HTMLTextAreaElement/setCustomValidity()}} methods, are part of the
    <a>constraint validation API</a>.
    The {{HTMLTextAreaElement/labels}} IDL attribute provides a list of the element's <{label}>s.
    The {{HTMLTextAreaElement/select()}},
    {{HTMLTextAreaElement/selectionStart}},
    {{HTMLTextAreaElement/selectionEnd}},
    {{HTMLTextAreaElement/selectionDirection}},
    {{HTMLTextAreaElement/setRangeText()}}, and
    {{HTMLTextAreaElement/setSelectionRange()}} methods and IDL
    attributes expose the element's text selection.
    The {{HTMLTextAreaElement/autofocus}},
    {{HTMLTextAreaElement/disabled}},
    {{HTMLTextAreaElement/form}}, and
    {{HTMLTextAreaElement/name}} IDL attributes are part of the element's forms API.
  </div>

  <div class="example">
    Here is an example of a <{textarea}> being used for unrestricted free-form text input
    in a form:

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

    To specify a maximum length for the comments, one can use the <code>maxlength</code> attribute:

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

    To give a default value, text can be included inside the element:

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

    You can also give a minimum length. Here, a letter needs to be filled out by the user; a
    template (which is shorter than the minimum length) is provided, but is insufficient to submit
    the form:

    <pre highlight="html">
&lt;textarea required minlength="500"&gt;Dear Madam Speaker,

Regarding your letter dated ...

...

Yours Sincerely,

...&lt;/textarea&gt;
    </pre>

    A placeholder can be given as well, to suggest the basic form to the user, without providing
    an explicit template:

    <pre highlight="html">
&lt;textarea placeholder="Dear Francine,

They closed the parks this week, so we won't be able to
meet your there. Should we just have dinner?

Love,
Daddy"&gt;&lt;/textarea&gt;
    </pre>

    To have the browser submit <a>the directionality</a> of the element along with the
    value, the <code>dirname</code> attribute can be specified:

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

  </div>

<h4 id="the-keygen-element">The <dfn element><code>keygen</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd><a>Interactive content</a>.</dd>
    <dd><a lt="listed element">listed</a>, <a>labelable</a>, <a>submittable</a>, <a>resettable</a>, and <a>reassociateable</a> <a>form-associated element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Nothing</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>No <a>end tag</a>.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{keygen/autofocus}> - Automatically focus the form control when the page is loaded</dd>
    <dd><{keygen/challenge}> - String to package with the generated and signed public key</dd>
    <dd><{keygen/disabled}> - Whether the form control is disabled</dd>
    <dd><{keygen/form}> - Associates the control with a <{form}> element</dd>
    <dd><{keygen/keytype}> - The type of cryptographic key to generate</dd>
    <dd><{keygen/name}> - Name of form control to use for [[#forms-form-submission]] and in the {{HTMLFormElement/elements|form.elements}} API </dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLKeygenElement">
        interface HTMLKeygenElement : HTMLElement {
          attribute boolean autofocus;
          attribute DOMString challenge;
          attribute boolean disabled;
          readonly attribute HTMLFormElement? form;
          attribute DOMString keytype;
          attribute DOMString name;

          readonly attribute DOMString type;

          readonly attribute boolean willValidate;
          readonly attribute ValidityState validity;
          readonly attribute DOMString validationMessage;
          boolean checkValidity();
          boolean reportValidity();
          void setCustomValidity(DOMString error);

          [SameObject] readonly attribute NodeList labels;
        };
      </pre>
    </dd>
  </dl>

  <p class="critical">This feature is in the process of being removed from the Web platform. (This
  is a long process that takes many years.) Using the <{keygen}> element at this time is
  highly discouraged.</p>

  The <{keygen}> element <a>represents</a> a key pair generator control. When the
  control's form is submitted, the private key is stored in the local keystore, and the public key
  is packaged and sent to the server.

  The <dfn element-attr for="keygen"><code>challenge</code></dfn> attribute may be specified.
  Its value will be packaged with the submitted key.

  The <dfn element-attr for="keygen"><code>keytype</code></dfn> attribute is an
  <a>enumerated attribute</a>. The following table lists the keywords and states for the
  attribute — the keywords in the left column map to the states listed in the cell in the
  second column on the same row as the keyword. User agents are not required to support these
  values, and must only recognize values whose corresponding algorithms they support.

  <table>
    <thead> <tr> <th> Keyword </th><th> State
    </th></tr></thead><tbody>
    <tr>
      <td> <code>rsa</code>
      </td><td> <i>RSA</i>

  </td></tr></tbody></table>

  The <i>invalid value default</i> state is the <i>unknown</i> state. The <i>missing value default</i> state is the <i>RSA</i> state, if it is supported, or the <i>unknown</i> state otherwise.

  <p class="note">
    This specification does not specify what key types user agents are to support
  — it is possible for a user agent to not support any key types at all.
  </p>

  <div class="impl">

  The user agent may expose a user interface for each <{keygen}> element to allow the
  user to configure settings of the element's key pair generator, e.g., the key length.

  The <a>reset algorithm</a> for <{keygen}>
  elements is to set these various configuration settings back to their defaults.

  The element's <a for="forms">value</a> is the string returned from the
  following algorithm:

  <ol>

    <li>

    Use the appropriate step from the following list:

    <dl class="switch">

      <dt>If the <{keygen/keytype}> attribute is in the <i>RSA</i> state</dt>

      <dd>

      Generate an RSA key pair using the settings given by the user, if appropriate, using the
      <code>md5WithRSAEncryption</code> RSA signature algorithm (the signature algorithm
      with MD5 and the RSA encryption algorithm) referenced in section 2.2.1 ("RSA Signature
      Algorithm") of RFC 3279, and defined in RFC 3447. [[!RFC3279]] [[!RFC3447]]

      </dd>

      <dt>Otherwise, the <{keygen/keytype}> attribute is in the <i>unknown</i> state</dt>

      <dd>

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

      </dd>

    </dl>

    Let <var>private key</var> be the generated private key.

    Let <var>public key</var> be the generated public key.

    Let <var>signature algorithm</var> be the selected signature algorithm.

    </li>

    <li>

    If the element has a <{keygen/challenge}> attribute, then let
    <var>challenge</var> be that attribute's value. Otherwise, let <var>challenge</var> be the empty string.

    </li>

    <li>

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

    </li>

    <li>

    Let <var>spki</var> be an ASN.1 <code>SubjectPublicKeyInfo</code> structure
    as defined by RFC 5280, with the <code>algorithm</code> field set to the <var>algorithm</var> structure from the previous step, and the <code>subjectPublicKey</code> field set to the BIT STRING value resulting from ASN.1 DER
    encoding the <var>public key</var>. [[!X690]] [[!RFC5280]]

    </li>

    <li>

    Let <var>publicKeyAndChallenge</var> be an ASN.1 <code>PublicKeyAndChallenge</code>
    structure as defined below, with the <code>spki</code> field set to the <var>spki</var> structure from the previous step, and the <code>challenge</code>
    field set to the string <var>challenge</var> obtained earlier. [[!X690]]

    </li>

    <li>

    Let <var>signature</var> be the BIT STRING value resulting from ASN.1 DER encoding
    the signature generated by applying the <var>signature algorithm</var> to the byte
    string obtained by ASN.1 DER encoding the <var>publicKeyAndChallenge</var> structure,
    using <var>private key</var> as the signing key. [[!X690]]

    </li>

    <li>

    Let <var>signedPublicKeyAndChallenge</var> be an ASN.1
    <code>SignedPublicKeyAndChallenge</code> structure as defined below, with the <code>publicKeyAndChallenge</code> field set to the <var>publicKeyAndChallenge</var>
    structure, the <code>signatureAlgorithm</code> field set to the <var>algorithm</var> structure, and the <code>signature</code> field set to the BIT
    STRING <var>signature</var> from the previous step. [[!X690]]

    </li>

    <li>

    Return the result of base64 encoding the result of ASN.1 DER encoding the <var>signedPublicKeyAndChallenge</var> structure. [[!RFC4648]] [[!X690]]

    </li>

  </ol>

  The data objects used by the above algorithm are defined as follows. These definitions use the
  same "ASN.1-like" syntax defined by RFC 5280. [[!RFC5280]]

  <pre>
    PublicKeyAndChallenge ::= SEQUENCE {
      spki SubjectPublicKeyInfo,
      challenge IA5STRING
    }

    SignedPublicKeyAndChallenge ::= SEQUENCE {
      publicKeyAndChallenge PublicKeyAndChallenge,
      signatureAlgorithm AlgorithmIdentifier,
      signature BIT STRING
    }
  </pre>

  <hr />

  <strong>Constraint validation</strong>: The <{keygen}> element is <a>barred from
  constraint validation</a>.

  </div>

  The <{keygen/form}> attribute is used to explicitly associate the
  <{keygen}> element with its <a>form owner</a>. The <{keygen/name}> attribute represents the element's name. The <{keygen/disabled}> attribute is used to make the control non-interactive and
  to prevent its value from being submitted. The <{keygen/autofocus}>
  attribute controls focus.

  <dl class="domintro">

    <dt><var>keygen</var> . <code>type</code></dt>

    <dd>

    Returns the string "<code>keygen</code>".

    </dd>

  </dl>

  <div class="impl">

  The <dfn attribute for="HTMLKeygenElement"><code>challenge</code></dfn> IDL attribute must
  <a>reflect</a> the content attribute of the same name.

  The <dfn attribute for="HTMLKeygenElement"><code>keytype</code></dfn> IDL attribute must
  <a>reflect</a> the content attribute of the same name, <a>limited to only known values</a>.

  The <dfn attribute for="HTMLKeygenElement"><code>type</code></dfn> IDL attribute must return the value
  "<code>keygen</code>".

  The {{HTMLKeygenElement/willValidate}}, {{HTMLKeygenElement/validity}}, and
  {{HTMLKeygenElement/validationMessage}} IDL attributes, and
  the {{HTMLKeygenElement/checkValidity()}},
  {{HTMLKeygenElement/reportValidity()}}, and
  {{HTMLKeygenElement/setCustomValidity()}} methods, are part of
  the <a>constraint validation API</a>.
  The {{HTMLKeygenElement/labels}} IDL attribute provides a list of the element's <{label}>s.
  The {{HTMLKeygenElement/autofocus}},
  {{HTMLKeygenElement/disabled}},
  {{HTMLKeygenElement/form}}, and
  {{HTMLKeygenElement/name}} IDL attributes are
  part of the element's forms API.

  </div>

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

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

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

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

  </div>

<h4 id="the-output-element">The <dfn element><code>output</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd><a lt="listed element">listed</a>, <a>labelable</a>, <a>resettable</a>, and <a>reassociateable</a> <a>form-associated element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Phrasing content</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{output/for}> - Specifies controls from which the output was calculated</dd>
    <dd><{output/form}> - Associates the control with a <{form}> element</dd>
    <dd><{output/name}> - Name of form control to use for [[#forms-form-submission]] and in the {{HTMLFormElement/elements|form.elements}} API   </dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>status</code></a>
    (default - <a><em>do not set</em></a>), <a href="#allowed-aria-roles-states-and-properties">Any role value</a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLOutputElement">
        interface HTMLOutputElement : HTMLElement {
          [SameObject, PutForwards=value] readonly attribute DOMTokenList htmlFor;
          readonly attribute HTMLFormElement? form;
          attribute DOMString name;

          readonly attribute DOMString type;
          attribute DOMString defaultValue;
          attribute DOMString value;

          readonly attribute boolean willValidate;
          readonly attribute ValidityState validity;
          readonly attribute DOMString validationMessage;
          boolean checkValidity();
          boolean reportValidity();
          void setCustomValidity(DOMString error);

          [SameObject] readonly attribute NodeList labels;
        };
      </pre>
    </dd>
  </dl>

  The <{output}> element <a>represents</a> the result of a calculation performed
  by the application, or the result of a user action.

  <p class="note">
    This element can be contrasted with the <{samp}> element, which is the
  appropriate element for quoting the output of other programs run previously.
  </p>

  The <dfn element-attr for="output"><code>for</code></dfn> content attribute allows an explicit
  relationship to be made between the result of a calculation and the elements that represent the
  values that went into the calculation or that otherwise influenced the calculation. The <{output/for}> attribute, if specified, must contain a string consisting of
  an <a>unordered set of unique space-separated tokens</a> that are
  <a>case-sensitive</a>, each of which must have the value of an <a>ID</a> of an element in the same {{Document}}.

  The <{output/form}> attribute is used to explicitly associate the
  <{output}> element with its <a>form owner</a>. The <{output/name}> attribute represents the element's name. The <{output}>
  element is associated with a form so that it can be easily referenced from the event handlers of
  form controls; the element's value itself is not submitted when the form is submitted.

  <div class="impl">

  The element has a <dfn>value mode flag</dfn> which is either <i>value</i> or <i>default</i>. Initially, the <a>value mode flag</a> must be set to <i>default</i>.

  The element also has a <dfn for="output">default value</dfn>.
  Initially, the <a for="output">default value</a> must be the empty
  string.

  When the <a>value mode flag</a> is in mode <dfn mode for="output"><i>default</i></dfn>, the contents of the element represent both
  the value of the element and its <a for="output">default value</a>.
  When the <a>value mode flag</a> is in mode <dfn mode for="output"><i>value</i></dfn>, the contents of the element represent the
  value of the element only, and the <a for="output">default value</a>
  is only accessible using the <code>defaultValue</code> IDL
  attribute.

  Whenever the element's descendants are changed in any way, if the <a>value mode flag</a> is in mode <i>default</i>, the element's <a for="output">default value</a> must be set to the value of the
  element's {{Node/textContent}} IDL attribute.

  The <a>reset algorithm</a> for <{output}>
  elements is to set the element's <a>value mode flag</a> to <i>default</i> and then to set the element's
  {{Node/textContent}} IDL attribute to the value of the element's <a for="output">default value</a> (thus replacing the element's child
  nodes).

  </div>

  <dl class="domintro">

    <dt><var>output</var> . <code>value</code> [ = <var>value</var> ]</dt>

    <dd>

    Returns the element's current value.

    Can be set, to change the value.

    </dd>

    <dt><var>output</var> . <code>defaultValue</code> [ = <var>value</var> ]</dt>

    <dd>

    Returns the element's current default value.

    Can be set, to change the default value.

    </dd>

    <dt><var>output</var> . <code>type</code></dt>

    <dd>

    Returns the string "<code>output</code>".

    </dd>

  </dl>

  <div class="impl">

  The <dfn attribute for="HTMLOutputElement"><code>value</code></dfn> IDL attribute must act like the
  element's {{Node/textContent}} IDL attribute, except that on setting, in addition, before the
  child nodes are changed, the element's <a>value mode flag</a>
  must be set to <i>value</i>.

  The <dfn attribute for="HTMLOutputElement"><code>defaultValue</code></dfn> IDL attribute, on
  getting, must return the element's <a for="output">default
  value</a>. On setting, the attribute must set the element's <a for="output">default value</a>, and, if the element's <a>value mode flag</a> is in the mode <i>default</i>, set the element's {{Node/textContent}} IDL
  attribute as well.

  The <dfn attribute for="HTMLOutputElement"><code>type</code></dfn> attribute must return the string
  "<code>output</code>".

  The <dfn attribute for="HTMLOutputElement"><code>htmlFor</code></dfn> IDL attribute must
  <a>reflect</a> the <{output/for}> content attribute.

  The {{HTMLOutputElement/willValidate}},
  {{HTMLOutputElement/validity}}, and
  {{HTMLOutputElement/validationMessage}} IDL attributes, and
  the {{HTMLOutputElement/checkValidity()}},
  {{HTMLOutputElement/reportValidity()}}, and
  {{HTMLOutputElement/setCustomValidity()}} methods, are part of
  the <a>constraint validation API</a>.
  The {{HTMLOutputElement/labels}} IDL attribute provides a list of the element's <{label}>s.
  The {{HTMLOutputElement/form}} and
  {{HTMLOutputElement/name}} IDL attributes are
  part of the element's forms API.

  </div>

  <div class="example">
    A simple calculator could use <{output}> for its display of calculated results:

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

  </div>

  <div class="example">
    In this example, an <{output}> element is used to report the results of a calculation performed by a remote
    server, as they come in:

    <pre highlight="html">
&lt;output id="result"&gt;&lt;/output&gt;
&lt;script&gt;
  var primeSource = new WebSocket('ws://primes.example.net/');
  primeSource.onmessage = function (event) {
    document.getElementById('result').value = event.data;
  }
&lt;/script&gt;
    </pre>

  </div>

<h4 id="the-progress-element">The <dfn element><code>progress</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd><a>Labelable element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Phrasing content</a>, but there must be no <{progress}> element descendants.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{progress/value}> - Current value of the element</dd>
    <dd><{progress/max}> - Upper bound of range</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>progressbar</code></a>
    (default - <a><em>do not set</em></a>).</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLProgressElement">
        interface HTMLProgressElement : HTMLElement {
          attribute double value;
          attribute double max;
          readonly attribute double position;
          [SameObject] readonly attribute NodeList labels;
        };
      </pre>
    </dd>
  </dl>

  The <{progress}> element <a>represents</a> the completion progress of a task.
  The progress is either indeterminate, indicating that progress is being made but that it is not
  clear how much more work remains to be done before the task is complete (e.g., because the task is
  waiting for a remote host to respond), or the progress is a number in the range zero to a maximum,
  giving the fraction of work that has so far been completed.

  There are two attributes that determine the current task completion represented by the element.
  The <dfn element-attr for="progress"><code>value</code></dfn> content attribute specifies how much of the
  task has been completed, and the <dfn element-attr for="progress"><code>max</code></dfn> content attribute
  specifies how much work the task requires in total. The units are arbitrary and not specified.

  <p class="note">
    To make a determinate progress bar, add a <{progress/value}> attribute with the current progress (either a number from
  0.0 to 1.0, or, if the <{progress/max}> attribute is specified, a number
  from 0 to the value of the <{progress/max}> attribute). To make an
  indeterminate progress bar, remove the <{progress/value}>
  attribute.
  </p>

  Authors are encouraged to also include the current value and the <a for="progress">maximum value</a> inline as text
  inside the element, so that the progress is made available to users of legacy user agents.

  <div class="example">
    Here is a snippet of a Web application that shows the progress of some automated task:

    <pre highlight="html">
&lt;section&gt;
  &lt;h2&gt;Task Progress&lt;/h2&gt;
  &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
  &lt;script&gt;
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
  &lt;/script&gt;
&lt;/section&gt;
    </pre>

    (The <code>updateProgress()</code> method in this example would be called by some
    other code on the page to update the actual progress bar as the task progressed.)

  </div>

  The <{progress/value}> and <{progress/max}> attributes, when present, must have values that are <a>valid floating-point numbers</a>. The <{progress/value}> attribute, if present, must have a value equal to or
  greater than zero, and less than or equal to the value of the <{progress/max}> attribute, if present, or 1.0, otherwise. The <{progress/max}> attribute, if present, must have a value greater than
  zero.

  <p class="note">
    The <{progress}> element is the wrong element to use for something that
  is just a gauge, as opposed to task progress. For instance, indicating disk space usage using
  <{progress}> would be inappropriate. Instead, the <{meter}> element is available
  for such use cases.
  </p>

  <div class="impl">

  <strong>User agent requirements</strong>: If the <{progress/value}>
  attribute is omitted, then the progress bar is an indeterminate progress bar. Otherwise, it is a
  determinate progress bar.

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

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

  <strong>user agent requirements for showing the progress bar</strong>: When representing a
  <{progress}> element to the user, the user agent should indicate whether it is a determinate or
  indeterminate progress bar, and in the former case, should indicate the relative position of the
  <a for="progress">current value</a> relative to the <a for="progress">maximum value</a>.

  </div>

  <dl class="domintro">

    <dt><var>progress</var> . <code>position</code></dt>

    <dd>

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

    For an indeterminate progress bar, returns -1.

    </dd>

  </dl>

  <div class="impl">

  If the progress bar is an indeterminate progress bar, then the <dfn attribute for="HTMLProgressElement"><code>position</code></dfn> IDL attribute must return -1.
  Otherwise, it must return the result of dividing the <a for="progress">current
  value</a> by the <a for="progress">maximum value</a>.

  If the progress bar is an indeterminate progress bar, then the <dfn attribute for="HTMLProgressElement"><code>value</code></dfn> IDL attribute, on getting, must return 0.
  Otherwise, it must return the <a for="progress">current value</a>. On
  setting, the given value must be converted to the
  <a lt="best floating-point number">best representation of the number as a floating-point number</a>
  and then the <{progress/value}> content attribute must be set to that string.

  <p class="note">
    Setting the {{HTMLProgressElement/value}} IDL attribute to itself
  when the corresponding content attribute is absent would change the progress bar from an
  indeterminate progress bar to a determinate progress bar with no progress.
  </p>

  The <dfn attribute for="HTMLProgressElement"><code>max</code></dfn> IDL attribute must
  <a>reflect</a> the content attribute of the same name, <a>limited to numbers greater than
  zero</a>. The default value for <{progress/max}> is 1.0.

  The {{HTMLProgressElement/labels}} IDL attribute provides a list of the element's <{label}>s.

  </div>

<h4 id="the-meter-element">The <dfn element><code>meter</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Phrasing content</a>.</dd>
    <dd><a>Labelable element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Phrasing content</a>, but there must be no <{meter}> element descendants.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{meter/value}> - Current value of the element</dd>
    <dd><{meter/min}> - Lower bound of range</dd>
    <dd><{meter/max}> - Upper bound of range</dd>
    <dd><{meter/low}> - High limit of low range</dd>
    <dd><{meter/high}> - Low limit of high range</dd>
    <dd><{meter/optimum}> - Optimum value in gauge</dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLMeterElement">
        interface HTMLMeterElement : HTMLElement {
          attribute double value;
          attribute double min;
          attribute double max;
          attribute double low;
          attribute double high;
          attribute double optimum;
          [SameObject] readonly attribute NodeList labels;
        };
      </pre>
    </dd>
  </dl>

  The <{meter}> element <a>represents</a> a scalar measurement within a known
  range, or a fractional value; for example disk usage, the relevance of a query result, or the
  fraction of a voting population to have selected a particular candidate.

  This is also known as a gauge.

  <p class="note">
    The <{meter}> element should not be used to indicate progress (as in a
  progress bar). For that role, HTML provides a separate <{progress}> element.
  </p>

  <p class="note">
    The <{meter}> element also does not represent a scalar value of arbitrary
  range — for example, it would be wrong to use this to report a weight, or height, unless
  there is a known <a for="meter">maximum value</a>.
  </p>

  There are six attributes that determine the semantics of the gauge represented by the
  element.

  The <dfn element-attr for="meter"><code>min</code></dfn> attribute specifies the lower bound of
  the range, and the <dfn element-attr for="meter"><code>max</code></dfn> attribute specifies the
  upper bound. The <dfn element-attr for="meter"><code>value</code></dfn> attribute specifies the
  value to have the gauge indicate as the "measured" value.

  The other three attributes can be used to segment the gauge's range into "low", "medium", and
  "high" parts, and to indicate which part of the gauge is the "optimum" part. The <dfn element-attr for="meter"><code>low</code></dfn> attribute specifies the range that is considered to
  be the "low" part, and the <dfn element-attr for="meter"><code>high</code></dfn> attribute
  specifies the range that is considered to be the "high" part. The <dfn element-attr for="meter"><code>optimum</code></dfn> attribute gives the position that is
  "optimum"; if that is higher than the "high" value then this indicates that the higher the value,
  the better; if it's lower than the "low" mark then it indicates that lower values are better, and
  naturally if it is in between then it indicates that neither high nor low values are good.

  <span class="impl"><strong>Authoring requirements</strong>:</span> The <{meter/value}> attribute must be specified. The <{meter/value}>, <{meter/min}>, <{meter/low}>, <{meter/high}>, <{meter/max}>, and <{meter/optimum}> attributes,
  when present, must have values that are <a>valid
  floating-point numbers</a>.

  In addition, the attributes' values are further constrained:

  Let <var>value</var> be the <{meter/value}> attribute's
  number.

  If the <{meter/min}> attribute is specified, then let <var>minimum</var> be that attribute's value; otherwise, let it be zero.

  If the <{meter/max}> attribute is specified, then let <var>maximum</var> be that attribute's value; otherwise, let it be 1.0.

  The following inequalities must hold, as applicable:

  <ul class="brief">

    <li><var>minimum</var> ≤ <var>value</var> ≤ <var>maximum</var></li>

    <li><var>minimum</var> ≤ <code>low</code> ≤ <var>maximum</var> (if <code>low</code> is specified)</li>

    <li><var>minimum</var> ≤ <code>high</code> ≤ <var>maximum</var> (if <code>high</code> is specified)</li>

    <li><var>minimum</var> ≤ <code>optimum</code> ≤ <var>maximum</var> (if <code>optimum</code> is specified)</li>

    <li><code>low</code> ≤ <code>high</code> (if
    both <code>low</code> and <code>high</code> are
    specified)</li>

  </ul>

  <p class="note">
    If no minimum or maximum is specified, then the range is assumed to be 0..1, and
  the value thus has to be within that range.
  </p>

  Authors are encouraged to include a textual representation of the gauge's state in the
  element's contents, for users of user agents that do not support the <{meter}>
  element.

  When used with microdata, the <{meter}> element's <{meter/value}> attribute provides the element's machine-readable value.

  <div class="example">
    The following examples show three gauges that would all be three-quarters full:

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

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

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

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

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

  </div>

  There is no explicit way to specify units in the <{meter}> element, but the units may
  be specified in the <{meter/title}> attribute in free-form text.

  <div class="example">
    The example above could be extended to mention the units:

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

  </div>

  <div class="impl">

  <strong>User agent requirements</strong>: User agents must parse the <{meter/min}>, <{meter/max}>, <{meter/value}>, <{meter/low}>, <{meter/high}>, and <{meter/optimum}>
  attributes using the <a>rules for parsing floating-point number values</a>.

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

  <dl>

    <dt>The <dfn for="meter">minimum value</dfn></dt>

    <dd>

    If the <{meter/min}> attribute is specified and a value could be
    parsed out of it, then the <a for="meter">minimum value</a> is that value. Otherwise, the <a for="meter">minimum value</a> is
    zero.

    </dd>

    <dt>The <dfn for="meter">maximum value</dfn></dt>

    <dd>

    If the <{meter/max}> attribute is specified and a value could be
    parsed out of it, then the candidate <a for="meter">maximum value</a> is that value. Otherwise, the candidate
    <a for="meter">maximum value</a> is 1.0.

    If the candidate <a for="meter">maximum value</a> is greater than or equal to the <a for="meter">minimum value</a>, then the
    <a for="meter">maximum value</a> is the candidate <a for="meter">maximum value</a>. Otherwise, the <a for="meter">maximum value</a> is the same as the
    <a for="meter">minimum value</a>.

    </dd>

    <dt>The <dfn for="meter">actual value</dfn></dt>

    <dd>

    If the <{meter/value}> attribute is specified and a value could
    be parsed out of it, then that value is the candidate actual value. Otherwise, the candidate
    actual value is zero.

    If the candidate actual value is less than the <a for="meter">minimum value</a>, then the actual value is the
    <a for="meter">minimum value</a>.

    Otherwise, if the candidate actual value is greater than the <a for="meter">maximum value</a>, then the actual
    value is the <a for="meter">maximum value</a>.

    Otherwise, the actual value is the candidate actual value.

    </dd>

    <dt>The <dfn for="meter">low boundary</dfn></dt>

    <dd>

    If the <{meter/low}> attribute is specified and a value could be
    parsed out of it, then the candidate low boundary is that value. Otherwise, the candidate low
    boundary is the same as the <a for="meter">minimum value</a>.

    If the candidate low boundary is less than the <a for="meter">minimum value</a>, then the low boundary is the
    <a for="meter">minimum value</a>.

    Otherwise, if the candidate low boundary is greater than the <a for="meter">maximum value</a>, then the low
    boundary is the <a for="meter">maximum value</a>.

    Otherwise, the low boundary is the candidate low boundary.

    </dd>

    <dt>The <dfn for="meter">high boundary</dfn></dt>

    <dd>

    If the <{meter/high}> attribute is specified and a value could be
    parsed out of it, then the candidate high boundary is that value. Otherwise, the candidate high
    boundary is the same as the <a for="meter">maximum value</a>.

    If the candidate high boundary is less than the low boundary, then the high boundary is the
    low boundary.

    Otherwise, if the candidate high boundary is greater than the <a for="meter">maximum value</a>, then the high
    boundary is the <a for="meter">maximum value</a>.

    Otherwise, the high boundary is the candidate high boundary.

    </dd>

    <dt>The <dfn for="meter" lt="optimum value|optimum point">optimum point</dfn></dt>

    <dd>

    If the <{meter/optimum}> attribute is specified and a value
    could be parsed out of it, then the candidate optimum point is that value. Otherwise, the
    candidate optimum point is the midpoint between the <a for="meter">minimum value</a> and the <a for="meter">maximum value</a>.

    If the candidate optimum point is less than the <a for="meter">minimum value</a>, then the optimum point is the
    <a for="meter">minimum value</a>.

    Otherwise, if the candidate optimum point is greater than the <a for="meter">maximum value</a>, then the optimum
    point is the <a for="meter">maximum value</a>.

    Otherwise, the optimum point is the candidate optimum point.

    </dd>

  </dl>

  All of which will result in the following inequalities all being true:

  <ul class="brief">
    <li>minimum value ≤ actual value ≤ maximum value</li>
    <li>minimum value ≤ low boundary ≤ high boundary ≤ maximum value</li>
    <li>minimum value ≤ optimum point ≤ maximum value</li>
  </ul>

  <strong>user agent requirements for regions of the gauge</strong>: If the optimum point is equal to the
  low boundary or the high boundary, or anywhere in between them, then the region between the low
  and high boundaries of the gauge must be treated as the optimum region, and the low and high
  parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low
  boundary, then the region between the <a for="meter">minimum value</a> and the low boundary must be treated as the
  optimum region, the region from the low boundary up to the high boundary must be treated as a
  suboptimal region, and the remaining region must be treated as an even less good region. Finally,
  if the optimum point is higher than the high boundary, then the situation is reversed; the region
  between the high boundary and the <a for="meter">maximum value</a> must be treated as the optimum region, the region
  from the high boundary down to the low boundary must be treated as a suboptimal region, and the
  remaining region must be treated as an even less good region.

  <strong>user agent requirements for showing the gauge</strong>: When representing a <{meter}>
  element to the user, the user agent should indicate the relative position of the actual value to the
  minimum and maximum values, and the relationship between the actual value and the three regions of
  the gauge.

  </div>

  <div class="example">
    The following markup:
    <pre highlight="html">
&lt;h3&gt;Suggested groups&lt;/h3&gt;
&lt;menu type="toolbar"&gt;
  &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()"&gt;Hide suggested groups&lt;/a&gt;
&lt;/menu&gt;
&lt;ul&gt;
  &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view"&gt;comp.infosystems.www.authoring.stylesheets&lt;/a&gt; -
      &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Group description: &lt;strong&gt;Layout/presentation on the WWW.&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;&lt;meter value="0.5"&gt;Moderate activity,&lt;/meter&gt; Usenet, 618 subscribers&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/netscape.public.mozilla.xpinstall/view"&gt;netscape.public.mozilla.xpinstall&lt;/a&gt; -
      &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Group description: &lt;strong&gt;Mozilla XPInstall discussion.&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt; Usenet, 22 subscribers&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;p&gt;&lt;a href="/group/mozilla.dev.general/view"&gt;mozilla.dev.general&lt;/a&gt; -
      &lt;a href="/group/mozilla.dev.general/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt; Usenet, 66 subscribers&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;
    </pre>
    Might be rendered as follows:
    <img src="images/sample-meter.png" width="332" height="178" alt="With the <meter> elements rendered as inline green bars of varying lengths." />
  </div>

  User agents <span class="impl">may</span> combine the value of the <{meter/title}> attribute and the other attributes to provide context-sensitive
  help or inline text detailing the actual values.

  <div class="example">
    For example, the following snippet:
    <pre highlight="html">
&lt;meter min=0 max=60 value=23.2 title=seconds&gt;&lt;/meter&gt;
    </pre>
    ...might cause the user agent to display a gauge with a tooltip
    saying "Value: 23.2 out of 60." on one line and "seconds" on a
    second line.
  </div>

  <div class="impl">

  The <dfn attribute for="HTMLMeterElement"><code>value</code></dfn> IDL attribute, on getting, must
  return the <a for="meter">actual value</a>. On setting, the given value
  must be converted to the
  <a lt="best floating-point number">best representation of the number as a floating-point number</a>
  and then the <{meter/value}> content attribute must be set to that string.

  The <dfn attribute for="HTMLMeterElement"><code>min</code></dfn> IDL attribute, on getting, must return
  the <a for="meter">minimum value</a>. On setting, the given value must be
  converted to the
  <a lt="best floating-point number">best representation of the number as a floating-point number</a>
  and then the <{meter/min}> content attribute must be set to that string.

  The <dfn attribute for="HTMLMeterElement"><code>max</code></dfn> IDL attribute, on getting, must return
  the <a for="meter">maximum value</a>. On setting, the given value must be
  converted to the
  <a lt="best floating-point number">best representation of the number as a floating-point number</a>
  and then the <{meter/max}> content attribute must be set to that string.

  The <dfn attribute for="HTMLMeterElement"><code>low</code></dfn> IDL attribute, on getting, must return
  the <a for="meter">low boundary</a>. On setting, the given value must be
  converted to the
  <a lt="best floating-point number">best representation of the number as a floating-point number</a>
  and then the <{meter/low}> content attribute must be set to that string.

  The <dfn attribute for="HTMLMeterElement"><code>high</code></dfn> IDL attribute, on getting, must return
  the <a for="meter">high boundary</a>. On setting, the given value must be
  converted to the
  <a lt="best floating-point number">best representation of the number as a floating-point number</a>
  and then the <{meter/high}> content attribute must be set to that string.

  The <dfn attribute for="HTMLMeterElement"><code>optimum</code></dfn> IDL attribute, on getting, must
  return the <a for="meter">optimum value</a>. On setting, the given value
  must be converted to the
  <a lt="best floating-point number">best representation of the number as a floating-point number</a>
  and then the <{meter/optimum}> content attribute must be set to that string.

  The {{HTMLMeterElement/labels}} IDL attribute provides a list of the element's <{label}>s.

  </div>

  <div class="example">
    The following example shows how a gauge could fall back to localized or pretty-printed
    text.

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

  </div>

<h4 id="the-fieldset-element">The <dfn element><code>fieldset</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Flow content</a>.</dd>
    <dd><a>Sectioning root</a>.</dd>
    <dd><a lt="listed element">listed</a> and <a>reassociateable</a> <a>form-associated element</a>.</dd>
    <dd><a>Palpable content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>flow content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd>Optionally a <{legend}> element, followed by <a>flow content</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><{fieldset/disabled}> - Whether the form control is disabled</dd>
    <dd><{fieldset/form}> - Associates the control with a <{form}> element</dd>
    <dd><{fieldset/name}> - Name of form control to use for [[#forms-form-submission]] and in the {{HTMLFormElement/elements|form.elements}} API  </dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a value for="role"><code>group</code></a>
    (default - <a><em>do not set</em></a>)
    or <a value for="role"><code>presentation</code></a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLFieldSetElement">
        interface HTMLFieldSetElement : HTMLElement {
          attribute boolean disabled;
          readonly attribute HTMLFormElement? form;
          attribute DOMString name;

          readonly attribute DOMString type;

          [SameObject] readonly attribute HTMLCollection elements;

          readonly attribute boolean willValidate;
          [SameObject] readonly attribute ValidityState validity;
          readonly attribute DOMString validationMessage;
          boolean checkValidity();
          boolean reportValidity();
          void setCustomValidity(DOMString error);
        };
      </pre>
    </dd>
  </dl>

  The <{fieldset}> element <a>represents</a> a set of form controls optionally
  grouped under a common name.

  The name of the group is given by the first <{legend}> element that is a child of the
  <{fieldset}> element, if any. The remainder of the descendants form the group.

  The <dfn element-attr for="fieldset"><code>disabled</code></dfn> attribute, when specified,
  causes all the form control descendants of the <{fieldset}> element, excluding those that
  are descendants of the <{fieldset}> element's first <{legend}> element child, if
  any, to be disabled.

  A <{fieldset}> element is a <dfn>disabled fieldset</dfn> if it matches any of the following conditions:

  <ul>

    <li>Its <{fieldset/disabled}> attribute is specified</li>
    <li>It is a descendant of another <{fieldset}> element whose <{fieldset/disabled}> attribute is specified, and is <em>not</em> a
    descendant of that <{fieldset}> element's first <{legend}> element child, if
    any.</li>

  </ul>

  The <{fieldset/form}> attribute is used to explicitly associate the
  <{fieldset}> element with its <a>form owner</a>. The <{fieldset/name}> attribute represents the element's name.

  <dl class="domintro">

    <dt><var>fieldset</var> . <code>type</code></dt>

    <dd>

    Returns the string "fieldset".

    </dd>

    <dt><var>fieldset</var> . <code>elements</code></dt>

    <dd>

    Returns an <code>HTMLCollection</code> of the form controls in the element.

    </dd>

  </dl>

  <div class="impl">

  The <dfn attribute for="HTMLFieldSetElement"><code>disabled</code></dfn> IDL attribute must
  <a>reflect</a> the content attribute of the same name.

  The <dfn attribute for="HTMLFieldSetElement"><code>type</code></dfn> IDL attribute must return the string
  "<code>fieldset</code>".

  The <dfn attribute for="HTMLFieldSetElement"><code>elements</code></dfn> IDL attribute must return an
  <code>HTMLCollection</code> rooted at the <{fieldset}> element, whose filter
  matches <a>listed elements</a>.

  The {{HTMLFieldSetElement/willValidate}},
  {{HTMLFieldSetElement/validity}}, and
  {{HTMLFieldSetElement/validationMessage}} attributes, and the
  {{HTMLFieldSetElement/checkValidity()}},
  {{HTMLFieldSetElement/reportValidity()}}, and
  {{HTMLFieldSetElement/setCustomValidity()}} methods, are part of
  the <a>constraint validation API</a>. The
  {{HTMLFieldSetElement/form}} and
  {{HTMLFieldSetElement/name}} IDL attributes are part of the
  element's forms API.

  </div>

  <div class="example">
    This example shows a <{fieldset}> element being used to group a set of related
    controls:

    <pre highlight="html">
&lt;fieldset&gt;
  &lt;legend&gt;Display&lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;&lt;input type=radio name=c value=0 checked&gt; Black on White&lt;/label&gt;
  &lt;p&gt;&lt;label&gt;&lt;input type=radio name=c value=1&gt; White on Black&lt;/label&gt;
  &lt;p&gt;&lt;label&gt;&lt;input type=checkbox name=g&gt; Use grayscale&lt;/label&gt;
  &lt;p&gt;&lt;label&gt;Enhance contrast &lt;input type=range name=e list=contrast min=0 max=100 value=0 step=1&gt;&lt;/label&gt;
  &lt;datalist id=contrast&gt;
  &lt;option label=Normal value=0&gt;
  &lt;option label=Maximum value=100&gt;
  &lt;/datalist&gt;
&lt;/fieldset&gt;
    </pre>

  </div>

  <div class="example">
    The following snippet shows a fieldset with a checkbox in the legend that controls whether or
    not the fieldset is enabled. The contents of the fieldset consist of two required text fields and
    an optional year/month control.

    <pre highlight="html">
&lt;fieldset name="clubfields" disabled&gt;
  &lt;legend&gt; &lt;label&gt;
  &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked"&gt;
  Use Club Card
  &lt;/label&gt; &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;Name on card: &lt;input name=clubname required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="\[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Expiry date: &lt;input name=clubexp type=month&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
    </pre>

  </div>

  <div class="example">
    You can also nest <{fieldset}> elements. Here is an example expanding on the previous
    one that does so:

    <pre highlight="html">
&lt;fieldset name="clubfields" disabled&gt;
  &lt;legend&gt; &lt;label&gt;
  &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked"&gt;
  Use Club Card
  &lt;/label&gt; &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;Name on card: &lt;input name=clubname required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;fieldset name="numfields"&gt;
  &lt;legend&gt; &lt;label&gt;
    &lt;input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"&gt;
    My card has numbers on it
  &lt;/label&gt; &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="\[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;fieldset name="letfields" disabled&gt;
  &lt;legend&gt; &lt;label&gt;
    &lt;input type=radio name=clubtype onchange="form.letfields.disabled = !checked"&gt;
    My card has letters on it
  &lt;/label&gt; &lt;/legend&gt;
  &lt;p&gt;&lt;label&gt;Card code: &lt;input name=clublet required pattern="[A-Za-z]+"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
&lt;/fieldset&gt;
    </pre>

    In this example, if the outer "Use Club Card" checkbox is not checked, everything inside the
    outer <{fieldset}>, including the two radio buttons in the legends of the two nested
    <{fieldset}>s, will be disabled. However, if the checkbox is checked, then the radio
    buttons will both be enabled and will let you select which of the two inner
    <{fieldset}>s is to be enabled.

  </div>

<h4 id="the-legend-element">The <dfn element><code>legend</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd>None.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>As the first child of a <{fieldset}> element.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Phrasing content</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a href="#allowed-aria-roles-states-and-properties">Any role value</a>.</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes
    <a href="#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl" dfn-for="HTMLLegendElement">
        interface HTMLLegendElement : HTMLElement {
          readonly attribute HTMLFormElement? form;
        };
      </pre>
    </dd>
  </dl>

  The <{legend}> element <a>represents</a> a caption for the rest of the contents
  of the <{legend}> element's parent <{fieldset}> element<span class="impl">, if
  any</span>.

  <dl class="domintro">

    <dt><var>legend</var> . {{HTMLLegendElement/form}}</dt>

    <dd>

    Returns the element's <{form}> element, if any, or null otherwise.

    </dd>

  </dl>

  <div class="impl">

  The {{HTMLLegendElement/form}} IDL attribute's behavior depends on
  whether the <{legend}> element is in a <{fieldset}> element or not. If the
  <{legend}> has a <{fieldset}> element as its parent, then the {{HTMLLegendElement/form}} IDL attribute must return the same value as the {{HTMLFieldSetElement/form}} IDL attribute on that <{fieldset}> element. Otherwise,
  it must return null.

  </div>

<h4 id="form-control-infrastructure">Form control infrastructure</h4>

<h5 id="a-form-control-value">A form control value</h5>

  Most form controls have a <dfn for="forms" lt="value|values">value</dfn> and a <dfn for="forms">checkedness</dfn>. (The latter is only used by <{input}>
  elements.) These are used to describe how the user interacts with the control.

  A control's <a for="forms">value</a> is its internal state. As such, it
  might not match the user's current input.

  <p class="example">For instance, if a user enters the word "<kbd>three</kbd>" into a numeric field that expects digits, the user's input would
  be the string "three" but the control's <a for="forms">value</a> would remain
  unchanged. Or, if a user enters the email address "<kbd>&nbsp;&nbsp;awesome@example.com</kbd>"
  (with leading whitespace) into <a element-state for="input" lt="email">an email field</a>, the
  user's input would be the string "&nbsp;&nbsp;awesome@example.com" but the browser's UI for
  email fields might translate that into a <a for="forms">value</a> of "<code>awesome@example.com</code>" (without the leading whitespace).</p>

  To define the behavior of constraint validation in the face of the <{input}>
  element's <{input/multiple}> attribute, <{input}> elements
  can also have separately defined <a for="forms">value<em>s</em></a>.

  The <{select}> element does not have a <a for="forms">value</a>;
  the <a state for="option">selectedness</a> of its <{option}>
  elements is what is used instead.

<h5 id="mutability">Mutability</h5>

  A form control can be designated as <dfn><i>mutable</i></dfn>.

  <p class="note">
    This determines (by means of definitions and requirements in this specification
  that rely on whether an element is so designated) whether or not the user can modify the <a for="forms">value</a> or <a for="forms">checkedness</a> of a
  form control, or whether or not a control can be automatically prefilled.
  </p>

<h5 id="association-of-controls-and-forms">Association of controls and forms</h5>

  A <a>form-associated element</a> can have a relationship with a <{form}>
  element, which is called the element's <dfn>form owner</dfn>. If a <a>form-associated
  element</a> is not associated with a <{form}> element, its <a>form owner</a> is
  said to be null.

  A <a>form-associated element</a> is, by default, associated with its <span class="impl">nearest</span> ancestor <{form}> element<span class="impl"> (as described
  below)</span>, but, if it is <a>reassociateable</a>, may have a
  <dfn element-attr for="formelements,object,label,input,button,select,textarea,keygen,output,fieldset"><code>form</code></dfn> attribute specified to override this.

  <p class="note">
    This feature allows authors to work around the lack of support for nested
  <{form}> elements.
  </p>

  If a <a>reassociateable</a> <a>form-associated
  element</a> has a <{formelements/form}> attribute specified, then that
  attribute's value must be the <a>ID</a> of a <{form}> element
  in the element's owner {{Document}}.

  <div class="impl">

  <p class="note">
    The rules in this section are complicated by the fact that although conforming
  documents will never contain nested <{form}> elements, it is quite possible (e.g., using a
  script that performs DOM manipulation) to generate documents that have such nested elements. They
  are also complicated by rules in the HTML parser that, for historical reasons, can result in a
  <a>form-associated element</a> being associated with a <{form}> element that is not
  its ancestor.
  </p>

  When a <a>form-associated element</a> is created, its <a>form owner</a> must be
  initialized to null (no owner).

  When a <a>form-associated element</a> is to be <dfn>associated</dfn> with a form, its <a>form owner</a> must
  be set to that form.

  When a <a>form-associated element</a> or one of its ancestors is <a for="document">inserted into a <code>Document</code></a>, then the user agent must
  <a>reset the form owner</a> of that <a>form-associated element</a>. <span class="note">The <a>HTML parser</a> overrides this requirement when inserting form
  controls.</span>

  When an element changes its parent node resulting in a <a>form-associated element</a> and
  its <a>form owner</a> (if any) no longer being in the same <a>home subtree</a>, then
  the user agent must <a>reset the form owner</a> of that <a>form-associated
  element</a>.

  When a <a>reassociateable</a> <a>form-associated
  element</a>'s <{formelements/form}> attribute is set, changed, or removed,
  then the user agent must <a>reset the form owner</a> of that element.

  When a <a>reassociateable</a> <a>form-associated
  element</a> has a <{formelements/form}> attribute and the <a>ID</a> of any of the elements in the {{Document}} changes, then
  the user agent must <a>reset the form owner</a> of that <a>form-associated
  element</a>.

  When a <a>reassociateable</a> <a>form-associated
  element</a> has a <{formelements/form}> attribute and an element with an
  <a>ID</a> is <a for="document">inserted into</a> or <a for="document">removed from</a> the
  {{Document}}, then the user agent must <a>reset the form owner</a> of that
  <a>form-associated element</a>.

  When the user agent is to <dfn>reset the form owner</dfn> of a <a>form-associated
  element</a>, it must run the following steps:

  <ol>

    <li>If the element's <a>form owner</a> is not null, and either the element is not <a>reassociateable</a> or its <{formelements/form}> content attribute is not present, and the element's <a>form
    owner</a> is its nearest <{form}> element ancestor after the change to the ancestor
    chain, then do nothing, and abort these steps.</li>

    <li>Let the element's <a>form owner</a> be null.</li>

    <li>

    If the element is <a>reassociateable</a>, has a <{formelements/form}> content attribute, and is itself <a>in a <code>Document</code></a>, then run these substeps:

    <ol>

      <li>If the first element <a>in the <code>Document</code></a> to
      have an <a>ID</a> that is <a>case-sensitively</a> equal to the element's <{formelements/form}> content attribute's value is a <{form}> element,
      then associate the <a>form-associated
      element</a> with that <{form}> element.</li>

      <li>Abort the "reset the form owner" steps.</li>

    </ol>

    </li>

    <li>Otherwise, if the <a>form-associated element</a> in question has an ancestor
    <{form}> element, then associate the
    <a>form-associated element</a> with the nearest such ancestor <{form}>
    element.</li>

    <li>Otherwise, the element is left unassociated.</li>

  </ol>

  <div class="example">
    In the following non-conforming snippet:

    <pre class="bad">...
  &lt;form id="a"&gt;
  &lt;div id="b"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;script&gt;
  document.getElementById('b').innerHTML =
      '&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;form id="c"&gt;&lt;input id="d"&gt;&lt;/table&gt;' +
      '&lt;input id="e"&gt;';
  &lt;/script&gt;
...</pre>

    The <a>form owner</a> of "d" would be the inner nested form "c", while the <a>form
    owner</a> of "e" would be the outer form "a".

    This happens as follows: First, the "e" node gets associated with "c" in the <a>HTML
    parser</a>. Then, the <code>innerHTML</code> algorithm moves the nodes
    from the temporary document to the "b" element. At this point, the nodes see their ancestor chain
    change, and thus all the "magic" associations done by the parser are reset to normal ancestor
    associations.

    This example is a non-conforming document, though, as it is a violation of the content models
    to nest <{form}> elements.

  </div>

  </div>

  <dl class="domintro">
    <dt><var>element</var> . {{FormIDLAttribute/form}}</dt>
    <dd>
      Returns the element's <a>form owner</a>.

      Returns null if there isn't one.
    </dd>
  </dl>

  <div class="impl">
    <a>Reassociateable</a> <a>form-associated elements</a> have a
    <dfn attribute for="FormIDLAttribute,HTMLObjectElement,HTMLLabelElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLOptionElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLFieldSetElement,HTMLLegendElement"><code>form</code></dfn>
    IDL attribute, which, on getting, must return the element's <a>form owner</a>, or null if there
    isn't one.
  </div>

<h4 id="attributes-common-to-form-controls">Attributes common to form controls</h4>

<h5 id="naming-form-controls-the-name-attribute">Naming form controls: the <code>name</code> attribute</h5>

  The
  <dfn element-attr for="formelements,label,input,button,select,textarea,keygen,output,fieldset"><code>name</code></dfn>
  content attribute gives the name of the form control, as used in [[#forms-form-submission]] and
  in the <{form}> element's <code>elements</code> object. If the attribute is specified, its value
  must not be the empty string.

  Any non-empty value for <{formelements/name}> is allowed, but the name
  "<code>_charset_</code>" is special:

  : <dfn attr-value for="formelements/name"><code>_charset_</code></dfn>
  :: This value, if used as the name of a <a element-state for="input">Hidden</a>
     control with no <code>value</code> attribute, is automatically given a
     value during submission consisting of the submission character encoding.

  <div class="impl">

  The
  <dfn attribute for="HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLFieldSetElement"><code>name</code></dfn>
  IDL attribute must <a>reflect</a> the <{formelements/name}> content attribute.

  </div>

<h5 id="submitting-element-directionality-the-dirname-attribute">Submitting element directionality: the <code>dirname</code> attribute</h5>

  The <dfn element-attr for="input,textarea"><code>dirname</code></dfn> attribute on a form control
  element enables the submission of <a>the directionality</a> of the element, and gives the name of
  the field that contains this value during [[#forms-form-submission]]. If such an attribute is
  specified, its value must not be the empty string.

  <div class="example">
    In this example, a form contains a text field and a submission button:

    <pre highlight="html">
&lt;form action="addcomment.cgi" method=post&gt;
  &lt;p&gt;&lt;label&gt;Comment: &lt;input type=text name="comment" dirname="comment.dir" required&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button name="mode" type=submit value="add"&gt;Post Comment&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

    When the user submits the form, the user agent includes three fields, one called "comment",
    one called "comment.dir", and one called "mode"; so if the user types "Hello", the submission
    body might be something like:

    <pre>comment=Hello&amp;<strong>comment.dir=ltr</strong>&amp;mode=add</pre>

    If the user manually switches to a right-to-left writing direction and enters "<span dir="rtl" lang="ar">مرحبا</span>", the submission body might be
    something like:

    <pre>comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&amp;<strong>comment.dir=rtl</strong>&amp;mode=add</pre>

  </div>

<h5 id="limiting-user-input-length-the-maxlength-attribute">Limiting user input length: the <code>maxlength</code> attribute</h5>

  A <dfn>form control <code>maxlength</code> attribute</dfn>,
  controlled by a <var>dirty value flag</var>, declares a limit on the number of characters
  a user can input.

  If an element has its <a>form control <code>maxlength</code> attribute</a> specified, the attribute's value must be a <a>valid
  non-negative integer</a>. If the attribute is specified and applying the <a>rules for
  parsing non-negative integers</a> to its value results in a number, then that number is the
  element's <dfn>maximum allowed value length</dfn>. If the attribute is omitted or parsing its
  value results in an error, then there is no <a>maximum allowed value length</a>.

  <div class="impl">

  <strong>Constraint validation</strong>: If an element has a <a>maximum allowed value
  length</a>, its <var>dirty value flag</var> is true, its <a for="forms">value</a> was last changed by a user edit (as opposed to a change made
  by a script), and the <a>code-unit length</a> of the element's <a for="forms">value</a> is greater than the element's <a>maximum allowed value
  length</a>, then the element is <a>suffering from being too long</a>.

  User agents may prevent the user from causing the element's <a for="forms">value</a> to be set to a value whose <a>code-unit length</a> is
  greater than the element's <a>maximum allowed value length</a>.

  <p class="note">
    In the case of <{textarea}> elements, this is the <a for="forms">value</a>, not the <a>raw
  value</a>, so the <a>textarea wrapping transformation</a> is applied before the
  <a>maximum allowed value length</a> is checked.
  </p>

  </div>

<h5 id="setting-minimum-input-length-requirements-the-minlength-attribute">Setting minimum input length requirements: the <code>minlength</code> attribute</h5>

  A <dfn>form control <code>minlength</code> attribute</dfn>,
  controlled by a <var>dirty value flag</var>, declares a lower bound on the number of
  characters a user can input.

  <p class="note">
    The <code>minlength</code> attribute does not imply the
  <code>required</code> attribute. If the form control has no <code>required</code> attribute, then the value can still be omitted; the
  <code>minlength</code> attribute only kicks in once the user has entered
  a value at all. If the empty string is not allowed, then the <code>required</code>
  attribute also needs to be set.
  </p>

  If an element has its <a>form control <code>minlength</code> attribute</a> specified, the attribute's value must be a <a>valid
  non-negative integer</a>. If the attribute is specified and applying the <a>rules for
  parsing non-negative integers</a> to its value results in a number, then that number is the
  element's <dfn>minimum allowed value length</dfn>. If the attribute is omitted or parsing its
  value results in an error, then there is no <a>minimum allowed value length</a>.

  If an element has both a <a>maximum allowed value length</a> and a <a>minimum allowed
  value length</a>, the <a>minimum allowed value length</a> must be smaller than or equal
  to the <a>maximum allowed value length</a>.

  <div class="impl">

  <strong>Constraint validation</strong>: If an element has a <a>minimum allowed value
  length</a>, its <var>dirty value flag</var> is true, its <a for="forms">value</a> was last changed by a user edit (as opposed to a change made
  by a script), its <a for="forms">value</a> is not the empty string, and the
  <a>code-unit length</a> of the element's <a for="forms">value</a> is less
  than the element's <a>minimum allowed value length</a>, then the element is <a>suffering
  from being too short</a>.

  </div>

  <div class="example">
    In this example, there are four text fields. The first is required, and has to be at least 5
    characters long. The other three are optional, but if the user fills one in, the user has to
    enter at least 10 characters.

    <pre highlight="html">
&lt;form action="/events/menu.cgi" method="post"&gt;
  &lt;p&gt;&lt;label&gt;Name of Event: &lt;input required minlength=5 maxlength=50 name=event&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Describe what you would like for breakfast, if anything:
    &lt;textarea name="breakfast" minlength="10"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Describe what you would like for lunch, if anything:
    &lt;textarea name="lunch" minlength="10"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Describe what you would like for dinner, if anything:
    &lt;textarea name="dinner" minlength="10"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type=submit value="Submit Request"&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

  </div>

<h5 id="enabling-and-disabling-form-controls-the-disabled-attribute">Enabling and disabling form controls: the <code>disabled</code> attribute</h5>

  The <dfn element-attr for="disabledformelements,input,button,keygen,select,textarea"><code>disabled</code></dfn> content attribute is a
  <a>boolean attribute</a>.

  A form control is disabled if any of the following
  conditions are met:

  <ol>

    <li>The element is a <{button}>, <{input}>, <{select}>, or
    <{textarea}> element, and the <code>disabled</code> attribute
    is specified on this element (regardless of its value).</li>

    <li>The element is a descendant of a <{fieldset}> element whose <code>disabled</code> attribute is specified, and is <em>not</em> a
    descendant of that <{fieldset}> element's first <{legend}> element child, if
    any.</li>

  </ol>

  <div class="impl">

  A form control that is disabled must prevent any <a event><code>click</code></a> events that are <a>queued</a> on the
  <a>user interaction task source</a> from being dispatched on the element.

  <strong>Constraint validation</strong>: If an element is disabled, it is <a>barred from constraint
  validation</a>.

  The
  <dfn attribute for="HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement"><code>disabled</code></dfn>
  IDL attribute must
  <a>reflect</a> the <{disabledformelements/disabled}> content attribute.

  </div>

<h5 id="form-control-infrastructure-form-submission">Form submission</h5>

  <dfn for="forms">Attributes for form submission</dfn> can be specified both on <{form}> elements
  and on <a>submit buttons</a> (elements that represent buttons
  that submit forms, e.g., an <{input}> element whose <{input/type}> attribute is in the <a element-state for="input">submit button</a> state).

  The <a>attributes for form submission</a> that may be specified on <{form}> elements are
  <{form/action}>, <{form/enctype}>, <{form/method}>, <{form/novalidate}>, and <{form/target}>.

  The corresponding <a>attributes for form submission</a> that may be specified on <a>submit buttons</a> are <{submitbuttonelements/formaction}>, <{submitbuttonelements/formenctype}>, <{submitbuttonelements/formmethod}>, <{submitbuttonelements/formnovalidate}>, and <{submitbuttonelements/formtarget}>. When omitted, they default to the values given on
  the corresponding attributes on the <{form}> element.

  <hr />

  The <dfn element-attr for="form"><code>action</code></dfn> and
  <dfn element-attr for="submitbuttonelements,input,button"><code>formaction</code></dfn> content attributes, if specified, must
  have a value that is a <a>valid non-empty URL potentially surrounded by spaces</a>.

  The <dfn>action</dfn> of an element is the value of the element's
  <{submitbuttonelements/formaction}> attribute, if the element is a <a element-state for="input">submit button</a> and has such an attribute, or the value of its
  <a>form owner</a>'s <{form/action}> attribute, if <em>it</em> has
  one, or else the empty string.

  <hr />

  The <dfn element-attr for="form"><code>method</code></dfn> and
  <dfn element-attr for="submitbuttonelements,input,button"><code>formmethod</code></dfn> content attributes are <a>enumerated attributes</a> with the following keywords and
  states:

  <ul>

    <li>The keyword <dfn attr-value for="form/method"><code>get</code></dfn>, mapping to the
    state <dfn for="http">GET</dfn>, indicating the HTTP GET method.</li>

    <li>The keyword <dfn attr-value for="form/method"><code>post</code></dfn>, mapping to the
    state <dfn for="http">POST</dfn>, indicating the HTTP POST method.</li>

    <li>The keyword <dfn attr-value for="form/method"><code>dialog</code></dfn>, mapping to
    the state <dfn for="state">dialog</dfn>, indicating that submitting the
    <{form}> is intended to close the <code>dialog</code> box in which the form finds
    itself, if any, and otherwise not submit.</li>

  </ul>

  The <i>invalid value default</i> for these attributes is the <a for="http">GET</a> state. The <i>missing value default</i> for the <{form/method}> attribute is also the <a for="http">GET</a> state. (There is no <i>missing value default</i> for the
  <{submitbuttonelements/formmethod}> attribute.)

  The <dfn for="forms">method</dfn> of an element is one of those states. If the element is a
  <a element-state for="input">submit button</a> and has a <{submitbuttonelements/formmethod}>
  attribute, then the element's <a for="forms">method</a> is that attribute's state; otherwise, it
  is the <a>form owner</a>'s <{form/method}> attribute's state.

  <div class="example">
    Here the <{form/method}> attribute is used to explicitly specify
    the default value, "<a attr-value for="form/method">get</a>", so that the search
    query is submitted in the URL:

    <pre highlight="html">
&lt;form method="get" action="/search.cgi"&gt;
  &lt;p&gt;&lt;label&gt;Search terms: &lt;input type=search name=q&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type=submit&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

  </div>

  <div class="example">
    On the other hand, here the <{form/method}> attribute is used to
    specify the value "<a attr-value for="form/method">post</a>", so that the user's
    message is submitted in the HTTP request's body:

    <pre highlight="html">
&lt;form method="post" action="/post-message.cgi"&gt;
  &lt;p&gt;&lt;label&gt;Message: &lt;input type=text name=m&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type=submit value="Submit message"&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

  </div>

  <div class="example">
    In this example, a <{form}> is used with a <{dialog}>. The <{form/method}> attribute's "<a attr-value for="form/method">dialog</a>" keyword is used to have the dialog
    automatically close when the form is submitted.

    <pre lang="en-GB">&lt;dialog id="ship"&gt;
  &lt;form method=dialog&gt;
  &lt;p&gt;A ship has arrived in the harbour.&lt;/p&gt;
  &lt;button type=submit value="board"&gt;Board the ship&lt;/button&gt;
  &lt;button type=submit value="call"&gt;Call to the captain&lt;/button&gt;
  &lt;/form&gt;
&lt;/dialog&gt;
&lt;script&gt;
  var ship = document.getElementById('ship');
  ship.showModal();
  ship.onclose = function (event) {
    if (ship.returnValue == 'board') {
      // ...
    } else {
      // ...
    }
  };
&lt;/script&gt;</pre>

  </div>

  <hr />

  The <dfn element-attr for="form"><code>enctype</code></dfn> and
  <dfn element-attr for="submitbuttonelements,input,button"><code>formenctype</code></dfn> content attributes are <a>enumerated attributes</a> with the following keywords and
  states:

  <ul>
    <li>The "<dfn attr-value for="form/enctype"><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.</li>
    <li>The "<dfn attr-value for="form/enctype"><code>multipart/form-data</code></dfn>" keyword and corresponding state.</li>
    <li>The "<dfn attr-value for="form/enctype"><code>text/plain</code></dfn>" keyword and corresponding state.</li>
  </ul>

  The <i>invalid value default</i> for these attributes is the <code>application/x-www-form-urlencoded</code> state. The <i>missing value default</i> for the <{form/enctype}> attribute is also the <code>application/x-www-form-urlencoded</code> state. (There is no
  <i>missing value default</i> for the <{submitbuttonelements/formenctype}>
  attribute.)

  The <dfn>enctype</dfn> of an element is one of those three states.
  If the element is a <a element-state for="input">submit button</a> and has a <{submitbuttonelements/formenctype}> attribute, then the element's <a>enctype</a> is that attribute's state; otherwise, it is the
  <a>form owner</a>'s <{form/enctype}> attribute's state.

  <hr />

  The <dfn element-attr for="form"><code>target</code></dfn> and
  <dfn element-attr for="submitbuttonelements,input,button"><code>formtarget</code></dfn> content attributes, if specified, must
  have values that are <a>valid browsing context
  names or keywords</a>.

  The <{form/target}> of an element is the value of the element's
  <{submitbuttonelements/formtarget}> attribute, if the element is a <a element-state for="input">submit button</a> and has such an attribute; or the value of its
  <a>form owner</a>'s <{form/target}> attribute, if <em>it</em> has
  such an attribute; or, if the {{Document}} contains a <{base}> element with a
  <{form/target}> attribute, then the value of the <{form/target}> attribute of the first such <{base}> element; or,
  if there is no such element, the empty string.

  <hr />

  The <dfn element-attr for="form"><code>novalidate</code></dfn> and
  <dfn element-attr for="submitbuttonelements,input,button"><code>formnovalidate</code></dfn> content attributes are <a>boolean attributes</a>. If present, they indicate that the form is
  not to be validated during submission.

  The <dfn>no-validate state</dfn> of an element is true if the
  element is a <a element-state for="input">submit button</a> and the element's <{submitbuttonelements/formnovalidate}> attribute is present, or if the element's
  <a>form owner</a>'s <{form/novalidate}> attribute is present,
  and false otherwise.

  <div class="example">
    This attribute is useful to include "save" buttons on forms that have validation constraints,
    to allow users to save their progress even though they haven't fully entered the data in the
    form. The following example shows a simple form that has two required fields. There are three
    buttons: one to submit the form, which requires both fields to be filled in; one to save the form
    so that the user can come back and fill it in later; and one to cancel the form altogether.

    <pre highlight="html">
&lt;form action="editor.cgi" method="post"&gt;
  &lt;p&gt;&lt;label&gt;Name: &lt;input required name=fn&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label&gt;Essay: &lt;textarea required name=essay&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type=submit name=submit value="Submit essay"&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type=submit formnovalidate name=save value="Save essay"&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type=submit formnovalidate name=cancel value="Cancel"&gt;&lt;/p&gt;
&lt;/form&gt;
    </pre>

  </div>

  <div class="impl">

  <hr />

  The <dfn attribute for="HTMLFormElement"><code>action</code></dfn> IDL attribute must <a>reflect</a> the
  content attribute of the same name, except that on getting, when the content attribute is missing
  or its value is the empty string, <a>the document's address</a> must be returned instead.

  The <dfn attribute for="HTMLFormElement"><code>target</code></dfn> IDL attribute must <a>reflect</a> the
  content attribute of the same name.

  The <dfn attribute for="HTMLFormElement"><code>method</code></dfn> and
  <dfn attribute for="HTMLFormElement"><code>enctype</code></dfn> IDL attributes must <a>reflect</a> the
  respective content attributes of the same name, <a>limited to only known values</a>.

  The <dfn attribute for="HTMLFormElement"><code>encoding</code></dfn> IDL attribute must <a>reflect</a> the
  <{form/enctype}> content attribute, <a>limited to only known values</a>.

  The <dfn attribute for="HTMLFormElement"><code>noValidate</code></dfn> IDL attribute must <a>reflect</a> the
  <{form/novalidate}> content attribute.

  The <dfn attribute for="HTMLInputElement,HTMLButtonElement"><code>formAction</code></dfn> IDL attribute must <a>reflect</a> the
  <{input/formaction}> content attribute, except that on getting, when the content attribute is
  missing or its value is the empty string, <a>the document's address</a> must be returned instead.

  The <dfn attribute for="HTMLInputElement,HTMLButtonElement"><code>formEnctype</code></dfn> IDL attribute must <a>reflect</a> the
  <{input/formenctype}> content attribute, <a>limited to only known values</a>.

  The <dfn attribute for="HTMLInputElement,HTMLButtonElement"><code>formMethod</code></dfn> IDL attribute must <a>reflect</a> the
  <{input/formmethod}> content attribute, <a>limited to only known values</a>.

  The <dfn attribute for="HTMLInputElement,HTMLButtonElement"><code>formNoValidate</code></dfn> IDL attribute must <a>reflect</a>
  the <{input/formnovalidate}> content attribute.

  The <dfn attribute for="HTMLInputElement,HTMLButtonElement"><code>formTarget</code></dfn> IDL attribute must <a>reflect</a> the
  <{input/formtarget}> content attribute.

  </div>

<h6 id="autofocusing-a-form-control-the-autofocus-attribute">Autofocusing a form control: the <code>autofocus</code> attribute</h6>

  The <dfn element-attr for="formelements,input,button,keygen,select,textarea"><code>autofocus</code></dfn> content attribute allows the
  author to indicate that a control is to be focused as soon as the page is loaded or as soon as the
  <code>dialog</code> within which it finds itself is shown, allowing the user to just start typing
  without having to manually focus the main control.

  The <{formelements/autofocus}> attribute is a <a>boolean attribute</a>.

  An element's <dfn>nearest ancestor autofocus scoping root element</dfn> is the element itself
  if the element is a <{dialog}> element, or else is the element's nearest ancestor
  <{dialog}> element, if any, or else is the element's <a>root element</a>.

  There must not be two elements with the same <a>nearest ancestor autofocus scoping root
  element</a> that both have the <{formelements/autofocus}> attribute
  specified.

  <div class="impl">

  When an element with the <{formelements/autofocus}> attribute specified
  is <a for="document">inserted into a document</a>, user agents
  should run the following steps:

  <ol>

    <li>Let <var>target</var> be the element's <a>node document</a>.</li>

    <li>If <var>target</var> has no <a>browsing context</a>, abort these
    steps.</li>

    <li>If <var>target</var>'s <a>browsing context</a> has no <a>top-level
    browsing context</a> (e.g., it is a <a>nested browsing context</a> with no <a>parent
    browsing context</a>), abort these steps.</li>

    <li>If <var>target</var>'s <a>active sandboxing flag set</a> has the
    <a>sandboxed automatic features browsing context flag</a>, abort these steps.</li>

    <li>If <var>target</var>'s <a for="concept">origin</a> is not the same as the
    <a for="concept">origin</a> of the <a>node document</a> of the currently
    focused element in <var>target</var>'s <a>top-level browsing context</a>, abort
    these steps.</li>

    <li>If <var>target</var>'s <a for="concept">origin</a> is not the same as the
    <a for="concept">origin</a> of the <a>active document</a> of <var>target</var>'s
    <a>top-level browsing context</a>, abort these steps.</li>

    <li>If the user agent has already reached the last step of this list of steps in response to
    an element being <a>inserted</a> into a
    <code>Document</code> whose <a>top-level browsing context</a>'s <a>active
    document</a> is the same as <var>target</var>'s <a>top-level browsing
    context</a>'s <a>active document</a>, abort these steps.</li>

    <li>If the user has indicated (for example, by starting to type in a form control) that he
    does not wish focus to be changed, then optionally abort these steps.</li>

    <li><a>Queue a task</a> that runs the <a>focusing steps</a> for the element. User
    agents may also change the scrolling position of the document, or perform some other action that
    brings the element to the user's attention. The <a>task source</a> for this task is the
    <a>user interaction task source</a>.</li>

  </ol>

  <p class="note">
    This handles the automatic focusing during document load. The <code>show()</code> and <code>showModal()</code>
  methods of <{dialog}> elements also processes the <{formelements/autofocus}> attribute.
  </p>

  <p class="note">
    Focusing the control does not imply that the user agent must focus the browser
  window if it has lost focus.
  </p>

  The <dfn attribute for="HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement"><code>autofocus</code></dfn> IDL attribute must
  <a>reflect</a> the content attribute of the same name.

  </div>

  <div class="example">
    In the following snippet, the text control would be focused when
    the document was loaded.
    <pre highlight="html">
&lt;input maxlength="256" name="q" value="" autofocus&gt;
&lt;input type="submit" value="Search"&gt;
    </pre>
  </div>

<h5 id="input-modalities-the-inputmode-attribute">Input modalities: the <code>inputmode</code> attribute</h5>

  The <dfn element-attr for="input"><code>inputmode</code></dfn> content attribute is an
  <a>enumerated attribute</a> that specifies what kind of input mechanism would be most
  helpful for users entering content into the form control.

  <div class="impl">

  User agents must recognize all the keywords and corresponding states given below, but need not
  support all of the corresponding states. If a keyword's state is not supported, the user agent
  must act as if the keyword instead mapped to the given state's fallback state, as defined below.
  This fallback behavior is transitive.

  <p class="note">
    For example, if a user agent with a QWERTY keyboard layout does not support text
  prediction and automatic capitalization, then it could treat the <code>latin-prose</code> keyword in the same way as the
  <code>verbatim</code> keyword, following the chain
  <a state for="inputmode">Latin Prose</a> → <a state for="inputmode">Latin Text</a> → <a state for="inputmode">Latin Verbatim</a>.
  </p>

  </div>

  The possible keywords and states for the attributes are listed in the following table. The
  keywords are listed in the first column. Each maps to the state given in the cell in the second
  column of that keyword's row, and that state has the fallback state given in the cell in the third
  column of that row.

  <table class="three-column-nowrap">

    <thead>
    <tr>
      <th> Keyword
      </th><th> State
      </th><th> Fallback state
      </th><th> Description

    </th></tr></thead><tbody>

    <tr>
      <td> <dfn value for="form/inputmode"><code>verbatim</code></dfn>
      </td><td> <dfn state for="inputmode">Latin Verbatim</dfn>
      </td><td> <a state for="inputmode">Default</a>
      </td><td> Alphanumeric Latin-script input of non-prose content, e.g., usernames, passwords, product codes.

    </td></tr><tr>
      <td> <dfn value for="form/inputmode"><code>latin</code></dfn>
      </td><td> <dfn state for="inputmode">Latin Text</dfn>
      </td><td> <a state for="inputmode">Latin Verbatim</a>
      </td><td> Latin-script input in the user's preferred language(s), with some typing aids enabled
      (e.g., text prediction). Intended for human-to-computer communications, e.g., free-form text
      search fields.

    </td></tr><tr>
      <td> <dfn value for="form/inputmode"><code>latin-name</code></dfn>
      </td><td> <dfn state for="inputmode">Latin Name</dfn>
      </td><td> <a state for="inputmode">Latin Text</a>
      </td><td> Latin-script input in the user's preferred language(s), with typing aids intended for
      entering human names enabled (e.g., text prediction from the user's contact list and automatic
      capitalization at every word). Intended for situations such as customer name fields.

    </td></tr><tr>
      <td> <dfn value for="form/inputmode"><code>latin-prose</code></dfn>
      </td><td> <dfn state for="inputmode">Latin Prose</dfn>
      </td><td> <a state for="inputmode">Latin Text</a>
      </td><td> Latin-script input in the user's preferred language(s), with aggressive typing aids
      intended for human-to-human communications enabled (e.g., text prediction and automatic
      capitalization at the start of sentences). Intended for situations such as e-mails and instant
      messaging.

    </td></tr><tr>
      <td> <dfn value for="form/inputmode"><code>full-width-latin</code></dfn>
      </td><td> <dfn state for="inputmode">Full-width Latin</dfn>
      </td><td> <a state for="inputmode">Latin Prose</a>
      </td><td> Latin-script input in the user's secondary language(s), using full-width characters, with
      aggressive typing aids intended for human-to-human communications enabled (e.g., text prediction
      and automatic capitalization at the start of sentences). Intended for latin text embedded
      inside CJK text.

    </td></tr><tr>
      <td> <dfn value for="form/inputmode"><code>kana</code></dfn>
      </td><td> <dfn state for="inputmode">Kana</dfn>
      </td><td> <a state for="inputmode">Default</a>
      </td><td> Kana or romaji input, typically hiragana input, using full-width characters, with support
      for converting to kanji. Intended for Japanese text input.

    </td></tr><tr>
      <td> <dfn value for="form/inputmode"><code>kana-name</code></dfn>
      </td><td> <dfn state for="inputmode">Kana Name</dfn>
      </td><td> <a state for="inputmode">Kana</a>
      </td><td> Kana or romaji input, typically hiragana input, using full-width characters, with support
      for converting to kanji, and with typing aids intended for entering human names enabled (e.g.,
      text prediction from the user's contact list). Intended for situations such as customer name
      fields.

    </td></tr><tr>
      <td> <dfn value for="form/inputmode"><code>katakana</code></dfn>
      </td><td> <dfn state for="inputmode">Katakana</dfn>
      </td><td> <a state for="inputmode">Kana</a>
      </td><td> Katakana input, using full-width characters, with support for converting to kanji.
      Intended for Japanese text input.

    </td></tr><tr>
      <td> <dfn value for="form/inputmode"><code>numeric</code></dfn>
      </td><td> <dfn state for="inputmode">Numeric</dfn>
      </td><td> <a state for="inputmode">Default</a>
      </td><td> Numeric input, including keys for the digits 0 to 9, the user's preferred thousands
      separator character, and the character for indicating negative numbers. Intended for numeric
      codes, e.g., credit card numbers. (For numbers, prefer "<code>&lt;input type=number&gt;</code>".)

    </td></tr><tr class="rare">
      <td> <dfn value for="form/inputmode"><code>tel</code></dfn>
      </td><td> <dfn state for="inputmode">Telephone</dfn>
      </td><td> <a state for="inputmode">Numeric</a>
      </td><td> Telephone number input, including keys for the digits 0 to 9, the "#" character, and the
      "*" character. In some locales, this can also include alphabetic mnemonic labels (e.g., in the
      US, the key labeled "2" is historically also labeled with the letters A, B, and C). <a>Rarely necessary</a>; use "<code>&lt;input
      type=tel&gt;</code>" instead.

    </td></tr><tr class="rare">
      <td> <dfn value for="form/inputmode"><code>email</code></dfn>
      </td><td> <dfn state for="inputmode">E-mail</dfn>
      </td><td> <a state for="inputmode">Default</a>
      </td><td> Text input in the user's locale, with keys for aiding in the input of e-mail addresses,
      such as that for the "@" character and the "." character. <a>Rarely
      necessary</a>; use "<code>&lt;input type=email&gt;</code>" instead.

    </td></tr><tr class="rare">
      <td> <dfn value for="form/inputmode"><code>url</code></dfn>
      </td><td> <dfn state for="inputmode">URL</dfn>
      </td><td> <a state for="inputmode">Default</a>
      </td><td> Text input in the user's locale, with keys for aiding in the input of Web addresses, such
      as that for the "/" and "." characters and for quick input of strings commonly found in domain
      names such as "www." or ".co.uk". <a>Rarely necessary</a>; use "<code>&lt;input type=url&gt;</code>" instead.

  </td></tr></tbody></table>

  The last three keywords listed above are only provided for completeness,
  and are <dfn>rarely necessary</dfn>, as dedicated input controls exist for their usual use cases (as
  described in the table above).

  User agents <span class="impl">must</span> all support the <dfn state for="inputmode">Default</dfn> input mode state, which corresponds to the
  user agent's default input modality. <span class="impl">This specification does not define how the
  user agent's default modality is to operate.</span> The <i>missing value default</i> is the <a state for="inputmode">Default</a> input mode state.

  <div class="impl">

  User agents should use the input modality corresponding to the state of the <code>inputmode</code> attribute when exposing a user interface for editing
  the value of a form control to which the attribute <a>applies</a>. An input modality corresponding to a state is one
  designed to fit the description of the state in the table above. This value can change
  dynamically; user agents should update their interface as the attribute changes state, unless that
  would go against the user's wishes.

  </div>

<h5 id="sec-autofill"><dfn lt="autofill|autofill mechanism">Autofill</dfn></h5>

<h6 id="autofilling-form-controls-the-autocomplete-attribute">Autofilling form controls: the <code>autocomplete</code> attribute</h6>

  User agents sometimes have features for helping users fill forms in, for example prefilling the
  user's address based on earlier user input. The
  <dfn element-attr for="autocompleteelements,form,input,select,textarea"><code>autocomplete</code></dfn>
  content attribute can be used to hint
  to the user agent how to, or indeed whether to, provide such a feature.

  There are two ways this attribute is used. When wearing the <dfn>autofill expectation
  mantle</dfn>, the <{autocompleteelements/autocomplete}> attribute describes what
  input is expected from users. When wearing the <dfn>autofill anchor mantle</dfn>, the <{autocompleteelements/autocomplete}> attribute describes the meaning of the given
  value.

  On an <{input}> element whose <{input/type}> attribute is
  in the <a>Hidden</a> state, the <{input/autocomplete}> attribute wears the <a>autofill anchor
  mantle</a>. In all other cases, it wears the <a>autofill expectation mantle</a>.

  When wearing the <a>autofill expectation mantle</a>, the <{autocompleteelements/autocomplete}> attribute, if specified, must have a value that
  is an ordered <a>set of space-separated tokens</a> consisting of either a single token that
  is an <a>ASCII case-insensitive</a> match for the string "<code>off</code>", or a single token that is an <a>ASCII
  case-insensitive</a> match for the string "<code>on</code>",
  or <a>autofill detail tokens</a>.

  When wearing the <a>autofill anchor
  mantle</a>, the <{autocompleteelements/autocomplete}> attribute, if specified, must have a value that is an ordered <a>set of
  space-separated tokens</a> consisting of just <a>autofill detail tokens</a> (i.e., the
  "<code>on</code>" and "<code>off</code>" keywords are not allowed).

  <dfn>Autofill detail tokens</dfn> are the following, in the order given below:

  <ol>

    <li>

    Optionally, a token whose first eight characters are an <a>ASCII case-insensitive</a>
    match for the string "<code>section-</code>",
    meaning that the field belongs to the named group.

    <div class="example">
      For example, if there are two shipping addresses in the form, then they could be marked up
      as:

      <pre highlight="html">
&lt;fieldset&gt;
  &lt;legend&gt;Ship the blue gift to...&lt;/legend&gt;
  &lt;p&gt; &lt;label&gt; Address:     &lt;input name=ba autocomplete="section-blue shipping street-address"&gt; &lt;/label&gt;
  &lt;p&gt; &lt;label&gt; City:        &lt;input name=bc autocomplete="section-blue shipping address-level2"&gt; &lt;/label&gt;
  &lt;p&gt; &lt;label&gt; Postal Code: &lt;input name=bp autocomplete="section-blue shipping postal-code"&gt; &lt;/label&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
  &lt;legend&gt;Ship the red gift to...&lt;/legend&gt;
  &lt;p&gt; &lt;label&gt; Address:     &lt;input name=ra autocomplete="section-red shipping street-address"&gt; &lt;/label&gt;
  &lt;p&gt; &lt;label&gt; City:        &lt;input name=rc autocomplete="section-red shipping address-level2"&gt; &lt;/label&gt;
  &lt;p&gt; &lt;label&gt; Postal Code: &lt;input name=rp autocomplete="section-red shipping postal-code"&gt; &lt;/label&gt;
&lt;/fieldset&gt;
    </pre>

    </div>

    </li>

    <li>

    Optionally, a token that is an <a>ASCII case-insensitive</a> match for one of the
    following strings:

    <ul class="brief">

      <li>"<dfn><code>shipping</code></dfn>", meaning the field
      is part of the shipping address or contact information

      </li><li>"<dfn><code>billing</code></dfn>", meaning the field
      is part of the billing address or contact information

    </li></ul>

    </li>

    <li>

    Either of the following two options:

    <ul>

      <li>

      A token that is an <a>ASCII case-insensitive</a> match for one of the following
      <a>autofill field</a> names, excluding those that are <a>inappropriate for the
      control</a>:

      <ul class="brief">
        <li>"<code>name</code>"
        </li><li>"<code>honorific-prefix</code>"
        </li><li>"<code>given-name</code>"
        </li><li>"<code>additional-name</code>"
        </li><li>"<code>family-name</code>"
        </li><li>"<code>honorific-suffix</code>"
        </li><li>"<code>nickname</code>"
        </li><li>"<code>username</code>"
        </li><li>"<code>new-password</code>"
        </li><li>"<code>current-password</code>"
        </li><li>"<code>organization-title</code>"
        </li><li>"<code>organization</code>"
        </li><li>"<code>street-address</code>"
        </li><li>"<code>address-line1</code>"
        </li><li>"<code>address-line2</code>"
        </li><li>"<code>address-line3</code>"
        </li><li>"<code>address-level4</code>"
        </li><li>"<code>address-level3</code>"
        </li><li>"<code>address-level2</code>"
        </li><li>"<code>address-level1</code>"
        </li><li>"<code>country</code>"
        </li><li>"<code>country-name</code>"
        </li><li>"<code>postal-code</code>"
        </li><li>"<code>cc-name</code>"
        </li><li>"<code>cc-given-name</code>"
        </li><li>"<code>cc-additional-name</code>"
        </li><li>"<code>cc-family-name</code>"
        </li><li>"<code>cc-number</code>"
        </li><li>"<code>cc-exp</code>"
        </li><li>"<code>cc-exp-month</code>"
        </li><li>"<code>cc-exp-year</code>"
        </li><li>"<code>cc-csc</code>"
        </li><li>"<code>cc-type</code>"
        </li><li>"<code>transaction-currency</code>"
        </li><li>"<code>transaction-amount</code>"
        </li><li>"<code>language</code>"
        </li><li>"<code>bday</code>"
        </li><li>"<code>bday-day</code>"
        </li><li>"<code>bday-month</code>"
        </li><li>"<code>bday-year</code>"
        </li><li>"<code>sex</code>"
        </li><li>"<code>url</code>"
        </li><li>"<code>photo</code>"
      </li></ul>

      (See the table below for descriptions of these values.)

      </li>

      <li>

      The following, in the given order:

      <ol>

        <li>

        Optionally, a token that is an <a>ASCII case-insensitive</a> match for one of the
        following strings:

        <ul class="brief">

          <li>"<code>home</code>", meaning the field is
          for contacting someone at their residence

          </li><li>"<code>work</code>", meaning the field is
          for contacting someone at their workplace

          </li><li>"<code>mobile</code>", meaning the field is for contacting someone regardless of location

          </li><li>"<code>fax</code>", meaning the field
          describes a fax machine's contact details

          </li><li>"<code>pager</code>", meaning the field
          describes a pager's or beeper's contact details

        </li></ul>

        </li>

        <li>

        A token that is an <a>ASCII case-insensitive</a> match for one of the following
        <a>autofill field</a> names, excluding those that are <a>inappropriate for the
        control</a>:

        <ul class="brief">
          <li>"<code>tel</code>"
          </li><li>"<code>tel-country-code</code>"
          </li><li>"<code>tel-national</code>"
          </li><li>"<code>tel-area-code</code>"
          </li><li>"<code>tel-local</code>"
          </li><li>"<code>tel-local-prefix</code>"
          </li><li>"<code>tel-local-suffix</code>"
          </li><li>"<code>tel-extension</code>"
          </li><li>"<code>email</code>"
          </li><li>"<code>impp</code>"
        </li></ul>

        (See the table below for descriptions of these values.)

        </li>

      </ol>

      </li>

    </ul>

    </li>

  </ol>

  As noted earlier, the meaning of the attribute and its keywords depends on the mantle that the
  attribute is wearing.

  <dl class="switch">

    <dt>When wearing the <a>autofill expectation mantle</a>...

    </dt><dd>

    The "<dfn attr-value for="forms/autocomplete"><code>off</code></dfn>" keyword indicates either
    that the control's input data is particularly sensitive (for example the activation code for a
    nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a
    bank login) and the user will therefore have to explicitly enter the data each time, instead of
    being able to rely on the user agent to prefill the value for him; or that the document provides its own
    autocomplete mechanism and does not want the user agent to provide autocompletion values.

    The "<dfn attr-value for="forms/autocomplete"><code>on</code></dfn>" keyword indicates that the
    user agent is allowed to provide the user with autocompletion values, but does not provide any
    further information about what kind of data the user might be expected to enter. User agents would
    have to use heuristics to decide what autocompletion values to suggest.

    The <a>autofill field</a> listed above indicate that the user agent is allowed to
    provide the user with autocompletion values, and specifies what kind of value is expected. The
    meaning of each such keyword is described in the table below.

    If the <{autocompleteelements/autocomplete}> attribute is omitted, the default
    value corresponding to the state of the element's <a>form owner</a>'s <{form/autocomplete}>
    attribute is used instead (either "<a attr-value for="forms/autocomplete"><code>on</code></a>"
    or "<a attr-value for="forms/autocomplete"><code>off</code></a>"). If there is no <a>form owner</a>, then the
    value "<code>on</code>" is used.

    </dd>

    <dt>When wearing the <a>autofill anchor mantle</a>...

    </dt><dd>

    The <a>autofill field</a> listed above indicate that the value of the particular kind
    of value specified is that value provided for this element. The meaning of each such keyword is
    described in the table below.

    <div class="example">
      In this example the page has explicitly specified the currency and amount of the
      transaction. The form requests a credit card and other billing details. The user agent could
      use this information to suggest a credit card that it knows has sufficient balance and that
      supports the relevant currency.

      <pre highlight="html">
&lt;form method=post action="step2.cgi"&gt;
  &lt;input type=hidden autocomplete=transaction-currency value="CHF"&gt;
  &lt;input type=hidden autocomplete=transaction-amount value="15.00"&gt;
  &lt;p&gt;&lt;label&gt;Credit card number: &lt;input type=text inputmode=numeric autocomplete=cc-number&gt;&lt;/label&gt;
  &lt;p&gt;&lt;label&gt;Expiry Date: &lt;input type=month autocomplete=cc-exp&gt;&lt;/label&gt;
  &lt;p&gt;&lt;input type=submit value="Continue..."&gt;
&lt;/form&gt;
    </pre>

    </div>

    </dd>

  </dl>

  The <dfn>autofill field</dfn> keywords relate to each other as described in the table below. Each field name
  listed on a row of this table corresponds to the meaning given in the cell for that row in the
  column labeled "Meaning". Some fields correspond to subparts of other fields; for example, a
  credit card expiry date can be expressed as one field giving both the month and year of expiry
  ("<code>cc-exp</code>"), or as two fields, one giving the
  month ("<code>cc-exp-month</code>") and one the year
  ("<code>cc-exp-year</code>"). In such cases, the names of
  the broader fields cover multiple rows, in which the narrower fields are defined.

  <p class="note">
    Generally, authors are encouraged to use the broader fields rather than the
  narrower fields, as the narrower fields tend to expose Western biases. For example, while it is
  common in some Western cultures to have a given name and a family name, in that order (and thus
  often referred to as a <i>first name</i> and a <i>surname</i>), many cultures put the family name
  first and the given name second, and many others simply have one name (a <i>mononym</i>). Having a
  single field is therefore more flexible.
  </p>

  Some fields are only appropriate for certain form controls. An <a>autofill field</a> name
  is <dfn lt="inappropriate for the control|inappropriate for a control">inappropriate for a control</dfn> if the control
  does not belong to the group listed for that <a>autofill field</a> in the fifth column of
  the first row describing that <a>autofill field</a> in the table below. What controls fall
  into each group is described below the table.

  <table>
    <thead>
    <tr>
      <th colspan="4"> Field name
      </th><th> Meaning
      </th><th> Canonical Format
      </th><th> Canonical Format Example
      </th><th> Control group
    </th></tr></thead><tbody>
    <tr>
      <td colspan="4">"<code>name</code>"
      </td><td>Full name
      </td><td>Free-form text, no newlines
      </td><td>Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td rowspan="5" class="non-rectangular-cell-indentation">
      </td><td colspan="3">"<code>honorific-prefix</code>"
      </td><td>Prefix or title (e.g., "Mr.", "Ms.", "Dr.", "<span lang="fr">M<sup>lle</sup></span>")
      </td><td>Free-form text, no newlines
      </td><td>Sir
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>given-name</code>"
      </td><td>Given name (in some Western cultures, also known as the <i>first name</i>)
      </td><td>Free-form text, no newlines
      </td><td>Timothy
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>additional-name</code>"
      </td><td>Additional names (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
      </td><td>Free-form text, no newlines
      </td><td>John
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>family-name</code>"
      </td><td>Family name (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
      </td><td>Free-form text, no newlines
      </td><td>Berners-Lee
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>honorific-suffix</code>"
      </td><td>Suffix (e.g., "Jr.", "B.Sc.", "MBASW", "II")
      </td><td>Free-form text, no newlines
      </td><td>OM, KBE, FRS, FREng, FRSA
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>nickname</code>"
      </td><td>Nickname, screen name, handle: a typically short name used instead of the full name
      </td><td>Free-form text, no newlines
      </td><td>Tim
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>organization-title</code>"
      </td><td>Job title (e.g., "Software Engineer", "Senior Vice President", "Deputy Managing Director")
      </td><td>Free-form text, no newlines
      </td><td>Professor
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>username</code>"
      </td><td>A username
      </td><td>Free-form text, no newlines
      </td><td>timbl
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>new-password</code>"
      </td><td>A new password (e.g., when creating an account or changing a password)
      </td><td>Free-form text, no newlines
      </td><td>GUMFXbadyrS3
      </td><td><a element-state for="input">Password</a>
    </td></tr><tr>
      <td colspan="4">"<code>current-password</code>"
      </td><td>The current password for the account identified by the <code>username</code> field (e.g., when logging in)
      </td><td>Free-form text, no newlines
      </td><td>qwerty
      </td><td><a element-state for="input">Password</a>
    </td></tr></tbody><tbody>
    <tr>
      <td colspan="4">"<code>organization</code>"
      </td><td>Company name corresponding to the person, address, or contact information in the other fields associated with this field
      </td><td>Free-form text, no newlines
      </td><td>World Wide Web Consortium
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>street-address</code>"
      </td><td>Street address (multiple lines, newlines preserved)
      </td><td>Free-form text
      </td><td>32 Vassar Street<br>MIT Room 32-G524
      </td><td><a element lt="textarea">Multiline</a>
    </td></tr><tr>
      <td rowspan="3" class="non-rectangular-cell-indentation">
      </td><td colspan="3">"<code>address-line1</code>"
      </td><td rowspan="3">Street address (one line per field)
      </td><td>Free-form text, no newlines
      </td><td>32 Vassar Street
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>address-line2</code>"
      </td><td>Free-form text, no newlines
      </td><td>MIT Room 32-G524
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>address-line3</code>"
      </td><td>Free-form text, no newlines
      </td><td>
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>address-level4</code>"
      </td><td>The most fine-grained <a>administrative level</a>, in
      addresses with four administrative levels
      </td><td>Free-form text, no newlines
      </td><td>
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>address-level3</code>"
      </td><td>The <a>third administrative level</a>, in addresses with
      three or more administrative levels
      </td><td>Free-form text, no newlines
      </td><td>
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>address-level2</code>"
      </td><td>The <a>second administrative level</a>, in addresses with
      two or more administrative levels; in the countries with two administrative levels, this would
      typically be the city, town, village, or other locality within which the relevant street
      address is found
      </td><td>Free-form text, no newlines
      </td><td>Cambridge
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>address-level1</code>"
      </td><td>The broadest <a>administrative level</a> in the address,
      i.e., the province within which the locality is found; for example, in the US, this would be the
      state; in Switzerland it would be the canton; in the UK, the post town
      </td><td>Free-form text, no newlines
      </td><td>MA
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>country</code>"
      </td><td>Country code
      </td><td>Valid <a>ISO 3166-1-alpha-2 country code</a> [[!ISO3166]]
      </td><td>US
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>country-name</code>"
      </td><td>Country name
      </td><td>Free-form text, no newlines; <a>derived from <code>country</code> in some cases</a>
      </td><td>US
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>postal-code</code>"
      </td><td>Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the <i lang="fr">dissement</i>, if relevant, to the <code>address-level2</code> field)
      </td><td>Free-form text, no newlines
      </td><td>02139
      </td><td><a element-state for="input">Text</a>
    </td></tr></tbody><tbody>
    <tr>
      <td colspan="4">"<code>cc-name</code>"
      </td><td>Full name as given on the payment instrument
      </td><td>Free-form text, no newlines
      </td><td>Tim Berners-Lee
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td rowspan="3" class="non-rectangular-cell-indentation">
      </td><td colspan="3">"<code>cc-given-name</code>"
      </td><td>Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)
      </td><td>Free-form text, no newlines
      </td><td>Tim
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>cc-additional-name</code>"
      </td><td>Additional names given on the payment instrument (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
      </td><td>Free-form text, no newlines
      </td><td>
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>cc-family-name</code>"
      </td><td>Family name given on the payment instrument (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
      </td><td>Free-form text, no newlines
      </td><td>Berners-Lee
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>cc-number</code>"
      </td><td>Code identifying the payment instrument (e.g., the credit card number)
      </td><td><a>ASCII digits</a>
      </td><td>4114360123456785
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>cc-exp</code>"
      </td><td>Expiration date of the payment instrument
      </td><td><a>Valid month string</a>
      </td><td>2014-12
      </td><td><a element-state for="input">Month</a>
    </td></tr><tr>
      <td rowspan="2" class="non-rectangular-cell-indentation">
      </td><td colspan="3">"<code>cc-exp-month</code>"
      </td><td>Month component of the expiration date of the payment instrument
      </td><td><a>valid integer</a> in the range 1..12
      </td><td>12
      </td><td><a element-state for="input" lt="number">Numeric</a>
    </td></tr><tr>
      <td colspan="3">"<code>cc-exp-year</code>"
      </td><td>Year component of the expiration date of the payment instrument
      </td><td><a>valid integer</a> greater than zero
      </td><td>2014
      </td><td><a element-state for="input" lt="number">Numeric</a>
    </td></tr><tr>
      <td colspan="4">"<code>cc-csc</code>"
      </td><td>Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc)
      </td><td><a>ASCII digits</a>
      </td><td>419
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>cc-type</code>"
      </td><td>Type of payment instrument
      </td><td>Free-form text, no newlines
      </td><td>Visa
      </td><td><a element-state for="input">Text</a>
    </td></tr></tbody><tbody>
    <tr>
      <td colspan="4">"<code>transaction-currency</code>"
      </td><td>The currency that the user would prefer the transaction to use
      </td><td>ISO 4217 currency code [[!ISO4217]]
      </td><td>GBP
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>transaction-amount</code>"
      </td><td>The amount that the user would like for the transaction (e.g., when entering a bid or sale price)
      </td><td><a>Valid floating-point number</a>
      </td><td>401.00
      </td><td><a element-state for="input" lt="number">Numeric</a>
    </td></tr></tbody><tbody>
    <tr>
      <td colspan="4">"<code>language</code>"
      </td><td>Preferred language
      </td><td>Valid BCP 47 language tag [[!BCP47]]
      </td><td>en
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>bday</code>"
      </td><td>Birthday
      </td><td><a>Valid date string</a>
      </td><td>1955-06-08
      </td><td><a element-state for="input">Date</a>
    </td></tr><tr>
      <td rowspan="3" class="non-rectangular-cell-indentation">
      </td><td colspan="3">"<code>bday-day</code>"
      </td><td>Day component of birthday
      </td><td><a>valid integer</a> in the range 1..31
      </td><td>8
      </td><td><a element-state for="input" lt="number">Numeric</a>
    </td></tr><tr>
      <td colspan="3">"<code>bday-month</code>"
      </td><td>Month component of birthday
      </td><td><a>valid integer</a> in the range 1..12
      </td><td>6
      </td><td><a element-state for="input" lt="number">Numeric</a>
    </td></tr><tr>
      <td colspan="3">"<code>bday-year</code>"
      </td><td>Year component of birthday
      </td><td><a>valid integer</a> greater than zero
      </td><td>1955
      </td><td><a element-state for="input" lt="number">Numeric</a>
    </td></tr><tr>
      <td colspan="4">"<code>sex</code>"
      </td><td>Gender identity (e.g., Female, Fa'afafine)
      </td><td>Free-form text, no newlines
      </td><td>Male
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>url</code>"
      </td><td>Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field
      </td><td><a>Valid URL</a>
      </td><td>https://www.w3.org/People/Berners-Lee/
      </td><td><a element-state for="input">URL</a>
    </td></tr><tr>
      <td colspan="4">"<code>photo</code>"
      </td><td>Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field
      </td><td> <a>Valid URL</a>
      </td><td>https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg
      </td><td> <a element-state for="input">URL</a>
    </td></tr></tbody><tbody>
    <tr>
      <td colspan="4">"<code>tel</code>"
      </td><td>Full telephone number, including country code
      </td><td><a>ASCII digits</a> and U+0020 SPACE characters, prefixed by a U+002B PLUS SIGN character (+)
      </td><td>+1 617 253 5702
      </td><td><a element-state for="input" lt="telephone">Tel</a>
    </td></tr><tr>
      <td rowspan="6" class="non-rectangular-cell-indentation">
      </td><td colspan="3">"<code>tel-country-code</code>"
      </td><td>Country code component of the telephone number
      </td><td><a>ASCII digits</a> prefixed by a U+002B PLUS SIGN character (+)
      </td><td>+1
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="3">"<code>tel-national</code>"
      </td><td>Telephone number without the county code component, with a country-internal prefix applied if applicable
      </td><td><a>ASCII digits</a> and U+0020 SPACE characters
      </td><td>617 253 5702
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td rowspan="4" class="non-rectangular-cell-indentation">
        </td><td colspan="2">"<code>tel-area-code</code>"
        </td><td>Area code component of the telephone number, with a country-internal prefix applied if applicable
        </td><td><a>ASCII digits</a>
        </td><td>617
        </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
        <td colspan="2">"<code>tel-local</code>"
        </td><td>Telephone number without the country code and area code components
        </td><td><a>ASCII digits</a>
        </td><td>2535702
        </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
        <td rowspan="2" class="non-rectangular-cell-indentation">
        </td><td>"<code>tel-local-prefix</code>"
        </td><td>First part of the component of the telephone number that follows the area code, when that component is split into two components
        </td><td><a>ASCII digits</a>
        </td><td>253
        </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
        <td>"<code>tel-local-suffix</code>"
        </td><td>Second part of the component of the telephone number that follows the area code, when that component is split into two components
        </td><td><a>ASCII digits</a>
        </td><td>5702
        </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>tel-extension</code>"
      </td><td>Telephone number internal extension code
      </td><td><a>ASCII digits</a>
      </td><td>1000
      </td><td><a element-state for="input">Text</a>
    </td></tr><tr>
      <td colspan="4">"<code>email</code>"
      </td><td>E-mail address
      </td><td><a>Valid e-mail address</a>
      </td><td>timbl@w3.org
      </td><td><a element-state for="input">E-mail</a>
    </td></tr><tr>
      <td colspan="4">"<code>impp</code>"
      </td><td>URL representing an instant messaging protocol endpoint (for example, "<code>aim:goim?screenname=example</code>" or "<code>xmpp:fred@example.net</code>")
      </td><td><a>Valid URL</a>
      </td><td>irc://example.org/timbl,isuser
      </td><td><a element-state for="input">URL</a>
  </td></tr></tbody></table>

  The groups correspond to controls as follows:

  <dl>

    <dt>Text

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Text</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Search</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

    </dd><dt>Multiline

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

    </dd><dt>Password

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Text</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Search</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Password</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

    </dd><dt>URL

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Text</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Search</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">URL</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

    </dd><dt>E-mail

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Text</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Search</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">E-mail</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

    </dd><dt>Tel

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Text</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Search</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Telephone</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

    </dd><dt>Numeric

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Text</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Search</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Number</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

    </dd><dt>Month

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Text</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Search</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Month</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

    </dd><dt>Date

    </dt><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Hidden</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Text</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Search</a> state
    </dd><dd><{input}> elements with a <{input/type}> attribute in the <a element-state for="input">Date</a> state
    </dd><dd><{textarea}> elements
    </dd><dd><{select}> elements

  </dd></dl>

  <dfn lt="administrative level|second administrative level|third administrative level">Address levels</dfn>: The "<code>address-level1</code>" – "<code>address-level4</code>" fields are used to describe
  the locality of the street address. Different locales have different numbers of levels. For
  example, the US uses two levels (state and town), the UK uses one or two depending on the address
  (the post town, and in some cases the locality), and China can use three (province, city,
  district). The "<code>address-level1</code>" field
  represents the widest administrative division. Different locales order the fields in different
  ways; for example, in the US the town (level 2) precedes the state (level 1); while in Japan the
  prefecture (level 1) precedes the city (level 2) which precedes the district (level 3). Authors
  are encouraged to provide forms that are presented in a way that matches the country's conventions
  (hiding, showing, and rearranging fields accordingly as the user changes the country).

  <div class="impl">

<h6 id="autofill-processing-model">Processing model</h6>

  Each <{input}> element to which the <{autocompleteelements/autocomplete}> attribute <a>applies</a>, each <{select}> element, and each <{textarea}> element, has an
  <dfn>autofill hint set</dfn>, an <dfn>autofill scope</dfn>, an <dfn>autofill field name</dfn>, and
  an <dfn>IDL-exposed autofill value</dfn>.

  The <a>autofill field name</a> specifies the specific kind of data expected in the field,
  e.g., "<code>street-address</code>" or "<code>cc-exp</code>".

  The <a>autofill hint set</a> identifies what address or contact information type the user
  agent is to look at, e.g., "<code>shipping</code> <code>fax</code>" or "<code>billing</code>".

  The <a>autofill scope</a> identifies the group of fields that are to be filled with the
  information from the same source, and consists of the <a>autofill hint set</a> with, if
  applicable, the "<code>section-*</code>" prefix, e.g., "<code>billing</code>", "<code>section-parent shipping</code>", or "<code>section-child
  shipping home</code>".

  These values are defined as the result of running the following algorithm:

  <ol>

    <li>If the element has no <{autocompleteelements/autocomplete}> attribute,
    then jump to the step labeled <i>default</i>.</li>

    <li>Let <var>tokens</var> be the result of <a lt="split a string on spaces">splitting the attribute's value on spaces</a>.</li>

    <li>If <var>tokens</var> is empty, then jump to the step labeled
    <i>default</i>.</li>

    <li>Let <var>index</var> be the index of the last token in <var>tokens</var>.</li>

    <li>

    If the <var>index</var>th token in <var>tokens</var> is not an <a>ASCII
    case-insensitive</a> match for one of the tokens given in the first column of the following
    table, or if the number of tokens in <var>tokens</var> is greater than the maximum
    number given in the cell in the second column of that token's row, then jump to the step labeled
    <i>default</i>. Otherwise, let <var>field</var> be the string given in the cell of the
    first column of the matching row, and let <var>category</var> be the value of the cell
    in the third column of that same row.

    <table>
      <thead>
      <tr>
        <th>Token
        </th><th>Maximum number of tokens
        </th><th>Category
      </th></tr></thead><tbody>
      <tr>
        <td>"<code>off</code>"
        </td><td>1
        </td><td>Off
      </td></tr><tr>
        <td>"<code>on</code>"
        </td><td>1
        </td><td>Automatic
      </td></tr></tbody><tbody>
      <tr>
        <td>"<code>name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>honorific-prefix</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>given-name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>additional-name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>family-name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>honorific-suffix</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>nickname</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>organization-title</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>username</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>new-password</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>current-password</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>organization</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>street-address</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>address-line1</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>address-line2</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>address-line3</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>address-level4</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>address-level3</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>address-level2</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>address-level1</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>country</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>country-name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>postal-code</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-given-name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-additional-name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-family-name</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-number</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-exp</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-exp-month</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-exp-year</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-csc</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>cc-type</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>transaction-currency</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>transaction-amount</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>language</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>bday</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>bday-day</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>bday-month</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>bday-year</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>sex</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>url</code>"
        </td><td>3
        </td><td>Normal
      </td></tr><tr>
        <td>"<code>photo</code>"
        </td><td>3
        </td><td>Normal
      </td></tr></tbody><tbody>
      <tr>
        <td>"<code>tel</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>tel-country-code</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>tel-national</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>tel-area-code</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>tel-local</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>tel-local-prefix</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>tel-local-suffix</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>tel-extension</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>email</code>"
        </td><td>4
        </td><td>Contact
      </td></tr><tr>
        <td>"<code>impp</code>"
        </td><td>4
        </td><td>Contact
    </td></tr></tbody></table>

    </li>

    <li>If <var>category</var> is Off or Automatic but the element's <{autocompleteelements/autocomplete}> attribute is wearing the <a>autofill anchor
    mantle</a>, then jump to the step labeled <i>default</i>.</li>

    <li>If <var>category</var> is Off, let the element's <a>autofill field name</a>
    be the string "<code>off</code>", let its <a>autofill hint set</a> be empty, and
    let its <a>IDL-exposed autofill value</a> be the string "<code>off</code>". Then,
    abort these steps.

    </li><li>If <var>category</var> is Automatic, let the element's <a>autofill field
    name</a> be the string "<code>on</code>", let its <a>autofill hint set</a> be
    empty, and let its <a>IDL-exposed autofill value</a> be the string "<code>on</code>". Then, abort these steps.

    </li><li>Let <var>scope tokens</var> be an empty list.</li>

    <li>Let <var>hint tokens</var> be an empty set.</li>

    <li>Let <var>IDL value</var> have the same value as <var>field</var>.</li>

    <li>If the <var>index</var>th token in <var>tokens</var> is the first entry,
    then skip to the step labeled <i>done</i>.</li>

    <li>Decrement <var>index</var> by one.</li>

    <li>

    If <var>category</var> is Contact and the <var>index</var>th token in <var>tokens</var> is an <a>ASCII case-insensitive</a> match for one of the strings in
    the following list, then run the substeps that follow:

    <ul class="brief">
      <li>"<code>home</code>"
      </li><li>"<code>work</code>"
      </li><li>"<code>mobile</code>"
      </li><li>"<code>fax</code>"
      </li><li>"<code>pager</code>"
    </li></ul>

    The substeps are:

    <ol>

      <li>Let <var>contact</var> be the matching string from the list above.</li>

      <li>Insert <var>contact</var> at the start of <var>scope
      tokens</var>.</li>

      <li>Add <var>contact</var> to <var>hint tokens</var>.</li>

      <li>Let <var>IDL value</var> be the concatenation of <var>contact</var>, a
      U+0020 SPACE character, and the previous value of <var>IDL value</var> (which at this
      point will always be <var>field</var>).</li>

      <li>If the <var>index</var>th entry in <var>tokens</var> is the first
      entry, then skip to the step labeled <i>done</i>.</li>

      <li>Decrement <var>index</var> by one.</li>

    </ol>

    </li>

    <li>

    If the <var>index</var>th token in <var>tokens</var> is an <a>ASCII
    case-insensitive</a> match for one of the strings in the following list, then run the
    substeps that follow:

    <ul class="brief">
      <li>"<code>shipping</code>"
      </li><li>"<code>billing</code>"
    </li></ul>

    The substeps are:

    <ol>

      <li>Let <var>mode</var> be the matching string from the list above.</li>

      <li>Insert <var>mode</var> at the start of <var>scope
      tokens</var>.</li>

      <li>Add <var>mode</var> to <var>hint tokens</var>.</li>

      <li>Let <var>IDL value</var> be the concatenation of <var>mode</var>, a
      U+0020 SPACE character, and the previous value of <var>IDL value</var> (which at this
      point will either be <var>field</var> or the concatenation of <var>contact</var>, a space, and <var>field</var>).</li>

      <li>If the <var>index</var>th entry in <var>tokens</var> is the first
      entry, then skip to the step labeled <i>done</i>.</li>

      <li>Decrement <var>index</var> by one.</li>

    </ol>

    </li>

    <li>If the <var>index</var>th entry in <var>tokens</var> is not the first entry, then jump to
    the step labeled <i>default</i>.</li>

    <li>If the first eight characters of the <var>index</var>th token in <var>tokens</var> are not
    an <a>ASCII case-insensitive</a> match for the string "<code>section-</code>", then jump to the step labeled
    <i>default</i>.</li>

    <li>Let <var>section</var> be the <var>index</var>th token in <var>tokens</var>,
    <a>converted to ASCII lowercase</a>.</li>

    <li>Insert <var>section</var> at the start of <var>scope tokens</var>.</li>

    <li>Let <var>IDL value</var> be the concatenation of <var>section</var>, a U+0020 SPACE
    character, and the previous value of <var>IDL value</var>.</li>

    <li><i>Done</i>: Let the element's <a>autofill hint set</a> be <var>hint
    tokens</var>.

    </li><li>Let the element's <a>autofill scope</a> be <var>scope tokens</var>.

    </li><li>Let the element's <a>autofill field name</a> be <var>field</var>.

    </li><li>Let the element's <a>IDL-exposed autofill value</a> be <var>IDL value</var>.

    </li><li>Abort these steps.</li>

    <li><i>Default</i>: Let the element's <a>IDL-exposed autofill value</a> be the empty
    string, and its <a>autofill hint set</a> and <a>autofill scope</a> be empty.</li>

    <li>If the element's <{autocompleteelements/autocomplete}> attribute is
    wearing the <a>autofill anchor mantle</a>, then let the element's <a>autofill field
    name</a> be the empty string and abort these steps.</li>

    <li>Let <var>form</var> be the element's <a>form owner</a>, if any, or null
    otherwise.</li>

    <li>

    If <var>form</var> is not null and <var>form</var>'s <{autocompleteelements/autocomplete}> attribute is in the <a state for="form/autocomplete">off</a> state, then let the element's
    <a>autofill field name</a> be "<a attr-value for="forms/autocomplete"><code>off</code></a>".

    Otherwise, let the element's <a>autofill field name</a> be "<a attr-value for="forms/autocomplete"><code>on</code></a>".

    </li>

  </ol>

  <hr />

  For the purposes of autofill, a <dfn>control's data</dfn> depends on the kind of control:

  <dl>

    <dt>An <{input}> element with its <{input/type}> attribute
    in the <a element-state for="input">E-mail</a> state and with the <code>multiple</code> attribute specified</dt>

    <dd>The element's <a for="forms">value<em>s</em></a>.</dd>

    <dt>Any other <{input}> element</dt>
    <dt>A <{textarea}> element</dt>

    <dd>The element's <a for="forms">value</a>.</dd>

    <dt>A <{select}> element with its <code>multiple</code>
    attribute specified</dt>

    <dd>The <{option}> elements in the <{select}> element's <a>list of options</a> that have their <a state for="option">selectedness</a> set to true.</dd>

    <dt>Any other <{select}> element</dt>

    <dd>The <{option}> element in the <{select}> element's <a>list of options</a> that has its <a state for="option">selectedness</a> set to true.</dd>

  </dl>

  <hr />

  How to process the <a>autofill hint set</a>, <a>autofill scope</a>, and
  <a>autofill field name</a> depends on the mantle that the <{autocompleteelements/autocomplete}> attribute is wearing.

  <dl class="switch">

    <dt>When wearing the <a>autofill expectation mantle</a>...

    </dt><dd>

    When an element's <a>autofill field name</a> is "<a attr-value for="forms/autocomplete"><code>off</code></a>", the user agent should not remember the <a>control's
    data</a>, and should not offer past values to the user.

    <p class="note">
    In addition, when an element's <a>autofill field name</a> is "<a attr-value for="forms/autocomplete"><code>off</code></a>", <a>values are reset</a>
    when <a>traversing the history</a>.
  </p>

    <div class="example">
      Banks frequently do not want user agents to prefill login information:

      <pre highlight="html">
&lt;p&gt;&lt;label&gt;Account: &lt;input type="text" name="ac" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;PIN: &lt;input type="password" name="pin" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;
    </pre>

    </div>

    When an element's <a>autofill field name</a> is <em>not</em> "<a attr-value for="forms/autocomplete"><code>off</code></a>", the user agent may store the <a>control's
    data</a>, and may offer previously stored values to the user.

    <div class="example">
      For example, suppose a user visits a page with this control:

      <pre highlight="html">
&lt;select name="country"&gt;
  &lt;option&gt;Afghanistan
  &lt;option&gt;Albania
  &lt;option&gt;Algeria
  &lt;option&gt;Andorra
  &lt;option&gt;Angola
  &lt;option&gt;Antigua and Barbuda
  &lt;option&gt;Argentina
  &lt;option&gt;Armenia
  &lt;!-- <em>...</em> --&gt;
  &lt;option&gt;Yemen
  &lt;option&gt;Zambia
  &lt;option&gt;Zimbabwe
&lt;/select&gt;
    </pre>

      This might render as follows:

      <img src="images/select-country-1.png" alt="A drop-down control with a long alphabetical list of countries." />

      Suppose that on the first visit to this page, the user selects "Zambia". On the second visit,
      the user agent could duplicate the entry for Zambia at the top of the list, so that the interface
      instead looks like this:

      <img src="images/select-country-2.png" alt="The same drop-down control with the alphabetical list of countries, but with Zambia as an entry at the top." />

    </div>

    When the <a>autofill field name</a> is "<code>on</code>", the user agent should attempt to use heuristics to
    determine the most appropriate values to offer the user, e.g., based on the element's <{formelements/name}> value, the position of the element in the document's DOM, what
    other fields exist in the form, and so forth.

    When the <a>autofill field name</a> is one of the names of the <a>autofill fields</a> described above, the user agent should provide suggestions that
    match the meaning of the field name as given in the table earlier in this section. The
    <a>autofill hint set</a> should be used to select amongst multiple possible suggestions.

    <p class="example">For example, if a user once entered one address into fields that used the
    "<code>shipping</code>" keyword, and another address into
    fields that used the "<code>billing</code>" keyword, then in
    subsequent forms only the first address would be suggested for form controls whose <a>autofill
    hint set</a> contains the keyword "<code>shipping</code>". Both addresses might be suggested,
    however, for address-related form controls whose <a>autofill hint set</a> does not contain
    either keyword.</p>

    </dd>

    <dt>When wearing the <a>autofill anchor mantle</a>...

    </dt><dd>

    When the <a>autofill field name</a> is not the empty string, then the user agent must
    act as if the user had specified the <a>control's data</a> for the given <a>autofill
    hint set</a>, <a>autofill scope</a>, and <a>autofill field name</a>
    combination.

    </dd>

  </dl>

  When the user agent <dfn lt="derived from country in some cases|autofills form controls">autofills form controls</dfn>, elements
  with the same <a>form owner</a> and the same <a>autofill scope</a> must use data
  relating to the same person, address, payment instrument, and contact details. When a user agent autofills "<code>country</code>" and "<code>country-name</code>" fields with the same <a>form
  owner</a> and <a>autofill scope</a>, and the user agent has a value for the <code>country</code>" field(s), then the "<code>country-name</code>" field(s) must be filled using a
  human-readable name for the same country. When a user agent fills in multiple fields at
  once, all fields with the same <a>autofill field name</a>, <a>form owner</a> and
  <a>autofill scope</a> must be filled with the same value.

  <p class="example">
    Suppose a user agent knows of two phone numbers, +1 555 123 1234 and +1 555 666 7777. It would
    not be conforming for the user agent to fill a field with
    <code>autocomplete="shipping tel-local-prefix"</code> with the value "123" and another field in
    the same form with <code>autocomplete="shipping tel-local-suffix"</code> with the value "7777".
    The only valid prefilled values given the aforementioned information would be "123" and "1234",
    or "666" and "7777", respectively.</p>

  <p class="example">
    Similarly, if a form for some reason contained both a "<code>cc-exp</code>" field and a
    "<code>cc-exp-month</code>" field, and the user agent prefilled the form, then the month
    component of the former would have to match the latter.
  </p>

  <div class="example">
    This requirement interacts with the <a>autofill anchor mantle</a> also. Consider the
    following markup snippet:

    <pre highlight="html">
&lt;form&gt;
  &lt;input type=hidden autocomplete="nickname" value="TreePlate"&gt;
  &lt;input type=text autocomplete="nickname"&gt;
&lt;/form&gt;
    </pre>

    The only value that a conforming user agent could suggest in the text field is
    "TreePlate", the value given by the hidden <{input}> element.

  </div>

  The "<code>section-*</code>" tokens in the <a>autofill scope</a> are opaque;
  user agents must not attempt to derive meaning from the precise values of these tokens.

  <p class="example">For example, it would not be conforming if the user agent decided that it
  should offer the address it knows to be the user's daughter's address for "<code>section-child</code>" and the addresses it knows to be the user's spouses' addresses for
  "<code>section-spouse</code>".</p>

  The autocompletion mechanism must be implemented by the user agent acting as if the user had
  modified the <a>control's data</a>, and must be done at a time where the element is <i>mutable</i> (e.g., just after the element has been <a for="document">inserted into the document</a>, or when the user agent <a lt="stops parsing">stops parsing</a>). User agents
  must only prefill controls using values that the user could have entered.

  <p class="example">For example, if a <{select}> element only has <{option}>
  elements with values "Steve" and "Rebecca", "Jay", and "Bob", and has an <a>autofill field
  name</a> "<code>given-name</code>", but the user
  agent's only idea for what to prefill the field with is "Evan", then the user agent cannot prefill
  the field. It would not be conforming to somehow set the <{select}> element to the value
  "Evan", since the user could not have done so themselves.</p>

  A user agent prefilling a form control's <a for="forms">value</a> must not
  cause that control to <a>suffer from a type
  mismatch</a>, <a>suffer from being too long</a>,
  <a>suffer from being too short</a>, <a>suffer from an underflow</a>, <a>suffer from an overflow</a>,
  <a>suffer from a step mismatch</a>, or <a>suffer from a pattern mismatch</a>. Where
  possible given the control's constraints, user agents must use the format given as canonical in
  the aforementioned table. Where it's not possible for the canonical format to be used, user agents
  should use heuristics to attempt to convert values so that they can be used.

  <div class="example">
    For example, if the user agent knows that the user's middle name is "Ines", and attempts to
    prefill a form control that looks like this:

    <pre highlight="html">
&lt;input name=middle-initial maxlength=1 autocomplete="additional-name"&gt;
    </pre>

    ...then the user agent could convert "Ines" to "I" and prefill it that way.

  </div>

  <div class="example">
    A more elaborate example would be with month values. If the user agent knows that the user's
    birthday is the 27th of July 2012, then it might try to prefill all of the following controls
    with slightly different values, all driven from this information:

    <table>
    <tbody><tr>
      <td>
      <pre highlight="html">
&lt;input name=b type=month autocomplete="bday"&gt;
    </pre>
      </td><td>
      2012-07
      </td><td>
      The day is dropped since the <a>Month</a> state only accepts a
      month/year combination.
    </td></tr><tr>
      <td>
      <pre highlight="html">
&lt;select name=c autocomplete="bday"&gt;
  &lt;option&gt;Jan
  &lt;option&gt;Feb
  <em>...</em>
  &lt;option&gt;Jul
  &lt;option&gt;Aug
  <em>...</em>
&lt;/select&gt;
    </pre>
      </td><td>
      July
      </td><td>
      The user agent picks the month from the listed options, either by noticing there are twelve
      options and picking the 7th, or by recognizing that one of the strings (three characters "Jul"
      followed by a newline and a space) is a close match for the name of the month (July) in one of
      the user agent's supported languages, or through some other similar mechanism.
    </td></tr><tr>
      <td>
      <pre highlight="html">
&lt;input name=a type=number min=1 max=12 autocomplete="bday-month"&gt;
    </pre>
      </td><td>
      7
      </td><td>
      User agent converts "July" to a month number in the range 1..12, like the field.
    </td></tr><tr>
      <td>
      <pre highlight="html">
&lt;input name=a type=number min=0 max=11 autocomplete="bday-month"&gt;
    </pre>
      </td><td>
      6
      </td><td>
      User agent converts "July" to a month number in the range 0..11, like the field.
    </td></tr><tr>
      <td>
      <pre highlight="html">
&lt;input name=a type=number min=1 max=11 autocomplete="bday-month"&gt;
    </pre>
      </td><td>
      </td><td>
      User agent doesn't fill in the field, since it can't make a good guess as to what the form expects.
    </td></tr></tbody></table>

  </div>

  A user agent may allow the user to override an element's <a>autofill field name</a>, e.g.,
  to change it from "<code>off</code>" to "<code>on</code>" to allow values to be remembered and prefilled despite
  the page author's objections, or to always "<code>off</code>",
  never remembering values.

  More specifically, user agents may in particular consider replacing the <a>autofill field
  name</a> of form controls that match the description given in the first column of the following
  table, when their <a>autofill field name</a> is either "<code>on</code>" or "<code>off</code>", with the value given in the second cell of that
  row. If this table is used, the replacements must be done in <a>tree order</a>, since all
  but the first row references the <a>autofill field name</a> of earlier elements. When the
  descriptions below refer to form controls being preceded or followed by others, they mean in the
  list of <a>listed elements</a> that share the same <a>form owner</a>.

  <table>

    <thead>
    <tr>
      <th>Form control
      </th><th>New <a>autofill field name</a>

    </th></tr></thead><tbody>

    <tr>

      <td>

      an <{input}> element whose <{input/type}> attribute is in
      the <a element-state for="input">Text</a> state that is followed by an
      <{input}> element whose <{input/type}> attribute is in
      the <a>Password</a> state

      </td><td>

      "<code>username</code>"

    </td></tr><tr>

      <td>

      an <{input}> element whose <{input/type}> attribute is in
      the <a element-state for="input">Password</a> state that is preceded by an
      <{input}> element whose <a>autofill field name</a> is "<code>username</code>"

      </td><td>

      "<code>current-password</code>"

    </td></tr><tr>

      <td>

      an <{input}> element whose <{input/type}> attribute is in
      the <a element-state for="input">Password</a> state that is preceded by an
      <{input}> element whose <a>autofill field name</a> is "<code>current-password</code>"

      </td><td>

      "<code>new-password</code>"

    </td></tr><tr>

      <td>

      an <{input}> element whose <{input/type}> attribute is in
      the <a element-state for="input">Password</a> state that is preceded by an
      <{input}> element whose <a>autofill field name</a> is "<code>new-password</code>"

      </td><td>

      "<code>new-password</code>"

  </td></tr></tbody></table>

  The
  <dfn attribute for="HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement"><code>autocomplete</code></dfn>
  IDL attribute, on getting,
  must return the element's <a>IDL-exposed autofill value</a>, and on setting, must
  <a>reflect</a> the content attribute of the same name.

  </div>

<h4 id="apis-for-the-text-field-selections">APIs for text field selections</h4>

  The <{input}> and <{textarea}> elements define the following members in their
  DOM interfaces for handling their selection: {{HTMLInputElement/select()}}, 
  {{HTMLInputElement/selectionStart}}, {{HTMLInputElement/selectionEnd}}, 
  {{HTMLInputElement/selectionDirection}}, {{HTMLInputElement/setRangeText(replacement)}}, 
  {{HTMLInputElement/setSelectionRange(start, end)}}  

  The {{HTMLInputElement/setRangeText()}} method uses the following enumeration:

  <pre class="idl" data-highlight="webidl" dfn-for="SelectionMode">
    enum SelectionMode {
      "select",
      "start",
      "end",
      "preserve" // default
    };
  </pre>

  These methods and attributes expose and control the selection of <{input}> and
  <{textarea}> text fields.

  <dl class="domintro">

    <dt><var>element</var> . {{selectionapielements/select()}}</dt>

    <dd>

    Selects everything in the text field.

    </dd>

    <dt><var>element</var> . {{selectionapielements/selectionStart}} [ = <var>value</var> ]</dt>

    <dd>

    Returns the offset to the start of the selection.

    Can be set, to change the start of the selection.

    </dd>

    <dt><var>element</var> . {{selectionapielements/selectionEnd}} [ = <var>value</var> ]</dt>

    <dd>

    Returns the offset to the end of the selection.

    Can be set, to change the end of the selection.

    </dd>

    <dt><var>element</var> . {{selectionapielements/selectionDirection}} [ = <var>value</var> ]</dt>

    <dd>

    Returns the current direction of the selection.

    Can be set, to change the direction of the selection.

    The possible values are "<code>forward</code>", "<code>backward</code>", and "<code>none</code>".

    </dd>

    <dt><var>element</var> . setSelectionRange(<var>start</var>, <var>end</var> [, <var>direction</var>] )</dt>

    <dd>

    Changes the selection to cover the given substring in the given direction. If the direction
    is omitted, it will be reset to be the platform default (none or forward).

    </dd>

    <dt><var>element</var> . setRangeText(<var>replacement</var> [, <var>start</var>, <var>end</var> [, <var>selectionMode</var> ] ] )</dt>

    <dd>

    Replaces a range of text with the new text. If the <var>start</var> and <var>end</var> arguments are not provided, the range is assumed to be the selection.

    The final argument determines how the selection should be set after the text has been
    replaced. The possible values are:

    : "<code>select</code>"
    :: Selects the newly inserted text.
    : "<code>start</code>"
    :: Moves the selection to just before the inserted text.
    : "<code>end</code>"
    :: Moves the selection to just after the selected text.
    : "<code>preserve</code>"
    :: Attempts to preserve the selection. This is the default.

    </dd>

  </dl>

  <div class="impl">

  For <{input}> elements, calling these methods while they <a>don't apply</a>, and getting or setting these attributes while they <a>don't apply</a>, must throw an <code>InvalidStateError</code> exception. Otherwise, they
  must act as described below.

  For <{input}> elements, these methods and attributes must operate on the element's
  <a for="forms">value</a>. For <{textarea}> elements, these methods and
  attributes must operate on the element's <a>raw value</a>.

  Where possible, user interface features for changing the text selection in <{input}>
  and <{textarea}> elements must be implemented in terms of the DOM API described in this
  section, so that, e.g., all the same events fire.

  The selections of <{input}> and <{textarea}> elements have a
  <i>direction</i>, which is either <i>forward</i>, <i>backward</i>, or <i>none</i>. This direction
  is set when the user manipulates the selection. The exact meaning of the selection direction
  depends on the platform.

  <p class="note">
    On Windows, the direction indicates the position of the caret relative to the
  selection: a <i>forward</i> selection has the caret at the end of the selection and a
  <i>backward</i> selection has the caret at the start of the selection. Windows has no <i>none</i>
  direction. On Mac, the direction indicates which end of the selection is affected when the user
  adjusts the size of the selection using the arrow keys with the Shift modifier: the forward
  direction means the end of the selection is modified, and the backwards direction means the start
  of the selection is modified. The none direction is the default on Mac, it indicates that no
  particular direction has yet been selected. The user sets the direction implicitly when first
  adjusting the selection, based on which directional arrow key was used.
  </p>

  The
  <dfn method for="selectionapielements,HTMLInputElement,HTMLTextAreaElement"><code>select()</code></dfn>
  method must cause the
  contents of the text field to be fully selected, with the selection direction being none, if the
  platform support selections with the direction <i>none</i>, or otherwise <i>forward</i>. The user
  agent must then <a>queue a task</a> to <a>fire a simple event</a> that bubbles named
  <code>select</code> at the element, using the <a>user interaction task
  source</a> as the task source.

  In the case of <{input}> elements, if the control has no text field, then the method
  must do nothing.

  <p class="example">For instance, in a user agent where <code highlight="html">&lt;input type=color&gt;</code> is rendered as a color well with a
  picker, as opposed to a text field accepting a hexadecimal color code, there would be no text
  field, and thus nothing to select, and thus calls to the method are ignored.</p>

  The
  <dfn attribute for="selectionapielements,HTMLInputElement,HTMLTextAreaElement"><code>selectionStart</code></dfn>
  attribute
  must, on getting, return the offset (in logical order) to the character that immediately follows
  the start of the selection. If there is no selection, then it must return the offset (in logical
  order) to the character that immediately follows the text entry cursor.

  On setting, it must act as if the {{selectionapielements/setSelectionRange()}} method had been called,
  with the new value as the first argument; the current value of the {{selectionapielements/selectionEnd}} attribute as the second argument,
  unless the current value of the {{selectionapielements/selectionEnd}}
  is less than the new value, in which case the second argument must also be the new value; and the
  current value of the {{selectionapielements/selectionDirection}}
  as the third argument.

  The
  <dfn attribute for="selectionapielements,HTMLInputElement,HTMLTextAreaElement"><code>selectionEnd</code></dfn>
  attribute
  must, on getting, return the offset (in logical order) to the character that immediately follows
  the end of the selection. If there is no selection, then it must return the offset (in logical
  order) to the character that immediately follows the text entry cursor.

  On setting, it must act as if the {{selectionapielements/setSelectionRange()}} method had been called,
  with the current value of the {{selectionapielements/selectionStart}} attribute as the first argument,
  the new value as the second argument, and the current value of the {{selectionapielements/selectionDirection}} as the third argument.

  The
  <dfn attribute for="selectionapielements,HTMLInputElement,HTMLTextAreaElement"><code>selectionDirection</code></dfn>
  attribute must, on getting, return the string corresponding to the current selection direction: if
  the direction is <i>forward</i>, "<code>forward</code>"; if the direction is
  <i>backward</i>, "<code>backward</code>"; and otherwise, "<code>none</code>".

  On setting, it must act as if the {{selectionapielements/setSelectionRange()}} method had been called,
  with the current value of the {{selectionapielements/selectionStart}} IDL attribute as the first argument,
  the current value of the {{selectionapielements/selectionEnd}} IDL
  attribute as the second argument, and the new value as the third argument.

  The
  <dfn method for="selectionapielements,HTMLInputElement,HTMLTextAreaElement" lt="setSelectionRange()|setSelectionRange(start, end)|setSelectionRange(start, end, direction)"><code>setSelectionRange(<var>start</var>, <var>end</var>, <var>direction</var>)</code></dfn>
  method
  must set the selection of the text field to the sequence of characters starting with the character
  at the <var>start</var>th position (in logical order) and ending with the character at
  the (<var>end</var>-1)th position. Arguments greater than the
  length of the value of the text field must be treated as pointing at the end of the text field. If
  <var>end</var> is less than or equal to <var>start</var> then the start of the
  selection and the end of the selection must both be placed immediately before the character with
  offset <var>end</var>. In user agents where there is no concept of an empty selection, this must
  set the cursor to be just before the character with offset <var>end</var>. The direction
  of the selection must be set to <i>backward</i> if <var>direction</var> is a
  <a>case-sensitive</a> match for the string "<code>backward</code>", <i>forward</i>
  if <var>direction</var> is a <a>case-sensitive</a> match for the string "<code>forward</code>" or if the platform does not support selections with the direction
  <i>none</i>, and <i>none</i> otherwise (including if the argument is omitted). The user agent must
  then <a>queue a task</a> to <a>fire a simple event</a> that bubbles named <code>select</code> at the element, using the <a>user interaction task
  source</a> as the task source.

  The
  <dfn method for="selectionapielements,HTMLInputElement,HTMLTextAreaElement" lt="setRangeText()|setRangeText(replacement)|setRangeText(replacement, start, end)|setRangeText(replacement, start, end, selectionMode)"><code>setRangeText(<var>replacement</var>, <var>start</var>, <var>end</var>, <var>selectMode</var>)</code></dfn>
  method must run the following steps:

  <ol>

    <li>

    If the method has only one argument, then let <var>start</var> and <var>end</var> have the values of the {{selectionapielements/selectionStart}} IDL attribute and the {{selectionapielements/selectionEnd}} IDL attribute respectively.

    Otherwise, let <var>start</var>, <var>end</var> have the values of the
    second and third arguments respectively.

    </li>

    <li>If <var>start</var> is greater than <var>end</var>, then throw an
    <code>IndexSizeError</code> exception and abort these steps.</li>

    <li>If <var>start</var> is greater than the length of the value of the text field,
    then set it to the length of the value of the text field.</li>

    <li>If <var>end</var> is greater than the length of the value of the text field,
    then set it to the length of the value of the text field.</li>

    <li>Let <var>selection start</var> be the current value of the {{selectionapielements/selectionStart}} IDL attribute.</li>

    <li>Let <var>selection end</var> be the current value of the {{selectionapielements/selectionEnd}} IDL attribute.</li>

    <li>If <var>start</var> is less than <var>end</var>, delete the sequence of
    characters starting with the character at the <var>start</var>th position (in logical
    order) and ending with the character at the (<var>end</var>-1)th
    position.</li>

    <li>Insert the value of the first argument into the text of the value of the text field,
    immediately before the <var>start</var>th character.</li>

    <li>Let <var>new length</var> be the length of the value of the first argument.</li>

    <li>Let <var>new end</var> be the sum of <var>start</var> and <var>new length</var>.</li>

    <li>

    Run the appropriate set of substeps from the following list:

    <dl class="switch">

      <dt>If the fourth argument's value is "<dfn enum for="SelectionMode"><code>select</code></dfn>"</dt>

      <dd>

      Let <var>selection start</var> be <var>start</var>.

      Let <var>selection end</var> be <var>new end</var>.

      </dd>

      <dt>If the fourth argument's value is "<dfn enum for="SelectionMode"><code>start</code></dfn>"</dt>

      <dd>

      Let <var>selection start</var> and <var>selection end</var> be <var>start</var>.

      </dd>

      <dt>If the fourth argument's value is "<dfn enum for="SelectionMode"><code>end</code></dfn>"</dt>

      <dd>

      Let <var>selection start</var> and <var>selection end</var> be <var>new end</var>.

      </dd>

      <dt>If the fourth argument's value is "<dfn enum for="SelectionMode"><code>preserve</code></dfn>" (the default)</dt>

      <dd>

      <ol>

        <li>Let <var>old length</var> be <var>end</var> minus <var>start</var>.

        </li><li>Let <var>delta</var> be <var>new length</var> minus <var>old length</var>.

        </li><li>

        If <var>selection start</var> is greater than <var>end</var>, then
        increment it by <var>delta</var>. (If <var>delta</var> is negative, i.e.,
        the new text is shorter than the old text, then this will <em>decrease</em> the value of
        <var>selection start</var>.)

        Otherwise: if <var>selection start</var> is greater than <var>start</var>, then set it to <var>start</var>. (This snaps the start of the
        selection to the start of the new text if it was in the middle of the text that it
        replaced.)

        </li>

        <li>

        If <var>selection end</var> is greater than <var>end</var>, then
        increment it by <var>delta</var> in the same way.

        Otherwise: if <var>selection end</var> is greater than <var>start</var>, then set it to <var>new end</var>. (This snaps the end of the
        selection to the end of the new text if it was in the middle of the text that it
        replaced.)

        </li>

      </ol>

      </dd>

    </dl>

    </li>

    <li>

    Set the selection of the text field to the sequence of characters starting with the character
    at the <var>selection start</var>th position (in logical order) and ending with the
    character at the (<var>selection end</var>-1)th position. In user agents
    where there is no concept of an empty selection, this must set the cursor to be just before the
    character with offset <var>end</var>. The direction of the selection must be set to
    <i>forward</i> if the platform does not support selections with the direction <i>none</i>, and
    <i>none</i> otherwise.

    </li>

    <li><a>Queue a task</a> to <a>fire a simple event</a> that bubbles named <code>select</code> at the element, using the <a>user interaction task
    source</a> as the task source.</li>

  </ol>

  All elements to which this API <a>applies</a> have either a
  selection or a text entry cursor position at all times (even for elements that are not <a>being
  rendered</a>). User agents should follow platform conventions to determine their initial
  state.

  </div>

  Characters with no visible rendering, such as U+200D ZERO WIDTH JOINER, still count as
  characters. Thus, for instance, the selection can include just an invisible character, and the
  text insertion cursor can be placed to one side or another of such a character.

  <div class="example">
    To obtain the currently selected text, the following JavaScript suffices:

    <pre highlight="javascript">
var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);
    </pre>

    ...where <var>control</var> is the <{input}> or <{textarea}>
    element.

  </div>

  <div class="example">
    To add some text at the start of a text control, while maintaining the text selection, the
    three attributes must be preserved:

    <pre highlight="javascript">
var oldStart = control.selectionStart;
var oldEnd = control.selectionEnd;
var oldDirection = control.selectionDirection;
var prefix = "https://";
control.value = prefix + control.value;
control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldDirection);
    </pre>

    ...where <var>control</var> is the <{input}> or <{textarea}>
    element.

  </div>

<h4 id="constraints">Constraints</h4>

<h5 id="constraints-definitions">Definitions</h5>

  <div class="impl">

  A <a>submittable element</a> is a <dfn lt="candidates for constraint validation|candidate for constraint validation">candidate for constraint validation</dfn> except when a condition has <dfn lt="barred from constraint validation|barring it from constraint validation">barred the element from constraint validation</dfn>. (For example, an element is <a>barred from
  constraint validation</a> if it is an <{object}> element.)

  An element can have a <dfn>custom validity error message</dfn> defined. Initially, an element
  must have its <a>custom validity error message</a> set to the empty string. When its value
  is not the empty string, the element is <a>suffering from a custom error</a>. It can be set
  using the {{HTMLInputElement/setCustomValidity()}} method. The user
  agent should use the <a>custom validity error message</a> when alerting the user to the
  problem with the control.

  An element can be constrained in various ways. The following is the list of <dfn>validity
  states</dfn> that a form control can be in, making the control invalid for the purposes of
  constraint validation. (The definitions below are non-normative; other parts of this specification
  define more precisely when each state applies or does not.)

  : <dfn lt="suffer from being missing|suffering from being missing">Suffering from being missing</dfn>
  :: When a control has no <a for="forms">value</a> but has a <code>required</code> attribute
     (<{input}> <{input/required}>, <{textarea}> <{textarea/required}>); or, in the case of an
     element in a <i>radio button group</i>, any of the other elements in the group has a
     <code>required</code> attribute; or, for <{select}> elements, none of the <{option}>
     elements have their <a state for="option">selectedness</a> set (<{select}>
     <{select/required}>).

  : <dfn lt="suffer from a type mismatch|suffering from a type mismatch">Suffering from a type mismatch</dfn>
  :: When a control that allows arbitrary user input has a <a for="forms">value</a> that is not in
     the correct syntax (<a element-state for="input">E-mail</a>,
     <a element-state for="input">URL</a>).

  : <dfn lt="suffer from a pattern mismatch|suffering from a pattern mismatch">Suffering from a pattern mismatch</dfn>
  :: When a control has a <a for="forms">value</a> that doesn't satisfy the <{input/pattern}>
     attribute.

  : <dfn lt="suffer from being too long|suffering from being too long">Suffering from being too long</dfn>
  :: When a control has a <a for="forms">value</a> that is too long for the
     <a>form control <code>maxlength</code> attribute</a> (<{input}> <{input/maxlength}>,
     <{textarea}> <{textarea/maxlength}>).

  : <dfn lt="suffer from being too short|suffering from being too short">Suffering from being too short</dfn>
  :: When a control has a <a for="forms">value</a> that is too short for the
     <a>form control <code>minlength</code> attribute</a> (<{input}> <{input/minlength}>,
     <{textarea}> <{textarea/minlength}>).

  : <dfn lt="suffer from an underflow|suffering from an underflow">Suffering from an underflow</dfn>
  :: When a control has a <a for="forms">value</a> that is not the empty string and is too low for
     the <{input/min}> attribute.

  : <dfn lt="suffer from an overflow|suffering from an overflow">Suffering from an overflow</dfn>
  :: When a control has a <a for="forms">value</a> that is not the empty string and is too high for
     the <{input/max}> attribute.

  : <dfn lt="suffer from a step mismatch|suffering from a step mismatch">Suffering from a step mismatch</dfn>
  :: When a control has a <a for="forms">value</a> that doesn't fit the rules given by the
     <{input/step}> attribute.

  : <dfn lt="suffer from bad input|suffering from bad input">Suffering from bad input</dfn>
  :: When a control has incomplete input and the user agent does not think the user ought to be
     able to submit the form in its current state.

  : <dfn lt="suffer from a custom error|suffering from a custom error">Suffering from a custom error</dfn>
  :: When a control's <a>custom validity error message</a> (as set by the element's
     {{HTMLInputElement/setCustomValidity()}} method) is not the empty string.

  <p class="note">
    An element can still suffer from these states even when the element is disabled; thus these states can be represented in the DOM even
  if validating the form during submission wouldn't indicate a problem to the user.
  </p>

  An element <dfn lt="satisfy its constraints|satisfies its constraints|satisfy their constraints">satisfies its constraints</dfn> if it is not suffering
  from any of the above <a>validity states</a>.

  </div>

  <div class="impl">

<h5 id="sec-constraint-validation">Constraint validation</h5>

  When the user agent is required to <dfn lt="statically validating the constraints|statically validate the constraints">statically validate the constraints</dfn> of
  <{form}> element <var>form</var>, it must run the following steps, which return
  either a <i>positive</i> result (all the controls in the form are valid) or a <i>negative</i>
  result (there are invalid controls) along with a (possibly empty) list of elements that are
  invalid and for which no script has claimed responsibility:

  <ol>

    <li>Let <var>controls</var> be a list of all the <a>submittable elements</a> whose <a>form owner</a> is <var>form</var>, in <a>tree order</a>.</li>

    <li>Let <var>invalid controls</var> be an initially empty list of elements.</li>

    <li>

    For each element <var>field</var> in <var>controls</var>, in <a>tree
    order</a>, run the following substeps:

    <ol>

      <li>If <var>field</var> is not a <a>candidate for constraint validation</a>,
      then move on to the next element.</li>

      <li>Otherwise, if <var>field</var> <a>satisfies its
      constraints</a>, then move on to the next element.</li>

      <li>Otherwise, add <var>field</var> to <var>invalid
      controls</var>.</li>

    </ol>

    </li>

    <li>If <var>invalid controls</var> is empty, then return a <i>positive</i> result and
    abort these steps.</li>

    <li>Let <var>unhandled invalid controls</var> be an initially empty list of
    elements.</li>

    <li>

    For each element <var>field</var> in <var>invalid controls</var>, if any,
    in <a>tree order</a>, run the following substeps:

    <ol>

      <li><a>Fire a simple event</a> named <code>invalid</code> that
      is cancelable at <var>field</var>.</li>

      <li>If the event was not canceled, then add <var>field</var> to <var>unhandled invalid controls</var>.</li>

    </ol>

    </li>

    <li>Return a <i>negative</i> result with the list of elements in the <var>unhandled
    invalid controls</var> list.</li>

  </ol>

  If a user agent is to <dfn>interactively validate the constraints</dfn> of <{form}>
  element <var>form</var>, then the user agent must run the following steps:

  <ol>

    <li><a>Statically validate the constraints</a> of <var>form</var>, and let
    <var>unhandled invalid controls</var> be the list of elements returned if the result was
    <i>negative</i>.</li>

    <li>If the result was <i>positive</i>, then return that result and abort these steps.</li>

    <li>Report the problems with the constraints of at least one of the elements given in
    <var>unhandled invalid controls</var> to the user. User agents may focus one of those elements in
    the process, by running the <a>focusing steps</a> for that element, and may change the
    scrolling position of the document, or perform some other action that brings the element to the
    user's attention. User agents may report more than one constraint violation. User agents may
    coalesce related constraint violation reports if appropriate (e.g., if multiple radio buttons in a
    <a>group</a> are marked as required, only one error need be
    reported). If one of the controls is not <a>being rendered</a> (e.g., it has the <code>hidden</code> attribute set) then user agents may report a script
    error.</li>

    <li>Return a <i>negative</i> result.</li>

  </ol>

  </div>

<h5 id="the-constraint-validation-api">The <dfn>constraint validation API</dfn></h5>

  <dl class="domintro">

    <dt><var>element</var> . <code>willValidate</code></dt>

    <dd>

    Returns true if the element will be validated when the form is submitted; false
    otherwise.

    </dd>

    <dt><var>element</var> . {{HTMLInputElement/setCustomValidity(<var>message</var>)}}</dt>

    <dd>

    Sets a custom error, so that the element would fail to validate. The given message is the
    message to be shown to the user when reporting the problem to the user.

    If the argument is the empty string, clears the custom error.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>valueMissing</code></dt>

    <dd>

    Returns true if the element has no value but is a required field; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>typeMismatch</code></dt>

    <dd>

    Returns true if the element's value is not in the correct syntax; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>patternMismatch</code></dt>

    <dd>

    Returns true if the element's value doesn't match the provided pattern; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>tooLong</code></dt>

    <dd>

    Returns true if the element's value is longer than the provided maximum length; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>tooShort</code></dt>

    <dd>

    Returns true if the element's value, if it is not the empty string, is shorter than the
    provided minimum length; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>rangeUnderflow</code></dt>

    <dd>

    Returns true if the element's value is lower than the provided minimum; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>rangeOverflow</code></dt>

    <dd>

    Returns true if the element's value is higher than the provided maximum; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>stepMismatch</code></dt>

    <dd>

    Returns true if the element's value doesn't fit the rules given by the <{input/step}> attribute; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>badInput</code></dt>

    <dd>

    Returns true if the user has provided input in the user interface that the user agent is
    unable to convert to a value; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>customError</code></dt>

    <dd>

    Returns true if the element has a custom error; false otherwise.

    </dd>

    <dt><var>element</var> . <code>validity</code> . <code>valid</code></dt>

    <dd>

    Returns true if the element's value has no validity problems; false otherwise.

    </dd>

    <dt><var>valid</var> = <var>element</var> . <code>checkValidity</code>()</dt>

    <dd>

    Returns true if the element's value has no validity problems; false otherwise. Fires an <code>invalid</code> event at the element in the latter case.

    </dd>

    <dt><var>valid</var> = <var>element</var> . <code>reportValidity</code>()</dt>

    <dd>

    Returns true if the element's value has no validity problems; otherwise, returns false, fires
    an <code>invalid</code> event at the element, and (if the event isn't
    canceled) reports the problem to the user.

    </dd>

    <dt><var>element</var> . <code>validationMessage</code></dt>

    <dd>

    Returns the error message that would be shown to the user if the element was to be checked
    for validity.

    </dd>

  </dl>

  The
  <dfn attribute for="HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLFieldSetElement"><code>willValidate</code></dfn>
  IDL attribute must return
  true if an element is a <a>candidate for constraint validation</a>, and false otherwise
  (i.e., false if any conditions are <a>barring it from
  constraint validation</a>).

  The
  <dfn method for="HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLFieldSetElement" lt="setCustomValidity()|setCustomValidity(error)"><code>setCustomValidity(<var>message</var>)</code></dfn>,
  when invoked, must set the <a>custom validity error message</a> to the value of the given
  <var>message</var> argument.

  <div class="example">
    In the following example, a script checks the value of a form control each time it is edited,
    and whenever it is not a valid value, uses the {{HTMLInputElement/setCustomValidity()}} method to set an appropriate
    message.

    <pre highlight="html">
&lt;label&gt;Feeling: &lt;input name=f type="text" oninput="check(this)"&gt;&lt;/label&gt;
&lt;script&gt;
  function check(input) {
    if (input.value == "good" ||
        input.value == "fine" ||
        input.value == "tired") {
      input.setCustomValidity('"' + input.value + '" is not a feeling.');
   } else {
      // input is fine -- reset the error message
      input.setCustomValidity('');
    }
  }
&lt;/script&gt;
    </pre>

  </div>

  <div class="impl">

  The
  <dfn attribute for="HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLFieldSetElement"><code>validity</code></dfn>
  IDL attribute must return a {{ValidityState}} object that represents
  the <a>validity states</a> of the element.
  This object is <a>live</a>.

  <pre class="idl" data-highlight="webidl" dfn-for="ValidityState">
    interface ValidityState {
      readonly attribute boolean valueMissing;
      readonly attribute boolean typeMismatch;
      readonly attribute boolean patternMismatch;
      readonly attribute boolean tooLong;
      readonly attribute boolean tooShort;
      readonly attribute boolean rangeUnderflow;
      readonly attribute boolean rangeOverflow;
      readonly attribute boolean stepMismatch;
      readonly attribute boolean badInput;
      readonly attribute boolean customError;
      readonly attribute boolean valid;
    };
  </pre>

  A {{ValidityState}} object has the following attributes. On getting, they must return
  true if the corresponding condition given in the following list is true, and false otherwise.

  : <dfn attribute for="ValidityState"><code>valueMissing</code></dfn>
  :: The control is <a>suffering from being missing</a>.
  : <dfn attribute for="ValidityState"><code>typeMismatch</code></dfn>
  :: The control is <a>suffering from a type mismatch</a>.
  : <dfn attribute for="ValidityState"><code>patternMismatch</code></dfn>
  :: The control is <a>suffering from a pattern mismatch</a>.
  : <dfn attribute for="ValidityState"><code>tooLong</code></dfn>
  :: The control is <a>suffering from being too long</a>.
  : <dfn attribute for="ValidityState"><code>tooShort</code></dfn>
  :: The control is <a>suffering from being too short</a>.
  : <dfn attribute for="ValidityState"><code>rangeUnderflow</code></dfn>
  :: The control is <a>suffering from an underflow</a>.
  : <dfn attribute for="ValidityState"><code>rangeOverflow</code></dfn>
  :: The control is <a>suffering from an overflow</a>.
  : <dfn attribute for="ValidityState"><code>stepMismatch</code></dfn>
  :: The control is <a>suffering from a step mismatch</a>.
  : <dfn attribute for="ValidityState"><code>badInput</code></dfn>
  :: The control is <a>suffering from bad input</a>.
  : <dfn attribute for="ValidityState"><code>customError</code></dfn>
  :: The control is <a>suffering from a custom error</a>.
  : <dfn attribute for="ValidityState"><code>valid</code></dfn>
  :: None of the other conditions are true.

  When the
  <dfn method for="HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLFieldSetElement"><code>checkValidity()</code></dfn>
  method is
  invoked, if the element is a <a>candidate for constraint validation</a> and does not <a>satisfy its constraints</a>, the user agent must <a>fire a simple
  event</a> named <code>invalid</code> that is cancelable (but in this case
  has no default action) at the element and return false. Otherwise, it must only return true
  without doing anything else.

  When the
  <dfn method for="HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLFieldSetElement"><code>reportValidity()</code></dfn>
  method is
  invoked, if the element is a <a>candidate for constraint validation</a> and does not <a>satisfy its constraints</a>, the user agent must: <a>fire a simple
  event</a> named <code>invalid</code> that is cancelable at the element,
  and if that event is not canceled, report the problems with the constraints of that element to the
  user; then, return false. Otherwise, it must only return true without doing anything else. When
  reporting the problem with the constraints to the user, the user agent may run the <a>focusing
  steps</a> for that element, and may change the scrolling position of the document, or perform
  some other action that brings the element to the user's attention. User agents may report more
  than one constraint violation, if the element suffers from multiple problems at once. If the
  element is not <a>being rendered</a>, then the user agent may, instead of notifying the
  user, report a script error.

  The
  <dfn attribute for="HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLKeygenElement,HTMLOutputElement,HTMLFieldSetElement"><code>validationMessage</code></dfn>
  attribute must
  return the empty string if the element is not a <a>candidate for constraint validation</a>
  or if it is one but it <a>satisfies its constraints</a>; otherwise,
  it must return a suitably localized message that the user agent would show the user if this were
  the only form control with a validity constraint problem. If the user agent would not actually
  show a textual message in such a situation (e.g., it would show a graphical cue instead), then the
  attribute must return a suitably localized message that expresses (one or more of) the validity
  constraint(s) that the control does not satisfy. If the element is a <a>candidate for
  constraint validation</a> and is <a>suffering from a custom error</a>, then the
  <a>custom validity error message</a> should be present in the return value.

  </div>

<h5 id="constraints-security">Security</h5>

  Servers should not rely on client-side validation. Client-side validation can
  be intentionally bypassed by hostile users, and unintentionally bypassed by users of older user
  agents or automated tools that do not implement these features. The constraint validation features
  are only intended to improve the user experience, not to provide any kind of security
  mechanism.

<h4 id="forms-form-submission"><dfn lt="form submission|form submissions">Form submission</dfn></h4>

<h5 id="form-submission-introduction">Introduction</h5>

  <em>This section is non-normative.</em>

  When a form is submitted, the data in the form is converted into the structure specified by the
  <a>enctype</a>, and then sent to the destination specified by the
  <{form/action}> using the given <a for="forms">method</a>.

  For example, take the following form:

  <pre highlight="html">
&lt;form action="/find.cgi" method=get&gt;
  &lt;input type=text name=t&gt;
  &lt;input type=search name=q&gt;
  &lt;input type=submit&gt;
&lt;/form&gt;
    </pre>

  If the user types in "cats" in the first field and "fur" in the second, and then hits the
  submit button, then the user agent will load <code>/find.cgi?t=cats&amp;q=fur</code>.

  On the other hand, consider this form:

  <pre highlight="html">
&lt;form action="/find.cgi" method=post enctype="multipart/form-data"&gt;
  &lt;input type=text name=t&gt;
  &lt;input type=search name=q&gt;
  &lt;input type=submit&gt;
&lt;/form&gt;
    </pre>

  Given the same user input, the result on submission is quite different: the user agent instead
  does an HTTP POST to the given URL, with as the entity body something like the following text:

  <pre>------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="t"

cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"

fur
------kYFrd4jNJEgCervE--</pre>

  <div class="impl">

<h5 id="implicit-submission">Implicit submission</h5>

  A <{form}> element's <dfn>default button</dfn> is the first <a element-state for="input">submit button</a> in <a>tree order</a> whose <a>form
  owner</a> is that <{form}> element.

  If the user agent supports letting the user submit a form implicitly (for example, on some
  platforms hitting the "enter" key while a text field is <a>focused</a> implicitly submits the form), then
  doing so for a form whose <a>default button</a> has a defined <a>activation
  behavior</a> must cause the user agent to <a>run synthetic click activation steps</a> on
  that <a>default button</a>.

  <p class="note">
    Consequently, if the <a>default button</a> is disabled, the form is not submitted when such an implicit
  submission mechanism is used. (A button has no <a>activation behavior</a> when
  disabled.)
  </p>

  <p class="note">
    There are pages on the Web that are only usable if there is a way to implicitly
  submit forms, so user agents are strongly encouraged to support this.
  </p>

  If the form has
  no <a element-state for="input">submit button</a>, then the implicit submission
  mechanism must do nothing if the form has more than one <i>field that blocks implicit
  submission</i>, and must <a>submit</a> the <{form}>
  element from the <{form}> element itself otherwise.

  For the purpose of the previous paragraph, an element is a <i>field that blocks implicit
  submission</i> of a <{form}> element if it is an <{input}> element whose
  <a>form owner</a> is that <{form}> element and whose <{input/type}> attribute is in one of the following states:
  <a element-state for="input">Text</a>,
  <a element-state for="input">Search</a>,
  <a element-state for="input">URL</a>,
  <a element-state for="input">Telephone</a>,
  <a element-state for="input">E-mail</a>,
  <a element-state for="input">Password</a>,
  <a element-state for="input">Date and Time</a>,
  <a element-state for="input">Date</a>,
  <a element-state for="input">Month</a>,
  <a element-state for="input">Week</a>,
  <a element-state for="input">Time</a>,
  <a element-state for="input">Number</a>

  </div>

  <div class="impl">

<h5 id="form-submission-algorithm">Form submission algorithm</h5>

  When a <{form}> element <var>form</var> is <dfn lt="submit|submitted|form submission algorithm">submitted</dfn> from an element <var>submitter</var>
  (typically a button), optionally with a <var>submitted from {{HTMLFormElement/submit()}} method</var> flag set, the user agent must run the
  following steps:

  <ol>

    <li>Let <var>form document</var> be the <var>form</var>'s
    <a>node document</a>.</li>

    <li id="sandboxSubmitBlocked">If <var>form document</var> has no associated
    <a>browsing context</a> or its <a>active sandboxing flag set</a> has its
    <a>sandboxed forms browsing context flag</a> set, then abort these steps without doing
    anything.</li>

    <li>Let <var>form browsing context</var> be the <a>browsing context</a> of <var>form document</var>.</li>

    <li>If the <var>submitted from {{HTMLFormElement/submit()}}
    method</var> flag is not set, and the <var>submitter</var> element's <a>no-validate state</a> is false, then <a>interactively
    validate the constraints</a> of <var>form</var> and examine the result: if the result
    is negative (the constraint validation concluded that there were invalid fields and probably
    informed the user of this) then <a>fire a simple event</a> named <code>invalid</code> at the <var>form</var> element and then abort these
    steps.</li>

    <li>If the <var>submitted from {{HTMLFormElement/submit()}}
    method</var> flag is not set, then <a>fire a simple event</a> that bubbles and is
    cancelable named <code>submit</code>, at <var>form</var>. If the
    event's default action is prevented (i.e., if the event is canceled) then abort these steps.
    Otherwise, continue (effectively the default action is to perform the submission).</li>

    <li>Let <var>form data set</var> be the result of <a>constructing the form data set</a> for <var>form</var> in the context of <var>submitter</var>.</li>

    <li>Let <var>action</var> be the <var>submitter</var> element's <a>action</a>.</li>

    <li>

    If <var>action</var> is the empty string, let <var>action</var> be
    <a>the document's address</a> of the <var>form document</var>.

    </li>

    <li><a>Parse</a> the <a for="url">URL</a> <var>action</var>, relative to the <var>submitter</var> element's <a>node document</a>. If this fails,
    abort these steps.</li>

    <li>Let <var>action</var> be the <a>resulting URL string</a>.</li>

    <li>Let <var>action components</var> be the <a>resulting URL record</a>.</li>

    <li>Let <var>scheme</var> be the <a for="url">scheme</a> of
    the <a>resulting URL record</a>.</li>

    <li>Let <var>enctype</var> be the <var>submitter</var> element's <a>enctype</a>.</li>

    <li>Let <var>method</var> be the <var>submitter</var> element's <a for="forms">method</a>.</li>

    <li>Let <var>target</var> be the <var>submitter</var> element's <a>target</a>.</li>

    <li>If the user indicated a specific <a>browsing context</a> to use when submitting the
    form, then let <var>target browsing context</var> be that <a>browsing context</a>.
    Otherwise, apply <a>the rules for choosing a browsing context given a browsing context
    name</a> using <var>target</var> as the name and <var>form browsing
    context</var> as the context in which the algorithm is executed, and let <var>target
    browsing context</var> be the resulting <a>browsing context</a>.</li>

    <li>If <var>target browsing context</var> was created in the previous step, or,
    alternatively, if the <var>form document</var> has not yet <a>completely
    loaded</a> and the <var>submitted from {{HTMLFormElement/submit()}}
    method</var> flag is set, then let <var>replace</var> be true. Otherwise, let it be
    false.</li>

    <li>

    If the value of <var>method</var> is <a>dialog</a> then jump to the <a>submit
    dialog</a> steps.

    Otherwise, select the appropriate row in the table below based on the value of <var>scheme</var> as given by the first cell of each row. Then, select the appropriate cell
    on that row based on the value of <var>method</var> as given in the first cell of each
    column. Then, jump to the steps named in that cell and defined below the table.

    <table>
      <thead>
      <tr>
      <td>
      </td><th> <a for="http">GET</a>
      </th><th> <a>POST</a>
      </th></tr></thead><tbody>
      <tr>
      <th> <code>http</code>
      </th><td> <a>Mutate action URL</a>
      </td><td> <a>Submit as entity body</a>
      </td></tr><tr>
      <th> <code>https</code>
      </th><td> <a>Mutate action URL</a>
      </td><td> <a>Submit as entity body</a>
      </td></tr><tr>
      <th> <code>ftp</code>
      </th><td> <a>Get action URL</a>
      </td><td> <a>Get action URL</a>
      </td></tr><tr>
      <th> <code>javascript</code>
      </th><td> <a>Get action URL</a>
      </td><td> <a>Get action URL</a>
      </td></tr><tr>
      <th> <code>data</code>
      </th><td> <a>Get action URL</a>
      </td><td> <a>Post to data:</a>
      </td></tr><tr>
      <th> <code>mailto</code>
      </th><td> <a>Mail with headers</a>
      </td><td> <a>Mail as body</a>
    </td></tr></tbody></table>

    If <var>scheme</var> is not one of those listed in this table, then the behavior is
    not defined by this specification. User agents should, in the absence of another specification
    defining this, act in a manner analogous to that defined in this specification for similar
    schemes.

    Each <{form}> element has a <dfn>planned navigation</dfn>, which is either null or a
    <a>task</a>; when the <{form}> is first created, its
    <a>planned navigation</a> must be set to null. In the behaviors described below, when the
    user agent is required to <dfn>plan to navigate</dfn> to a particular resource <var>destination</var>, it must run the following steps:

    <ol>

      <li>If the <{form}> has a non-null <a>planned navigation</a>, remove it from
      its <a>task queue</a>.</li>

      <li>

      Let the <{form}>'s <a>planned navigation</a> be a new <a>task</a> that consists of running the following steps:

      <ol>

        <li>Let the <{form}>'s <a>planned navigation</a> be null.</li>

        <li><a>Navigate</a> <var>target browsing context</var> to
        <var>destination</var>. If <var>replace</var> is true, then <var>target browsing
        context</var> must be navigated with <a>replacement enabled</a>.

      </li></ol>

      For the purposes of this task, <var>target browsing context</var> and <var>replace</var> are
      the variables that were set up when the overall <a>form submission algorithm</a> was run, with
      their values as they stood when this <a>planned navigation</a> was <a>queued</a>.

      </li>

      <li>

      <a>Queue a task</a> that is the <{form}>'s new
      <a>planned navigation</a>.

      The <a>task source</a> for this task is the <a>DOM manipulation task
      source</a>.

      </li>

    </ol>

    The behaviors are as follows:

    : <dfn>Mutate action URL</dfn>
    :: Let <var>query</var> be the result of encoding the <var>form data set</var> using the
        <a><code>application/x-www-form-urlencoded</code> encoding algorithm</a>, interpreted as
        a US-ASCII string.

        Set <var>parsed action</var>'s <a for="url">query</a> component to <var>query</var>.

        Let <var>destination</var> be a new <a for="url">URL</a> formed by applying the
        <a>URL serializer</a> algorithm to <var>parsed action</var>.

        <a>Plan to navigate</a> to <var>destination</var>.

    : <dfn>Submit as entity body</dfn>
    :: Let <var>entity body</var> be the result of encoding the <var>form data set</var> using
        the <a>appropriate form encoding algorithm</a>.

        Let <var>MIME type</var> be determined as follows:

        : If <var>enctype</var> is <code>application/x-www-form-urlencoded</code>
        :: Let <var>MIME type</var> be "<code>application/x-www-form-urlencoded</code>".

        : If <var>enctype</var> is <code>multipart/form-data</code>
        :: Let <var>MIME type</var> be the concatenation of the string
            "<code>multipart/form-data;</code>", a U+0020 SPACE character,
            the string "<code>boundary=</code>",
            and the <a><code>multipart/form-data</code> boundary string</a> generated by the
            <a><code>multipart/form-data</code> encoding algorithm</a>.

        : If <var>enctype</var> is <code>text/plain</code>
        :: Let <var>MIME type</var> be "<code>text/plain</code>".

        Otherwise, <a>plan to navigate</a> to a new <a>request</a> whose <a for="url">URL</a> is
        <var>action</var>, <a for="request">method</a> is <var>method</var>, <a for="request">header list</a>
        consists of <code>Content-Type</code>/<var>MIME type</var>, and <a for="request">body</a> is
        <var>entity body</var>.

    : <dfn>Get action URL</dfn>
    :: <a>Plan to navigate</a> to <var>action</var>.

        <p class="note">The <var>form data set</var> is discarded.</p>

    : <dfn>Post to data:</dfn>
    :: Let <var>data</var> be the result of encoding the <var>form data
        set</var> using the <a>appropriate form encoding algorithm</a>.

        If <var>action</var> contains the string "<code>%%%%</code>"
        (four U+0025 PERCENT SIGN characters), then <a>percent encode</a> all bytes in
        <var>data</var> that, if interpreted as US-ASCII, are not characters in the URL
        <a>default encode set</a>, and then, treating the result as a US-ASCII string,
        <a>UTF-8 percent encode</a> all the U+0025 PERCENT SIGN characters in the resulting
        string and replace the first occurrence of "<code>%%%%</code>" in <var>action</var>
        with the resulting doubly-escaped string. [[!URL]]

        Otherwise, if <var>action</var> contains the string "<code>%%</code>"
        (two U+0025 PERCENT SIGN characters in a row, but not four), then
        <a>UTF-8 percent encode</a> all characters in <var>data</var> that, if interpreted as US-ASCII, are
        not characters in the URL <a>default encode set</a>, and then, treating the result as a
        US-ASCII string, replace the first occurrence of "<code>%%</code>" in <var>action</var>
        with the resulting escaped string. [[!URL]]

        <a>Plan to navigate</a> to the potentially modified <var>action</var> (which
        will be a <a scheme lt="data:"><code>data:</code> URL</a>).

    : <dfn>Mail with headers</dfn>
    :: Let <var>headers</var> be the resulting encoding the <var>form data set</var> using the
        <a><code>application/x-www-form-urlencoded</code> encoding algorithm</a>, interpreted as
        a US-ASCII string.

        Replace occurrences of U+002B PLUS SIGN characters (+) in <var>headers</var> with
        the string "<code>%20</code>".

        Let <var>destination</var> consist of all the characters from the first character
        in <var>action</var> to the character immediately before the first U+003F QUESTION
        MARK character (?), if any, or the end of the string if there are none.

        Append a single U+003F QUESTION MARK character (?) to <var>destination</var>.

        Append <var>headers</var> to <var>destination</var>.

        <a>Plan to navigate</a> to <var>destination</var>.

    : <dfn>Mail as body</dfn>
    :: Let <var>body</var> be the resulting of encoding the <var>form data set</var> using the
        <a>appropriate form encoding algorithm</a> and then
        <a lt="percent encode">percent encoding</a> all the bytes in the resulting byte string
        that, when interpreted as US-ASCII, are not characters in the URL <a>default encode
        set</a>. [[!URL]]

        Let <var>destination</var> have the same value as <var>action</var>.

        If <var>destination</var> does not contain a U+003F QUESTION MARK character (?),
        append a single U+003F QUESTION MARK character (?) to <var>destination</var>.
        Otherwise, append a single U+0026 AMPERSAND character (&amp;).

        Append the string "<code>body=</code>" to <var>destination</var>.

        Append <var>body</var>, interpreted as a US-ASCII string, to <var>destination</var>.

        <a>Plan to navigate</a> to <var>destination</var>.

    : <dfn>Submit dialog</dfn>
    :: Let <var>subject</var> be the nearest ancestor <{dialog}> element of <var>form</var>, if any.

        If there isn't one, or if it does not have an <code>open</code>
        attribute, do nothing. Otherwise, proceed as follows:

        If <var>submitter</var> is an <{input}> element whose <{input/type}> attribute is in
        the <a element-state for="input">image button</a> state, then let <var>result</var>
        be the string formed by concatenating the <a>selected coordinate</a>'s
        <var>x</var>-component, expressed as a base-ten number using <a>ASCII digits</a>, a
        U+002C COMMA character (,), and the <a>selected coordinate</a>'s <var>y</var>-component,
        expressed in the same way as the <var>x</var>-component.

        Otherwise, if <var>submitter</var> has a <a for="forms">value</a>, then let
        <var>result</var> be that <a for="forms">value</a>.

        Otherwise, there is no <var>result</var>.

        Then, <a>close the dialog</a> <var>subject</var>. If there is a <var>result</var>,
        let that be the return value.

    The <dfn>appropriate form encoding algorithm</dfn> is determined as follows:

    : If <var>enctype</var> is <code>application/x-www-form-urlencoded</code>
    :: Use the <a><code>application/x-www-form-urlencoded</code> encoding algorithm</a>.

    : If <var>enctype</var> is <code>multipart/form-data</code>
    :: Use the <a><code>multipart/form-data</code> encoding algorithm</a>.

    : If <var>enctype</var> is <code>text/plain</code>
    :: Use the <a><code>text/plain</code> encoding algorithm</a>.

    </li>

  </ol>

<h5 id="sec-constructing-the-form-data-set"><dfn>Constructing the form data set</dfn></h5>

  The algorithm to <dfn lt="during form submission|construct the form data set">construct the form data set</dfn>
  for a form <var>form</var> optionally in the context of a submitter <var>submitter</var> is as follows. If not specified otherwise, <var>submitter</var>
  is null.

  <ol>

    <li>Let <var>controls</var> be a list of all the <a>submittable elements</a> whose <a>form owner</a> is <var>form</var>, in <a>tree order</a>.</li>

    <li>Let the <var>form data set</var> be a list of name-value-type tuples, initially
    empty.</li>

    <li>

    <i>Loop</i>: For each element <var>field</var> in <var>controls</var>, in
    <a>tree order</a>, run the following substeps:

    <ol>

      <li>

      If any of the following conditions are met, then skip these substeps for this element:

      <ul>

        <li>The <var>field</var> element has a <{datalist}> element ancestor.</li>

        <li>The <var>field</var> element is disabled.</li>

        <li>The <var>field</var> element is a <a>button</a> but
        it is not <var>submitter</var>.</li>

        <li>The <var>field</var> element is an <{input}> element whose <{input/type}> attribute is in the <a element-state for="input">Checkbox</a> state and whose <a for="forms">checkedness</a> is false.</li>

        <li>The <var>field</var> element is an <{input}> element whose <{input/type}> attribute is in the <a element-state for="input">Radio Button</a> state and whose <a for="forms">checkedness</a> is false.</li>

        <li>The <var>field</var> element is not an <{input}> element whose <{input/type}> attribute is in the <a element-state for="input">image button</a> state, and either the <var>field</var> element does not have a <{formelements/name}> attribute
        specified, or its <{formelements/name}> attribute's value is the empty
        string.</li>

        <li>The <var>field</var> element is an <{object}> element that is not using
        a <a>plugin</a>.</li>

      </ul>

      Otherwise, process <var>field</var> as follows:

      </li>

      <li>Let <var>type</var> be the value of the <code>type</code> IDL
      attribute of <var>field</var>.</li>

      <li>

      If the <var>field</var> element is an <{input}> element whose <{input/type}> attribute is in the <a element-state for="input">image button</a> state, then run these further nested
      substeps:

      <ol>

        <li>If the <var>field</var> element has a <{formelements/name}>
        attribute specified and its value is not the empty string, let <var>name</var> be
        that value followed by a single U+002E FULL STOP character (.). Otherwise, let <var>name</var> be the empty string.</li>

        <li>Let <var>name<sub>x</sub></var> be the string consisting of the
        concatenation of <var>name</var> and a single U+0078 LATIN SMALL LETTER X character
        (x).</li>

        <li>Let <var>name<sub>y</sub></var> be the string consisting of the
        concatenation of <var>name</var> and a single U+0079 LATIN SMALL LETTER Y character
        (y).</li>

        <li>The <var>field</var> element is <var>submitter</var>, and before
        this algorithm was invoked the user <a>indicated a coordinate</a>. Let <var>x</var> be the <var>x</var>-component of the coordinate selected by the
        user, and let <var>y</var> be the <var>y</var>-component of the coordinate
        selected by the user.</li>

        <li>Append an entry to the <var>form data set</var> with the name <var>name<sub>x</sub></var>, the value <var>x</var>, and the type <var>type</var>.</li>

        <li>Append an entry to the <var>form data set</var> with the name <var>name<sub>y</sub></var> and the value <var>y</var>, and the type
        <var>type</var>.</li>

        <li>Skip the remaining substeps for this element: if there are any more elements in <var>controls</var>, return to the top of the <i>loop</i> step, otherwise, jump to the
        <i>end</i> step below.</li>

      </ol>

      </li>

      <li>Let <var>name</var> be the value of the <var>field</var> element's
      <{formelements/name}> attribute.</li>

      <li>If the <var>field</var> element is a <{select}> element, then for each
      <{option}> element in the <{select}> element's <a>list of options</a> whose <a state for="option">selectedness</a> is true and that is not disabled, append an entry to the <var>form data
      set</var> with the <var>name</var> as the name, the <a for="forms">value</a> of the <{option}> element as the value, and
      <var>type</var> as the type.</li>

      <li>

      Otherwise, if the <var>field</var> element is an <{input}> element whose
      <{input/type}> attribute is in the <a element-state for="input">Checkbox</a> state or the <a element-state for="input">Radio Button</a> state, then run these further nested
      substeps:

      <ol>

        <li>If the <var>field</var> element has a <code>value</code> attribute specified, then let <var>value</var>
        be the value of that attribute; otherwise, let <var>value</var> be the string "<code>on</code>".</li>

        <li>Append an entry to the <var>form data set</var> with <var>name</var>
        as the name, <var>value</var> as the value, and <var>type</var> as the
        type.</li>

      </ol>

      </li>

      <li>Otherwise, if the <var>field</var> element is an <{input}> element
      whose <{input/type}> attribute is in the <a element-state for="input">File Upload</a> state, then for each file <a>selected</a> in the <{input}> element,
      append an entry to the <var>form data set</var> with the <var>name</var> as
      the name, the file (consisting of the name, the type, and the body) as the value, and <var>type</var> as the type. If there are no <a>selected files</a>, then append an entry to the
      <var>form data set</var> with the <var>name</var> as the name, the empty
      string as the value, and <code>application/octet-stream</code> as the type.</li>

      <li>Otherwise, if the <var>field</var> element is an <{object}> element:
      try to obtain a <a>form submission</a> value from the <a>plugin</a>, and if that is successful,
      append an entry to the <var>form data set</var> with <var>name</var> as the
      name, the returned <a>form submission</a> value as the value, and the string "<code>object</code>" as the type.</li>

      <li>Otherwise, append an entry to the <var>form data set</var> with <var>name</var> as the name, the <a for="forms">value</a> of the <var>field</var> element as the value, and <var>type</var> as the type.</li>

      <li>

      If the element has a <code>dirname</code> attribute, and that
      attribute's value is not the empty string, then run these substeps:

      <ol>

        <li>Let <var>dirname</var> be the value of the element's <code>dirname</code> attribute.</li>

        <li>Let <var>dir</var> be the string "<a attr-value for="global/dir"><code>ltr</code></a>" if <a>the
        directionality</a> of the element is '<a state for="dir">ltr</a>', and "<a attr-value for="global/dir"><code>rtl</code></a>" otherwise (i.e., when <a>the directionality</a> of the element is
        '<a state for="dir">rtl</a>').</li>

        <li>Append an entry to the <var>form data set</var> with <var>dirname</var> as the name, <var>dir</var> as the value, and the string
        "<code>direction</code>" as the type.</li>

      </ol>

      <p class="note">
    An element can only have a <code>dirname</code>
      attribute if it is a <{textarea}> element or an <{input}> element whose
      <{input/type}> attribute is in either the <a element-state for="input">Text</a> state or the <a element-state for="input">Search</a> state.
  </p>

      </li>

    </ol>

    </li>

    <li>

    <i>End</i>: For the name of each entry in the <var>form data set</var>, and for the
    value of each entry in the <var>form data set</var> whose type is not "<code>file</code>" or "<code>textarea</code>", replace every occurrence of a U+000D
    CARRIAGE RETURN (CR) character not followed by a U+000A LINE FEED (LF) character, and every
    occurrence of a U+000A LINE FEED (LF) character not preceded by a U+000D CARRIAGE RETURN (CR)
    character, by a two-character string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED
    (CRLF) character pair.

    <p class="note">
    In the case of the <a for="forms">value</a> of
    <{textarea}> elements, this newline normalization is already performed during the
    conversion of the control's <a>raw value</a> into the
    control's <a for="forms">value</a> (which also performs any necessary line
    wrapping). In the case of <{input}> elements <{input/type}>
    attributes in the <a element-state for="input">File Upload</a> state, the value is not
    normalized.
  </p>

    </li>

    <li>Return the <var>form data set</var>.</li>

  </ol>

  </div>

<h5 id="selecting-a-form-submission-encoding">Selecting a <a>form submission</a> encoding</h5>

  If the user agent is to <dfn lt="picking an encoding for the form|pick an encoding for a form">pick an encoding for a form</dfn>,
  it must run the following steps:

  1. Let <var>encoding</var> be the <a>document's character encoding</a>.
  2. If the <code>form</code> element has an <code>accept-charset</code> attribute, set
      <var>encoding</var> to the return value of running these substeps:
      1. Let <var>input</var> be the value of the <code>form</code> element's
          <code>accept-charset</code> attribute.
      2. Let <var>candidate encoding labels</var> be the result of
          <a lt="split a string on spaces">splitting <var>input</var> on spaces</a>.
      3. Let <var>candidate encodings</var> be an empty list of <a>character encodings</a>.
      4. For each token in <var>candidate encoding labels</var> in turn (in the order in which they
          were found in <var>input</var>), <a>get an encoding</a> for the token and, if this does
          not result in failure, append the <a>encoding</a> to <var>candidate encodings</var>.
      5. If <var>candidate encodings</var> is empty, return <a>UTF-8</a>.
      6. Return the first encoding in <var>candidate encodings</var>.
  3. Return the result of <a>getting an output encoding</a> from <var>encoding</var>.

<h5 id="urlencoded-form-data">URL-encoded form data</h5>

  See the WHATWG URL standard for details on <code>application/x-www-form-urlencoded</code>. [[!URL]]

  The <dfn><code>application/x-www-form-urlencoded</code> encoding algorithm</dfn> is as follows:

  1. Let <var>encoding</var> be the result of <a>picking an encoding for the form</a>.
  2. Let <var>serialized</var> be the result of running the
      <a><code>application/x-www-form-urlencoded</code> serializer</a> given
      <var>form data set</var> and <var>encoding</var>.
  3. Return the result of <a>encoding</a> <var>serialized</var>.

<h5 id="multipart-form-data">Multipart form data</h5>

  <div class="impl">

  The <dfn><code>multipart/form-data</code> encoding algorithm</dfn> is as follows:

  <ol>

    <li>Let <var>result</var> be the empty string.</li>

    <li>

    If the algorithm was invoked with an explicit character encoding, let the selected character
    encoding be that encoding. (This algorithm is used by other specifications, which provide an
    explicit character encoding to avoid the dependency on the <{form}> element described
    in the next paragraph.)

    Otherwise, if the <{form}> element has an <{form/accept-charset}> attribute, let the selected character
    encoding be the result of <a>picking an encoding for the form</a>.

    Otherwise, if the <{form}> element has no <{form/accept-charset}> attribute, but the <a>document's
    character encoding</a> is an <a>ASCII-compatible encoding</a>, then that is
    the selected character encoding.

    Otherwise, let the selected character encoding be UTF-8.

    </li>

    <li>Let <var>charset</var> be the name of the
    selected <a>character encoding</a>.</li>

    <li>

    For each entry in the <var>form data set</var>, perform these substeps:

    <ol>

      <li>If the entry's name is "<code>_charset_</code>" and its
      type is "<code>hidden</code>", replace its value with <var>charset</var>.</li>

      <li>For each character in the entry's name and value that cannot be expressed using the
      selected character encoding, replace the character by a string consisting of a U+0026 AMPERSAND
      character (&amp;), a U+0023 NUMBER SIGN character (#), one or more <a>ASCII digits</a>
      representing the Unicode code point of the character in base ten, and finally a U+003B
      SEMICOLON character (;).</li>

    </ol>

    </li>

    <li>

    Encode the (now mutated) <var>form data set</var> using the rules described by RFC 7578,
    <cite>Returning Values from Forms: <code>multipart/form-data</code></cite>, and return
    the resulting byte stream. [[!RFC7578]]

    Each entry in the <var>form data set</var> is a <i>field</i>, the name of the entry is the
    <i>field name</i> and the value of the entry is the <i>field value</i>.

    The order of parts must be the same as the order of fields in the <var>form data set</var>.
    Multiple entries with the same name must be treated as distinct fields.

    The parts of the generated <code>multipart/form-data</code> resource that correspond to
    non-file fields must not have a <code>Content-Type</code> header specified. Their names and
    values must be encoded using the character encoding selected above.

    File names included in the generated <code>multipart/form-data</code> resource (as part of
    file fields) must use the character encoding selected above, though the precise name may be
    approximated if necessary (e.g., newlines could be removed from file names, quotes could be
    changed to "%22", and characters not expressible in the selected character encoding could be
    replaced by other characters).

    The boundary used by the user agent in generating the return value of this algorithm is the
    <dfn><code>multipart/form-data</code> boundary string</dfn>. (This value is used to generate the
    MIME type of the <a>form submission</a> payload generated by this algorithm.)

    </li>

  </ol>

  </div>

  For details on how to interpret <code>multipart/form-data</code> payloads, see RFC 7578. [[!RFC7578]]

<h5 id="plain-text-form-data">Plain text form data</h5>

  <div class="impl">

  The <dfn><code>text/plain</code> encoding algorithm</dfn> is as follows:

  <ol>

    <li>Let <var>result</var> be the empty string.</li>

    <li>Let <var>encoding</var> be the result of <a>picking an encoding for the form</a>.

    <li>Let <var>charset</var> be the name of <var>encoding</var>.</li>

    <li>If the entry's name is "<code>_charset_</code>" and its type
    is "<code>hidden</code>", replace its value with <var>charset</var>.</li>

    <li>If the entry's type is "<code>file</code>", replace its value with the file's
    name only.</li>

    <li>

    For each entry in the <var>form data set</var>, perform these substeps:

    <ol>

      <li>Append the entry's name to <var>result</var>.</li>

      <li>Append a single U+003D EQUALS SIGN character (=) to <var>result</var>.</li>

      <li>Append the entry's value to <var>result</var>.</li>

      <li>Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF) character pair to <var>result</var>.</li>

    </ol>

    </li>

    <li>Return the result of <a>encoding</a> <var>result</var> using
    <var>encoding</var>.</li>

  </ol>

  </div>

  Payloads using the <code>text/plain</code> format are intended to be human readable. They are
  not reliably interpretable by computer, as the format is ambiguous (for example, there is no way
  to distinguish a literal newline in a value from the newline at the end of the value).

  <div class="impl">

<h4 id="resetting-a-form">Resetting a form</h4>

  When a <{form}> element <var>form</var> is <dfn>reset</dfn>, the user agent must <a>fire a simple event</a> named
  <code>reset</code>, that bubbles and is cancelable, at <var>form</var>, and then, if that event is not canceled, must invoke the <a>reset algorithm</a> of each <a>resettable element</a> whose <a>form owner</a> is <var>form</var>.

  When the <a>reset</a> algorithm is invoked by the <code>reset()</code> method, the <code>reset</code> event
  fired by the <a>reset</a> algorithm must not be <a>trusted</a>.

  Each <a>resettable element</a> defines its own <dfn>reset algorithm</dfn>. Changes made to form controls as part of
  these algorithms do not count as changes caused by the user (and thus, e.g., do not cause <code>input</code> events to fire).

  </div>

</section>