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> 标签为表单控件提供了文字标签。它有两个重要的好处：

提升可访问性: 屏幕阅读器会读出标签，帮助用户理解输入框的用途。
改善用户体验: 当用户点击 <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>

#HTML 表单

#<form> 元素

#<input> 元素

#常见的 type 类型：