教案
序号:14
授课日期
课时数
4
章节名称
任务15表单与input元素
教学内容
重点
表单与input元素。
难点
input元素的属性。
教学目的与要求
理解表单的属性和作用。
熟悉常用的表单元素。
了解网页中常用的表单功能。
教学方法
与手段
教师采用任务驱动法,使用教学PPT辅助授课。
教师操作演示,学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题,通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
(任务15过渡与变形属性
15.1认识表单、15.2创建表单)
实操任务目标发布
实战演练——制作登录界面
图14-SEQ图\*ARABIC\r11登录界面
强化训练——制作简历表单
图14-SEQ图\*ARABIC2简历表单
知识准备
认识表单
表单:用于收集用户在客户端提交的信息,并将这些信息发送给服务器进行处理。如常见的搜索功能、用户登录功能、注册功能等。
组成:表单元素(也叫表单控件)、提示信息和表单域。
图14-SEQ图\*ARABIC3表单的组成
创建表单
表单定义:
formaction=url地址method=提交方式name=表单名称
各种表单元素
/form
action属性:接收表单数据的服务器程序的url地址。
method属性:表单数据的提交方式。
(1)get:默认值,提交的表单数据将显示在浏览器的地址栏中,保密性差,且有数据量的限制。
(2)post:表单数据传递的保密性较好,并无数据量的限制。
name属性:定义表单的名称。
autocomplete属性:控制表单自动完成功能的开启和关闭。
novalidate属性:规定当提交表单时不对其进行验证。
第二学时
(任务15过渡与变形属性
15.3input元素及属性)
知识准备
input元素及属性
input元素:表单中最常用的元素,它可以定义单行文本输入框、密码输入框、单选按钮、复选框、提交按钮、重置按钮等。
语法格式:inputtype=控件类型/
第三学时
实战演练——制作登录界面
案例描述:设计并制作网站登录界面,网页效果如下图1所示。当光标移到按钮上时,光标图案和按钮背景颜色会发生变化,如图2所示。
图14-SEQ图\*ARABIC4“登录界面”网页
图14-SEQ图\*ARABIC5鼠标指针移至按钮上时的效果
图14-SEQ图\*ARABIC6“登录界面”的网页布局
第四学时
强化训练——制作简历表单
案例描述:设计并制作简历表单,网页效果如下。
图14-SEQ图\*ARABIC7“简历”表单
图14-SEQ图\*ARABIC8“简历”表单的网页布局
课后实训
图14-SEQ图\*ARABIC9“会员登录系统”表单
图14-SEQ图\*ARABIC10用户输入登录信息时的效果
发布任务,学生能够有目标地进行学习
教师讲解
学生操作巩固
教师讲解
学生操作巩固
理论讲解
教师操作演示
学生练习
学生练习