形式

大多数网站和应用都包含网络表单。笑话类网站，例如 DoWebsites 需要To外观完全匹配相同在每个Browser.com 上， 可能没有表单，而甚至机器学习学习Workshop.com (MLW) 最初是一个愚人节笑话，却包含表单， 即便是假的。MLW 的主要“号召性用语”是机器用于报名参加研讨会的注册表单。此表单 包含在 <form> 元素中。

HTML <form> 元素用于标识包含以下内容的文档地标： 用于提交信息的交互式控件。嵌套在 <form> 中后，您可以找到所有交互式（和非交互式） 所有表单控件

HTML 功能强大。本部分重点介绍 HTML 的强大功能，介绍 HTML 无需添加 JavaScript 的功能。 使用表单数据客户端以某种方式更新界面通常涉及到 CSS 或 JavaScript，本文不作讨论。 有完整的学习表单课程。我们不再复制这部分的内容 多个表单控件以及支持它们的 HTML 属性。

通过表单，您可以让用户与您的网站或应用互动、验证输入的信息并提交 将数据传输到服务器利用 HTML 属性，可以要求用户选择表单控件或输入值。HTML 属性可以定义特定条件，值必须匹配这些条件才有效。当用户尝试提交表单时， 所有表单控件值都会经过客户端限制条件验证，并且可能会阻止提交 直到数据符合要求的条件；无需 JavaScript 即可实现。您还可以通过以下方式关闭此功能：设置 novalidate 属性（在 <form> 上或按钮上（更为常见的是 formnovalidate）），即可保存表单数据供日后填写。 阻止验证。

提交表单

当用户激活嵌套在表单内的提交按钮时，系统会提交表单。对按钮使用 <input> 时， '值'是按钮的标签，显示在按钮中。使用 <button> 时，标签是开头部分之间的文本， 和结束 <button> 标记之间。提交按钮的写法分为以下两种：

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>

对于非常简单的表单，您需要一个 <form> 元素（其中包含一些表单输入）和一个提交按钮。不过 不仅仅是提交表单

<form> 元素的属性将 HTTP 方法设置为 以及用于处理表单提交的网址。是的，可以提交、处理和 无需任何 JavaScript 即可加载新页面。<form> 元素就是这么强大。

<form> 元素的 action 和 method 属性值可分别定义用于处理表单数据的网址和用于提交数据的 HTTP 方法。 默认情况下，表单数据会发送到当前页面。否则，请将 action 属性设置为数据应发送到的网址。

发送的数据由表单的各种控件的名称/值对组成。默认情况下，这会包括所有表单 嵌套在表单中且具有 name 的控件。不过，使用 form 属性时，可以包含表单控件 在 <form> 之外添加，并省略 <form> 中嵌套的表单控件。适用于表单控件和 <fieldset>、 form 属性的值采用与其相关联的控件的 id 形式，而不一定是它采用的形式 。这意味着表单控件不需要以物理方式嵌套在 <form> 中。

method 属性定义请求的 HTTP 协议：通常为 GET 或 POST。使用 GET 时，表单数据会作为 name=value 对的参数字符串，已附加到 action 的网址。

使用 POST 时，数据会附加到 HTTP 请求的正文。发送安全数据（例如密码和信用卡）时 信息，请始终使用 POST。

此外，还有 DIALOG 方法。如果 <form method="dialog"> 位于 <dialog> 中，提交表单将关闭对话框； 但数据既未被清除也不提交，则存在提交事件。同样，无需 JavaScript。本专精课程 “对话框”部分。请注意，由于此操作不能提交表单，因此您可能需要 在提交按钮上同时添加 formmethod="dialog" 和 formnovalidate。

表单按钮可以拥有超出本部分开头所述的属性。如果该按钮包含 formaction， formenctype、formmethod、formnovalidate 或 formtarget 属性：在激活表单的按钮上设置的值 提交内容的优先级高于 action、enctype、method 和 target 在 <form> 上设置。限制条件验证在表单提交之前进行，但前提是 激活的提交按钮上的 formnovalidate 或 <form> 上的 novalidate。

要记录提交表单时使用的是哪个按钮，请提供： 按钮 name。在提交表单时，没有名称或值的按钮不会随表单数据一起发送。

提交表单后

