HTML

Living Standard — Last Updated 21 May 2022

1. 1. 1. 4.10.17 Form control infrastructure
         1. 4.10.17.1 A form control's value
         2. 4.10.17.2 可变性
         3. 4.10.17.3 Association of controls and forms
      2. 4.10.18 表单控件通用的属性
         1. 4.10.18.1 Naming form controls: the name attribute
         2. 4.10.18.2 提交元素 element directionality: the dirname attribute
         3. 4.10.18.3 Limiting user input length: the maxlength attribute
         4. 4.10.18.4 Setting minimum input length requirements: the minlength attribute
         5. 4.10.18.5 Enabling and disabling form controls: the disabled attribute
         6. 4.10.18.6 Form submission attributes
         7. 4.10.18.7 自动填充
            1. 4.10.18.7.1 Autofilling form controls: the autocomplete attribute
            2. 4.10.18.7.2 Processing model
      3. 4.10.19 APIs for the text control selections
      4. 4.10.20 约束
         1. 4.10.20.1 定义
         2. 4.10.20.2 Constraint validation
         3. 4.10.20.3 The constraint validation API
         4. 4.10.20.4 安全性
      5. 4.10.21 表单提交
         1. 4.10.21.1 概述
         2. 4.10.21.2 隐式提交
         3. 4.10.21.3 Form submission algorithm
         4. 4.10.21.4 Constructing the entry list
         5. 4.10.21.5 Selecting a form submission encoding
         6. 4.10.21.6 URL 编码的表单数据
         7. 4.10.21.7 Multipart form data
         8. 4.10.21.8 Plain text form data
         9. 4.10.21.9 The SubmitEvent interface
         10. 4.10.21.10 The FormDataEvent interface
      6. 4.10.22 表单重置

4.10.17 Form control infrastructure

4.10.17.1 A form control's value

Most form controls have a value and a checkedness. (The latter is only used by input elements.) These are used to describe how the user interacts with the control.

A control's value is its internal state. As such, it might not match the user's current input.

For instance, if a user enters the word "three" into a numeric field that expects digits, the user's input would be the string "three" but the control's value would remain unchanged. Or, if a user enters the email address "  awesome@example.com" (with leading whitespace) into an email field, the user's input would be the string "  awesome@example.com" but the browser's UI for email fields might translate that into a value of "awesome@example.com" (without the leading whitespace).

input and textarea elements have a dirty value flag. This is used to track the interaction between the value and default value. If it is false, value mirrors the default value. If it is true, the default value is ignored.

To define the behavior of constraint validation in the face of the input element's multiple attribute, input elements can also have separately defined values.

To define the behavior of the maxlength and minlength attributes, as well as other APIs specific to the textarea element, all form control with a value also have an algorithm for obtaining an API value. By default this algorithm is to simply return the control's value.

The select element does not have a value; the selectedness of its option elements is what is used instead.

4.10.17.2 可变性

表单控件可以指定为 可变的。

这决定了（本规范中有些定义和要求依赖于元素是否被指定为可变的） 用户是否可以修改表单控件的 值 或 选中状态，或控件是否可以自动填充。

4.10.17.3 Association of controls and forms

A form-associated element can have a relationship with a form element, which is called the element's form owner. If a form-associated element is not associated with a form element, its form owner is said to be null.

A form-associated element has an associated parser inserted flag.

A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but, if it is listed, may have a form attribute specified to override this.

This feature allows authors to work around the lack of support for nested form elements.

If a listed form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's tree.

The rules in this section are complicated by the fact that although conforming documents or trees will never contain nested form elements, it is quite possible (e.g., using a script that performs DOM manipulation) to generate trees that have such nested elements. They are also complicated by rules in the HTML parser that, for historical reasons, can result in a form-associated element being associated with a form element that is not its ancestor.

When a form-associated element is created, its form owner must be initialized to null (no owner).

When a form-associated element is to be associated with a form, its form owner must be set to that form.

When a form-associated element or one of its ancestors is inserted, then:

1. If the form-associated element's parser inserted flag is set, then return.

2. Reset the form owner of the form-associated element.

When a form-associated element or one of its ancestors is removed, then:

1. If the form-associated element has a form owner and the form-associated element and its form owner are no longer in the same tree, then reset the form owner of the form-associated element.

When a listed form-associated element's form attribute is set, changed, or removed, then the user agent must reset the form owner of that element.

When a listed form-associated element has a form attribute and the ID of any of the elements in the tree changes, then the user agent must reset the form owner of that form-associated element.

When a listed form-associated element has a form attribute and an element with an ID is inserted into or removed from the Document, then the user agent must reset the form owner of that form-associated element.

When the user agent is to reset the form owner of a form-associated element element, it must run the following steps:

1. Unset element's parser inserted flag.

2. If all of the following conditions are true

   • element's form owner is not null
   • element is not listed or its form content attribute is not present
   • element's form owner is its nearest form element ancestor after the change to the ancestor chain

   then do nothing, and return.

3. Set element's form owner to null.

4. If element is listed, has a form content attribute, and is connected, then:

   1. If the first element in element's tree, in tree order, to have an ID that is identical to element's form content attribute's value, is a form element, then associate the element with that form element.

5. Otherwise, if element has an ancestor form element, then associate element with the nearest such ancestor form element.

...
 <form id="a">
  <div id="b"></div>
 </form>
 <script>
  document.getElementById('b').innerHTML =
     '<table><tr><td></form><form id="c"><input id="d"></table>' +
     '<input id="e">';
 </script>
...

element . form

✔MDN

HTMLObjectElement/form

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

HTMLSelectElement/form

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

Returns the element's form owner.

Returns null if there isn't one.

Listed form-associated elements except for form-associated custom elements have a form IDL attribute, which, on getting, must return the element's form owner, or null if there isn't one.

Form-associated custom elements don't have form IDL attribute. Instead, their ElementInternals object has a form IDL attribute. On getting, it must throw a "NotSupportedError" DOMException if the target element is not a form-associated custom element. Otherwise, it must return the element's form owner, or null if there isn't one.

4.10.18 表单控件通用的属性

4.10.18.1 Naming form controls: the name attribute

The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string or isindex.

A number of user agents historically implemented special support for first-in-form text controls with the name isindex, and this specification previously defined related user agent requirements for it. However, some user agents subsequently dropped that special support, and the related requirements were removed from this specification. So, to avoid problematic reinterpretations in legacy user agents, the name isindex is no longer allowed.

Other than isindex, any non-empty value for name is allowed. An ASCII case-insensitive match for the name _charset_ is special: if used as the name of a Hidden control with no value attribute, then during submission the value attribute is automatically given a value consisting of the submission character encoding.

The name IDL attribute must reflect the name content attribute.

let form = document.createElement("form");
let input = document.createElement("input");
form.appendChild(input);

form.method;           // => "get"
input.name = "method"; // DOM clobbering occurs here
form.method === input; // => true

4.10.18.2 提交元素 element directionality: the dirname attribute

表单控件元素上的 dirname 属性 会让元素提交 文字方向， 并且给出 表单提交 时包含这个值的字段名。 如果指定了这个属性，它的值不得为空字符串。

<form action="addcomment.cgi" method=post>
 <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
 <p><button name="mode" type=submit value="add">Post Comment</button></p>
</form>

comment=Hello&comment.dir=ltr&mode=add

comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtl&mode=add

4.10.18.3 Limiting user input length: the maxlength attribute

A form control maxlength attribute, controlled by the dirty value flag, declares a limit on the number of characters a user can input. The "number of characters" is measured using length and, in the case of textarea elements, with all newlines normalized to a single character (as opposed to CRLF pairs).

If an element has its form control maxlength attribute specified, the attribute's value must be a valid non-negative integer. If the attribute is specified and applying the rules for parsing non-negative integers to its value results in a number, then that number is the element's maximum allowed value length. If the attribute is omitted or parsing its value results in an error, then there is no maximum allowed value length.

Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the length of the element's API value is greater than the element's maximum allowed value length, then the element is suffering from being too long.

User agents may prevent the user from causing the element's API value to be set to a value whose length is greater than the element's maximum allowed value length.

In the case of textarea elements, the API value and value differ. In particular, newline normalization is applied before the maximum allowed value length is checked (whereas the textarea wrapping transformation is not applied).

4.10.18.4 Setting minimum input length requirements: the minlength attribute

A form control minlength attribute, controlled by the dirty value flag, declares a lower bound on the number of characters a user can input. The "number of characters" is measured using length and, in the case of textarea elements, with all newlines normalized to a single character (as opposed to CRLF pairs).

The minlength attribute does not imply the required attribute. If the form control has no required attribute, then the value can still be omitted; the minlength attribute only kicks in once the user has entered a value at all. If the empty string is not allowed, then the required attribute also needs to be set.

