HTML

活文档 — 最后更新于 2024年9月12日

1. 1. 1. 4.10.17 表单控件基础设施
         1. 4.10.17.1 表单控件的值
         2. 4.10.17.2 可变性
         3. 4.10.17.3 控件和表单的关联
      2. 4.10.18 表单控件的通用属性
         1. 4.10.18.1 为表单控件命名：name 属性
         2. 4.10.18.2 提交元素的方向性：dirname 属性
         3. 4.10.18.3 限制用户输入长度：maxlength 属性
         4. 4.10.18.4 设置最小输入长度要求：minlength 属性
         5. 4.10.18.5 启用和禁用表单控件：disabled 属性
         6. 4.10.18.6 表单提交属性
         7. 4.10.18.7 自动填充
            1. 4.10.18.7.1 自动填充表单控件：autocomplete 属性
            2. 4.10.18.7.2 处理模型
      3. 4.10.19 文本控件选择的 API
      4. 4.10.20 约束
         1. 4.10.20.1 定义
         2. 4.10.20.2 约束验证
         3. 4.10.20.3 约束验证 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 表单提交算法
         4. 4.10.21.4 构造条目列表
         5. 4.10.21.5 选择表单提交编码
         6. 4.10.21.6 将条目列表转换为名称-值对列表
         7. 4.10.21.7 URL 编码的表单数据
         8. 4.10.21.8 多部分表单数据
         9. 4.10.21.9 纯文本表单数据
         10. 4.10.21.10 SubmitEvent 接口
         11. 4.10.21.11 FormDataEvent 接口
      6. 4.10.22 重置表单

4.10.17 表单控件基础设施

4.10.17.1 表单控件的值

大多数表单控件都有一个 值 和一个 选中状态。（后者仅由 input 元素使用。）这些用于描述用户如何与控件交互。

控件的 值 是其内部状态。因此，它可能与用户的当前输入不匹配。

例如，如果用户在 数字字段（需要数字）中输入单词“three”，则用户的输入将是字符串“three”，但控件的 值 将保持不变。或者，如果用户在 电子邮件字段中输入电子邮件地址“  [email protected]”（带有前导空格），则用户的输入将是字符串“  [email protected]”，但电子邮件字段的浏览器 UI 可能会将其转换为 值“[email protected]”（不带前导空格）。

input 和 textarea 元素具有 脏值标志。这用于跟踪 值 和默认值之间的交互。如果为 false，则 值 会反映默认值。如果为 true，则会忽略默认值。

input、textarea 和 select 元素具有一个 用户有效性 布尔值。最初设置为 false。

为了定义在 input 元素的 multiple 属性面前约束验证的行为，input 元素也可以分别定义 值s。

为了定义 maxlength 和 minlength 属性的行为，以及特定于 textarea 元素的其他 API，所有具有 值 的表单控件也都有一个用于获取 API 值 的算法。默认情况下，此算法只是返回控件的 值。

select 元素没有 值；而是使用其 option 元素的 选中状态。

4.10.17.2 可变性

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

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

4.10.17.3 控件和表单的关联

一个 与表单关联的元素 可以与一个 form 元素存在关系，这称为元素的 表单所有者。如果一个 与表单关联的元素 未与 form 元素关联，则其 表单所有者 被认为是 null。

一个 与表单关联的元素 具有一个关联的 解析器插入标志。

一个 与表单关联的元素 默认情况下与其最近的祖先 form 元素关联（如下所述），但是，如果它 已列出，则可以指定 form 属性来覆盖此关联。

此功能允许作者解决嵌套 form 元素缺乏支持的问题。

如果一个 已列出 的 与表单关联的元素 指定了 form 属性，则该属性的值必须是元素 树 中 form 元素的 ID。

本节中的规则因以下事实而变得复杂：尽管符合规范的文档或 树 永远不会包含嵌套的 form 元素，但完全有可能（例如，使用执行 DOM 操作的脚本）生成具有此类嵌套元素的 树。它们也因 HTML 解析器中的规则而变得复杂，由于历史原因，这些规则可能导致 与表单关联的元素 与不是其祖先的 form 元素关联。

当创建 与表单关联的元素 时，其 表单所有者 必须初始化为 null（没有所有者）。

当 与表单关联的元素 将要与表单 关联 时，其 表单所有者 必须设置为该表单。

当 已列出 的 与表单关联的元素 的 form 属性被设置、更改或删除时，则用户代理必须 重置该元素的表单所有者。

当 已列出 的 与表单关联的元素 具有 form 属性，并且 树 中任何元素的 ID 发生更改时，则用户代理必须 重置该 与表单关联的元素 的表单所有者。

当一个已列出的与表单关联的元素具有form 属性，并且一个具有ID的元素被插入到或从文档中移除时，则用户代理必须重置该与表单关联的元素的表单所有者。

表单所有者也会被 HTML 标准的插入步骤和移除步骤重置。

要重置一个与表单关联的元素element的表单所有者

1. 取消设置element的解析器插入标志。

2. 如果以下所有条件都为真

   • element的表单所有者不为 null；

   • element未列出，或其form 内容属性不存在；并且

   • element的表单所有者是其在祖先链更改后最近的表单元素祖先，

   则返回。

3. 将element的表单所有者设置为 null。

4. 如果element已列出，具有form 内容属性，并且已连接，则

   1. 如果在element的树中，按照树的顺序，第一个具有ID且与element的form 内容属性的值相同的元素是一个表单元素，则关联element与该表单元素。

5. 否则，如果element具有祖先表单元素，则关联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

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+

---

Opera12.1+Edge79+

---

Edge (旧版)12+Internet Explorer5.5+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLSelectElement/form

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+

---

Opera12.1+Edge79+

---

Edge (旧版)12+Internet Explorer5.5+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回元素的表单所有者。

如果没有表单所有者，则返回 null。

已列出的与表单关联的元素（除了与表单关联的自定义元素）具有form IDL 属性，在获取时，必须返回元素的表单所有者，如果没有表单所有者，则返回 null。

与表单关联的自定义元素没有form IDL 属性。相反，它们的ElementInternals 对象具有form IDL 属性。在获取时，如果目标元素不是与表单关联的自定义元素，则必须抛出"NotSupportedError"DOMException。否则，必须返回元素的表单所有者，如果没有表单所有者，则返回 null。

4.10.18 表单控件的通用属性

4.10.18.1 命名表单控件：name 属性

name 内容属性提供表单控件的名称，在表单提交和表单元素的elements对象中使用。如果指定了该属性，则其值不能是空字符串或 isindex。

许多用户代理在历史上实现了对表单中第一个文本控件（名称为 isindex）的特殊支持，并且此规范之前为此定义了相关的用户代理要求。但是，一些用户代理随后放弃了这种特殊支持，并且相关的要求已从此规范中删除。因此，为了避免在旧版用户代理中出现有问题的重新解释，不再允许使用名称 isindex。

除了 isindex 之外，允许任何非空值作为name。名称_charset_ 的ASCII 不区分大小写匹配是特殊的：如果用作没有value 属性的隐藏控件的名称，则在提交期间，value 属性会自动获得一个值，该值由提交字符编码组成。