当用户提交填写好的在线表单时，系统会提交相关表单控件的名称和值。该名称是 name 属性的值。这些值来自 value 属性的内容或用户输入或选择的值。<textarea> 的值是其内部文本。 <select> 的值是所选 <option> 的 value，或者，如果 <option> 不包含 value 属性，则该值为所选选项的内部文本。

<form method="GET">
  <label for="student">Pick a student:</label>
  <select name="student" id="student">
    <option value="hoover">Hoover Sukhdeep</option>
    <option>Blendan Smooth</option>
    <option value="toasty">Toasty McToastface</option>
  </select>
  <input type="submit" value="Submit Form">
</form>

选择“Hoover Sukhdeep”（或不执行任何操作，因为浏览器显示时会默认选择第一个选项值） ，然后点击“提交”按钮会重新加载此页面，并将网址设置为：

https://web.dev/learn/html/forms?student=hoover

由于第二个选项没有 value 属性，因此内部文本将作为值提交。选择“Blendan Smooth” 点击“提交”按钮后，系统会重新加载此页面，并将网址设置为：

https://web.dev/learn/html/forms?student=Blendan+Smooth

提交表单后，发送的信息包括具有 name 的所有已命名表单控件的名称和值。 除了未选中的复选框、未选中的单选按钮，以及 提交表单。对于其他所有表单控件，如果表单控件有名称，但未输入任何值或采用默认值， 表单控件的 name 在提交时包含空值。

共有 22 种输入类型，因此我们无法一一涵盖。 请注意，如果您希望用户输入信息，则加入值是可选操作，这通常不是好主意。 对于用户无法修改值的 <input> 元素，您应始终为其添加一个值，包括用于输入 类型为 hidden、radio、checkbox、submit、button 和 reset 的元素。

为表单控件使用唯一的 name 可以使服务器端数据处理更简单，我们建议您搭配使用复选框和 单选按钮。

单选按钮

如果您注意到，当您选中一组单选按钮中的一个单选按钮时，在 这要归功于 name 属性。这种只能选择 1 种效果的方法是为每个单选按钮 同一个 name。

name 对于群组而言应该是唯一的：如果您不小心将同一个 name 用于两个单独的群组，请选择单选按钮 按钮，会取消选择第一个具有相同name的所有所选内容。

name 以及所选单选按钮的 value 随表单一起提交。确保每个单选按钮都有 相关（且通常是唯一的）value。系统不会发送未选中的单选按钮的值。

您可以根据需要在一个页面上添加任意数量的单选按钮组，且每个单选按钮组均可独立运行，只要每个单选按钮组都有 组 name 独有。

如果您想加载带有所选同名组中的某个单选按钮的页面，请添加 checked 属性。 此单选按钮将与 :default CSS 伪类匹配， 即使用户选择其他单选按钮也是如此。当前选中的单选按钮与 :checked 匹配 伪类。

如果用户需要从一组单选按钮中选择一个单选按钮，请至少为一个单选按钮添加 required 属性 控件。在群组的单选按钮中包含 required 意味着必须选择提交表单，但 不必是具有所选属性才有效的单选按钮。此外，请在<legend>中明确说明 必须填写表单控件。下面介绍了单选按钮组的标签以及各个按钮的说明 。

复选框

一个组内的所有复选框都具有相同的 name。只有选中的复选框才有其 name 和 value 提交的信息。如果您选中了多个具有相同名称的复选框，则系统会将相同名称的 不同的值。如果有多个表单控件同名，即使这些控件并非全部为复选框， 它们都将提交，并用“&”符号分隔

如果您未在复选框中添加 value，则所选复选框的值将默认为 on（可能不是 非常有帮助。如果您有三个名为 chk 的复选框，并且它们都被选中，则无法对提交的表单进行解密：

https://web.dev/learn/html/forms?chk=on&chk=on&chk=on

如需将复选框设置为必选，请添加 required 属性。在必须选中某个复选框时或在以下情况下始终通知用户 任何表单控件都是必需的。向复选框添加 required 只是使该复选框成为必需复选框；不会影响其他 复选框。

标签和字段集

表单必须可供访问，用户才能知道如何填写表单。每个表单控件都必须有一个标签。 您还需要为表单控件组添加标签。各个输入、选择和文本区域均使用 <label> 标记， 表单控件组由 <legend> 的内容进行标记， 对它们进行分组的 <fieldset>。

