《网页设计》课程教学资源（PPT课件讲稿）第八讲 表单的应用

第八讲表单的应用 述:表单技术可以实现浏览者与服务器 之间信息的交互传送,它是网络信息收集 处理的一种重要的方式。通过表单可以从 网络的用户端收集信息,然后将收集来的 信息经过服务器处理后再反馈给用户 目前,有非常多的网站都在应用表单技术, 如网上调查、电子商务、留言板等页面都 能够接收浏览者输入的信息,而表单已成 为网站获取用户信息的重要手段 2021/222

2021/2/22 1 概述：表单技术可以实现浏览者与服务器 之间信息的交互传送，它是网络信息收集 处理的一种重要的方式。通过表单可以从 网络的用户端收集信息，然后将收集来的 信息经过服务器处理后再反馈给用户。 目前，有非常多的网站都在应用表单技术， 如网上调查、电子商务、留言板等页面都 能够接收浏览者输入的信息，而表单已成 为网站获取用户信息的重要手段。 第八讲 表单的应用

表单有两个重要组成部分 1)、由 Dreamweaver M×生成的表单页面。 2)、用于处理浏览者在表单域中输入的信息的服务 器端的应用程序或脚本程序,如CG、ASP等。 浏览者在网页上看到有关表单的页面,只是供浏 览者输入信息的表单页面。当浏览者按要求在表 单中填写有关信息,单击表单的“提交”按钮之 后,表单的内容就会上传到服务器,并且由事先 编写好的CG或ASP程序来处理这些信息,最后服 务器再将处理的结果发送给浏览者的浏览器 2021/222

2021/2/22 2 表单有两个重要组成部分： 1）、由Dreamweaver MX生成的表单页面。 2）、用于处理浏览者在表单域中输入的信息的服务 器端的应用程序或脚本程序，如CGI、ASP等。 浏览者在网页上看到有关表单的页面，只是供浏 览者输入信息的表单页面。当浏览者按要求在表 单中填写有关信息，单击表单的“提交”按钮之 后，表单的内容就会上传到服务器，并且由事先 编写好的CGI或ASP程序来处理这些信息，最后服 务器再将处理的结果发送给浏览者的浏览器

可见,表单的应用必须依赖服务器端脚本才 能真正发挥其功能。 下面我们要学习的是它的第一部分:重点学 习如何使用 Dreamweaver MX生成各种功 混的表单页面。 表单的主要功能是接收输入的信息。浏览者 输入的信息是多种多样的,这些不同类别 的信息如何接收呢? Dreamweaver mx工 具又是如何实现的呢? 2021/222

2021/2/22 3 可见，表单的应用必须依赖服务器端脚本才 能真正发挥其功能。 下面我们要学习的是它的第一部分：重点学 习如何使用Dreamweaver MX生成各种功 能的表单页面。 表单的主要功能是接收输入的信息。浏览者 输入的信息是多种多样的，这些不同类别 的信息如何接收呢？ Dreamweaver MX工 具又是如何实现的呢？

主要内容 建立表单 向表单添加对象> 举例说明 本节小结 五、作业>> 2021/222

2021/2/22 4 主要内容： 一、建立表单 >>> 二、向表单添加对象>>> 三、举例说明>>> 四、本节小结>>> 五、作业>>>

建立表单 Dreamweaver MX为了方便用户创建表一 单的各种组件(或者称之表单域对象), 把创建各种组件的快捷按钮都收集在插入 栏中的表单面板【 Forms(表单)】中, 共有10多个对象,我们可以通过使用这些 对象来建立各种各样的表单 所以,用户在创建表单时,可以先打开 插入栏中的表单面板,然后再进行表单网 页的设计 2021/222

2021/2/22 5 一、建立表单 Dreamweaver MX为了方便用户创建表 单的各种组件（或者称之表单域对象）， 把创建各种组件的快捷按钮都收集在插入 栏中的表单面板【 Forms（ 表单）】中， 共有10多个对象，我们可以通过使用这些 对象来建立各种各样的表单。 所以， 用户在创建表单时，可以先打开 插入栏中的表单面板，然后再进行表单网 页的设计

