HTML 表单

HTML 表单是 Web 交互的核心，用于收集用户的输入数据。从简单的搜索框到复杂的注册页面，表单无处不在。

<form> 元素

<form> 元素是所有表单控件的容器。它定义了表单的开始和结束。

<form action="/submit-page" method="get">
  <!-- 表单控件将放在这里 -->
</form>

<form> 元素有两个重要的属性：

• action: 指定当用户提交表单时，数据将被发送到的服务器端 URL 地址。
• method: 指定用于发送表单数据的 HTTP 方法。最常用的值是：
  • GET: 将表单数据附加在 URL 的末尾（例如 ?name=value&name2=value2）。适用于不敏感的数据，如搜索查询。有长度限制。
  • POST: 将表单数据包含在 HTTP 请求的主体中发送。适用于敏感信息（如密码）或大量数据。没有长度限制。

<input> 元素

<input> 元素是最多样化、最核心的表单控件。它的行为由 type 属性决定。

常见的 type 类型：

• text: 单行文本输入框。

  <label for="username">用户名:</label><br>
  <input type="text" id="username" name="username">

• password: 密码输入框，输入的内容会被隐藏。

  <label for="pwd">密码:</label><br>
  <input type="password" id="pwd" name="pwd">

• radio: 单选按钮。同一组（具有相同 name 属性）的单选按钮中，用户只能选择一个。

  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label>

• checkbox: 复选框。用户可以选择零个、一个或多个选项。

  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> 我有自行车</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> 我有小汽车</label>

• submit: 提交按钮。点击后会触发表单的提交操作。

  <input type="submit" value="提交">

• button: 一个可点击的按钮，但本身没有默认行为。通常与 JavaScript 配合使用。

  <input type="button" value="点击我" onclick="alert('你好！')">

<label> 元素

<label> 标签为表单控件提供了文字标签。它有两个重要的好处：

1. 提升可访问性: 屏幕阅读器会读出标签，帮助用户理解输入框的用途。
2. 改善用户体验: 当用户点击 <label> 文本时，浏览器会自动将焦点转移到与之关联的表单控件上。对于复选框和单选按钮，点击标签等同于点击按钮本身。

通过将 <label> 的 for 属性设置为对应控件的 id，可以将它们关联起来。

其他常用表单元素

• <textarea>: 定义一个多行文本输入区域，适用于评论、消息等长文本。

  <textarea name="message" rows="10" cols="30">
  在这里写下你的留言...
  </textarea>

• <button>: 与 <input type="submit"> 类似，但 <button> 元素可以包含更丰富的内容，如文本和图标。

  <button type="submit">
    <img src="icon.png" alt=""> 提交
  </button>

• <select> 和 <option>: 创建一个下拉选择列表。

  <label for="cars">选择一辆车:</label>
  <select id="cars" name="cars">
    <option value="volvo">沃尔沃</option>
    <option value="saab">萨博</option>
    <option value="fiat" selected>菲亚特</option>
  </select>