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样式提升交互体验
错误提示使用醒目颜色（如红色）

六、注意事项

敏感数据必须使用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>