If an element has its form control minlength attribute specified, the attribute's value must be a valid non-negative integer. If the attribute is specified and applying the rules for parsing non-negative integers to its value results in a number, then that number is the element's minimum allowed value length. If the attribute is omitted or parsing its value results in an error, then there is no minimum allowed value length.

If an element has both a maximum allowed value length and a minimum allowed value length, the minimum allowed value length must be smaller than or equal to the maximum allowed value length.

Constraint validation: If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.

<form action="/events/menu.cgi" method="post">
 <p><label>Name of Event: <input required minlength=5 maxlength=50 name=event></label></p>
 <p><label>Describe what you would like for breakfast, if anything:
    <textarea name="breakfast" minlength="10"></textarea></label></p>
 <p><label>Describe what you would like for lunch, if anything:
    <textarea name="lunch" minlength="10"></textarea></label></p>
 <p><label>Describe what you would like for dinner, if anything:
    <textarea name="dinner" minlength="10"></textarea></label></p>
 <p><input type=submit value="Submit Request"></p>
</form>

4.10.18.5 Enabling and disabling form controls: the disabled attribute

The disabled content attribute is a boolean attribute.

The disabled attribute for option elements and the disabled attribute for optgroup elements are defined separately.

A form control is disabled if any of the following conditions are met:

1. The element is a button, input, select, textarea, or form-associated custom element, and the disabled attribute is specified on this element (regardless of its value).
2. The element is a descendant of a fieldset element whose disabled attribute is specified, and is not a descendant of that fieldset element's first legend element child, if any.

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

Constraint validation: If an element is disabled, it is barred from constraint validation.

The disabled IDL attribute must reflect the disabled content attribute.

4.10.18.6 Form submission attributes

Attributes for form submission can be specified both on form elements and on submit buttons (elements that represent buttons that submit forms, e.g. an input element whose type attribute is in the Submit Button state).

The attributes for form submission that may be specified on form elements are action, enctype, method, novalidate, and target.

The corresponding attributes for form submission that may be specified on submit buttons are formaction, formenctype, formmethod, formnovalidate, and formtarget. When omitted, they default to the values given on the corresponding attributes on the form element.

The action and formaction content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces.

The action of an element is the value of the element's formaction attribute, if the element is a submit button and has such an attribute, or the value of its form owner's action attribute, if it has one, or else the empty string.

The method and formmethod content attributes are enumerated attributes with the following keywords and states:

• The keyword get, mapping to the state GET, indicating the HTTP GET method.
• The keyword post, mapping to the state POST, indicating the HTTP POST method.
• The keyword dialog, mapping to the state dialog, indicating that submitting the form is intended to close the dialog box in which the form finds itself, if any, and otherwise not submit.

The method attribute's invalid value default and missing value default are both the GET state.

The formmethod attribute's invalid value default is the GET state. It has no missing value default.

The method of an element is one of those states. If the element is a submit button and has a formmethod attribute, then the element's method is that attribute's state; otherwise, it is the form owner's method attribute's state.

<form method="get" action="/search.cgi">
 <p><label>Search terms: <input type=search name=q></label></p>
 <p><input type=submit></p>
</form>

<form method="post" action="/post-message.cgi">
 <p><label>Message: <input type=text name=m></label></p>
 <p><input type=submit value="Submit message"></p>
</form>

<dialog id="ship">
 <form method=dialog>
  <p>A ship has arrived in the harbour.</p>
  <button type=submit value="board">Board the ship</button>
  <button type=submit value="call">Call to the captain</button>
 </form>
</dialog>
<script>
 var ship = document.getElementById('ship');
 ship.showModal();
 ship.onclose = function (event) {
   if (ship.returnValue == 'board') {
     // ...
   } else {
     // ...
   }
 };
</script>

The enctype and formenctype content attributes are enumerated attributes with the following keywords and states:

• The "application/x-www-form-urlencoded" keyword and corresponding state.
• The "multipart/form-data" keyword and corresponding state.
• The "text/plain" keyword and corresponding state.

The enctype attribute's invalid value default and missing value default are both the application/x-www-form-urlencoded state.

The formenctype attribute's invalid value default is the application/x-www-form-urlencoded state. It has no missing value default.

The enctype of an element is one of those three states. If the element is a submit button and has a formenctype attribute, then the element's enctype is that attribute's state; otherwise, it is the form owner's enctype attribute's state.

The target and formtarget content attributes, if specified, must have values that are valid browsing context names or keywords.

The novalidate and formnovalidate content attributes are boolean attributes. If present, they indicate that the form is not to be validated during submission.

The no-validate state of an element is true if the element is a submit button and the element's formnovalidate attribute is present, or if the element's form owner's novalidate attribute is present, and false otherwise.

<form action="editor.cgi" method="post">
 <p><label>Name: <input required name=fn></label></p>
 <p><label>Essay: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="Submit essay"></p>
 <p><input type=submit formnovalidate name=save value="Save essay"></p>
 <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>

The action IDL attribute must reflect the content attribute of the same name, except that on getting, when the content attribute is missing or its value is the empty string, the element's node document's URL must be returned instead. The target IDL attribute must reflect the content attribute of the same name. The method and enctype IDL attributes must reflect the respective content attributes of the same name, limited to only known values. The encoding IDL attribute must reflect the enctype content attribute, limited to only known values. The noValidate IDL attribute must reflect the novalidate content attribute. The formAction IDL attribute must reflect the formaction content attribute, except that on getting, when the content attribute is missing or its value is the empty string, the element's node document's URL must be returned instead. The formEnctype IDL attribute must reflect the formenctype content attribute, limited to only known values. The formMethod IDL attribute must reflect the formmethod content attribute, limited to only known values. The formNoValidate IDL attribute must reflect the formnovalidate content attribute. The formTarget IDL attribute must reflect the formtarget content attribute.

4.10.18.7 自动填充

4.10.18.7.1 Autofilling form controls: the autocomplete attribute

User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. The autocomplete 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 autofill expectation mantle, the autocomplete attribute describes what input is expected from users. When wearing the autofill anchor mantle, the autocomplete attribute describes the meaning of the given value.

On an input element whose type attribute is in the Hidden state, the autocomplete attribute wears the autofill anchor mantle. In all other cases, it wears the autofill expectation mantle.

When wearing the autofill expectation mantle, the autocomplete attribute, if specified, must have a value that is an ordered set of space-separated tokens consisting of either a single token that is an ASCII case-insensitive match for the string "off", or a single token that is an ASCII case-insensitive match for the string "on", or autofill detail tokens.

When wearing the autofill anchor mantle, the autocomplete attribute, if specified, must have a value that is an ordered set of space-separated tokens consisting of just autofill detail tokens (i.e. the "on" and "off" keywords are not allowed).

Autofill detail tokens are the following, in the order given below:

1. Optionally, a token whose first eight characters are an ASCII case-insensitive match for the string "section-", meaning that the field belongs to the named group.

   For example, if there are two shipping addresses in the form, then they could be marked up as:

   <fieldset>
    <legend>Ship the blue gift to...</legend>
    <p> <label> Address:     <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label>
    <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level2"> </label>
    <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
   </fieldset>
   <fieldset>
    <legend>Ship the red gift to...</legend>
    <p> <label> Address:     <textarea name=ra autocomplete="section-red shipping street-address"></textarea> </label>
    <p> <label> City:        <input name=rc autocomplete="section-red shipping address-level2"> </label>
    <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping postal-code"> </label>
   </fieldset>

2. Optionally, a token that is an ASCII case-insensitive match for one of the following strings:

   • "shipping", meaning the field is part of the shipping address or contact information
   • "billing", meaning the field is part of the billing address or contact information

3. Either of the following two options:

   • A token that is an ASCII case-insensitive match for one of the following autofill field names, excluding those that are inappropriate for the control:

     • "name"
     • "honorific-prefix"
     • "given-name"
     • "additional-name"
     • "family-name"
     • "honorific-suffix"
     • "nickname"
     • "username"
     • "new-password"
     • "current-password"
     • "one-time-code"
     • "organization-title"
     • "organization"
     • "street-address"
     • "address-line1"
     • "address-line2"
     • "address-line3"
     • "address-level4"
     • "address-level3"
     • "address-level2"
     • "address-level1"
     • "country"
     • "country-name"
     • "postal-code"
     • "cc-name"
     • "cc-given-name"
     • "cc-additional-name"
     • "cc-family-name"
     • "cc-number"
     • "cc-exp"
     • "cc-exp-month"
     • "cc-exp-year"
     • "cc-csc"
     • "cc-type"
     • "transaction-currency"
     • "transaction-amount"
     • "language"
     • "bday"
     • "bday-day"
     • "bday-month"
     • "bday-year"
     • "sex"
     • "url"
     • "photo"

     (See the table below for descriptions of these values.)

   • The following, in the given order:

     1. Optionally, a token that is an ASCII case-insensitive match for one of the following strings:

        • "home", meaning the field is for contacting someone at their residence
        • "work", meaning the field is for contacting someone at their workplace
        • "mobile", meaning the field is for contacting someone regardless of location
        • "fax", meaning the field describes a fax machine's contact details
        • "pager", meaning the field describes a pager's or beeper's contact details

     2. A token that is an ASCII case-insensitive match for one of the following autofill field names, excluding those that are inappropriate for the control:

        • "tel"
        • "tel-country-code"
        • "tel-national"
        • "tel-area-code"
        • "tel-local"
        • "tel-local-prefix"
        • "tel-local-suffix"
        • "tel-extension"
        • "email"
        • "impp"

        (See the table below for descriptions of these values.)