name IDL 属性必须反映name 内容属性。

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 提交元素方向性：dirname 属性

表单控件元素上的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 限制用户输入长度：maxlength 属性

表单控件的 maxlength 属性，受 脏值标志 控制，声明了用户可以输入字符数量的限制。字符数量使用 长度 测量，对于 textarea 元素，所有换行符都规范化为单个字符（而不是 CRLF 对）。

如果某个元素指定了 表单控件的 maxlength 属性，则该属性的值必须是 有效的非负整数。如果指定了该属性，并且将其值应用于 解析非负整数的规则 会得到一个数字，则该数字就是元素的 最大允许值长度。如果省略该属性或解析其值导致错误，则没有 最大允许值长度。

约束验证：如果某个元素具有 最大允许值长度，其 脏值标志 为 true，其 值 上次由用户编辑更改（而不是由脚本更改），并且元素的 长度 超过元素的 最大允许值长度，则该元素 过长。

用户代理可以阻止用户将元素的 API 值 设置为 长度 超过元素的 最大允许值长度 的值。

对于 textarea 元素，API 值 和 值 不同。特别是，在检查 最大允许值长度 之前会应用 换行符规范化（而不会应用 textarea 换行转换）。

4.10.18.4 设置最小输入长度要求：minlength 属性

表单控件的 minlength 属性，受 脏值标志 控制，声明了用户可以输入字符数量的下限。“字符数量”使用 长度 测量，对于 textarea 元素，所有换行符都规范化为单个字符（而不是 CRLF 对）。

minlength 属性并不意味着 required 属性。如果表单控件没有 required 属性，则仍然可以省略值；只有当用户输入了任何值后，minlength 属性才会生效。如果不允许空字符串，则还需要设置 required 属性。

如果某个元素指定了 表单控件的 minlength 属性，则该属性的值必须是 有效的非负整数。如果指定了该属性，并且将其值应用于 解析非负整数的规则 会得到一个数字，则该数字就是元素的 最小允许值长度。如果省略该属性或解析其值导致错误，则没有 最小允许值长度。

如果某个元素同时具有 最大允许值长度 和 最小允许值长度，则 最小允许值长度 必须小于或等于 最大允许值长度。

约束验证：如果某个元素具有 最小允许值长度，其 脏值标志 为 true，其 值 上次由用户编辑更改（而不是由脚本更改），其 值 不是空字符串，并且元素的 长度 小于元素的 最小允许值长度，则该元素 过短。

<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 启用和禁用表单控件：disabled 属性

disabled 内容属性是一个 布尔属性。

disabled 属性用于 option 元素，disabled 属性用于 optgroup 元素，它们是分别定义的。

如果以下任何一项为真，则表单控件 已禁用

• 该元素是 button、input、select、textarea 或 与表单关联的自定义元素，并且在该元素上指定了 disabled 属性（无论其值如何）；或者

• 该元素是 fieldset 元素的后代，并且该 fieldset 元素的 disabled 属性已指定，并且不是该 fieldset 元素的第一个 legend 元素子元素（如果有）的后代。

已 禁用 的表单控件必须阻止在 用户交互任务源 上排队的任何 click 事件在该元素上分派。

约束验证：如果某个元素 已禁用，则 不进行约束验证。

disabled IDL 属性必须 反映 disabled 内容属性。

4.10.18.6 表单提交属性

表单提交属性 可以同时在 form 元素和 提交按钮（表示提交表单的按钮的元素，例如 input 元素，其 type 属性处于 提交按钮 状态）上指定。

可以在 form 元素上指定的 表单提交属性 是 action、enctype、method、novalidate 和 target。

可以在 提交按钮 上指定的相应的 表单提交属性 是 formaction、formenctype、formmethod、formnovalidate 和 formtarget。当省略时，它们默认为 form 元素上相应属性的值。

如果指定了 action 和 formaction 内容属性，则其值必须是 可能包含空格的有效非空 URL。

元素的 action 是元素的 formaction 属性的值（如果该元素是 提交按钮 并且具有此属性），或者其 表单所有者 的 action 属性的值（如果它具有该属性），否则为空字符串。

method 和 formmethod 内容属性是 枚举属性，具有以下关键字和状态

method 属性的 缺失值默认值 和 无效值默认值 均为 GET 状态。

formmethod 属性没有 缺失值默认值，其 无效值默认值 为 GET 状态。

元素的 method 是这些状态之一。如果该元素是 提交按钮 并且具有 formmethod 属性，则该元素的 method 为该属性的状态；否则，为 表单所有者 的 method 属性的状态。

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

enctype 和 formenctype 内容属性是 枚举属性，具有以下关键字和状态

• “application/x-www-form-urlencoded”关键字和相应的状态。
• “multipart/form-data”关键字和相应的状态。
• “text/plain”关键字和相应的状态。

该属性的 缺失值默认值 和 无效值默认值 均为 application/x-www-form-urlencoded 状态。

formenctype 属性没有 缺失值默认值，其 无效值默认值 为 application/x-www-form-urlencoded 状态。

元素的 enctype 是这三种状态之一。如果该元素是 提交按钮 并且具有 formenctype 属性，则该元素的 enctype 为该属性的状态；否则，为 表单所有者 的 enctype 属性的状态。

如果指定了 target 和 formtarget 内容属性，则其值必须是 有效的可导航目标名称或关键字。

novalidate 和 formnovalidate 内容属性是 布尔属性。如果存在，则表示在提交过程中不应验证表单。

如果该元素是 提交按钮 并且该元素的 formnovalidate 属性存在，或者如果该元素的 表单所有者 的 novalidate 属性存在，则元素的 no-validate 状态 为 true，否则为 false。

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

action IDL 属性必须反映同名内容属性，但获取时，如果内容属性缺失或其值为空字符串，则必须返回元素的节点文档的URL。target IDL 属性必须反映同名内容属性。method 和 enctype IDL 属性必须反映各自同名的内容属性，仅限于已知值。encoding IDL 属性必须反映enctype 内容属性，仅限于已知值。noValidate IDL 属性必须反映novalidate 内容属性。formAction IDL 属性必须反映formaction 内容属性，但获取时，如果内容属性缺失或其值为空字符串，则必须返回元素的节点文档的URL。formEnctype IDL 属性必须反映formenctype 内容属性，仅限于已知值。formMethod IDL 属性必须反映formmethod 内容属性，仅限于已知值。formNoValidate IDL 属性必须反映formnovalidate 内容属性。formTarget IDL 属性必须反映formtarget 内容属性。

4.10.18.7 自动填充

4.10.18.7.1 自动填充表单控件：autocomplete 属性

用户代理有时具有帮助用户填写表单的功能，例如根据用户之前的输入预填充用户的地址。autocomplete 内容属性可用于提示用户代理如何（或者是否）提供此类功能。

此属性有两种使用方式。当扮演自动填充预期角色时，autocomplete 属性描述了用户期望的输入。当扮演自动填充锚点角色时，autocomplete 属性描述了给定值的含义。

