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 属性
      3. 4.10.19 文本控件选择的 API
      4. 4.10.20 约束
         1. 4.10.20.1 约束验证 API
         2. 4.10.20.2 安全
      5. 4.10.21 表单提交
         1. 4.10.21.1 URL 编码的表单数据
         2. 4.10.21.2 多部件表单数据
         3. 4.10.21.3 纯文本表单数据
         4. 4.10.21.4 SubmitEvent 接口
         5. 4.10.21.5 FormDataEvent 接口

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 元素关联，则其 表单所有者 被认为为空。

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

一个 与表单相关的元素 默认情况下与其祖先 form 元素关联，但如果它被 列出，则可以指定一个 form 属性来覆盖此关联。

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

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

element.form

返回元素的 表单所有者。

如果没有，则返回 null。

4.10.18 表单控件的通用属性

4.10.18.1 为表单控件命名：name 属性

name 内容属性给出了表单控件的名称，该名称用于 表单提交 以及 form 元素的 elements 对象。如果指定了该属性，则其值不能是空字符串或 isindex。

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

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

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 属性 声明了用户可以输入的字符数限制。字符数使用 length 进行测量，在 textarea 元素的情况下，所有换行符都归一化为单个字符（而不是 CRLF 对）。

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

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

由 脏值标志 控制的 表单控件 minlength 属性 声明了用户可以输入的字符数的下限。“字符数”使用 length 进行测量，在 textarea 元素的情况下，所有换行符都归一化为单个字符（而不是 CRLF 对）。

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

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

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

<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 元素，它们的定义是独立的。

如果以下任何条件为真，则表单控件被认为是 disabled 的

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

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

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>

4.10.18.7 自动填充

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

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

此属性的使用有两种方式。在佩戴 自动填充预期外衣 时，autocomplete 属性描述了对用户输入的期望。在佩戴 自动填充锚点外衣 时，autocomplete 属性描述了给定值的含义。

在 input 元素上，其 type 属性处于 Hidden 状态，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 属性处于 Hidden 状态

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

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

textarea 元素

select 元素

多行

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

textarea 元素

select 元素

密码

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

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

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

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

textarea 元素

select 元素

URL

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

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

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

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

textarea 元素

select 元素

用户名

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

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

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

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

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

地址级别: "address-level1" – "address-level4" 字段用于描述街道地址的区域。不同的区域具有不同的级别数量。例如，美国使用两个级别（州和镇），英国使用一个或两个级别（取决于地址，即邮政镇，在某些情况下还有地区），而中国可以使用三个级别（省、市、区）。"address-level1" 字段代表最宽的行政区域。不同的区域以不同的方式排序字段；例如，在美国，镇（级别 2）位于州（级别 1）之前；而在日本，县（级别 1）位于市（级别 2）之前，市（级别 2）位于区（级别 3）之前。鼓励作者提供以与国家惯例相符的方式呈现的表单（隐藏、显示和重新排列字段，以适应用户更改的国家）。

4.10.19 文本控件选择 API

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

element.select()

✔MDN

HTMLInputElement/select

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+

---

Opera12.1+Edge79+

---

Edge (Legacy)12+Internet Explorer5.5+

---

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

HTMLInputElement/select

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

element.selectionStart [ = value ]

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

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

element.selectionEnd [ = value ]

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

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

element.selectionDirection [ = value ]

返回选取的当前方向。

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

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

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

更改选取，以覆盖给定方向的给定子字符串。如果省略 direction，则会将其重置为平台默认值（none 或 forward）。

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

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

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

"select"

选取新插入的文本。

"start"

将选取区域移动到插入文本之前。

"end"

将选取区域移动到选取文本之后。

"preserve"

尝试保留选取区域。这是默认值。

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 约束验证 API

element.willValidate

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

element.setCustomValidity(message)

✔MDN

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

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

element.validity.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+

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

element.validity.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+

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

element.validity.tooLong

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

element.validity.tooShort

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

element.validity.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+

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

element.validity.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+

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

element.validity.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+

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

element.validity.badInput

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

element.validity.customError

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

element.validity.valid

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

valid = element.checkValidity()

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

valid = element.reportValidity()

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

element.validationMessage

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

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

4.10.20.2 安全性

服务器不应依赖于客户端验证。客户端验证可以被恶意用户有意绕过，也可以被使用旧用户代理或未实现这些功能的自动化工具的用户无意绕过。约束验证功能仅旨在改善用户体验，而不是提供任何形式的安全机制。

4.10.21 表单提交

当提交表单时，表单中的数据将转换为由 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>

对于相同的用户输入，提交后的结果完全不同：用户代理改为对给定的 URL 执行 HTTP POST，其实体主体类似于以下文本

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

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

fur
------kYFrd4jNJEgCervE--

4.10.21.1 URL 编码的表单数据

有关 application/x-www-form-urlencoded 的详细信息，请参阅 URL。 [URL]

4.10.21.2 多部分表单数据

有关如何解释 multipart/form-data 负载的详细信息，请参阅 RFC 7578。 [RFC7578]

4.10.21.3 纯文本表单数据

使用 text/plain 格式的负载旨在可供人类阅读。它们不能被计算机可靠地解释，因为该格式是模棱两可的（例如，没有办法区分值中的文字换行符和值末尾的换行符）。

4.10.21.4 SubmitEvent 接口

event.submitter

返回表示触发 表单提交 的 提交按钮 的元素，如果提交不是由按钮触发的，则返回 null。

4.10.21.5 FormDataEvent 接口

event.formData

返回一个 FormData 对象，该对象表示与目标 form 关联的元素的名称和值。对 FormData 对象的操作将影响要提交的表单数据。