Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第15讲次 任务16 其他表单元素与表单验证.docx

教案

序号：15

授课日期

课时数

4

章节名称

任务16其他表单元素与表单验证

教学内容

重点

表单元素与表单验证。

难点

正则表达式。

教学目的与要求

掌握其他表单元素。

掌握表单验证方法。

了解常用的正则表达式。

教学方法

与手段

教师采用任务驱动法，使用教学PPT辅助授课。

教师操作演示，学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

完成课堂上未完成的习题，通过网络平台上交作业。

通过回帖的方式回答课上留下的思考题。

预习下一节内容。

讲授内容

课堂组织

第一学时

（任务16其他表单元素与表单验证

16.1其他表单元素）

实操任务目标发布

实战演练——制作商品订购表单

图15-SEQ图\*ARABIC\r11“商品订购”表单

强化训练——制作会员注册表单

图15-SEQ图\*ARABIC2“会员注册”表单

图15-SEQ图\*ARABIC3信息填写正确时的效果

知识准备

其他表单元素

图15-SEQ图\*ARABIC4textarea元素的使用

图15-SEQ图\*ARABIC5label元素的使用

图15-SEQ图\*ARABIC6select元素的使用

图15-SEQ图\*ARABIC7datalist元素的使用

第二学时

（任务16其他表单元素与表单验证

16.2表单验证方法）

知识准备

表单验证方法

正则表达式

第三学时

实战演练——制作商品订购表单

案例描述：设计并制作商品订购表单，网页效果如下。

图15-SEQ图\*ARABIC8“商品订购”表单

图15-SEQ图\*ARABIC9“商品订购”表单的网页布局

第四学时

强化训练——制作会员注册表单

案例描述：设计并制作会员注册表单，网页效果如下图1所示。如果表单信息填写正确，网页效果如下图2所示。

图15-SEQ图\*ARABIC10“会员注册”表单

图15-SEQ图\*ARABIC11信息填写正确时的效果

图15-SEQ图\*ARABIC12“会员注册”表单的网页布局

课后实训

图15-SEQ图\*ARABIC13“学生档案”表单

图15-SEQ图\*ARABIC14“所属专业”效果

图15-SEQ图\*ARABIC15“入学成绩”效果

图15-SEQ图\*ARABIC16“入学日期”的效果

发布任务，学生能够有目标地进行学习

教师讲解

学生操作巩固

教师讲解

学生操作巩固

理论讲解

教师操作演示

学生练习

学生练习