在input 元素上，如果其type 属性处于隐藏状态，则autocomplete 属性扮演自动填充锚点角色。在所有其他情况下，它扮演自动填充预期角色。

当扮演自动填充预期角色时，如果指定了autocomplete 属性，则其值必须是按顺序排列的由空格分隔的标记集，该标记集包含以下内容之一：单个标记，该标记与字符串“off”进行ASCII 不区分大小写匹配；或单个标记，该标记与字符串“on”进行ASCII 不区分大小写匹配；或自动填充详细信息标记。

当扮演自动填充锚点角色时，如果指定了autocomplete 属性，则其值必须是按顺序排列的由空格分隔的标记集，该标记集仅包含自动填充详细信息标记（即，不允许使用“on”和“off”关键字）。

自动填充详细信息标记如下所示，按以下顺序排列

1. 可选地，一个标记，其前八个字符与字符串“section-”进行ASCII 不区分大小写匹配，表示该字段属于指定的组。

   例如，如果表单中有两个送货地址，则可以将其标记为

   <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. 可选地，一个标记，该标记与以下字符串之一进行ASCII 不区分大小写匹配

   • “shipping”，表示该字段是送货地址或联系信息的一部分
   • “billing”，表示该字段是账单地址或联系信息的一部分

3. 以下两个选项之一

   • 一个标记，该标记与以下自动填充字段名称之一进行ASCII 不区分大小写匹配，但不包括不适用于该控件的名称

     • “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"

     (请参见下表了解这些值的描述。)

   • 以下，按给定顺序

     1. 可选地，一个与以下字符串之一进行ASCII不区分大小写匹配的标记

        • "home"，表示该字段用于联系某人在其住所的联系人信息
        • "work"，表示该字段用于联系某人在其工作场所的联系人信息
        • "mobile"，表示该字段用于联系某人，无论其所在位置
        • "fax"，表示该字段描述传真机的联系信息
        • "pager"，表示该字段描述寻呼机或传呼器的联系信息

     2. 一个与以下自动填充字段名称之一进行ASCII不区分大小写匹配的标记，不包括那些不适用于控件的名称

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

        (请参见下表了解这些值的描述。)

4. 可选地，一个与字符串"webauthn"进行ASCII不区分大小写匹配的标记，表示当用户与表单控件交互时，用户代理应显示通过条件中介可用的公钥凭据。webauthn仅对input和textarea元素有效。

如前所述，属性及其关键字的含义取决于属性所扮演的角色。

当扮演自动填充期望角色时……

关键字"off"表示控件的输入数据特别敏感（例如核武器的激活码）；或者它是一个永远不会重复使用的值（例如银行登录的一次性密钥），因此用户每次都必须显式输入数据，而不是依赖UA为其预填充值；或者文档提供了自己的自动填充机制，并且不希望用户代理提供自动填充值。

关键字"on"表示允许用户代理向用户提供自动填充值，但未提供有关用户可能期望输入哪种数据的任何其他信息。用户代理必须使用启发式方法来决定建议哪些自动填充值。

上面列出的自动填充字段表示允许用户代理向用户提供自动填充值，并指定期望哪种类型的值。每个此类关键字的含义在下面的表格中描述。

如果省略了autocomplete属性，则改为使用与元素的表单所有者的autocomplete属性状态相对应的默认值（"on"或"off")。如果没有表单所有者，则使用值"on"。

当扮演自动填充锚点角色时……

上面列出的自动填充字段表示为该元素提供的特定类型的值的值。每个此类关键字的含义在下面的表格中描述。

在此示例中，页面已明确指定交易的货币和金额。表单请求信用卡和其他账单详细信息。用户代理可以使用这些信息来建议它知道具有足够余额并支持相关货币的信用卡。

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

下表描述了自动填充字段关键字之间的关系。此表中每一行上列出的字段名称对应于该行在标有“含义”的列中的单元格中给出的含义。某些字段对应于其他字段的子部分；例如，信用卡有效期可以使用一个字段来表示有效期的月份和年份（"cc-exp"），或者使用两个字段，一个表示月份（"cc-exp-month"），另一个表示年份（"cc-exp-year"）。在这种情况下，较宽字段的名称覆盖多行，其中定义了较窄字段。

通常，鼓励作者使用较宽的字段而不是较窄的字段，因为较窄的字段往往会暴露西方偏见。例如，虽然在某些西方文化中，按顺序使用名字和姓氏很常见（因此通常称为名和姓），但许多文化将姓氏放在前面，名字放在后面，许多其他文化只使用一个名字（单名）。因此，使用单个字段更灵活。

某些字段仅适用于某些表单控件。自动填充字段名称不适用于控件，如果控件不属于描述该自动填充字段的第一行第五列中列出的组，则该自动填充字段不适用于该控件。每个组包含哪些控件将在下表下方进行描述。

这些组与控件的对应关系如下

文本

input 元素，其type 属性处于隐藏状态

input 元素，其type 属性处于文本状态

input 元素，其type 属性处于搜索状态

textarea 元素

select 元素

多行

input 元素，其type 属性处于隐藏状态

textarea 元素

select 元素

密码

input 元素，其type 属性处于隐藏状态

input 元素，其type 属性处于文本状态

input 元素，其type 属性处于搜索状态

input 元素，其type 属性处于密码状态

textarea 元素

select 元素

网址

input 元素，其type 属性处于隐藏状态

input 元素，其type 属性处于文本状态

input 元素，其type 属性处于搜索状态

input 元素，其type 属性处于URL状态

textarea 元素

select 元素

用户名

input 元素，其type 属性处于隐藏状态

input 元素，其type 属性处于文本状态

input 元素，其type 属性处于搜索状态

input 元素，其type 属性处于电子邮件状态

textarea 元素

select 元素

电话

input 元素，其type 属性处于隐藏状态

input 元素，其type 属性处于文本状态

input 元素，其type 属性处于搜索状态

input 元素，其type 属性处于电话状态

textarea 元素

select 元素

数字

input 元素，其type 属性处于隐藏状态

input 元素，其type 属性处于文本状态

input 元素，其type 属性处于搜索状态

input 元素，其type 属性处于数字状态

textarea 元素

select 元素

月份

input 元素，其type 属性处于隐藏状态

input 元素，其type 属性处于文本状态

input 元素，其type 属性处于搜索状态

input 元素，其type 属性处于月份状态

textarea 元素

select 元素

日期

input 元素，其type 属性处于隐藏状态

input 元素，其type 属性处于文本状态

input 元素，其type 属性处于搜索状态

具有 type 属性且处于 日期 状态的 input 元素

textarea 元素

select 元素

地址级别：“address-level1” - “address-level4” 字段用于描述街道地址的区域。不同地区地址级别数量不同。例如，美国使用两个级别（州和城镇），英国根据地址使用一到两个级别（邮政城镇，以及某些情况下区域），而中国可以使用三个级别（省、市、区）。“address-level1” 字段代表最宽泛的行政区域。不同地区的字段顺序也不同；例如，在美国，城镇（级别 2）在州（级别 1）之前；而在日本，县（级别 1）在市（级别 2）之前，市在区（级别 3）之前。鼓励作者提供符合国家规范的表单（根据用户更改的国家/地区相应地隐藏、显示和重新排列字段）。

