课程名称

动态网页设计与制作

任课教师

韩多成

授课日期

年  月  日

年  月  日

年  月  日

年  月  日

授课班级

授课地点

教研室主任审核意见

签名：

                                   年   月   日

题 目

表单数据的处理

学习目标

知识目标

表单数据的提交方式

表单控件

表单按钮

技能目标

培养学生的自学能力、动手实践能力和创新能力。

素质目标

培养学生的团队精神和成功意识，增强学生学习的自信心，形成主动学习的良好氛围。

教学重点

内  容

表单控件

在表单控件中使用数组

表单按钮

突破方法与手段

讲授法，探索教学，讨论法，练习法

教学难点

内  容

表单控件

在表单控件中使用数组

表单按钮

突破方法与手段

讲授法，探索教学，讨论法，练习法

教学资源

多媒体机房、ppt课件、配套资源、教案、教材

课程名称

动态网页设计与制作

任课教师

韩多成

授课日期

年  月  日

年  月  日

年  月  日

年  月  日

授课班级

授课地点

教研室主任审核意见

签名：

                                   年   月   日

题 目

表单数据的处理

学习目标

知识目标

表单数据的提交方式

表单控件

表单按钮

技能目标

培养学生的自学能力、动手实践能力和创新能力。

素质目标

培养学生的团队精神和成功意识，增强学生学习的自信心，形成主动学习的良好氛围。

教学重点

内  容

表单控件

在表单控件中使用数组

表单按钮

突破方法与手段

讲授法，探索教学，讨论法，练习法

教学难点

内  容

表单控件

在表单控件中使用数组

表单按钮

突破方法与手段

讲授法，探索教学，讨论法，练习法

教学资源

多媒体机房、ppt课件、配套资源、教案、教材

教学过程设计

教学环节

（用时）

内容设计

情景引入

教学内容

点名，复习上节课内容及总结作业，引入本节课所要讲解内容。

循环结构语句

【引入】通过定义过程或函数，可以提高代码的利用率。同时，VBScript提供了一些常用的函数，可以直接使用。

教师活动

点名，回顾上节课学习内容，引入本节课学习内容

学生活动

回顾上节课内容，了解本节课学习内容

设计意图

通过温故知新，引入本节课学习内容

新课讲授

教学内容

    B-S模式的WEB开发中，浏览器与服务器之间的数据交互，非常频繁，是WEB系统得以正常运行工作的重要基础。而B-S之间的数据交互，主要有两种方式：表单与URL参数。

表单是WEB系统与用户进行数据交互的唯一方法，用户通过表单提交自己的数据，系统即通过表单获取用户数据。

URL参数是WEB系统的不同文件之间进行数据传递的重要方法之一，它实现了HTTP协议下，不同文件之间的数据共享。

1、表单

表单是指HTML语言中，<form></form>标签以及相关的一系列用于数据交互的控件，如文本框、按钮、列表框、单选框等等。

WEB系统的用户通过这些控件，得以将自己的数据提交到服务器端，交给PHP程序进行处理，PHP程序即通过获取这些控件的值，得到用户的数据，将处理的结果返回到客户端的浏览器。这一过程，形成了B-S之间的数据交互。

PHP获取表单中各种控件的值时，通过这些控件的name属性指定要操作的控件名称，通过控件的value属性获得控件的值。但对不同类型的控件，在获取其值时，具体方法有所不同。

表单数据的提交方式

表单数据的提交方式有post与get两种。

post方式提交表单数据时，表单的数据不会显示在浏览器的地址栏中。

使用get方式提交表单数据时，表单数据的内容会明文显示在浏览器的地址栏中;

使用get方式提交的数据，存在长度限制， post方式则没有限制。

GET提交方式

  GET提交方式是将“请求”数据以查询字符串（Query String）格式附在URL之后“提交”数据。例如：

http://localhost/2/register.php?userName=victor&password=1234&confirmPassword=1234。

在这个URL中，问号“?” 表示查询字符串的开始，问号“?”后面的字符串参数“userName=victor&password=1234&confirmPassword=1234”为查询字符串。可以看出：查询字符串可以包含多个参数，每个参数以“参数名=参数值”的格式定义，参数之间使用“&”相连，最后再将查询字符串使用“？”附在URL之后。

另外，FORM表单也提供了GET提交方式。

除此以外，使用超链接<a></a>标签也可以实现浏览器端GET提交方式。

两种提交方式的比较

  ØPOST提交方式比GET提交方式安全。这是由于GET提交方式提交的数据将出现在URL查询字符串中，并且这些带有查询字符串的URL可以被浏览器缓存到历史记录中。因此诸如用户注册、登录等系统，不建议使用GET提交方式。