As noted earlier, the meaning of the attribute and its keywords depends on the mantle that the attribute is wearing.

When wearing the autofill expectation mantle...

The "off" 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 UA to prefill the value for them; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.

The "on" 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 autofill field 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 autocomplete attribute is omitted, the default value corresponding to the state of the element's form owner's autocomplete attribute is used instead (either "on" or "off"). If there is no form owner, then the value "on" is used.

When wearing the autofill anchor mantle...

The autofill field 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.

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.

<form method=post action="step2.cgi">
 <input type=hidden autocomplete=transaction-currency value="CHF">
 <input type=hidden autocomplete=transaction-amount value="15.00">
 <p><label>Credit card number: <input type=text inputmode=numeric autocomplete=cc-number></label>
 <p><label>Expiry Date: <input type=month autocomplete=cc-exp></label>
 <p><input type=submit value="Continue...">
</form>

The autofill field 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 ("cc-exp"), or as two fields, one giving the month ("cc-exp-month") and one the year ("cc-exp-year"). In such cases, the names of the broader fields cover multiple rows, in which the narrower fields are defined.

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 first name and a surname), many cultures put the family name first and the given name second, and many others simply have one name (a mononym). Having a single field is therefore more flexible.

Some fields are only appropriate for certain form controls. An autofill field name is inappropriate for a control if the control does not belong to the group listed for that autofill field in the fifth column of the first row describing that autofill field in the table below. What controls fall into each group is described below the table.

The groups correspond to controls as follows:

Text

input elements with a type attribute in the Hidden state

input elements with a type attribute in the Text state

input elements with a type attribute in the Search state

textarea elements

select elements

Multiline

input elements with a type attribute in the Hidden state

textarea elements

select elements

Password

input elements with a type attribute in the Hidden state

input elements with a type attribute in the Text state

input elements with a type attribute in the Search state

input elements with a type attribute in the Password state

textarea elements

select elements

URL

input elements with a type attribute in the Hidden state

input elements with a type attribute in the Text state

input elements with a type attribute in the Search state

input elements with a type attribute in the URL state

textarea elements

select elements

Username

input elements with a type attribute in the Hidden state

input elements with a type attribute in the Text state

input elements with a type attribute in the Search state

input elements with a type attribute in the Email state

textarea elements

select elements

Tel

input elements with a type attribute in the Hidden state

input elements with a type attribute in the Text state

input elements with a type attribute in the Search state

input elements with a type attribute in the Telephone state

textarea elements

select elements

Numeric

input elements with a type attribute in the Hidden state

input elements with a type attribute in the Text state

input elements with a type attribute in the Search state

input elements with a type attribute in the Number state

textarea elements

select elements

Month

input elements with a type attribute in the Hidden state

input elements with a type attribute in the Text state

input elements with a type attribute in the Search state

input elements with a type attribute in the Month state

textarea elements

select elements

Date

input elements with a type attribute in the Hidden state

input elements with a type attribute in the Text state

input elements with a type attribute in the Search state

input elements with a type attribute in the Date state

textarea elements

select elements

Address levels: The "address-level1" – "address-level4" 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 "address-level1" 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).

4.10.18.7.2 Processing model

Each input element to which the autocomplete attribute applies, each select element, and each textarea element, has an autofill hint set, an autofill scope, an autofill field name, and an IDL-exposed autofill value.

The autofill field name specifies the specific kind of data expected in the field, e.g. "street-address" or "cc-exp".

The autofill hint set identifies what address or contact information type the user agent is to look at, e.g. "shipping fax" or "billing".

The autofill scope identifies the group of fields whose information concerns the same subject, and consists of the autofill hint set with, if applicable, the "section-*" prefix, e.g. "billing", "section-parent shipping", or "section-child shipping home".

These values are defined as the result of running the following algorithm:

1. If the element has no autocomplete attribute, then jump to the step labeled default.

2. Let tokens be the result of splitting the attribute's value on ASCII whitespace.

3. If tokens is empty, then jump to the step labeled default.

4. Let index be the index of the last token in tokens.

5. If the indexth token in tokens is not an ASCII case-insensitive match for one of the tokens given in the first column of the following table, or if the number of tokens in tokens 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 default. Otherwise, let field be the string given in the cell of the first column of the matching row, and let category be the value of the cell in the third column of that same row.

   Token	Maximum number of tokens	Category
   "off"	1	Off
   "on"	1	Automatic
   "name"	3	Normal
   "honorific-prefix"	3	Normal
   "given-name"	3	Normal
   "additional-name"	3	Normal
   "family-name"	3	Normal
   "honorific-suffix"	3	Normal
   "nickname"	3	Normal
   "organization-title"	3	Normal
   "username"	3	Normal
   "new-password"	3	Normal
   "current-password"	3	Normal
   "one-time-code"	3	Normal
   "organization"	3	Normal
   "street-address"	3	Normal
   "address-line1"	3	Normal
   "address-line2"	3	Normal
   "address-line3"	3	Normal
   "address-level4"	3	Normal
   "address-level3"	3	Normal
   "address-level2"	3	Normal
   "address-level1"	3	Normal
   "country"	3	Normal
   "country-name"	3	Normal
   "postal-code"	3	Normal
   "cc-name"	3	Normal
   "cc-given-name"	3	Normal
   "cc-additional-name"	3	Normal
   "cc-family-name"	3	Normal
   "cc-number"	3	Normal
   "cc-exp"	3	Normal
   "cc-exp-month"	3	Normal
   "cc-exp-year"	3	Normal
   "cc-csc"	3	Normal
   "cc-type"	3	Normal
   "transaction-currency"	3	Normal
   "transaction-amount"	3	Normal
   "language"	3	Normal
   "bday"	3	Normal
   "bday-day"	3	Normal
   "bday-month"	3	Normal
   "bday-year"	3	Normal
   "sex"	3	Normal
   "url"	3	Normal
   "photo"	3	Normal
   "tel"	4	Contact
   "tel-country-code"	4	Contact
   "tel-national"	4	Contact
   "tel-area-code"	4	Contact
   "tel-local"	4	Contact
   "tel-local-prefix"	4	Contact
   "tel-local-suffix"	4	Contact
   "tel-extension"	4	Contact
   "email"	4	Contact
   "impp"	4	Contact

6. If category is Off or Automatic but the element's autocomplete attribute is wearing the autofill anchor mantle, then jump to the step labeled default.

7. If category is Off, let the element's autofill field name be the string "off", let its autofill hint set be empty, and let its IDL-exposed autofill value be the string "off". Then, return.

8. If category is Automatic, let the element's autofill field name be the string "on", let its autofill hint set be empty, and let its IDL-exposed autofill value be the string "on". Then, return.

9. Let scope tokens be an empty list.

10. Let hint tokens be an empty set.

11. Let IDL value have the same value as field.

12. If the indexth token in tokens is the first entry, then skip to the step labeled done.

13. Decrement index by one.

14. If category is Contact and the indexth token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow:

    • "home"
    • "work"
    • "mobile"
    • "fax"
    • "pager"

    The substeps are:

    1. Let contact be the matching string from the list above.

    2. Insert contact at the start of scope tokens.

    3. Add contact to hint tokens.

    4. Let IDL value be the concatenation of contact, a U+0020 SPACE character, and the previous value of IDL value (which at this point will always be field).

    5. If the indexth entry in tokens is the first entry, then skip to the step labeled done.

    6. Decrement index by one.

15. If the indexth token in tokens is an ASCII case-insensitive match for one of the strings in the following list, then run the substeps that follow:

    • "shipping"
    • "billing"

    The substeps are:

    1. Let mode be the matching string from the list above.

    2. Insert mode at the start of scope tokens.

    3. Add mode to hint tokens.

    4. Let IDL value be the concatenation of mode, a U+0020 SPACE character, and the previous value of IDL value (which at this point will either be field or the concatenation of contact, a space, and field).

    5. If the indexth entry in tokens is the first entry, then skip to the step labeled done.

    6. Decrement index by one.