4.10.18.7.2 处理模型

每个应用了 autocomplete 属性的 input 元素、每个 select 元素以及每个 textarea 元素都具有一个自动填充提示集、一个自动填充范围、一个自动填充字段名称、一个非自动填充凭据类型和一个IDL 公开自动填充值。

自动填充字段名称 指定字段中预期的数据的具体类型，例如“street-address” 或 “cc-exp”。

自动填充提示集 标识用户代理要查看的地址或联系信息类型，例如“shipping fax” 或 “billing”。

非自动填充凭据类型 标识一种当用户与字段交互时，用户代理可能会提供的凭据类型，同时提供其他自动填充字段值。如果此值为“webauthn”而不是 null，则选择该类型的凭据将解决挂起的条件 中介 navigator.credentials.get() 请求，而不是自动填充字段。

<input name=password type=password autocomplete="current-password webauthn">

自动填充范围 标识其信息涉及同一主题的一组字段，并且由自动填充提示集以及（如果适用）“section-*” 前缀组成，例如“billing”、“section-parent shipping” 或 “section-child shipping home”。

这些值定义为运行以下算法的结果

1. 如果元素没有 autocomplete 属性，则跳转到标记为默认的步骤。

2. 令tokens 为在 ASCII 空格处分割属性值的结果。

3. 如果tokens 为空，则跳转到标记为默认的步骤。

4. 令index 为tokens 中最后一个标记的索引。

5. 令field 为tokens 中第index 个标记。

6. 将category、maximum tokens 对设置为给定field 的确定字段类别的结果。

7. 如果category 为 null，则跳转到标记为默认的步骤。

8. 如果tokens 中标记的数量大于maximum tokens，则跳转到标记为默认的步骤。

9. 如果category 为关闭或自动，但元素的 autocomplete 属性正在使用自动填充锚点外壳，则跳转到标记为默认的步骤。

10. 如果category 为关闭，则令元素的自动填充字段名称 为字符串“off”，令其自动填充提示集 为空，并令其IDL 公开自动填充值 为字符串“off”。然后，返回。

11. 如果category 为自动，则令元素的自动填充字段名称 为字符串“on”，令其自动填充提示集 为空，并令其IDL 公开自动填充值 为字符串“on”。然后，返回。

12. 令scope tokens 为一个空列表。

13. 令hint tokens 为一个空集。

14. 令credential type 为 null。

15. 令IDL value 与field 具有相同的值。

16. 如果category 为凭据，并且tokens 中的第index 个标记与“webauthn”不区分大小写地匹配，则运行以下子步骤

    1. 将credential type 设置为“webauthn”。

    2. 如果tokens 中的第index 个标记是第一个条目，则跳过到标记为完成的步骤。

    3. 将index 减 1。

    4. 将category、maximum tokens 对设置为给定tokens 中的第index 个标记的确定字段类别的结果。

    5. 如果category 不是正常且category 不是联系，则跳转到标记为默认的步骤。

    6. 如果index 大于maximum tokens 减 1（即，如果剩余标记的数量大于maximum tokens），则跳转到标记为默认的步骤。

    7. 将IDL value 设置为tokens 中的第index 个标记、一个 U+0020 空格字符以及IDL value 的先前值的串联。

17. 如果tokens 中的第index 个标记是第一个条目，则跳过到标记为完成的步骤。

18. 将index 减 1。

19. 如果category 为联系，并且tokens 中的第index 个标记与以下列表中的一个字符串不区分大小写地匹配，则运行以下子步骤

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

    子步骤是

    1. 令contact 为上面列表中匹配的字符串。

    2. 在scope tokens 的开头插入contact。

    3. 将contact 添加到hint tokens。

    4. 将IDL value 设置为contact、一个 U+0020 空格字符以及IDL value 的先前值的串联。

    5. 如果tokens 中的第index 个条目是第一个条目，则跳过到标记为完成的步骤。

    6. 将index 减 1。

20. 如果tokens 中的第index 个标记与以下列表中的一个字符串不区分大小写地匹配，则运行以下子步骤

    • "shipping"
    • "billing"

    子步骤是

    1. 令mode 为上面列表中匹配的字符串。

    2. 在scope tokens 的开头插入mode。

    3. 将mode 添加到hint tokens。

    4. 将IDL value 设置为mode、一个 U+0020 空格字符以及IDL value 的先前值的串联。

    5. 如果tokens 中的第index 个条目是第一个条目，则跳过到标记为完成的步骤。

    6. 将index 减 1。

21. 如果tokens 中的第index 个条目不是第一个条目，则跳转到标记为默认的步骤。

22. 如果tokens 中的第index 个标记的前八个字符与字符串“section-”不区分大小写地匹配，则跳转到标记为默认的步骤。

23. 令section 为tokens 中的第index 个标记，转换为 ASCII 小写。

24. 在scope tokens 的开头插入section。

25. 将IDL value 设置为section、一个 U+0020 空格字符以及IDL value 的先前值的串联。

26. 完成：令元素的自动填充提示集 为hint tokens。

27. 令元素的非自动填充凭据类型 为credential type。

28. 令元素的自动填充范围 为scope tokens。

29. 令元素的自动填充字段名称 为field。

30. 令元素的IDL 公开自动填充值 为IDL value。

31. 返回。

32. 默认：令元素的IDL 公开自动填充值 为空字符串，并令其自动填充提示集 和自动填充范围 为空。

33. 如果元素的 autocomplete 属性正在使用自动填充锚点外壳，则令元素的自动填充字段名称 为空字符串并返回。

34. 令form 为元素的表单所有者（如果有），否则为 null。

35. 如果 form 不为空，并且 form 的 autocomplete 属性处于 关闭 状态，则将元素的 自动填充字段名称 设置为 "关闭"。

    否则，将元素的 自动填充字段名称 设置为 "开启"。

要 确定字段的类别，给定 field

