8. HTML 表单基础

表单是网页开发中与用户交互的核心组件，用于收集、验证和提交用户输入的数据。本文将基于提供的代码素材，系统讲解 HTML 表单的核心概念、常用控件及最佳实践。

一、表单的基本结构

一个完整的 HTML 表单由以下部分组成：

<form action="/submit" method="POST">
  <!-- 表单控件 -->
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

核心元素说明：

1. <form>：定义表单容器

    action：指定表单提交的目标地址（URL）
    method：指定 HTTP 请求方法（GET/POST）
   

2. 表单控件：用于收集用户输入的元素（如 input、select、textarea 等）

3. 提交按钮：通常为 <input type="submit"> 或 <button type="submit">

二、常用表单控件详解

1. 文本输入控件

<!-- 普通文本输入框 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 密码输入框（输入内容显示为圆点） -->
<input type="password" name="pwd" placeholder="请输入密码">

<!-- 数字输入框（限制输入为数字） -->
<input type="number" name="age" min="18" max="100">

<!-- 邮箱输入框（自动验证邮箱格式） -->
<input type="email" name="email" required>

2. 选择类控件

单选按钮（radio）

<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>

<input type="radio" name="gender" value="female" id="female" checked>
<label for="female">女</label>

关键特性：

• 相同 name 的单选按钮属于同一组
• checked 属性设置默认选中项
• 推荐配合 <label> 使用，提升可访问性

复选框（checkbox）

<input type="checkbox" name="hobby" value="coding" id="coding">
<label for="coding">编程</label>

<input type="checkbox" name="hobby" value="reading" id="reading" checked>
<label for="reading">阅读</label>

关键特性：

• 每个复选框可以有独立的 name，但通常使用相同 name 表示同一组
• checked 属性设置默认选中项

下拉选择框（select）

<select name="city">
  <optgroup label="华东地区">
    <option value="sh">上海</option>
    <option value="hz">杭州</option>
  </optgroup>
  <optgroup label="华南地区">
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
  </optgroup>
</select>

关键特性：

• optgroup 用于分组选项
• 默认选中第一个选项（或使用 selected 属性指定）

3. 特殊输入控件

<!-- 日期选择器 -->
<input type="date" name="birthday">

<!-- 时间选择器 -->
<input type="time" name="appointment">

<!-- 颜色选择器 -->
<input type="color" name="theme-color">

<!-- 文件上传 -->
<input type=