teaching-design/data/Web/5.md

个人主页——表单设计与信息收集 教学设计

课题	个人主页——表单设计与信息收集
课时	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分钟）	总结表单结构、基础校验和信息安全原则。	成果点评 展示字段简洁、标签清晰的表单，纠正只用占位文字代替标签的问题。 要点归纳 总结“字段必要、标签明确、格式校验、隐私优先”。	自评修正 按四项原则检查并修正表单。 成果说明 说明一项为用户考虑的设计。	将表单技术提升为用户体验和信息责任意识，完成项目功能模块。

板书设计

联系表单

form
├── label ↔ input
│   ├── id / for
│   ├── name
│   └── required
├── textarea
└── button

设计原则：
最少收集 + 清晰标签 + 格式校验 + 隐私保护

教学成效与反思

教学成效	学生能够完成带标签关联和浏览器校验的联系表单，并通过同伴测试发现字段含义不清等问题。多数学生能区分前端校验与数据保存，隐私保护意识得到强化。
教学反思	学生容易依赖 placeholder 而省略可见标签，也容易把“提交按钮可点击”理解为数据已发送。应持续用键盘操作和断网测试呈现差异，并明确静态项目的功能边界。