表单是网页开发中与用户交互的核心组件，用于收集、验证和提交用户输入的数据。本文将基于提供的代码素材，系统讲解 HTML 表单的核心概念、常用控件及最佳实践。
一、表单的基本结构
一个完整的 HTML 表单由以下部分组成：
<form action="/submit" method="POST">
<!-- 表单控件 -->
<input type="text" name="username">
<button type="submit">提交</button>
</form>
核心元素说明：
-
<form>：定义表单容器action：指定表单提交的目标地址（URL） method：指定 HTTP 请求方法（GET/POST） -
表单控件：用于收集用户输入的元素（如 input、select、textarea 等）
-
提交按钮：通常为
<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=
