Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元4 制作非遗登录注册页面—H5 表单.docx

PAGE1

《Web前端开发技术》

课程教案

适用专业：

授课班级：

授课教师：

编制日期：

教案名称

单元4制作非遗登录注册页面—H5表单

计划学时

4学时

本次授课类型

□理论□实验?理实一体□实训□实习

教学目标

知识目标

1.理解表单的基本结构。

2.掌握表单控件的类型和属性。

3.掌握表单的提交方式。

4.掌握HTML5的内置验证功能。

5.能够使用正则表达式进行更复杂的数据验证。

能力目标

1.能够独立完成登录和注册页面的表单设计与实现。

2.能够使用HTML5表单控件属性进行数据验证。

3.能够使用正则表达式优化表单验证逻辑。

素质目标

1.培养交互设计能力。

2.培养设计思维与创新能力。

思政目标

1.培养团队合作和沟通能力。

2.增强对非遗文化的保护意识，通过技术传承传统文化。

教学重点

1.表单的基本结构与控件类型。

2.HTML5表单控件的属性及内置验证功能。

3.正则表达式在表单验证中的应用。

教学难点

1.表单数据的动态验证与错误提示。

2.正则表达式的编写与调试。

3.表单在不同浏览器中的兼容性问题。

教学设计思路

教学效果及改进思路

绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。

学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。

教学实施过程

要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写

备注

一、课前自主学习

（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元4的相关微课视频，完成在线测试。

（二）学生需严格按照教学要求完成课前预习任务，包括观看教学视频、阅读教材相关内容、完成预习测试题等，并在学习过程中详细记录遇到的疑难问题，形成书面预习报告提交至在线学习平台

（三）教师通过教学管理平台的数据分析功能，实时监控每位学生的学习进度和预习完成情况，针对未达标学生及时发送提醒通知，并安排专门的线上辅导时间，通过一对一或小组辅导的形式确保所有学生达到预期的预习效果

二、课上探究学习

（一）情境引入，任务导入

小新在掌握HTML5标记知识后，计划为非遗网站新增用户登录功能，以便记录用户交互数据并提供个性化服务。他认识到HTML5表单是实现这一功能的关键，并制定了详细的学习实践计划：首先设计登录和注册页面框架，然后创建基础表单结构，接着添加各类表单控件，再设置表单属性并实现数据验证，最后运用正则表达式完成复杂验证功能。

（二）任务1创建表单—制作非遗登录页面（1学时）

1.任务描述

为非遗网站创建登录页面。已注册的用户填写相关的信息并提交网站后台后，可以通过该页面登录网站。

2.任务准备

(1)明确表单的概念

(2)了解表单的标记form

(3)了解文本框和密码框

(4)了解控件按钮

3.任务实施

1.主要内容：

(1)在站点目录下创建登录网页文件。

(2)创建登录表单。设置表单数据发送方式为post，代码如下

form?action=“”?method=“post”/form

(3)为表单分别添加输入用户名和密码的文本框和密码框。

input?type=“text”name=“username”

input?type=“password”?name=“password”

(4)创建表单提交按钮。

button?type=“submit”登录/button

(5)对表格进行布局排布

(6)设置表格宽度与高度

(7)CSS美化表格

效果图如下：

2.师生活动：

教师建立在线答疑平台，及时解答学生疑问。

学生随时提问，获得针对性指导。

3.教学方法：

运用探究式教学，引导学生自主发现问题并解决。

采用工作坊模式，强化师生互动和实践指导。

（二）任务2添加表单控件—制作注册页面（1学时）

1.任务描述

为非遗网站创建注册页面。用户需要在页面上填写并提交的信息包括用户名、姓名、密码、性别、出生日期、联系电话、所在城市、身份证照片等。用户注册页面效果如

图所示。

2.任务准备

(1)了解单选按钮控件(input?type=“radio”)能够保证用户在一组数据中最多只选择一项

(2)复选框控件(input?type-“”)允许用户在一组选项中选择多个

(3)了解文本框和密码框

(4)了解日期控件

(5)了解下拉列表(select)允许用户在多个选项中选择一个

(6)了解文本域({}textarea{})允许用户输人多行文本

(7)了解文件域

3.任务实施

1.主要内容：

(1)在站点目录下创建非遗网站注册页面文