一、表单概述
核心作用：收集用户输入数据并提交到服务器
组成元素：输入框、按钮、选择框等交互控件
数据流向：用户填写 → 客户端 → 服务器端处理
二、<form>标签属性
| 属性 | 作用 | 示例 |
|---|---|---|
action |
指定数据提交的服务器地址 | <form action="/submit.php"> |
method |
设置HTTP请求方法（GET/POST） | <form method="POST"> |
enctype |
数据编码方式（默认urlencoded，文件上传用multipart/form-data） | <form enctype="multipart/form-data"> |
name |
表单名称，用于JS操作 | <form name="loginForm"> |
id |
唯一标识符，用于CSS/JS操作 | <form id="regForm"> |
注意事项：
GET方法将数据附加到URL（可见，有长度限制）
POST方法在请求体中发送数据（更安全，适合敏感信息）
三、表单控件
1. 输入类控件（<input>）
| 类型 | 用途 | 示例 |
|---|---|---|
text |
单行文本输入 | <input type="text" name="username"> |
password |
密码输入（内容掩码） | <input type="password" name="pwd"> |
email |
邮箱地址（自动格式验证） | <input type="email" name="email"> |
number |
数字输入（可设min/max） | <input type="number" min="0" max="100"> |
date |
日期选择 | <input type="date" name="birthday"> |
checkbox |
多选框（可多选） | <input type="checkbox" name="hobby" value="music">音乐 |
radio |
单选按钮（name需相同） | <input type="radio" name="gender" value="male">男 |
file |
文件上传 | <input type="file" name="avatar"> |
submit |
提交按钮 | <input type="submit" value="提交"> |
reset |
重置表单 | <input type="reset" value="清空"> |
2. 其他控件
<textarea>：多行文本输入
<textarea name="bio" rows="4" cols="50"></textarea>
<select>：下拉选择框
<select name="city"> <option value="bj">北京</option> <option value="sh">上海</option> </select>
<button>：多功能按钮
<button type="submit">提交</button>
四、表单验证（HTML5）
| 属性 | 作用 | 示例 |
|---|---|---|
required |
必填字段 | <input type="text" required> |
pattern |
正则表达式验证 | <input pattern="\d{6}"> |
min/max |
数值/日期范围限制 | <input type="number" min="1"> |
maxlength |
最大字符数限制 | <input maxlength="10"> |
minlength |
最小字符数限制 | <input minlength="3"> |
五、布局与优化
1. 标签关联
<label for="username">用户名：</label> <input type="text" id="username">
提升可访问性
点击标签可聚焦输入框
2. 分组显示
<fieldset> <legend>联系信息</legend> <!-- 表单控件 --> </fieldset>
3. 样式建议
使用CSS Grid/Flex布局对齐表单元素
添加
:focus样式提升交互体验错误提示使用醒目颜色（如红色）
六、注意事项
敏感数据必须使用POST方法
文件上传必须设置
enctype="multipart/form-data"客户端验证不能替代服务器端验证
单选框需要相同
name属性实现互斥推荐使用
<button>替代<input type="submit">（样式更灵活）
七、综合示例
<form action="/register" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>用户注册</legend>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="password">密码：</label>
<input type="password" id="password" name="pwd" minlength="6" required>
<label>性别：
<input type="radio" name="gender" value="male" required> 男
<input type="radio" name="gender" value="female"> 女
</label>
<label>上传头像：
<input type="file" name="avatar">
</label>
<button type="submit">注册</button>
<button type="reset">重置</button>
</fieldset>
</form>