ØPOST提交方式可以提交更多的数据。POST数据提交方式一般通过FORM表单实现，理论上讲POST提交方式提交的数据没有大小限制，而GET提交方式提交的数据由于出现在URL查询字符串中，而URL的长度是受限制的（例如IE浏览器对URL长度的限制是2083字节）。例如：新闻发布系统中提交篇幅较长的新闻信息时，不建议使用GET提交方式；带有文件上传功能的FORM表单则必须使用POST提交方式。

Ø不同的“提交”方式对应的服务器端数据“采集”方式不同。

表单的组成

FORM表单由三部分组成：

Ø  表单标签：定义了表单处理程序及数据提交方式等信息。

Ø  表单控件：包括单行文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。

Ø  表单按钮：包括提交按钮、复位按钮和一般按钮。

表单标签<form></form>

    表单标签<form>常用的属性有action、method、enctype、title、name等。

    1．action属性设置当前表单数据“提交”的目的地址。当不设置action属性，或设置值等于空字符串（即action=""）时，表单数据提交给当前页面。

    2．method属性设置表单数据的提交方式。method属性的值为GET或POST。

    3．title属性设置表单的提示信息。当用户的鼠标在表单处停留时，浏览器用一个黄色的小浮标显示提示文本。

    4．enctype属性设置提交表单数据时的编码方式。enctype属性的值为multipart/form-data或application/x-www-form-urlencoded，默认为"application/x-www-form-urlencoded"。当一个FORM表单中存在文件上传框时，必须将enctype属性设置为multipart/form-data编码方式。

    5．name属性为当前的FORM表单命名。

表单控件

1．单行文本框

2．密码框

3．多行文本框

4．隐藏域

5．复选框

6．单选框

7．文件上传框

8．下拉选择框

在表单控件中使用数组

在一个HTML页面中，有时并不清楚某种表单控件的具体个数。例如：在进行多文件上传时，并不能确定浏览器用户究竟选择多少个上传文件，更无法确定页面中需要多少个文件上传框。在表单控件中使用数组可以解决类似的问题。

在表单控件的name属性值后面加上方括号“[ ]”从而实现在表单控件中使用数组。使用表单控件数组后，当表单提交时，相同name属性的表单控件则以数组的方式向WEB服务器提交多个数据。

表单按钮

1．提交按钮

2．图像提交按钮

3．重置按钮

4．自定义按钮

制作表单：

制作如图所示的表单：

<form action="register.php" method="post" enctype="multipart/form-data">

用 户 名：

<input type="text" name="userName" size="20" maxlength="15" value="必须填写用户名" />

@

<select name="domain">

　　<option value="@163.com" selected>163.com</option>

　　<option value="@126.com">126.com</option>

</select>

<br/>

登录密码：

<input type="password" name="password" size="20" maxlength="15" />

<br/>

确认密码：

<input type="password" name="confirmPassword" size="20" maxlength="15" />

<br/>

选择性别：

<input name="sex" type="radio" value="male" checked />男

<input name="sex" type="radio" value="female" />女

<br/>

个人爱好：

<input name="interests[]" type="checkbox" value="music" checked />音乐

<input name="interests[]" type="checkbox" value="game" checked />游戏

<input name="interests[]" type="checkbox" value="film" />电影

<br/>

个人相片：

<input type="hidden" name="MAX_FILE_SIZE" value="1124" />

<input type="file" name="myPicture" size="25" maxlength="110" />

<br/>

备注信息 :

<textarea name="remark" cols="30" rows="4">请填写备注信息</textarea>

<br/>

提交按钮：

<input type="submit" name="submit1" value="普通提交按钮" />

<br/>

图片按钮：

<input type="image" name="submit2" src="http://www.google.cn/intl/zh-CN/images/logo.gif" height="40" />

<br/>

重置按钮：

<input type="reset" name="cancel" value="重新填写" />

</form>

教师活动

使用各种教学方法，利用多媒体机房和教学课件，教学案例等教学资源，对教学内容进行讲授

学生活动

配合教学活动，学习相关知识。

设计意图

讲授新知识，让学生学习本节课内容。

实践练习

教学内容

实践练习

结合本节课所学知识，理解教材上案例并调试运行。

完成操作练习题

教师活动

安排练习内容，辅导学生完成对应的操作练习

学生活动

领取实践练习任务，按照要求完成相关操作

设计意图

让学生能熟练掌握所学知识，通过实践练习进一步强化操作技能

板书设计

作业布置

课后配套练习

教学反思