在前面的示例中，您可能已经注意到，除提交按钮外，每个表单控件都有一个 <label>。标签 为表单控件提供无障碍名称。按钮会从其内容或值中获取无障碍名称。所有其他 表单控件需要相关联的 <label>。如果没有关联的标签，浏览器仍会呈现表单控件， 但用户不知道需要哪些信息。

若要明确地将表单控件与 <label> 相关联，请在 <label> 中添加 for 属性：该值为 与其关联的表单控件的 id。

<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">

您的姓名

将标签与表单控件相关联有诸多好处。标签可让屏幕阅读器用户通过以下方式访问表单控件： 为控件提供一个可访问的名称标签也是“命中区域”；它们能使网站更方便 从而避免精细动作失灵如果您使用鼠标，请尝试点击“您的姓名”标签的任意位置。操作 因此会赋予输入焦点。

如需提供隐式标签，请在开始和结束 <label> 标记之间添加表单控件。这同样是 可从屏幕阅读器和指针设备的角度访问，但不像显式报告那样提供 标签。

<label>Your name
  <input type="text" name="name">
</label>

您的姓名

由于标签是“命中区域”，因此请勿在显式标签内包含互动元素，也不要在任何其他互动组件中添加互动元素 。例如，如果您在标签中包含一个链接，而浏览器 会呈现 HTML，如果用户点击标签进入表单控件却被重定向到 新页面。

通常，<label> 位于表单控件之前，单选按钮和复选框除外。不需要。 这只是常见的用户体验模式。“学习表单”系列包含有关表单设计的信息。

对于单选按钮和复选框组，标签会提供与其相关联的表单控件的可访问名称； 但这组控件及其标签也需要一个标签。要标记组，请将所有元素划分到一个 <fieldset>，其中 <legend> 用于为该组提供标签。

<fieldset>
  <legend>Who is your favorite student?</legend>
  <ul>
    <li>
      <label>
        <input type="radio" value="blendan" name="machine"> Blendan Smooth
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="toasty" name="machine"> Toasty McToastface
      </label>
    </li>
  </ul>
</fieldset>

在此示例中，隐式 <label> 会为每个单选按钮添加一个单选按钮，而 <legend> 用于为单选按钮组提供标签。 将一个 <fieldset> 嵌套在另一个 <fieldset> 中是标准做法。例如，如果一份表单是包含多个问题的调查问卷 问题划分为若干组，即“最喜欢的学生”<fieldset> 可能嵌套在另一个标记为<fieldset> “您的收藏夹”：

<fieldset>
  <legend>Your favorites:</legend>
  <ul start="6">
    <li>
      <fieldset>
        <legend>Who is your favorite student?</legend>
        <ul>
          <li>
            <!-- the rest of the code here -->

这些元素的默认外观会导致它们不被使用，但 <legend> 和 <fieldset> 可以使用 CSS 设置样式。 除了所有全局属性之外，<fieldset> 还支持 name、disabled 和 form 属性。 如果停用某个字段集，所有嵌套的表单控件都会停用。name 和 form 属性均没有 <fieldset>上有很多用途。name 可用于通过 JavaScript 访问字段集，但字段集本身 未包含在提交的数据中（嵌套在其中的已命名表单控件也包含在内）。

输入类型和动态键盘

如前所述，有 22 种不同类型的输入。 在某些情况下，如果用户所使用的设备（例如手机）具有仅在需要时显示的动态键盘，则输入 type 决定了显示的键盘类型。您可以根据所需的输入类型优化所显示的默认键盘。 例如，输入 tel 会显示专为输入电话号码而优化的键盘；email 包括 @ 和 .；和 url 的动态键盘包含冒号和斜杠符号。很遗憾，iPhone 上仍未包含 : 是 url 输入类型的默认动态键盘。

适用于 iPhone 和两款不同 Android 手机上的 <input type="tel"> 的键盘：

适用于 iPhone 和两款不同 Android 手机上的 <input type="email"> 的键盘：

使用麦克风和摄像头

