课时14：Form 表单（上）¶

学习目标：掌握 form 表单的容器属性、input 标签的多种输入类型及 label 标签的关联用法。

一、Form 表单标签¶

1.1 定义与作用¶

<form> 是容器级标签，用于包裹所有需要提交数据的表单控件。若需将用户输入的数据提交到服务器或数据库，所有相关控件必须被 <form> 标签包裹。

<form method="post" action="/submit">
    <!-- 表单控件：文本框、密码框、单选框等 -->
</form>

1.2 核心属性¶

属性	作用	常用值	说明
`method`	数据提交方式	`get` / `post`	决定数据如何发送到服务器
`action`	数据提交目标	URL 路径	指定接收数据的接口地址

method 差异：

方式	数据位置	数据可见性	数据量限制	适用场景
`get`	附加在 URL 后	明文可见	受 URL 长度限制（约 2KB）	搜索、筛选、非敏感数据
`post`	放在请求体中	不可见	无限制	登录、注册、敏感数据提交

当前阶段说明：完整的表单数据提交需结合后端接口（如 Ajax/Fetch）才能实现。本阶段重点理解表单控件的基础用法，为后续前后端交互学习打下基础。

二、Input 标签：文本输入¶

2.1 单行文本框（默认类型）¶

<input> 通过 type 属性实现多种输入功能，默认 type="text"：

<input type="text" value="默认内容" placeholder="请输入用户名">

2.2 关键属性¶

属性	作用	示例	说明
`value`	设置默认值	`value="张三"`	表单提交时发送的值
`placeholder`	占位提示文本	`placeholder="请输入用户名"`	无输入时显示，输入后消失

value 与 placeholder 的区别：

特性	`value`	`placeholder`
提交时	作为实际数据提交	不提交（仅提示）
用户输入时	需手动删除	自动消失
视觉样式	常规文字颜色	灰色（浅色调）
使用场景	回显数据、默认值	输入提示、空状态引导

三、Input 标签：密码框¶

通过设置 type="password" 实现密码输入：

<input type="password" placeholder="请输入密码">

核心特性： - 输入内容以掩码形式显示（如圆点 ● 或星号 *） - 保护用户输入隐私，防止旁观者偷窥 - 与明文文本框在视觉上形成本质区别

四、Input 标签：单选框（Radio）¶

4.1 基本用法¶

<input type="radio" name="sex" value="male"> 男
<input type="radio" name="sex" value="female"> 女

4.2 互斥机制¶

单选框的多选一效果通过相同的 name 属性实现：

同一组的单选按钮必须设置相同的 name 值（如 name="sex"）
浏览器将相同 name 的单选框视为一组，只允许选中其中一个
若 name 不同，则各选项相互独立，可同时选中

4.3 默认选中¶

<input type="radio" name="sex" value="male" checked="checked"> 男
<input type="radio" name="sex" value="female"> 女

checked="checked" 表示默认选中状态
页面加载时该选项自动被选中
同一组中只能有一个选项设置 checked

五、Input 标签：复选框（Checkbox）¶

5.1 基本用法¶

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
<input type="checkbox" name="hobby" value="music"> 音乐

5.2 核心特性¶

特性	说明
多选能力	支持选择一个或多个选项
取消机制	点击已选中的选项可取消选择（单选框不具备此功能）
组名规范	建议同一组复选框设置相同的 `name` 属性，便于服务器接收数组数据
默认选中	通过 `checked="checked"` 设置默认选中

5.3 与单选框的对比¶

对比项	单选框（Radio）	复选框（Checkbox）
type 值	`radio`	`checkbox`
选择数量	一组只能选 1 个	一组可选多个
取消选择	不支持（必须选另一个）	支持（点击已选项取消）
name 作用	实现互斥分组	标识数据分组
典型场景	性别、是否同意	兴趣爱好、多项筛选

六、Label 标签：扩大触发范围¶

6.1 作用与语义¶

<label> 标签用于将描述文字与表单控件绑定，点击文字即可触发对应控件的点击事件，扩大用户的可点击区域，提升交互体验和无障碍访问性。

6.2 实现方式一：for 属性关联¶

<input type="checkbox" id="agree" name="agree">
<label for="agree">我已阅读并同意用户协议</label>

<label> 的 for 属性值必须与对应控件的 id 属性值完全相同
点击 label 文字等效于点击复选框本身

6.3 实现方式二：嵌套包裹（简便写法）¶

<label>
    <input type="checkbox" name="agree">
    我已阅读并同意用户协议
</label>

将表单控件直接嵌套在 <label> 标签内部
无需设置 for 和 id 属性，代码更简洁
现代开发中更常用的写法