HTML 表单学习笔记

一、表单概述

• 核心作用：收集用户输入数据并提交到服务器

• 组成元素：输入框、按钮、选择框等交互控件

• 数据流向：用户填写 → 客户端 → 服务器端处理

---

二、<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样式提升交互体验

• 错误提示使用醒目颜色（如红色）

---

六、注意事项

1. 敏感数据必须使用POST方法

2. 文件上传必须设置enctype="multipart/form-data"

3. 客户端验证不能替代服务器端验证

4. 单选框需要相同name属性实现互斥

5. 推荐使用<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>