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