1. 如果 field 与以下表格第一列中给出的任何一个标记在 ASCII 不区分大小写 方面不匹配，则返回对 (null, null)。

   标记	最大标记数	类别
   "关闭"	1	关闭
   "开启"	1	自动
   "名称"	3	普通
   "尊称前缀"	3	普通
   "给定名称"	3	普通
   "附加名称"	3	普通
   "姓氏"	3	普通
   "尊称后缀"	3	普通
   "昵称"	3	普通
   "组织职位"	3	普通
   "用户名"	3	普通
   "新密码"	3	普通
   "当前密码"	3	普通
   "一次性代码"	3	普通
   "组织"	3	普通
   "街道地址"	3	普通
   "地址行1"	3	普通
   "地址行2"	3	普通
   "地址行3"	3	普通
   "地址级别4"	3	普通
   "地址级别3"	3	普通
   "地址级别2"	3	普通
   "地址级别1"	3	普通
   "国家"	3	普通
   "国家名称"	3	普通
   "邮政编码"	3	普通
   "信用卡姓名"	3	普通
   "信用卡给定名称"	3	普通
   "信用卡附加名称"	3	普通
   "信用卡姓氏"	3	普通
   "信用卡号码"	3	普通
   "信用卡有效期"	3	普通
   "信用卡有效期月份"	3	普通
   "信用卡有效期年份"	3	普通
   "信用卡安全码"	3	普通
   "信用卡类型"	3	普通
   "交易货币"	3	普通
   "交易金额"	3	普通
   "语言"	3	普通
   "生日"	3	普通
   "生日日期"	3	普通
   "生日月份"	3	普通
   "生日年份"	3	普通
   "性别"	3	普通
   "网址"	3	普通
   "照片"	3	普通
   "电话"	4	联系方式
   "电话国家代码"	4	联系方式
   "电话国家区号"	4	联系方式
   "电话区号"	4	联系方式
   "电话本地号码"	4	联系方式
   "电话本地号码前缀"	4	联系方式
   "电话本地号码后缀"	4	联系方式
   "电话分机号"	4	联系方式
   "电子邮件"	4	联系方式
   "即时通讯"	4	联系方式
   "WebAuthn"	5	凭证

2. 否则，将 最大标记数 和 类别 分别设置为该行第二列和第三列单元格的值。

3. 返回对 (类别, 最大标记数)。

出于自动填充的目的，控件的数据 取决于控件的类型

输入 元素，其 type 属性处于 电子邮件 状态，并且指定了 multiple 属性

元素的 值s。

任何其他 输入 元素

一个 文本区域 元素

元素的 值。

一个 选择 元素，其 multiple 属性已指定

选项 元素在 选择 元素的 选项列表 中，并且其 选中状态 设置为 true。

任何其他 选择 元素

选项 元素在 选择 元素的 选项列表 中，并且其 选中状态 设置为 true。

如何处理 自动填充提示集、自动填充范围 和 自动填充字段名称 取决于 autocomplete 属性所承担的角色。

当承担 自动填充期望角色 时…

当元素的 自动填充字段名称 为 "关闭" 时，用户代理不应记住 控件的数据，也不应向用户提供以前的值。

此外，当元素的 自动填充字段名称 为 "关闭" 时，值将重置，当 重新激活文档 时。

银行通常不希望 UA 预填充登录信息

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

当元素的 自动填充字段名称 *不* 为 "关闭" 时，用户代理可能会存储 控件的数据，并可能向用户提供以前存储的值。

例如，假设用户访问包含以下控件的页面

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

这可能会呈现如下

假设在第一次访问此页面时，用户选择了“赞比亚”。在第二次访问时，用户代理可以在列表顶部复制赞比亚的条目，以便界面改为如下所示

当 自动填充字段名称 为 "开启" 时，用户代理应尝试使用启发式方法来确定向用户提供最合适的值，例如，根据元素的 name 值、元素在其 树 中的位置、表单中存在的其他字段等。

当 自动填充字段名称 是上面描述的 自动填充字段 之一名称时，用户代理应提供与该字段名称含义匹配的建议，如本节前面表格中所述。 自动填充提示集 应用于在多个可能的建议中进行选择。

例如，如果用户曾经将一个地址输入到使用“shipping”关键字的字段中，并将另一个地址输入到使用“billing”关键字的字段中，则在后续表单中，只有第一个地址会建议用于 自动填充提示集 包含关键字“shipping”的表单控件。但是，对于 自动填充提示集 不包含这两个关键字的与地址相关的表单控件，可能会建议这两个地址。

当承担 自动填充锚点角色 时…

当自动填充字段名称不是空字符串时，则用户代理必须表现得好像用户已为给定的控件数据、自动填充提示集、自动填充范围和自动填充字段名称组合指定了该数据。

当用户代理自动填充表单控件时，具有相同表单所有者和相同自动填充范围的元素必须使用与同一人、地址、付款工具和联系方式相关的数据。当用户代理自动填充具有相同表单所有者和自动填充范围的"country"和"country-name"字段，并且用户代理具有"country"字段的值时，则"country-name"字段必须使用相同国家/地区的易于理解的名称进行填充。当用户代理一次填充多个字段时，所有具有相同自动填充字段名称、表单所有者和自动填充范围的字段必须填充相同的值。

假设用户代理知道两个电话号码，+1 555 123 1234 和 +1 555 666 7777。如果用户代理使用值“123”填充autocomplete="shipping tel-local-prefix"的字段，并使用值“7777”填充同一表单中另一个autocomplete="shipping tel-local-suffix"的字段，则不符合规范。根据上述信息，唯一有效的预填充值分别为“123”和“1234”，或“666”和“7777”。

类似地，如果某个表单由于某种原因同时包含"cc-exp"字段和"cc-exp-month"字段，并且用户代理预填充了表单，则前者的月份组件必须与后者匹配。

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

自动填充范围中的“section-*”标记是不透明的；用户代理不得尝试从这些标记的确切值中推导出含义。

例如，如果用户代理决定它应该为“section-child”提供它知道的用户女儿的地址，并为“section-spouse”提供它知道的用户配偶的地址，则不符合规范。

自动完成功能必须由用户代理实现，其行为就好像用户修改了控件数据一样，并且必须在元素可变时进行（例如，在元素刚刚插入文档中之后，或当用户代理停止解析时）。用户代理必须仅使用用户可能输入的值来预填充控件。

例如，如果select元素仅具有值为“Steve”和“Rebecca”、"Jay"和"Bob"的option元素，并且具有自动填充字段名称"given-name"，但用户代理唯一要预填充该字段的值是“Evan”，则用户代理无法预填充该字段。如果以某种方式将select元素设置为值“Evan”，则不符合规范，因为用户无法自己执行此操作。

预填充表单控件的用户代理不得区分位于文档树中的表单控件和已连接的表单控件；也就是说，基于元素的根是影子根还是Document来决定是否自动填充是不符合规范的。

预填充表单控件值的用户代理不得导致该控件出现类型不匹配、过长、过短、下溢、溢出或步长不匹配。预填充表单控件值的用户代理也不得导致该控件出现模式不匹配。在给定控件约束的情况下，用户代理必须尽可能使用上述表格中给出的规范格式。如果无法使用规范格式，则用户代理应使用启发式方法尝试转换值以便可以使用它们。

<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">

用户代理可以允许用户覆盖元素的自动填充字段名称，例如，将其从"off"更改为"on"，以允许记住和预填充值，即使页面作者反对，或者始终"off"，永远不记住值。

更具体地说，用户代理可能会特别考虑替换以下表格第一列中给出的描述匹配的表单控件的自动填充字段名称，当它们的自动填充字段名称为"on"或"off"时，替换为该行第二单元格中给出的值。如果使用此表格，则必须按树形顺序进行替换，因为除第一行以外的所有行都引用了前面元素的自动填充字段名称。当以下描述提到表单控件在其他控件之前或之后时，指的是共享相同表单所有者的列出元素列表中的位置。

在获取时，autocomplete IDL 属性必须返回元素的IDL 公开自动填充值，在设置时，必须反映同名内容属性。

