第8章表单
课程名称
JavaScript程序设计
项目名称
表单
任务名称
表单
课时
2
项目性质
□演示性    □验证性    □设计性    √综合性
授课班级
授课日期
授课地点
教学目标
能力目标：
具备进行表单验证的能力
知识目标：
1. 掌握处理提交表单、重置表单的方法
2. 掌握共有表单字段的属性和方法
素质目标：
1. 培养学生信息搜集能力
2. 培养学生团结合作、互帮互助的能力
教学内容
1. 创建一个表单，处理提交表单、重置表单和验证表单
javascript程序设计软件2. 学生动手操作
3. 教师讲解本任务涉及的知识点
教学重点
进行表单验证
教学难点
提交表单和验证表单
教学准备
1. 装有Chrome浏览器或者Firefox浏览器，并且安装有WAMP的电脑
2. 教学课件PPT
3. 教材：《JavaScript程序设计基础教程（微课版）》刘刚 人民邮电出版社
作业设计
使用form表单的elements属性来遍历表单中的所有元素
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
课程
说明
【课前说明】
分别从提交表单、重置表单和表单字段等入手，掌握表单基础知识，进而介绍进行表单验证的方法，具备使用表单解决问题的能力。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。掌握表单的基本概念，掌握进行表单验证的方法。
课程
内容
描述
一、表单基础
1. 提交表单
2. 重置表单
3. 表单字段
二、通过案例理解如何来验证表单所提交数据是否合法
案例：
1. 表单提交
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
    function doSubmitForm() {
          // 可以在此进行表单验证
          var form = ElementById('test-form');
          // 验证完毕提交form:
          form.submit();
    }
</script>
2.重置表单 
<input type="reset" value="Reset Form">      // 通用重置按钮
<button type="reset">Reset Form</button>    // 自定义重置按钮
课堂
实训
同步训练：
用JavaScript实现简单的注册模块表单验证。
总结
评价
通过学习，学生能够掌握提交表单和验证表单的方法。
本节课主要运用案例教学法，介绍了JavaScript表单基础知识、表单提交重置以及表单的验证等相关操作。通过实例的方法加强对表单事件的理解，达到能够独立熟练运用表单事件解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式 ，促进学生的自主、创新学习的方式 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。