16. If the indexth entry in tokens is not the first entry, then jump to the step labeled default.

17. If the first eight characters of the indexth token in tokens are not an ASCII case-insensitive match for the string "section-", then jump to the step labeled default.

18. Let section be the indexth token in tokens, converted to ASCII lowercase.

19. Insert section at the start of scope tokens.

20. Let IDL value be the concatenation of section, a U+0020 SPACE character, and the previous value of IDL value.

21. Done: Let the element's autofill hint set be hint tokens.

22. Let the element's autofill scope be scope tokens.

23. Let the element's autofill field name be field.

24. Let the element's IDL-exposed autofill value be IDL value.

25. Return.

26. Default: Let the element's IDL-exposed autofill value be the empty string, and its autofill hint set and autofill scope be empty.

27. If the element's autocomplete attribute is wearing the autofill anchor mantle, then let the element's autofill field name be the empty string and return.

28. Let form be the element's form owner, if any, or null otherwise.

29. If form is not null and form's autocomplete attribute is in the off state, then let the element's autofill field name be "off".

    Otherwise, let the element's autofill field name be "on".

For the purposes of autofill, a control's data depends on the kind of control:

An input element with its type attribute in the Email state and with the multiple attribute specified

The element's values.

Any other input element

A textarea element

The element's value.

A select element with its multiple attribute specified

The option elements in the select element's list of options that have their selectedness set to true.

Any other select element

The option element in the select element's list of options that has its selectedness set to true.

How to process the autofill hint set, autofill scope, and autofill field name depends on the mantle that the autocomplete attribute is wearing.

When wearing the autofill expectation mantle...

When an element's autofill field name is "off", the user agent should not remember the control's data, and should not offer past values to the user.

In addition, when an element's autofill field name is "off", values are reset when traversing the history.

Banks frequently do not want UAs to prefill login information:

<p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p>
<p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p>

When an element's autofill field name is not "off", the user agent may store the control's data, and may offer previously stored values to the user.

For example, suppose a user visits a page with this control:

<select name="country">
 <option>Afghanistan
 <option>Albania
 <option>Algeria
 <option>Andorra
 <option>Angola
 <option>Antigua and Barbuda
 <option>Argentina
 <option>Armenia
 <!-- ... -->
 <option>Yemen
 <option>Zambia
 <option>Zimbabwe
</select>

This might render as follows:

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:

When the autofill field name is "on", 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 name value, the position of the element in its tree, what other fields exist in the form, and so forth.

When the autofill field name is one of the names of the autofill fields 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 autofill hint set should be used to select amongst multiple possible suggestions.

For example, if a user once entered one address into fields that used the "shipping" keyword, and another address into fields that used the "billing" keyword, then in subsequent forms only the first address would be suggested for form controls whose autofill hint set contains the keyword "shipping". Both addresses might be suggested, however, for address-related form controls whose autofill hint set does not contain either keyword.

When wearing the autofill anchor mantle...

When the autofill field name is not the empty string, then the user agent must act as if the user had specified the control's data for the given autofill hint set, autofill scope, and autofill field name combination.

When the user agent autofills form controls, elements with the same form owner and the same autofill scope must use data relating to the same person, address, payment instrument, and contact details. When a user agent autofills "country" and "country-name" fields with the same form owner and autofill scope, and the user agent has a value for the country" field(s), then the "country-name" 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 autofill field name, form owner and autofill scope must be filled with the same value.

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 autocomplete="shipping tel-local-prefix" with the value "123" and another field in the same form with autocomplete="shipping tel-local-suffix" with the value "7777". The only valid prefilled values given the aforementioned information would be "123" and "1234", or "666" and "7777", respectively.

Similarly, if a form for some reason contained both a "cc-exp" field and a "cc-exp-month" field, and the user agent prefilled the form, then the month component of the former would have to match the latter.

<form>
 <input type=hidden autocomplete="nickname" value="TreePlate">
 <input type=text autocomplete="nickname">
</form>

The "section-*" tokens in the autofill scope are opaque; user agents must not attempt to derive meaning from the precise values of these tokens.

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 "section-child" and the addresses it knows to be the user's spouses' addresses for "section-spouse".

The autocompletion mechanism must be implemented by the user agent acting as if the user had modified the control's data, and must be done at a time where the element is mutable (e.g. just after the element has been inserted into the document, or when the user agent stops parsing). User agents must only prefill controls using values that the user could have entered.

For example, if a select element only has option elements with values "Steve" and "Rebecca", "Jay", and "Bob", and has an autofill field name "given-name", 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.

A user agent prefilling a form control must not discriminate between form controls that are in a document tree and those that are connected; that is, it is not conforming to make the decision on whether or not to autofill based on whether the element's root is a shadow root versus a Document.

A user agent prefilling a form control's value must not cause that control to suffer from a type mismatch, suffer from being too long, suffer from being too short, suffer from an underflow, suffer from an overflow, or suffer from a step mismatch. A user agent prefilling a form control's value must not cause that control to suffer from a pattern mismatch either. 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.

<input name=middle-initial maxlength=1 autocomplete="additional-name">

<input name=b type=month autocomplete="bday">

<select name=c autocomplete="bday">
 <option>Jan
 <option>Feb
 ...
 <option>Jul
 <option>Aug
 ...
</select>

<input name=a type=number min=1 max=12 autocomplete="bday-month">

<input name=a type=number min=0 max=11 autocomplete="bday-month">

<input name=a type=number min=1 max=11 autocomplete="bday-month">

A user agent may allow the user to override an element's autofill field name, e.g. to change it from "off" to "on" to allow values to be remembered and prefilled despite the page author's objections, or to always "off", never remembering values.

More specifically, user agents may in particular consider replacing the autofill field name of form controls that match the description given in the first column of the following table, when their autofill field name is either "on" or "off", with the value given in the second cell of that row. If this table is used, the replacements must be done in tree order, since all but the first row references the autofill field name of earlier elements. When the descriptions below refer to form controls being preceded or followed by others, they mean in the list of listed elements that share the same form owner.

The autocomplete IDL attribute, on getting, must return the element's IDL-exposed autofill value, and on setting, must reflect the content attribute of the same name.

4.10.19 APIs for the text control selections

The input and textarea elements define several attributes and methods for handling their selection. Their shared algorithms are defined here.

element . select()

Selects everything in the text control.

element . selectionStart [ = value ]

Returns the offset to the start of the selection.

Can be set, to change the start of the selection.

element . selectionEnd [ = value ]

Returns the offset to the end of the selection.

Can be set, to change the end of the selection.

element . selectionDirection [ = value ]

Returns the current direction of the selection.

Can be set, to change the direction of the selection.

The possible values are "forward", "backward", and "none".

element . setSelectionRange(start, end [, direction] )

✔MDN

HTMLInputElement/setSelectionRange

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera8+Edge79+

---

Edge (Legacy)12+Internet Explorer9+

---

Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

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).

element . setRangeText(replacement [, start, end [, selectionMode ] ] )

✔MDN

HTMLInputElement/setRangeText

Support in all current engines.

Firefox27+Safari7+Chrome24+

---

Opera15+Edge79+

---

Edge (Legacy)NoInternet ExplorerNo

---

Firefox Android27+Safari iOS7+Chrome Android25+WebView Android4.4+Samsung Internet1.5+Opera Android14+

Replaces a range of text with the new text. If the start and end arguments are not provided, the range is assumed to be the selection.

The final argument determines how the selection will be set after the text has been replaced. The possible values are:

"select"

Selects the newly inserted text.

"start"

Moves the selection to just before the inserted text.

"end"

Moves the selection to just after the selected text.

"preserve"

Attempts to preserve the selection. This is the default.

All input elements to which these APIs apply, and all textarea elements, have either a selection or a text entry cursor position at all times (even for elements that are not being rendered), measured in offsets into the code units of the control's relevant value. The initial state must consist of a text entry cursor at the beginning of the control.

For input elements, these APIs must operate on the element's value. For textarea elements, these APIs must operate on the element's API value. In the below algorithms, we call the value string being operated on the relevant value.

<textarea id="demo"></textarea>
<script>
 demo.value = "A\r\nB";
 demo.setRangeText("replaced", 0, 2);
 assert(demo.value === "replacedB");
</script>

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.

Whenever the relevant value changes for an element to which these APIs apply, run these steps:

