# 个人主页——表单设计与信息收集 教学设计
| **课题** | **个人主页——表单设计与信息收集** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解表单、控件、标签和提交的基本关系，掌握 `form`、`label`、`input`、`textarea`、`button` 的常用属性。
**技能目标**：能够设计并实现包含姓名、邮箱、留言和提交按钮的联系表单，使用浏览器内置校验检查必填项和邮箱格式。
**素养目标**：建立用户体验、隐私保护和最少收集原则，养成让表单标签明确、操作可理解的设计习惯。 |
| **教学重难点** | **重点**：标签与控件关联；输入类型；`name`、`required` 等属性；表单结构。
**难点**：从用户任务出发设计合理字段，理解当前静态页面只能完成前端输入与校验，不能真正保存数据。 |
| **教学资源准备** | 个人主页项目、优秀与问题表单案例、表单需求卡、浏览器开发者工具、隐私安全提示卡。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 联系需求导入**
（5分钟） | 从“访问者如何联系主页作者”引出联系表单和信息边界。 | **场景创设**
展示只公开手机号与使用联系表单的两种页面，提问哪种更稳妥。
**安全提示**
强调课堂使用模拟信息，不收集身份证、住址等敏感数据。 | **风险判断**
比较两种联系方式的便利性和隐私风险。
**字段筛选**
选出完成留言所必需的最少信息。 | 将表单学习与真实联系需求、隐私责任结合，建立最少收集意识。 |
| **2. 表单要素探究**
（10分钟） | 认识表单容器、标签、输入框、文本域和按钮。 | **结构讲解**
说明 `label` 描述字段，`for` 与控件 `id` 对应；讲解文本、邮箱输入类型及 `name`。
**体验对比**
演示点击已关联与未关联标签的差异，说明可用性价值。 | **要素配对**
将标签、控件、属性和作用卡片正确配对。
**代码跟随**
完成姓名字段，并通过点击标签验证关联。 | 通过交互体验理解标签关联，而不是只记忆表单标签名称。 |
| **3. 校验功能示范**
（8分钟） | 学习 `required`、`type="email"`、`placeholder`，理解浏览器内置校验。 | **代码演示**
为姓名和邮箱设置必填要求，输入错误邮箱并提交，观察提示。
**边界说明**
说明前端校验改善输入质量，但静态页面不会保存或发送数据。 | **测试记录**
分别测试空值、错误邮箱和正确邮箱，记录页面反馈。
**概念辨析**
区分“输入校验”和“数据存储”。 | 用测试结果理解属性作用，同时避免学生误认为表单已具备后端处理能力。 |
| **4. 联系表单实践**
（13分钟） | 完成姓名、邮箱、留言和提交按钮，优化字段顺序与提示文字。 | **任务发布**
要求字段有明确标签，姓名和邮箱必填，邮箱使用正确类型，留言使用文本域。
**巡回指导**
检查 `for` 与 `id`、字段 `name`、控件嵌套及隐私提示，帮助修复提交无提示问题。 | **表单开发**
编写联系区域，设置标签、控件和必要属性。
**用户测试**
同伴扮演访问者完成三组测试，反馈字段含义和错误提示是否清楚。 | 让学生从开发者和用户双重视角完善功能，培养可用性测试习惯。 |
| **5. 评价总结提升**
（4分钟） | 总结表单结构、基础校验和信息安全原则。 | **成果点评**
展示字段简洁、标签清晰的表单，纠正只用占位文字代替标签的问题。
**要点归纳**
总结“字段必要、标签明确、格式校验、隐私优先”。 | **自评修正**
按四项原则检查并修正表单。
**成果说明**
说明一项为用户考虑的设计。 | 将表单技术提升为用户体验和信息责任意识，完成项目功能模块。 |
## 板书设计
```text
联系表单
form
├── label ↔ input
│ ├── id / for
│ ├── name
│ └── required
├── textarea
└── button
设计原则：
最少收集 + 清晰标签 + 格式校验 + 隐私保护
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够完成带标签关联和浏览器校验的联系表单，并通过同伴测试发现字段含义不清等问题。多数学生能区分前端校验与数据保存，隐私保护意识得到强化。 |
| **教学反思** | 学生容易依赖 `placeholder` 而省略可见标签，也容易把“提交按钮可点击”理解为数据已发送。应持续用键盘操作和断网测试呈现差异，并明确静态项目的功能边界。 |