4.10.19 文本控件选择的 API

input和textarea元素定义了几个用于处理其选择的属性和方法。它们的共享算法在此定义。

element.select()

选择文本控件中的所有内容。

element.selectionStart [ = value ]

返回选择开始处的偏移量。

可以设置，以更改选择的开始位置。

element.selectionEnd [ = value ]

返回选择结束处的偏移量。

可以设置，以更改选择的结束位置。

element.selectionDirection [ = value ]

返回当前的选择方向。

可以设置，以更改选择的方向。

可能的值为“forward”、“backward”和“none”。

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

✔MDN

HTMLInputElement/setSelectionRange

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+

---

Opera8+Edge79+

---

Edge (Legacy)12+Internet Explorer9+

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

将选择更改为覆盖给定方向中的给定子字符串。如果省略方向，则将其重置为平台默认值（无或向前）。

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

✔MDN

HTMLInputElement/setRangeText

所有当前引擎都支持。

Firefox27+Safari7+Chrome24+

---

Opera?Edge79+

---

Edge (Legacy)?Internet Explorer不支持

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

用新文本替换一段文本。如果未提供start和end参数，则假定范围为选择。

最后一个参数确定替换文本后如何设置选择。可能的值为

“select”

选择新插入的文本。

“start”

将选择移动到插入文本之前。

“end”

将选择移动到选中文本之后。

“preserve”

尝试保留选择。这是默认设置。

所有这些 API 适用的input元素，以及所有textarea元素，始终具有选择或文本输入光标位置（即使对于未呈现的元素也是如此），以控件代码单元的相关值中的偏移量来衡量。初始状态必须包括控件开头处的文本输入光标。

对于input元素，这些 API 必须对元素的值进行操作。对于textarea元素，这些 API 必须对元素的API 值进行操作。在下述算法中，我们将正在操作的值字符串称为相关值。

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

没有可见渲染的字符，例如 U+200D 零宽连接符，仍然算作字符。因此，例如，选择可以只包含一个不可见的字符，并且文本插入光标可以放置在该字符的一侧或另一侧。

每当这些 API 适用的元素的相关值发生变化时，请运行以下步骤

1. 如果元素具有选择

   1. 如果选择的开始位置现在超过了相关值的末尾，则将其设置为相关值的末尾。

   2. 如果选择的结束位置现在超过了相关值的末尾，则将其设置为相关值的末尾。

   3. 如果用户代理不支持空选择，并且选择开始和结束位置现在都指向相关值的末尾，则改为将元素的文本输入光标位置设置为相关值的末尾，并删除任何选择。

2. 否则，元素必须具有文本输入光标位置。如果它现在超过了相关值的末尾，则将其设置为相关值的末尾。

在某些相关值发生变化的情况下，规范的其他部分也将修改文本输入光标位置，而不仅仅是上述钳位步骤。例如，请参阅value设置器（用于textarea）。

在可能的情况下，用于更改input和textarea元素中文本选择的用户界面功能必须使用设置选择范围算法来实现，以便例如，所有相同的事件都触发。

input和textarea元素的选择具有选择方向，该方向为“forward”、“backward”或“none”。选择方向的确切含义取决于平台。此方向在用户操作选择时设置。如果平台支持该方向，则初始选择方向必须为“none”，否则为“forward”。

要将元素的选择方向设置为给定方向，请将元素的选择方向更新为给定方向，除非方向为“none”并且平台不支持该方向；在这种情况下，请将元素的选择方向更新为“forward”。

调用时，select()方法必须运行以下步骤

1. 如果此元素是input元素，并且select()不适用于此元素或相应的控件没有可选文本，则返回。

   例如，在用户代理中，<input type=color>呈现为带选取器的颜色井，而不是接受十六进制颜色代码的文本控件，则没有可选文本，因此会忽略对该方法的调用。

2. 设置选择范围，范围为 0 到无穷大。

selectionStart属性的 getter 必须运行以下步骤

1. 如果此元素是input元素，并且selectionStart不适用于此元素，则返回 null。

2. 如果没有选择，则返回代码单元在相关值中到紧跟文本输入光标的字符的偏移量。

3. 返回在代码单元中，紧随选择开始位置的字符的偏移量。相关值

selectionStart 属性的设置器必须执行以下步骤

1. 如果此元素是input 元素，并且selectionStart 不适用于此元素，则抛出一个"InvalidStateError" DOMException。

2. 令end 为此元素的selectionEnd 属性的值。

3. 如果end 小于给定值，则将end 设置为给定值。

4. 设置选择范围，使用给定值、end 和此元素的selectionDirection 属性的值。

selectionEnd 属性的获取器必须执行以下步骤

1. 如果此元素是input 元素，并且selectionEnd 不适用于此元素，则返回 null。

2. 如果没有选择，则返回在相关值中，紧随文本输入光标的字符的代码单元偏移量。

3. 返回在相关值中，紧随选择结束位置的字符的代码单元偏移量。

selectionEnd 属性的设置器必须执行以下步骤

1. 如果此元素是input 元素，并且selectionEnd 不适用于此元素，则抛出一个"InvalidStateError" DOMException。

2. 设置选择范围，使用此元素的selectionStart 属性的值、给定值和此元素的selectionDirection 属性的值。

selectionDirection 属性的获取器必须执行以下步骤

1. 如果此元素是input 元素，并且selectionDirection 不适用于此元素，则返回 null。

2. 返回此元素的选择方向。

selectionDirection 属性的设置器必须执行以下步骤

1. 如果此元素是input 元素，并且selectionDirection 不适用于此元素，则抛出一个"InvalidStateError" DOMException。

2. 设置选择范围，使用此元素的selectionStart 属性的值、此元素的selectionEnd 属性的值和给定值。

setSelectionRange(start, end, direction) 方法在调用时，必须执行以下步骤

1. 如果此元素是input 元素，并且setSelectionRange() 不适用于此元素，则抛出一个"InvalidStateError" DOMException。

2. 设置选择范围，使用start、end 和direction。

要使用整数或 null 的start、整数或 null 或特殊值 infinity 的end 以及可选的字符串direction 设置选择范围，请执行以下步骤

1. 如果start 为 null，则令start 为零。

2. 如果end 为 null，则令end 为零。

3. 将文本控件的选择设置为相关值中的一系列代码单元，从第start个位置（逻辑顺序）的代码单元开始，到第(end-1)个位置的代码单元结束。大于文本控件相关值长度（包括特殊值 infinity）的参数必须视为指向文本控件的末尾。如果end 小于或等于start，则选择开始和选择结束都必须放置在偏移量为end的字符之前。在没有空选择概念的 UA 中，这必须将光标设置为偏移量为end的字符之前。

4. 如果direction 与“backward”或“forward”都不相同，或者如果没有给出direction 参数，则将direction 设置为“none”。

5. 设置文本控件的选择方向为direction。

6. 如果前面的步骤导致文本控件的选择被修改（范围或方向），则在给定元素的用户交互任务源上排队一个元素任务，以触发名为select 的事件，该事件在元素上触发，其bubbles 属性初始化为 true。