1. If the element has a selection:

   1. If the start of the selection is now past the end of the relevant value, set it to the end of the relevant value.

   2. If the end of the selection is now past the end of the relevant value, set it to the end of the relevant value.

   3. If the user agent does not support empty selection, and both the start and end of the selection are now pointing to the end of the relevant value, then instead set the element's text entry cursor position to the end of the relevant value, removing any selection.

2. Otherwise, the element must have a text entry cursor position position. If it is now past the end of the relevant value, set it to the end of the relevant value.

In some cases where the relevant value changes, other parts of the specification will also modify the text entry cursor position, beyond just the clamping steps above. For example, see the value setter for textarea.

Where possible, user interface features for changing the text selection in input and textarea elements must be implemented using the set the selection range algorithm so that, e.g., all the same events fire.

The selections of input and textarea elements have a selection direction, which is either "forward", "backward", or "none". The exact meaning of the selection direction depends on the platform. This direction is set when the user manipulates the selection. The initial selection direction must be "none" if the platform supports that direction, or "forward" otherwise.

To set the selection direction of an element to a given direction, update the element's selection direction to the given direction, unless the direction is "none" and the platform does not support that direction; in that case, update the element's selection direction to "forward".

The select() method, when invoked, must run the following steps:

1. If this element is an input element, and either select() does not apply to this element or the corresponding control has no selectable text, return.

   For instance, in a user agent where <input type=color> is rendered as a color well with a picker, as opposed to a text control accepting a hexadecimal color code, there would be no selectable text, and thus calls to the method are ignored.

2. Set the selection range with 0 and infinity.

The selectionStart attribute's getter must run the following steps:

1. If this element is an input element, and selectionStart does not apply to this element, return null.

2. If there is no selection, return the code unit offset within the relevant value to the character that immediately follows the text entry cursor.

3. Return the code unit offset within the relevant value to the character that immediately follows the start of the selection.

The selectionStart attribute's setter must run the following steps:

1. If this element is an input element, and selectionStart does not apply to this element, throw an "InvalidStateError" DOMException.

2. Let end be the value of this element's selectionEnd attribute.

3. If end is less than the given value, set end to the given value.

4. Set the selection range with the given value, end, and the value of this element's selectionDirection attribute.

The selectionEnd attribute's getter must run the following steps:

1. If this element is an input element, and selectionEnd does not apply to this element, return null.

2. If there is no selection, return the code unit offset within the relevant value to the character that immediately follows the text entry cursor.

3. Return the code unit offset within the relevant value to the character that immediately follows the end of the selection.

The selectionEnd attribute's setter must run the following steps:

1. If this element is an input element, and selectionEnd does not apply to this element, throw an "InvalidStateError" DOMException.

2. Set the selection range with the value of this element's selectionStart attribute, the given value, and the value of this element's selectionDirection attribute.

The selectionDirection attribute's getter must run the following steps:

1. If this element is an input element, and selectionDirection does not apply to this element, return null.

2. Return this element's selection direction.

The selectionDirection attribute's setter must run the following steps:

1. If this element is an input element, and selectionDirection does not apply to this element, throw an "InvalidStateError" DOMException.

2. Set the selection range with the value of this element's selectionStart attribute, the value of this element's selectionEnd attribute, and the given value.

The setSelectionRange(start, end, direction) method, when invoked, must run the following steps:

1. If this element is an input element, and setSelectionRange() does not apply to this element, throw an "InvalidStateError" DOMException.

2. Set the selection range with start, end, and direction.

To set the selection range with an integer or null start, an integer or null or the special value infinity end, and optionally a string direction, run the following steps:

1. If start is null, let start be zero.

2. If end is null, let end be zero.

3. Set the selection of the text control to the sequence of code units within the relevant value starting with the code unit at the startth position (in logical order) and ending with the code unit at the (end-1)th position. Arguments greater than the length of the relevant value of the text control (including the special value infinity) must be treated as pointing at the end of the text control. If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end. In UAs where there is no concept of an empty selection, this must set the cursor to be just before the character with offset end.

4. If direction is not identical to either "backward" or "forward", or if the direction argument was not given, set direction to "none".

5. Set the selection direction of the text control to direction.

6. If the previous steps caused the selection of the text control to be modified (in either extent or direction), then queue an element task on the user interaction task source given the element to fire an event named select at the element, with the bubbles attribute initialized to true.

The setRangeText(replacement, start, end, selectMode) method, when invoked, must run the following steps:

1. If this element is an input element, and setRangeText() does not apply to this element, throw an "InvalidStateError" DOMException.

2. Set this element's dirty value flag to true.

3. If the method has only one argument, then let start and end have the values of the selectionStart attribute and the selectionEnd attribute respectively.

   Otherwise, let start, end have the values of the second and third arguments respectively.

4. If start is greater than end, then throw an "IndexSizeError" DOMException.

5. If start is greater than the length of the relevant value of the text control, then set it to the length of the relevant value of the text control.

6. If end is greater than the length of the relevant value of the text control, then set it to the length of the relevant value of the text control.

7. Let selection start be the current value of the selectionStart attribute.

8. Let selection end be the current value of the selectionEnd attribute.

9. If start is less than end, delete the sequence of code units within the element's relevant value starting with the code unit at the startth position and ending with the code unit at the (end-1)th position.

10. Insert the value of the first argument into the text of the relevant value of the text control, immediately before the startth code unit.

11. Let new length be the length of the value of the first argument.

12. Let new end be the sum of start and new length.

13. Run the appropriate set of substeps from the following list:

    If the fourth argument's value is "select"

    Let selection start be start.

    Let selection end be new end.

    If the fourth argument's value is "start"

    Let selection start and selection end be start.

    If the fourth argument's value is "end"

    Let selection start and selection end be new end.

    If the fourth argument's value is "preserve"

    If the method has only one argument

    1. Let old length be end minus start.

    2. Let delta be new length minus old length.

    3. If selection start is greater than end, then increment it by delta. (If delta is negative, i.e. the new text is shorter than the old text, then this will decrease the value of selection start.)

       Otherwise: if selection start is greater than start, then set it to start. (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.)

    4. If selection end is greater than end, then increment it by delta in the same way.

       Otherwise: if selection end is greater than start, then set it to new end. (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.)

14. Set the selection range with selection start and selection end.

The setRangeText() method uses the following enumeration:

enum SelectionMode {
  "select",
  "start",
  "end",
  "preserve" // default
};

var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);

var oldStart = control.selectionStart;
var oldEnd = control.selectionEnd;
var oldDirection = control.selectionDirection;
var prefix = "http://";
control.value = prefix + control.value;
control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldDirection);

4.10.20 约束

4.10.20.1 定义

可提交元素 都是 约束验证候选项， 除非有条件 禁止了该元素的约束验证。 （例如，object 元素就会 禁止约束验证。）

元素可以定义 自定义验证错误信息。 元素必须把它的 自定义验证错误信息 初始化为空字符串。当它的值不是空字符串时，该元素就 处于自定义错误状态。 可以使用 setCustomValidity() 方法设置它。 用户代理应该使用 自定义验证错误信息 把控件的错误提示给用户。

元素可以有很多种约束方式。下面的 合法性状态 列表给出了约束验证下表单控件可能的状态。 （下面的定义是非规范的；本规范的其他地方更精确地定义了每个状态是否适用。）

处于缺失状态

当一个控件没有 值 但设置了 required 属性时（input required, textarea required）； 另外一种情况是 select 元素和 单选按钮组 中的控件， 规则较复杂，它们的定义请参考相应章节。

处于类型不匹配状态

当允许任意用户输入的控件有 值 但值的语法不正确时 （E-mail, URL）。

处于模式不匹配状态

当控件有 值 但值不符合 pattern 属性时。

处于长度超出限制状态

当控件有 值 但长度超过了 表单控件的 maxlength 属性 （input maxlength, textarea maxlength）。

处于长度不够状态

当控件有 值 但长度小于 表单控件 minlength 属性 （input minlength, textarea minlength）。

处于下溢出状态

当控件有 值 且非空字符串， 而小于 min 属性时。

处于下溢出状态

当控件有 值 且非空字符串， 而小于 max 属性时。

处于步长不匹配状态

当控件有 值 但不匹配 step 属性给出的规则时。

处于非法输入状态

当控件的输入不完整，且用户代理认为用户不应该以当前状态提交表单时。

处于自定义错误状态

当控件的 自定义验证错误信息 （通过元素的 setCustomValidity() 方法设置） 是非空字符串时。

即使元素被 禁用，也可能处于上述状态； 因此即使表单提交时的表单验证不向用户指出问题，这些状态也可以表示在 DOM 中。

如果一个元素没有处于任何上述 合法性状态， 就说这个元素 符合它的约束。

4.10.20.2 Constraint validation

