HTML 表单

HTML 表单

HTML 表单对于在网页上收集用户输入至关重要，可实现登录、搜索、注册和反馈提交等交互。

<form> 元素

<form> 元素作为各种输入控件的容器。

<form action="/submit-handler" method="post">
  <!-- Form elements like input, label, textarea, button go here -->
</form>

<form> 元素的主要属性：

• action：指定应将表单数据发送到哪个 URL 进行处理（通常是服务器端脚本或 API 端点）。如果省略，数据将发送到当前页面的 URL。
• method：指定提交表单时使用的 HTTP 方法。常见值是 GET 和 POST。

表单元素：<input>、<label>、<textarea>、<select>、<button>

表单包含各种元素以捕获不同类型的输入：

1. <input> 元素：

用途最广泛的表单元素。其行为由 type 属性决定。

常见的 type 值包括：

输入类型	描述
text	单行文本输入。
password	字符被遮盖的单行文本输入。
email	针对电子邮件地址优化的输入字段（提供验证）。
number	用于数值的输入字段。
date	日期选择控件。
checkbox	允许选择零个或多个选项。
radio	允许从组中仅选择一个选项。
file	允许用户上传文件。
submit	提交表单数据的按钮。
button	通用按钮（常与 JavaScript 一起使用）。

2. <label> 元素：

对于可访问性和可用性至关重要。 <label> 元素为表单控件提供标题。点击标签会聚焦或激活关联的控件。

使用 for 属性将标签与输入关联，该属性应与输入元素的 id 匹配。

<label for="username">Username:</label>
<input type="text" id="username" name="username">

或者，你可以将输入包裹在标签内：

<label>Email: <input type="email" name="email"></label>

始终为你的表单控件使用 <label>。

3. <textarea> 元素：

定义多行文本输入字段。

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

4. <select> 元素：

使用嵌套的 <option> 元素创建一个下拉列表。

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">--Please choose an option--</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

5. <button> 元素：

创建一个可点击的按钮。类型可以是 submit、reset 或 button。

<button type="submit">Submit Application</button>
<button type="reset">Clear Form</button>
<button type="button" onclick="alert('Hello!')">Click Me</button>

对于提交表单，通常首选 <button type="submit"> 而非 <input type="submit">，因为它允许内部包含更丰富的内容（如图标或复杂的文本格式）。

name 属性

为了在提交表单时发送输入控件的值，它必须具有 name 属性。

name 属性提供键，输入的值 (value) 提供值，形成发送到服务器的键值对（例如，username=JohnDoe）。

示例：只有 ‘email’ 字段将被提交，因为 ‘comments’ 缺少 name 属性。

<form action="/subscribe" method="post">
  <label for="email_sub">Email:</label>
  <input type="email" id="email_sub" name="subscriber_email">

  <label for="comments">Comments (will not be sent):</label>
  <textarea id="comments" rows="3"></textarea>

  <button type="submit">Subscribe</button>
</form>

表单提交方法：GET 对比 POST

method 属性决定了如何发送表单数据：

GET：

• 将表单数据直接附加到 action 属性指定的 URL 后（例如，/search?query=html+forms）。
• 数据在 URL、浏览器历史记录和服务器日志中可见。
• 适用于非敏感数据，例如搜索查询或过滤参数。
• 对可发送的数据量有限制（因浏览器/服务器而异）。
• GET 请求可以被收藏和缓存。
• 如果省略 method 属性，这是默认方法。

GET 表单示例：

<form action="/search" method="get">
  <label for="search_query">Search:</label>
  <input type="text" id="search_query" name="query">
  <button type="submit">Search</button>
</form>

POST：

• 将表单数据发送到 HTTP 请求的主体中，与 URL 分开。
• 数据在 URL 中不可见，这使得处理敏感信息（密码、个人数据）时更加安全。
• 对数据大小没有显著限制。
• 适用于提交修改服务器状态的数据（例如，创建帐户、发布评论）。
• POST 请求通常不易被收藏或缓存。

POST 表单示例：

<form action="/login" method="post">
  <div>
    <label for="login_user">Username:</label>
    <input type="text" id="login_user" name="username">
  </div>
  <div>
    <label for="login_pass">Password:</label>
    <input type="password" id="login_pass" name="password">
  </div>
  <button type="submit">Log In</button>
</form>

何时使用 POST：

• 提交敏感数据（密码、信用卡信息）。
• 提交的数据会导致服务器上的更改（创建、更新、删除数据）。
• 提交大量数据。
• 上传文件。

何时使用 GET：

• 提交表示搜索或过滤。
• 数据不敏感。
• 你希望结果 URL 可以被收藏。

分组表单元素：<fieldset> 和 <legend>

<fieldset> 元素将表单内的相关控件分组，通常在视觉上呈现为带边框的效果。

<legend> 元素为 <fieldset> 组提供标题或说明。这对于可访问性很重要，有助于用户理解分组控件的上下文。

示例：

<form action="/register" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="first_name">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="last_name">
    </div>
  </fieldset>

  <fieldset>
    <legend>Contact Details</legend>
    <div>
      <label for="email_reg">Email:</label>
      <input type="email" id="email_reg" name="email">
    </div>
  </fieldset>

  <button type="submit">Register</button>
</form>

使用 <fieldset> 和 <legend> 可以改善复杂表单的结构和可访问性。

表单验证

HTML5 引入了内置的客户端表单验证功能：

• 使用特定的 input 类型，如 email、url、number，会自动检查格式。
• required、minlength、maxlength、min、max、pattern 等属性允许您指定验证规则。

如果验证规则不满足，浏览器通常会阻止表单提交并显示错误消息。

您可以使用 <form> 元素上的 novalidate 属性来禁用内置验证。

<form action="/submit" method="post" novalidate>
  <!-- Browser validation is disabled for this form -->
</form>

重要： 客户端验证是可用性增强，但它可以被绕过。务必在服务器端实现健壮的验证，以确保数据完整性和安全性。

其他表单属性

属性	描述
target	指定提交后在哪里显示响应（例如，_blank 表示在新标签页中）。类似于链接目标。
enctype	指定在发送前应如何编码表单数据。默认是 application/x-www-form-urlencoded。上传文件时使用 multipart/form-data。用于调试时使用 text/plain（生产环境中很少使用）。
autocomplete	控制浏览器是否应提供表单字段的自动完成功能（on 或 off）。也可设置在单个输入字段上。
novalidate	禁用浏览器内置的 HTML5 表单验证。