文件输入类型 <input type="file"> 支持通过表单上传文件。文件可以是任何类型、经过定义和受限的文件 由 accept 属性决定。可接受的文件类型列表可以是以逗号分隔的文件扩展名列表、全局类型 或全局类型和扩展的组合。例如，accept="video/*, .gif" 接受任何视频文件或 GIF 动画。 使用“audio/*”声音文件：“video/*”和“image/*”。

枚举的 capture 属性，在 媒体捕获规范，如果新媒体 需要使用用户的摄像头或麦克风才能创建。对于面向用户的输入设备，您可以将值设置为 user 或 environment（适用于手机的后置摄像头或麦克风）。通常情况下，不指定值也能使用 capture，这是因为用户 接着选择要使用的输入设备

<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">

内置验证

同样，在不包含任何 JavaScript 的情况下，HTML 会阻止提交含有无效值的表单。

有一些 CSS 选择器会根据是否存在 HTML 属性（包括 :required）来匹配表单控件 如果是布尔值 required，则设为 :optional 设置或未设置:default（如果 checked） 是硬编码的以及 :enabled 或 :disabled， 具体取决于元素是否为互动元素，以及 disabled 属性。:read-write 伪类会将 contenteditable 已设置并 默认情况下可修改的表单控件，例如 number、password 和 text 输入类型（但不适用于复选框、 单选按钮或 hidden 类型等）。如果正常可写的元素具有 readonly 属性集，它将与 :read-only 匹配。

用户在表单控件中输入信息时，CSS 界面选择器（包括 :valid）会 :invalid、:in-range和 :out-of-range 将根据状态开启和关闭。当用户 会退出表单控件（尚未完全支持的 :user-invalid 或 :user-valid 伪类将变得一致。

您可以使用 CSS 提供相关提示，说明当用户与表单互动时表单控件是否必需且有效。 您甚至可以使用 CSS 来防止用户在表单有效之前点击提交按钮：

form:invalid [type="submit"] {
  opacity: 50%;
  pointer-events: none;
}

此 CSS 代码段是一种反模式。虽然用户界面直观明了，但许多用户还是会尝试向 启用错误消息传递功能。如果以这种方式将提交按钮显示为停用状态，则无法验证限制条件， 许多用户所依赖的功能

已应用的 CSS 会根据界面的当前状态不断更新。例如，添加带有 限制（例如 email、number、url 和日期类型），前提是该值为非 null（不为空）且当前值 值不是有效的电子邮件地址、数字、网址、日期或时间，那么 :invalid CSS 伪类将是匹配项。此常量 更新与内置 HTML 约束验证不同，内置 HTML 约束验证仅在用户尝试提交表单时发生。

内置限制条件验证只与使用 HTML 属性设置的约束条件相关。虽然您可以根据元素 针对 :required 和 :valid/:invalid 伪类，浏览器提供的错误消息来自 required、pattern、min、max 甚至 type 属性会在提交表单时用到。

在我们尝试在没有选择喜欢的学生的情况下提交表单时，约束验证会阻止表单提交 原因是出现 validityState.valueMissing 错误。

如果任何 validityState 属性返回 true，系统会阻止提交，并且浏览器会显示错误消息 第一个错误表单控件，使其获得焦点。当用户激活表单提交且存在无效值时， 第一个无效表单控件将显示错误消息并获得焦点。如果必需的控件未设置值，如果 数值超出范围，或者值不是 type 属性所需的类型，表单将不会验证 无法提交，并且会显示错误消息。

如果 number、日期或时间值低于设置的最小 min 或设置的最大 max，则控件将为 :out-of-range（以及 :invalid），并且 用户将收到valididityState.rangeUnderflow的通知， validityState.rangeOverflow 错误。 尝试提交表单。如果值与 step 值（无论是明确设置还是默认为 1），控件将为 :out-of-range（以及 :invalid），并且将有一个 validityState.stepMismatch 错误。该错误会以气泡形式显示，默认情况下会提供有关如何更正错误的实用信息。

也有类似的值长度属性：minlength 和 maxlength 属性会提醒用户存在错误 validityState.tooLong 或 validityState.tooShort（提交后）。 maxlength 还可以防止用户输入过多字符。

使用 maxlength 属性可能会导致用户体验不佳。一般来说，如果用户 输入超出允许的字符长度时，提供计数器，可以选择以 未随表单提交的 <output> 元素 使他们能够向下编辑文本，直到输出显示长度不超过允许的最大长度。maxlength 可添加到 HTML 中；就像我们前面介绍的所有内容一样，它无需 JavaScript 也可运行。然后，在加载时， maxlength 属性可用于在 JavaScript 中创建此字符计数器。

某些输入类型似乎具有默认约束条件，但实际上没有。例如，tel 输入类型提供数字 电话键盘，但不限制有效值。对于此输入类型以及其他输入类型 pattern 属性。您可以指定一个正则表达式，让该值符合相应条件才会被视为有效。 如果值是空字符串，并且不需要该值，则不会导致 validityState.patternMismatch 错误。若必需且为空，系统会向用户显示 validityState.valueMissing 的默认错误消息，而不是向用户显示的消息 patternMismatch。

对于电子邮件，validityState.typeMismatch 也可能是 那就是“原封不动”您可能需要添加 pattern 属性，因此系统不会将不含 TLD 的内网电子邮件地址视为有效地址。 通过模式属性，您可以提供值必须匹配的正则表达式。当要求模式匹配时， 确保用户清楚了解预期内容。

这一切无需一行 JavaScript 代码即可实现，但作为一个 HTML API，您可以使用 JavaScript 将 自定义消息。您还可以使用 JavaScript 更新剩余字符数， 密码强度进度条，或其他任何动态提高完整程度的方法。

示例

此示例的 <dialog> 中有一个表单，其中包含一个嵌套的 <form>，其中包含三个表单控件和两个提交按钮， 清晰的标签和说明。

点击第一个提交按钮会关闭对话框。使用 formmethod="dialog" 替换表单的默认方法，并关闭 <dialog>，而不提交数据或清空数据。您还必须添加 formnovalidate，否则浏览器 尝试验证是否所有必填字段都有相应的值。用户可能想要在没有 输入任何数据；验证可以防止出现这种情况。由于“X”而包含aria-label="close"是已知的视觉提示 而不是描述性标签

表单控件都具有隐式标签，因此您无需添加 id 或 for 属性。输入元素 具有必需属性，使它们成为必需属性。数字输入明确设置了 step，用于演示 step 是如何设置的 包括在内。由于 step 默认为 1，因此可以省略此属性。

<select> 具有默认值，因此不需要 required 属性。无需添加 value 属性 则该值默认为内部文本。

最后的提交按钮会将表单方法设置为 POST。点击该按钮后，系统将检查每个值的有效性。如果全部 值有效，系统将提交表单数据，对话框将关闭，并且网页可能会重定向到 thankyou.php， 也就是操作网址如果缺少任何值，或者数值存在步长不匹配或超出范围，则 浏览器定义的相关错误消息，系统无法提交表单，且对话框也不会关闭。 您可以使用 validityState.setCustomValidity('message here') 自定义默认错误消息。 方法。请注意，如果您设置了自定义消息，则必须将消息明确设置为空字符串， 有效，否则表单将无法提交。

其他注意事项

其中有一个部分专门用于帮助用户在表单中输入正确的数据。健康 用户体验，因此请务必添加说明和必要的提示，以防止用户出错。 尽管本部分介绍的是如何仅通过 HTML 提供客户端验证，但验证必须同时进行客户端验证和 。在表单填写过程中，验证能够以不突兀的方式提供，例如添加 复选标记。不过，请勿在表单控件完成之前提供错误消息。如果用户 确实出错了，请告知用户错误的位置以及所犯的错误。

在设计表单时，请务必考虑到，并非所有用户都与您一样。某人 可能使用单个字母作为姓氏（或根本没有姓氏）、可能不包含邮政编码、可能具有三行街道地址、 可能没有街道地址。他们可能正在查看表单的翻译版本。

表单控件、其标签和错误消息应以程序化方式在屏幕上可见，且准确且有意义 是可确定的，并且以编程方式与相应的表单元素或组相关联。autocomplete 属性可以并且也应该用于加快表单填写速度并改进无障碍功能。

HTML 提供了使基本表单控件可供访问的所有工具。表单元素或流程的互动程度越高， 在焦点管理、设置和更新 ARIA 名称、角色、 和值（如有必要）和 ARIA 实时通知（如有必要）。但是，正如我们在这里学到的，仅使用 HTML， 无需依赖 ARIA 或 JavaScript，就能实现无障碍性和有效性目标。

检查您的理解情况

测试您对表单的掌握情况。