When the user agent is required to statically validate the constraints of form element form, it must run the following steps, which return either a positive result (all the controls in the form are valid) or a negative result (there are invalid controls) along with a (possibly empty) list of elements that are invalid and for which no script has claimed responsibility:

1. Let controls be a list of all the submittable elements whose form owner is form, in tree order.

2. Let invalid controls be an initially empty list of elements.

3. For each element field in controls, in tree order:

   1. If field is not a candidate for constraint validation, then move on to the next element.

   2. Otherwise, if field satisfies its constraints, then move on to the next element.

   3. Otherwise, add field to invalid controls.

4. If invalid controls is empty, then return a positive result.

5. Let unhandled invalid controls be an initially empty list of elements.

6. For each element field in invalid controls, if any, in tree order:

   1. Let notCanceled be the result of firing an event named invalid at field, with the cancelable attribute initialized to true.

   2. If notCanceled is true, then add field to unhandled invalid controls.

7. Return a negative result with the list of elements in the unhandled invalid controls list.

If a user agent is to interactively validate the constraints of form element form, then the user agent must run the following steps:

1. Statically validate the constraints of form, and let unhandled invalid controls be the list of elements returned if the result was negative.

2. If the result was positive, then return that result.

3. Report the problems with the constraints of at least one of the elements given in unhandled invalid controls to the user.

   • User agents may focus one of those elements in the process, by running the focusing steps 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. For elements that are form-associated custom elements, user agents should use their validation anchor instead, for the purposes of these actions.

   • 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 group are marked as required, only one error need be reported).

   • If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.

4. Return a negative result.

4.10.20.3 The constraint validation API

element . willValidate

✔MDN

HTMLObjectElement/willValidate

Support in all current engines.

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS4+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

Returns true if the element will be validated when the form is submitted; false otherwise.

element . setCustomValidity(message)

✔MDN

HTMLObjectElement/setCustomValidity

Support in all current engines.

Firefox4+Safari5.1+Chrome10+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

HTMLSelectElement/setCustomValidity

Support in all current engines.

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS4+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

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.

element . validity . valueMissing

Returns true if the element has no value but is a required field; false otherwise.

element . validity . typeMismatch

Returns true if the element's value is not in the correct syntax; false otherwise.

element . validity . patternMismatch

Returns true if the element's value doesn't match the provided pattern; false otherwise.

element . validity . tooLong

✔MDN

ValidityState/tooLong

Support in all current engines.

Firefox4+Safari5+Chrome3+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android64+Safari iOS5+Chrome Android18+WebView Android4+Samsung Internet1.0+Opera Android12.1+

Returns true if the element's value is longer than the provided maximum length; false otherwise.

element . validity . tooShort

✔MDN

ValidityState/tooShort

Support in all current engines.

Firefox51+Safari10+Chrome40+

---

Opera27+Edge79+

---

Edge (Legacy)17+Internet ExplorerNo

---

Firefox Android64+Safari iOS10+Chrome Android40+WebView Android67+Samsung Internet4.0+Opera Android27+

Returns true if the element's value, if it is not the empty string, is shorter than the provided minimum length; false otherwise.

element . validity . rangeUnderflow

Returns true if the element's value is lower than the provided minimum; false otherwise.

element . validity . rangeOverflow

Returns true if the element's value is higher than the provided maximum; false otherwise.

element . validity . stepMismatch

Returns true if the element's value doesn't fit the rules given by the step attribute; false otherwise.

element . validity . badInput

✔MDN

ValidityState/badInput

Support in all current engines.

Firefox29+Safari7+Chrome25+

---

Opera15+Edge79+

---

Edge (Legacy)12+Internet ExplorerNo

---

Firefox Android64+Safari iOS7+Chrome Android25+WebView Android4.4+Samsung Internet1.5+Opera Android14+

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.

element . validity . customError

Returns true if the element has a custom error; false otherwise.

element . validity . valid

Returns true if the element's value has no validity problems; false otherwise.

valid = element . checkValidity()

✔MDN

HTMLObjectElement/checkValidity

Support in all current engines.

Firefox4+Safari5.1+Chrome10+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

HTMLSelectElement/checkValidity

Support in all current engines.

Firefox4+Safari5+Chrome4+

---

Opera9+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS4+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

Returns true if the element's value has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.

valid = element . reportValidity()

✔MDN

HTMLFormElement/reportValidity

Support in all current engines.

Firefox49+Safari10.1+Chrome40+

---

Opera27+Edge79+

---

Edge (Legacy)17+Internet ExplorerNo

---

Firefox Android49+Safari iOS10.3+Chrome Android40+WebView Android40+Samsung Internet4.0+Opera Android27+

HTMLInputElement/reportValidity

Support in all current engines.

Firefox49+Safari10.1+Chrome40+

---

Opera27+Edge79+

---

Edge (Legacy)17+Internet ExplorerNo

---

Firefox Android64+Safari iOS10.3+Chrome Android40+WebView Android40+Samsung Internet4.0+Opera Android27+

Returns true if the element's value has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.

element . validationMessage

✔MDN

HTMLObjectElement/validationMessage

Support in all current engines.

Firefox4+Safari5.1+Chrome10+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

Returns the error message that would be shown to the user if the element was to be checked for validity.

The willValidate attribute's getter must return true, if this element is a candidate for constraint validation, and false otherwise (i.e., false if any conditions are barring it from constraint validation).

The willValidate attribute of ElementInternals interface, on getting, must throw a "NotSupportedError" DOMException if the target element is not a form-associated custom element. Otherwise, it must return true if the target element is a candidate for constraint validation, and false otherwise.

The setCustomValidity(message) method, when invoked, must set the custom validity error message to message.

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
 function check(input) {
   if (input.value == "good" ||
       input.value == "fine" ||
       input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling.');
   } else {
     // input is fine -- reset the error message
     input.setCustomValidity('');
   }
 }
</script>

The validity attribute's getter must return a ValidityState object that represents the validity states of this element. This object is live.

The validity attribute of ElementInternals interface, on getting, must throw a "NotSupportedError" DOMException if the target element is not a form-associated custom element. Otherwise, it must return a ValidityState object that represents the validity states of the target element. This object is live.

[Exposed=Window]
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;
};

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.

valueMissing

The control is suffering from being missing.

typeMismatch

✔MDN

ValidityState/typeMismatch

Support in all current engines.

Firefox4+Safari5+Chrome3+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

The control is suffering from a type mismatch.

patternMismatch

✔MDN

ValidityState/patternMismatch

Support in all current engines.

Firefox4+Safari5+Chrome3+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

The control is suffering from a pattern mismatch.

tooLong

The control is suffering from being too long.

tooShort

The control is suffering from being too short.

rangeUnderflow

✔MDN

ValidityState/rangeUnderflow

Support in all current engines.

Firefox4+Safari5+Chrome3+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

The control is suffering from an underflow.

rangeOverflow

✔MDN

ValidityState/rangeOverflow

Support in all current engines.

Firefox4+Safari5+Chrome3+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

The control is suffering from an overflow.

stepMismatch

✔MDN

ValidityState/stepMismatch

Support in all current engines.

Firefox4+Safari5+Chrome3+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+

The control is suffering from a step mismatch.

badInput

The control is suffering from bad input.

customError

The control is suffering from a custom error.

valid

None of the other conditions are true.

The check validity steps for an element element are:

1. If element is a candidate for constraint validation and does not satisfy its constraints, then:

   1. Fire an event named invalid at element, with the cancelable attribute initialized to true (though canceling has no effect).

   2. Return false.

2. Return true.

The checkValidity() method, when invoked, must run the check validity steps on this element.

The checkValidity() method of the ElementInternals interface must run these steps:

1. Let element be this ElementInternals's target element.

2. If element is not a form-associated custom element, then throw a "NotSupportedError" DOMException.

3. Run the check validity steps on element.

The report validity steps for an element element are:

1. If element is a candidate for constraint validation and does not satisfy its constraints, then:

   1. Let report be the result of firing an event named invalid at element, with the cancelable attribute initialized to true.

   2. If report is true, then report the problems with the constraints of this element to the user. When reporting the problem with the constraints to the user, the user agent may run the focusing steps for element, and may change the scrolling position of the document, or perform some other action that brings element to the user's attention. User agents may report more than one constraint violation, if element suffers from multiple problems at once. If element is not being rendered, then the user agent may, instead of notifying the user, report the error for the running script.

   3. Return false.

2. Return true.

The reportValidity() method, when invoked, must run the report validity steps on this element.

The reportValidity() method of the ElementInternals interface must run these steps:

1. Let element be this ElementInternals's target element.

2. If element is not a form-associated custom element, then throw a "NotSupportedError" DOMException.

3. Run the report validity steps on element.

The validationMessage attribute's getter must run these steps:

1. If this element is not a candidate for constraint validation or if this element satisfies its constraints, then return the empty string.

2. 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 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 candidate for constraint validation and is suffering from a custom error, then the custom validity error message should be present in the return value.

4.10.20.4 安全性

服务器不应依赖客户端验证。恶意用户可以轻松绕过客户端验证， 没实现这些功能的旧的用户代理或自动化工具也会让用户无意地绕过客户端验证。 约束验证功能只是为了提升用户体验，并未提供任何安全机制。

4.10.21 表单提交

4.10.21.1 概述

This section is non-normative.

提交表单时，表单中的数据会转换为 enctype 指定的结构， 然后使用给定的 method 发送到 action 指定的目的地址。

例如下面的表单：

<form action="/find.cgi" method=get>
 <input type=text name=t>
 <input type=search name=q>
 <input type=submit>
</form>

如果用户在第一个字段输入 "cats"，在第二个字段输入 "fur"，然后点击提交按钮， 那么用户代理就会加载 /find.cgi?t=cats&q=fur。

另一方面考虑这个表单：

<form action="/find.cgi" method=post enctype="multipart/form-data">
 <input type=text name=t>
 <input type=search name=q>
 <input type=submit>
</form>

给同样的用户输入，提交的结果会非常不同：用户代理会发一个 HTTP POST 请求到给定的 URL，消息体是像这样的文本：

------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="t"

cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"

fur
------kYFrd4jNJEgCervE--

4.10.21.2 隐式提交

form 元素的 默认按钮 是 表单 owner 是这个 form 元素的 按照 树序 的第一个 提交按钮。

如果用户代理支持用户隐式地提交表单（例如在某些平台下当文本控件 获得焦点 时按下回车键就会暗示提交表单）， 然后如果表单的 默认按钮 有 激活行为 且不处于 禁用状态 就必须提交表单， 而且用户代理就必须在那个 默认按钮 上 触发一个 click 事件。

Web 上有些页面只有在隐式提交表单时才可用，因此强烈建议用户代理支持此功能。

对于表单没有 提交按钮 的情况，如果多个字段 阻止了隐式提交， 那么隐式提交机制必须什么都不做； 否则用户代理必须从 form 元素自己 提交 form 元素。

上一段中，form 元素中 阻止隐式提交 的元素是指， 表单 owner 的 form 元素 的 type 属性处于以下状态的 input 元素： Text, Search, URL, Telephone, E-mail, Password, Date, Month, Week, Time, Local Date and Time, Number

4.10.21.3 Form submission algorithm

Each form element has a constructing entry list boolean, initially false.

Each form element has a firing submission events boolean, initially false.

When a form element form is submitted from an element submitter (typically a button), optionally with a submitted from submit() method flag set, the user agent must run the following steps:

1. If form cannot navigate, then return.

2. If form's constructing entry list is true, then return.

3. Let form document be form's node document.

4. If form document's active sandboxing flag set has its sandboxed forms browsing context flag set, then return.

5. Let form browsing context be the browsing context of form document.

6. If the submitted from submit() method flag is not set, then:

   1. If form's firing submission events is true, then return.

   2. Set form's firing submission events to true.

   3. If the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result. If the result is negative (i.e., the constraint validation concluded that there were invalid fields and probably informed the user of this), then:

      1. Set form's firing submission events to false.

      2. Return.

   4. Let submitterButton be null if submitter is form. Otherwise, let submitterButton be submitter.

   5. Let continue be the result of firing an event named submit at form using SubmitEvent, with the submitter attribute initialized to submitterButton, the bubbles attribute initialized to true, and the cancelable attribute initialized to true.

   6. Set form's firing submission events to false.

   7. If continue is false, then return.

   8. If form cannot navigate, then return.

      Cannot navigate is run again as dispatching the submit event could have changed the outcome.

7. Let encoding be the result of picking an encoding for the form.

8. Let entry list be the result of constructing the entry list with form, submitter, and encoding.

9. If form cannot navigate, then return.

   Cannot navigate is run again as dispatching the formdata event in constructing the entry list could have changed the outcome.

10. Let action be the submitter element's action.

11. If action is the empty string, let action be the URL of the form document.

12. Parse the URL action, relative to the submitter element's node document. If this fails, return.

13. Let parsed action be the resulting URL record.

14. Let scheme be the scheme of parsed action.

15. Let enctype be the submitter element's enctype.

16. Let method be the submitter element's method.

17. Let target be the submitter element's formtarget attribute value, if the element is a submit button and has such an attribute. Otherwise, let it be the result of getting an element's target given submitter's form owner.

18. Let noopener be the result of getting an element's noopener with form and targetAttributeValue.

19. Let target browsing context and windowType be the result of applying the rules for choosing a browsing context using target, form browsing context, and noopener.

20. Let historyHandling be "replace" if windowType is either "new and unrestricted" or "new with no opener"; otherwise "default".

21. If target browsing context is null, then return.

22. If form document has not yet completely loaded and the submitted from submit() method flag is set, then set historyHandling to "replace".

23. If the value of method is dialog then jump to the submit dialog steps.

    Otherwise, select the appropriate row in the table below based on the value of scheme as given by the first cell of each row. Then, select the appropriate cell on that row based on the value of method as given in the first cell of each column. Then, jump to the steps named in that cell and defined below the table.

    	GET	POST
    http	Mutate action URL	Submit as entity body
    https	Mutate action URL	Submit as entity body
    ftp	Get action URL	Get action URL
    javascript	Get action URL	Get action URL
    data	Mutate action URL	Get action URL
    mailto	Mail with headers	Mail as body

    If scheme 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 planned navigation, which is either null or a task; when the form is first created, its planned navigation must be set to null. In the behaviors described below, when the user agent is required to plan to navigate to a particular resource destination, it must run the following steps:

    1. If destination is not a request, then set destination to a new request whose URL is destination.

    2. If the form element's link types include the noreferrer keyword, then set destination's referrer to "no-referrer".

    3. If the form has a non-null planned navigation, remove it from its task queue.

    4. Queue an element task on the DOM manipulation task source given the form element and the following steps:

       1. Set the form's planned navigation to null.

       2. Navigate target browsing context to destination, with historyHandling set to historyHandling and navigationType set to "form-submission".

    5. Set the form's planned navigation to the just-queued task.

    The behaviors are as follows:

    Mutate action URL

    Let query be the result of running the application/x-www-form-urlencoded serializer with entry list and encoding.

    Set parsed action's query component to query.

    Plan to navigate to parsed action.

    Submit as entity body

    Switch on enctype:

    application/x-www-form-urlencoded

    Let body be the result of running the application/x-www-form-urlencoded serializer with entry list and encoding.

    Set body to the result of encoding body.

    Let MIME type be "application/x-www-form-urlencoded".

    multipart/form-data

    Let body be the result of running the multipart/form-data encoding algorithm with entry list and encoding.

    Let MIME type be the concatenation of the string "multipart/form-data;", a U+0020 SPACE character, the string "boundary=", and the multipart/form-data boundary string generated by the multipart/form-data encoding algorithm.

    text/plain

    Let body be the result of running the text/plain encoding algorithm with entry list.

    Set body to the result of encoding body using encoding.

    Let MIME type be "text/plain".

    Plan to navigate to a new request whose url is parsed action, method is method, header list consists of `Content-Type`/MIME type, and body is body.

    Get action URL

    Plan to navigate to parsed action.

    entry list is discarded.

    Mail with headers

    Let headers be the result of running the application/x-www-form-urlencoded serializer with entry list and encoding.

    Replace occurrences of U+002B PLUS SIGN characters (+) in headers with the string "%20".

    Set parsed action's query to headers.

    Plan to navigate to parsed action.

    Mail as body

    Switch on enctype:

    text/plain

    Let body be the result of running the text/plain encoding algorithm with entry list.

    Set body to the result of running UTF-8 percent-encode on body using the default encode set. [URL]

    Otherwise

    Let body be the result of running the application/x-www-form-urlencoded serializer with entry list and encoding.

    If parsed action's query is null, then set it to the empty string.

    If parsed action's query is not the empty string, then append a single U+0026 AMPERSAND character (&) to it.

    Append "body=" to parsed action's query.

    Append body to parsed action's query.

    Plan to navigate to parsed action.

    Submit dialog

    Let subject be the nearest ancestor dialog element of form, if any.

    If there isn't one, or if it does not have an open attribute, do nothing. Otherwise, proceed as follows:

    If submitter is an input element whose type attribute is in the Image Button state, then let result be the string formed by concatenating the selected coordinate's x-component, expressed as a base-ten number using ASCII digits, a U+002C COMMA character (,), and the selected coordinate's y-component, expressed in the same way as the x-component.

    Otherwise, if submitter has a value, then let result be that value.

    Otherwise, there is no result.

    Then, close the dialog subject. If there is a result, let that be the return value.