建立表单的操作步骤: 1)、将光标置于欲插入表单的位置, 单击表单面板中的圖按钮,(或者选 择主菜单中的【插入】/【表单】命 令),可在文档中插入表单 无标题文档( Untitled-1*) 592x145-1K/1秒 20212/22

2021/2/22 6 建立表单的操作步骤： 1）、将光标置于欲插入表单的位置， 单击表单面板中的 按钮，（或者选 择主菜单中的【插入】/ 【表单】命 令 ），可在文档中插入表单

在上图的文档窗口中显示的红色虚线框 就是新插入的空白表单,如果看不到红 色虚线框,只要选择主菜单的【查看】/ 【可视化处理】/【隐藏元素】命令,就 可以看到虚线框了。 2)、表单属性面板中参数介绍 在文档中插入了表单对象后,单击表单 红色虚线框,或单击HTML状态栏中的 标记,系统就会弹出该表单对象 的属性面板,如下图所示 2021/222

2021/2/22 7 在上图的文档窗口中显示的红色虚线框 就是新插入的空白表单，如果看不到红 色虚线框，只要选择主菜单的【查看】/ 【可视化处理】/ 【隐藏元素】命令，就 可以看到虚线框了。 2）、表单属性面板中参数介绍 在文档中插入了表单对象后，单击表单 红色虚线框，或单击HTML状态栏中的 标记，系统就会弹出该表单对象 的属性面板，如下图所示：

屈性 表单名称 动作 目标 form1 方法 POSTMIME类型□ 表单属性面板 表单属性面板的属性说明: (1)、【表单名称( Form Name)】:此 项为表单定义名称,输入一个能在脚本程 序(ASP、 Javascript)中引用的表单名称, 般为英文名称,系统默认给名为form1。 2021/222

2021/2/22 8 表单属性面板 表单属性面板的属性说明： （1）、【表单名称（Form Name） 】：此 项为表单定义名称，输入一个能在脚本程 序（ASP、Javascript）中引用的表单名称， 一般为英文名称，系统默认给名为form1

(2)、【动作】:在此输入一个在 服务器端处理表单信息的应用程序 的URL,或单击□按钮来定位应用 程序。路径可以表示为 http://www.mysite.com/application name/process. asp (3)、【方法】:指的是表单数据 传输到服务器的方法,共有以下3项 作为选择: 2021/222

2021/2/22 9 （2）、 【动作】：在此输入一个在 服务器端处理表单信息的应用程序 的URL，或单击 按钮来定位应用 程序。路径可以表示为： http://www.mysite.com/application￾name/process.asp （3）、 【方法】：指的是表单数据 传输到服务器的方法 ，共有以下3项 作为选择：

默认:使用浏览器的默认设置将表单数据 发送到服务器。通常,默认方法为GET方 法 GET:将表单内的数据附加到URL后面传 送给服务器。此方式有长度限制,不能超 过8192个字符。(不要使用这种方法发送 长表单,否则可能岀现数据被截断而导致 失败的处理结果。另外这种方法不安全) POST:用标准的数据传送方式,是在 HTTP请求中嵌入表单数据(或者说是在网 页正文中发送表单数据)。此方式没有长 度限制,又非常安全 2021/222

2021/2/22 10 ➢默认：使用浏览器的默认设置将表单数据 发送到服务器。通常，默认方法为 GET 方 法。 ➢GET：将表单内的数据附加到URL后面传 送给服务器。此方式有长度限制，不能超 过8192个字符。（不要使用这种方法发送 长表单，否则可能出现数据被截断而导致 失败的处理结果。另外这种方法不安全） ➢POST：用标准的数据传送方式，是在 HTTP 请求中嵌入表单数据（或者说是在网 页正文中发送表单数据）。此方式没有长 度限制，又非常安全