HTML 表单元素

HTML 表单元素

HTML 表单是收集用户输入的基础。本章节将探讨用于构建交互式表单的各种元素。

<form> 元素

<form> 元素作为表单控件的容器。它定义了用户提交表单时，收集的数据如何发送到何处。

关键属性：

• action：处理表单数据的服务器端脚本 URL。
• method：用于提交的 HTTP 方法（通常是 GET 或 POST）。GET 将数据附加到 URL（可见，大小受限），POST 将数据发送到请求体中（隐藏，容量更大）。处理敏感数据或大型表单时请使用 POST。
• enctype：指定表单数据发送前的编码方式。默认值是 application/x-www-form-urlencoded。上传文件（<input type="file">）时请使用 multipart/form-data。
• novalidate：一个布尔属性，禁用浏览器内置的表单验证。
• target：指定提交后在哪里显示响应（例如：_blank 表示新标签页）。

<form action="/submit-feedback" method="post">
  <!-- Form controls go here -->
</form>

<input> 元素

<input> 元素是最通用的表单控件。其行为由 type 属性决定。

常用类型包括 text、password、checkbox、radio、submit、file、email、number、date 等（详细列表请参考“HTML 输入类型”章节）。

重要属性：

• type：定义输入的控件类型。
• name：为输入项提供名称，用于在服务器端标识数据。
• id：一个唯一标识符，供 <label> 的 for 属性以及 CSS/JavaScript 定位使用。
• value：输入字段的初始值（或 radio/checkbox/submit 提交时发送的值）。
• placeholder：字段为空时显示的提示文本。
• required：使字段成为必填项。
• disabled：禁用输入项。
• readonly：使字段不可编辑但仍可提交。

<label for="username">Username:</label>
<input type="text" id="username" name="username" required placeholder="Enter your username">

<label> 元素

<label> 元素为表单控件提供说明文字。它对**可访问性（accessibility）和可用性（usability）**至关重要。

使用 for 属性将 <label> 与输入项关联起来，for 属性的值应与相应输入元素的 id 相匹配。点击 <label> 时，关联的输入项将获得焦点。

<label for="email_address">Email Address:</label>
<input type="email" id="email_address" name="email">

或者，你可以将输入元素嵌套在 <label> 内部（隐式关联），但通常使用 for 和 id 更为健壮。

<label>
  Subscribe to newsletter:
  <input type="checkbox" name="newsletter" value="subscribe">
</label>

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

<select> 元素（下拉列表）

<select> 元素创建下拉列表。

列表中的每个项目都由嵌套在 <select> 内部的 <option> 元素定义。选定 <option> 的 value 属性值会在表单提交时发送。

<label for="car_brand">Choose a car:</label>
<select id="car_brand" name="car">
  <option value="">--Please choose an option--</option> <!-- 占位符 -->
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi" selected>Audi</option> <!-- 预选 -->
</select>

<select> 的属性：

• name：在服务器端标识 select 列表数据。
• id：用于 label 关联的唯一标识符。
• multiple：允许选择多个选项（通常需要按住 Ctrl/Cmd 键点击）。
• required：要求用户选择一个选项（非空值的占位符除外）。
• disabled：禁用下拉列表。

使用 selected 布尔属性可以在 <option> 上将其设置为默认选择项。

使用 <optgroup> 将相关选项分组并带有标签：

<select name="vehicle">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<textarea> 元素

<textarea> 元素定义多行文本输入字段。

开放的 <textarea> 标签和闭合的 </textarea> 标签之间的文本成为默认内容。

<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Enter your feedback here..."></textarea>

属性：

• name、id
• rows：指定可见高度（以行为单位）。
• cols：指定可见宽度（以字符为单位，不如 CSS 可靠）。
• maxlength：允许的最大字符数。
• placeholder、required、disabled、readonly

使用 CSS（width、height、resize）可以精确控制尺寸和缩放行为。

<button> 元素

<button> 元素定义一个可点击的按钮。

与 <input type="submit"> 不同，<button> 元素可以包含 HTML 内容（如文本、图像、图标），提供了更大的样式灵活性。

关键属性：type

• type="submit"（默认）：提交表单数据。
• type="reset"：将所有表单控件重置为其初始值。
• type="button"：无默认行为；用于使用 JavaScript 触发动作。

<button type="submit">
  <img src="icons/save.svg" alt="" width="16" height="16"> Save Changes
</button>

<button type="reset">Reset Form</button>

<button type="button" onclick="alert('Action triggered!');">Custom Action</button>

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

<fieldset> 元素将表单中相关的控件分组，通常会在周围绘制一个框。

<legend> 元素为 <fieldset> 提供说明文字，从而改善结构和可访问性。

<fieldset>
  <legend>Contact Information</legend>

  <label for="user_name">Name:</label>
  <input type="text" id="user_name" name="name">

  <label for="user_email">Email:</label>
  <input type="email" id="user_email" name="email">
</fieldset>

HTML5 表单元素

HTML5 引入了增强表单功能的元素：

<datalist> 元素

为 <input> 元素提供预定义选项（建议），当用户输入时显示。使用输入元素的 list 属性（与 datalist 的 id 相匹配）将输入项关联到 <datalist>。

<label for="browser_choice">Choose your browser:</label>
<input list="browsers" id="browser_choice" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

<output> 元素

表示计算或用户操作的结果，通常使用 JavaScript 填充内容。

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" id="a" name="a" value="50"> +
  <input type="number" id="b" name="b" value="25">
  = <output name="result" for="a b">75</output>
</form>

for 属性列出了构成输出结果的元素的 id。

已废弃：<keygen> 元素

<keygen> 元素已废弃，不应使用。它最初用于生成客户端密钥对，但缺乏广泛支持，更推荐使用现代替代方案。

表单元素总结

标签	描述
<form>	表单控件的容器，定义提交行为。
<input>	通用的输入控件（文本、密码、复选框、单选按钮、提交、文件等）。
<label>	表单控件的说明文字（对可访问性至关重要）。
<select>	下拉列表的容器。
<option>	<select> 列表或 <datalist> 中的一个项目。
<optgroup>	在 <select> 中对相关的 <option> 元素进行分组。
<textarea>	多行文本输入字段。
<button>	可点击的按钮（可包含 HTML 内容）。
<fieldset>	对相关的表单控件进行分组。
<legend>	<fieldset> 的说明文字。
<datalist>	为 <input> 字段提供建议。
<output>	显示计算或操作的结果。
<progress>	显示任务的进度。
<meter>	表示在已知范围内的标量测量值。