setRangeText(replacement, start, end, selectMode) 方法在调用时，必须执行以下步骤

1. 如果此元素是input 元素，并且setRangeText() 不适用于此元素，则抛出一个"InvalidStateError" DOMException。

2. 将此元素的脏值标志设置为 true。

3. 如果该方法只有一个参数，则令start 和end 分别具有selectionStart 属性和selectionEnd 属性的值。

   否则，令start、end 分别具有第二个和第三个参数的值。

4. 如果start 大于end，则抛出一个"IndexSizeError" DOMException。

5. 如果start 大于文本控件相关值的长度，则将其设置为文本控件相关值的长度。

6. 如果end 大于文本控件相关值的长度，则将其设置为文本控件相关值的长度。

7. 令selection start 为selectionStart 属性的当前值。

8. 令selection end 为selectionEnd 属性的当前值。

9. 如果start 小于end，则删除元素相关值中的一系列代码单元，从第start个位置的代码单元开始，到第(end-1)个位置的代码单元结束。

10. 将第一个参数的值插入到文本控件相关值的文本中，紧靠在第start个代码单元之前。

11. 令新长度为第一个参数值的长度。

12. 令新结束位置为开始位置和新长度的和。

13. 从以下列表中运行相应的子步骤

    如果第四个参数的值为"select"

    令选择开始位置为开始位置。

    令选择结束位置为新结束位置。

    如果第四个参数的值为"start"

    令选择开始位置和选择结束位置都为开始位置。

    如果第四个参数的值为"end"

    令选择开始位置和选择结束位置都为新结束位置。

    如果第四个参数的值为"preserve"

    如果该方法只有一个参数

    1. 令旧长度为结束位置减去开始位置。

    2. 令增量为新长度减去旧长度。

    3. 如果选择开始位置大于结束位置，则将其增加增量。（如果增量为负数，即新文本比旧文本短，则这将减少选择开始位置的值。）

       否则：如果选择开始位置大于开始位置，则将其设置为开始位置。（如果选择开始位置在被替换文本的中间，则此操作会将其捕捉到新文本的开头。）

    4. 如果选择结束位置大于结束位置，则以相同的方式将其增加增量。

       否则：如果选择结束位置大于开始位置，则将其设置为新结束位置。（如果选择结束位置在被替换文本的中间，则此操作会将其捕捉到新文本的结尾。）

14. 使用选择开始位置和选择结束位置设置选择范围。

setRangeText() 方法使用以下枚举

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 定义

一个可提交元素是一个约束验证候选对象，除非某个条件禁止该元素进行约束验证。（例如，如果一个元素具有数据列表元素祖先，则它被禁止进行约束验证。）

一个元素可以定义一个自定义有效性错误消息。最初，一个元素必须将其自定义有效性错误消息设置为空字符串。当其值不是空字符串时，该元素存在自定义错误。可以使用setCustomValidity()方法设置它，除了与表单关联的自定义元素。 与表单关联的自定义元素可以通过其ElementInternals对象的setValidity()方法设置自定义有效性错误消息。用户代理应在提醒用户控件存在问题时使用自定义有效性错误消息。

一个元素可以通过多种方式进行约束。以下是表单控件可能处于的有效性状态列表，这些状态使控件对于约束验证而言无效。（以下定义是非规范性的；本规范的其他部分更精确地定义了每种状态何时适用或不适用。）

存在缺失值

当一个控件没有值但具有required属性（输入 required，文本区域 required）；或者，对于选择元素和单选按钮组中的控件，规则更加复杂，如各自章节中所述。

当setValidity()方法为与表单关联的自定义元素将valueMissing标志设置为true时。

存在类型不匹配

当允许任意用户输入的控件具有值，但该值语法不正确（电子邮件，URL）。

当setValidity()方法为与表单关联的自定义元素将typeMismatch标志设置为true时。

存在模式不匹配

当一个控件的值不满足pattern属性。

当setValidity()方法为与表单关联的自定义元素将patternMismatch标志设置为true时。

存在长度过长

当一个控件的值对于表单控件maxlength属性（输入 maxlength，文本区域 maxlength）而言过长。

当setValidity()方法为与表单关联的自定义元素将tooLong标志设置为true时。

存在长度过短

当一个控件的值对于表单控件minlength属性（输入 minlength，文本区域 minlength）而言过短。

当setValidity()方法为与表单关联的自定义元素将tooShort标志设置为true时。

存在下溢

当一个控件的值不是空字符串，并且对于min属性而言过小。

当setValidity()方法为与表单关联的自定义元素将rangeUnderflow标志设置为true时。

存在上溢

当一个控件的值不是空字符串，并且对于max属性而言过大。

当setValidity()方法为与表单关联的自定义元素将rangeOverflow标志设置为true时。

存在步长不匹配

当一个控件的值不符合step属性给出的规则。

当setValidity()方法为与表单关联的自定义元素将stepMismatch标志设置为true时。

存在无效输入

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

当setValidity()方法为与表单关联的自定义元素将badInput标志设置为true时。

存在自定义错误

当一个控件的自定义有效性错误消息（由元素的setCustomValidity()方法或ElementInternals的setValidity()方法设置）不是空字符串。

即使元素已禁用，元素仍然可能处于这些状态；因此，即使在提交过程中验证表单不会向用户指示问题，这些状态也可以在DOM中表示。

如果一个元素没有处于上述任何有效性状态，则它满足其约束条件。

4.10.20.2 约束验证

当用户代理需要静态验证表单元素表单的约束条件时，它必须运行以下步骤，这些步骤将返回肯定结果（表单中的所有控件均有效）或否定结果（存在无效控件），以及一个（可能为空）的无效元素列表，并且没有脚本声明对此负责

1. 令控件为所有可提交元素的列表，其表单所有者为表单，并按照树的顺序排列。

2. 令无效控件为一个最初为空的元素列表。

3. 对于 controls 中的每个元素 field，按照 树的顺序

   1. 如果 field 不是 约束验证的候选对象，则继续处理下一个元素。

   2. 否则，如果 field 满足其约束条件，则继续处理下一个元素。

   3. 否则，将 field 添加到 invalid controls 中。

4. 如果 invalid controls 为空，则返回肯定的结果。

5. 令 unhandled invalid controls 为一个最初为空的元素列表。

6. 对于 invalid controls 中的每个元素 field（如果有），按照 树的顺序

   1. 令 notCanceled 为在 field 上触发名为 invalid 的事件的结果，其中 cancelable 属性初始化为 true。

   2. 如果 notCanceled 为 true，则将 field 添加到 unhandled invalid controls 中。

7. 返回带有 unhandled invalid controls 列表中元素列表的否定结果。

如果用户代理要交互式地验证 表单 元素 form 的约束条件，则用户代理必须运行以下步骤

1. 静态验证 form 的约束条件，并令 unhandled invalid controls 为如果结果为否定则返回的元素列表。

2. 如果结果为肯定，则返回该结果。