4.10.21.4 Constructing the entry list

The algorithm to construct the entry list given a form, an optional submitter, and an optional encoding, is as follows. If not specified otherwise, submitter is null.

1. If form's constructing entry list is true, then return null.

2. Set form's constructing entry list to true.

3. Let controls be a list of all the submittable elements whose form owner is form, in tree order.

4. Let entry list be a new empty list of entries.

5. For each element field in controls, in tree order:

   1. If any of the following is true:

      • The field element has a datalist element ancestor.
      • The field element is disabled.
      • The field element is a button but it is not submitter.
      • The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.
      • The field element is an input element whose type attribute is in the Radio Button state and whose checkedness is false.
      • The field element is an object element that is not using a plugin.

      Then continue.

   2. If the field element is an input element whose type attribute is in the Image Button state, then:

      1. If the field element has a name attribute specified and its value is not the empty string, let name be that value followed by a single U+002E FULL STOP character (.). Otherwise, let name be the empty string.

      2. Let name_x be the string consisting of the concatenation of name and a single U+0078 LATIN SMALL LETTER X character (x).

      3. Let name_y be the string consisting of the concatenation of name and a single U+0079 LATIN SMALL LETTER Y character (y).

      4. The field element is submitter, and before this algorithm was invoked the user indicated a coordinate. Let x be the x-component of the coordinate selected by the user, and let y be the y-component of the coordinate selected by the user.

      5. Append an entry to entry list with name_x and x.

      6. Append an entry to entry list with name_y and y.

      7. Continue.

   3. If the field is a form-associated custom element, then perform the entry construction algorithm given field and entry list, then continue.

   4. If either the field element does not have a name attribute specified, or its name attribute's value is the empty string, then continue.

   5. Let name be the value of the field element's name attribute.

   6. If the field element is a select element, then for each option element in the select element's list of options whose selectedness is true and that is not disabled, append an entry to entry list with name and the value of the option element.

   7. Otherwise, if the field element is an input element whose type attribute is in the Checkbox state or the Radio Button state, then:

      1. If the field element has a value attribute specified, then let value be the value of that attribute; otherwise, let value be the string "on".

      2. Append an entry to entry list with name and value.

   8. Otherwise, if the field element is an input element whose type attribute is in the File Upload state, then:

      1. If there are no selected files, then append an entry to entry list with name and a new File object with an empty name, application/octet-stream as type, and an empty body.

      2. Otherwise, for each file in selected files, append an entry to entry list with name and a File object representing the file.

   9. Otherwise, if the field element is an object element: try to obtain a form submission value from the plugin, and if that is successful, append an entry to entry list with name and the returned form submission value.

   10. Otherwise, if the field element is an input element whose type attribute is in the Hidden state and name is an ASCII case-insensitive match for "_charset_":

       1. Let charset be the name of encoding if encoding is given, and "UTF-8" otherwise.

       2. Append an entry to entry list with name and charset.

   11. Otherwise, if the field element is a textarea element, append an entry to entry list with name and the value of the field element, and the prevent line break normalization flag set.

       In the case of the value of textarea elements, the line break normalization is already performed during the conversion of the control's raw value into the control's value (which also performs any necessary line wrapping).

   12. Otherwise, append an entry to entry list with name and the value of the field element.

   13. If the element has a dirname attribute, and that attribute's value is not the empty string, then:

       1. Let dirname be the value of the element's dirname attribute.

       2. Let dir be the string "ltr" if the directionality of the element is 'ltr', and "rtl" otherwise (i.e., when the directionality of the element is 'rtl').

       3. Append an entry to entry list with dirname and dir.

       An element can only have a dirname attribute if it is a textarea element or an input element whose type attribute is in either the Text state or the Search state.

6. Let form data be a new FormData object associated with entry list.

7. Fire an event named formdata at form using FormDataEvent, with the formData attribute initialized to form data and the bubbles attribute initialized to true.

8. Set form's constructing entry list to false.

9. Return a clone of entry list.

To append an entry to entry list, given name, value, and optional prevent line break normalization flag, run these steps:

1. For name, replace every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence of U+000A (LF) not preceded by U+000D (CR), by a string consisting of a U+000D (CR) and U+000A (LF).

2. Replace name with the result of converting to a sequence of Unicode scalar values.

3. If value is not a File object, then:

   1. If the prevent line break normalization flag is unset, then replace every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence of U+000A (LF) not preceded by U+000D (CR) in value, by a string consisting of a U+000D (CR) and U+000A (LF).

   2. Replace value with the result of converting to a sequence of Unicode scalar values.

4. Create an entry with name and value, and append it to entry list.

4.10.21.5 Selecting a form submission encoding

If the user agent is to pick an encoding for a form, it must run the following steps:

1. Let encoding be the document's character encoding.

2. If the form element has an accept-charset attribute, set encoding to the return value of running these substeps:

   1. Let input be the value of the form element's accept-charset attribute.

   2. Let candidate encoding labels be the result of splitting input on ASCII whitespace.

   3. Let candidate encodings be an empty list of character encodings.

   4. For each token in candidate encoding labels in turn (in the order in which they were found in input), get an encoding for the token and, if this does not result in failure, append the encoding to candidate encodings.

   5. If candidate encodings is empty, return UTF-8.

   6. Return the first encoding in candidate encodings.

3. Return the result of getting an output encoding from encoding.

4.10.21.6 URL 编码的表单数据

application/x-www-form-urlencoded 的细节请参考 WHATWG URL 标准。[URL]

4.10.21.7 Multipart form data

The multipart/form-data encoding algorithm, given an entry list and encoding, is as follows:

1. Let result be the empty string.

2. For each entry in entry list:

   1. For each character in the entry's name and value that cannot be expressed using the selected character encoding, replace the character by a string consisting of a U+0026 AMPERSAND character (&), a U+0023 NUMBER SIGN character (#), one or more ASCII digits representing the code point of the character in base ten, and finally a U+003B (;).

3. Encode the (now mutated) entry list using the rules described by RFC 7578, Returning Values from Forms: multipart/form-data, and return the resulting byte stream. [RFC7578]

   Each entry in entry list is a field, the name of the entry is the field name and the value of the entry is the field value.

   The order of parts must be the same as the order of fields in entry list. Multiple entries with the same name must be treated as distinct fields.

   The parts of the generated multipart/form-data resource that correspond to non-file fields must not have a `Content-Type` header specified. Their names and values must be encoded using the character encoding selected above.

   File names included in the generated multipart/form-data 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 multipart/form-data boundary string. (This value is used to generate the MIME type of the form submission payload generated by this algorithm.)

For details on how to interpret multipart/form-data payloads, see RFC 7578. [RFC7578]

4.10.21.8 Plain text form data

The text/plain encoding algorithm, given an entry list, is as follows:

1. Let result be the empty string.

2. For each entry in entry list:

   1. If the entry's value is a File object, then set its value to the File object's name.

   2. Append the entry's name to result.

   3. Append a single U+003D EQUALS SIGN character (=) to result.

   4. Append the entry's value to result.

   5. Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF) character pair to result.

3. Return result.

Payloads using the text/plain 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).

4.10.21.9 The SubmitEvent interface

[Exposed=Window]
interface SubmitEvent : Event {
  constructor(DOMString type, optional SubmitEventInit eventInitDict = {});

  readonly attribute HTMLElement? submitter;
};

dictionary SubmitEventInit : EventInit {
  HTMLElement? submitter = null;
};

event . submitter

Returns the element representing the submit button that triggered the form submission, or null if the submission was not triggered by a button.

The submitter attribute must return the value it was initialized to.

4.10.21.10 The FormDataEvent interface

[Exposed=Window]
interface FormDataEvent : Event {
  constructor(DOMString type, FormDataEventInit eventInitDict);

  readonly attribute FormData formData;
};

dictionary FormDataEventInit : EventInit {
  required FormData formData;
};

event . formData

Returns a FormData object representing names and values of elements associated to the target form. Operations on the FormData object will affect form data to be submitted.

The formData attribute must return the value it was initialized to. It represents a FormData object associated to the entry list that is constructed when the form is submitted.

4.10.22 表单重置

重置 form 元素 form 时，要执行这些步骤：

1. 在 form 上 触发一个 名为 reset 的事件， 其 bubbles 和 cancelable 属性初始化为 true， 令 reset 为上述触发事件操作的结果。

2. 如果 reset 为 true，就调用每个 表单 owner 为 form 的 可重置元素 的 重置算法。

每个 可重置元素 定义了它自己的 重置算法。 这些算法中对表单控件的改变，不计为用户引起的改变 （因此，不会引发 input 事件）。