HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第6章 表单.doc

PAGE7

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

6

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第6章表单

课外学习任务：

（1）课前：

以小组为单位，讨论网页表单的相关内容并以PPT的形式记录下来。

（2）课后：

=1\*GB3①添加一个表单，并为表单设置链接跳转和跳转方式。

=2\*GB3②使用表单标签创建一个问题调查表。

=3\*GB3③在表单中添加下拉列表控件。

教学目标：

知识目标

掌握添加表单；

掌握添加表单；

掌握下拉列表；

掌握文本域。

能力目标

能够掌握表单的各种功能；

能够使用下拉列表和文本域。

素质目标

较强的专业知识和自学能力；

丰富知识结构，提升专业知识；

掌握表单的使用，理解并应用专业知识。

重点难点及解决方法：

（1）重点：表单元素的使用

解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解表单各种样式的相关内容内容，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握表单的使用规则；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：下拉列表和文本域

解决方法：通过案例解析+启发式教学讲解的方式，细致讲解下拉列表和文本域的使用。帮助学生掌握下拉列表和文本域的使用方法和技巧。从实用的角度帮助学生提高专业知识。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

1.添加表单

表单可以用来收集用户在客户端提交的各种信息，例如，在网站登录或注册时进行的键盘和鼠标操作都是将表单作为载体传递给服务器的。表单其实是页面中的一个特定区域，由form标签和/form标签定义，所有的表单元素只有在这对标签之间才有效。表单的基本语法如下。

form表单标签的各种属性设置

设置各种表单元素

/form

在form标签中可以设置表单的属性，包括表单名称、表单处理程序等。

【链接跳转】

action属性用来设置链接跳转，也就是在提交表单的内容时，按照链接地址跳转到相应的页面进行处理。由于action属性用来控制整个表单的提交内容，因此action属性要写在form标签中。其语法格式如下。

formaction=链接跳转的地址

设置各种表单元素

/form

链接跳转的地址除了可以是绝对地址和相对地址外，还可以是其他的地址形式。如果表单中没有任何表单元素，这个表单传递给处理程序的内容就是空的。

如果省略action属性，则默认为提交到本页，即本页为接收并处理表单的程序。可以接收并处理表单的程序语言很多，常用的有ASP、ASPX、JSP、PHP等。

【链接跳转方式】

设置链接跳转以后，还需要设置链接跳转时使用的跳转方式。此时可以通过method属性来设置，它决定了表单中已收集的数据以什么样的方式发送到服务器。其语法结构如下。

formmethod=表单的链接跳转方式

表单元素

/form

表单的链接跳转方式一般可以设置为get和post两种，其具体含义如表6.1所示。

表6.1表单链接跳转方式

跳转方式

含义

注意事项

get

表单数据会被视为参数发送，用户输入的数据会附加在URL之后，由用户端直接发送至服务器，是METHOD属性的默认值

其速度较快，但数据不能太长。如果信息超过8192个字符，则可能会被截去，另外，该方式不具有必威体育官网网址性

post

表单数据与URL分开，将数据写在表单主体内发送

没有字符长度的限制，可以发送较长的信息，但速度相对较慢

【表单名称】

表单名称主要是为了区分各个表单。因为一个页面中可能会有多个表单，或者在一个表单处理程序中需要处理多个页面的表单，这时表单名称就显得尤其重要了。设置表单名称的标签是na