3. 向用户报告 unhandled invalid controls 中给出的至少一个元素的约束条件问题。

   • 用户代理可能会在过程中聚焦这些元素之一，方法是对该元素运行 聚焦步骤，并且可能会更改文档的滚动位置，或者执行一些其他操作以将元素提请用户注意。对于 表单关联的自定义元素，用户代理应出于这些操作的目的使用其 验证锚点。

   • 用户代理可能会报告多个约束违规。

   • 如果合适，用户代理可能会将相关的约束违规报告合并（例如，如果 组 中的多个单选按钮被标记为必填，则只需要报告一个错误）。

   • 如果其中一个控件未呈现（例如，已设置 hidden 属性），则用户代理可能会报告脚本错误。

4. 返回否定的结果。

4.10.20.3 约束验证 API

element.willValidate

✔MDN

HTMLObjectElement/willValidate

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

如果在提交表单时将验证元素，则返回 true；否则返回 false。

element.setCustomValidity(message)

✔MDN

HTMLObjectElement/setCustomValidity

所有当前引擎都支持。

Firefox4+Safari5.1+Chrome10+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLSelectElement/setCustomValidity

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

设置自定义错误，以便元素无法验证。给定的消息是在向用户报告问题时向用户显示的消息。

如果参数为空字符串，则清除自定义错误。

element.validity.valueMissing

✔MDN

ValidityState/valueMissing

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

如果元素没有值但却是必填字段，则返回 true；否则返回 false。

element.validity.typeMismatch

如果元素的值语法不正确，则返回 true；否则返回 false。

element.validity.patternMismatch

如果元素的值与提供的模式不匹配，则返回 true；否则返回 false。

element.validity.tooLong

✔MDN

ValidityState/tooLong

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android64+Safari iOS5+Chrome Android?WebView Android4+Samsung Internet?Opera Android12.1+

如果元素的值长于提供的最大长度，则返回 true；否则返回 false。

element.validity.tooShort

✔MDN

ValidityState/tooShort

所有当前引擎都支持。

Firefox51+Safari10+Chrome40+

---

Opera?Edge79+

---

Edge (Legacy)17+Internet ExplorerNo

---

Firefox Android64+Safari iOS?Chrome Android?WebView Android67+Samsung Internet?Opera Android?

如果元素的值（如果它不是空字符串）短于提供的最小长度，则返回 true；否则返回 false。

element.validity.rangeUnderflow

如果元素的值低于提供的最小值，则返回 true；否则返回 false。

element.validity.rangeOverflow

如果元素的值高于提供的最大值，则返回 true；否则返回 false。

element.validity.stepMismatch

如果元素的值不符合 step 属性给出的规则，则返回 true；否则返回 false。

element.validity.badInput

✔MDN

ValidityState/badInput

所有当前引擎都支持。

Firefox29+Safari7+Chrome25+

---

Opera?Edge79+

---

Edge (Legacy)12+Internet ExplorerNo

---

Firefox Android64+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果用户在用户界面中提供了用户代理无法转换为值的输入，则返回 true；否则返回 false。

element.validity.customError

如果元素有自定义错误，则返回 true；否则返回 false。

element.validity.valid

如果元素的值没有有效性问题，则返回 true；否则返回 false。

valid = element.checkValidity()

✔MDN

HTMLInputElement/checkValidity

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLObjectElement/checkValidity

所有当前引擎都支持。

Firefox4+Safari5.1+Chrome10+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLSelectElement/checkValidity

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera9+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

如果元素的值没有有效性问题，则返回 true；否则返回 false。在后一种情况下，在元素上触发 invalid 事件。

valid = element.reportValidity()

✔MDN

HTMLFormElement/reportValidity

所有当前引擎都支持。

Firefox49+Safari10.1+Chrome40+

---

Opera?Edge79+

---

Edge (Legacy)17+Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLInputElement/reportValidity

所有当前引擎都支持。

Firefox49+Safari10.1+Chrome40+

---

Opera?Edge79+

---

Edge (Legacy)17+Internet ExplorerNo

---

Firefox Android64+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果元素的值没有有效性问题，则返回 true；否则，返回 false，在元素上触发 invalid 事件，并且（如果事件未被取消）向用户报告问题。

element.validationMessage

✔MDN

HTMLObjectElement/validationMessage

所有当前引擎都支持。

Firefox4+Safari5.1+Chrome10+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回如果要检查元素的有效性，则将向用户显示的错误消息。

willValidate 属性的 getter 必须返回 true，如果此元素是 约束验证的候选对象，否则返回 false（即，如果任何条件 阻止它进行约束验证，则返回 false）。

willValidate 属性的 ElementInternals 接口，在获取时，如果 目标元素 不是 表单关联的自定义元素，则必须抛出一个 "NotSupportedError" DOMException。否则，如果 目标元素 是 约束验证的候选对象，则必须返回 true，否则返回 false。

setCustomValidity(error) 方法的步骤如下：

1. 将 error 设置为给定 error 后 规范化换行符 的结果。

2. 将 自定义有效性错误消息 设置为 error。

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

validity 属性的 getter 必须返回一个 ValidityState 对象，该对象表示此元素的 有效性状态。此对象是 动态的。

ElementInternals 接口的 validity 属性在获取时，如果 目标元素 不是 与表单关联的自定义元素，则必须抛出一个 "NotSupportedError" DOMException。否则，它必须返回一个 ValidityState 对象，该对象表示 目标元素 的 有效性状态。此对象是 动态的。

[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;
};

ValidityState 对象具有以下属性。在获取时，如果以下列表中给定的相应条件为真，则必须返回 true，否则返回 false。

valueMissing

该控件 缺少值。

typeMismatch

✔MDN

ValidityState/typeMismatch

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

该控件 类型不匹配。

patternMismatch

✔MDN

ValidityState/patternMismatch

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

该控件 与模式不匹配。

tooLong

该控件 过长。

tooShort

该控件 过短。

rangeUnderflow

✔MDN

ValidityState/rangeUnderflow

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

该控件 值小于范围下限。

rangeOverflow

✔MDN

ValidityState/rangeOverflow

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

该控件 值大于范围上限。

stepMismatch

✔MDN

ValidityState/stepMismatch

所有当前引擎都支持。

Firefox4+Safari5+Chrome4+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer10+

---

Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

该控件 步长不匹配。

badInput

该控件 输入无效。

customError

该控件 存在自定义错误。

valid

以上所有条件都不成立。

元素 element 的 检查有效性步骤 如下：

1. 如果 element 是 约束验证的候选对象 且 不满足其约束条件，则

   1. 触发名为 invalid 的事件，该事件在 element 上触发，其 cancelable 属性初始化为 true（尽管取消没有任何效果）。

   2. 返回 false。

2. 返回 true。

当调用 checkValidity() 方法时，必须在此元素上运行 检查有效性步骤。

ElementInternals 接口的 checkValidity() 方法必须运行以下步骤

1. 令 element 为此 ElementInternals 的 目标元素。

2. 如果 element 不是 与表单关联的自定义元素，则抛出一个 "NotSupportedError" DOMException。

3. 在 element 上运行 检查有效性步骤。