网页制作清华大学出版社第17章.ppt

《网页制作清华大学出版社第17章.ppt》由会员分享，可在线阅读，更多相关《网页制作清华大学出版社第17章.ppt（46页珍藏版）》请在金锄头文库上搜索。

1、第第17章章 表单及其应用表单及其应用17.117.1交互式表单概述交互式表单概述交互式表单概述交互式表单概述17.2 17.2 创建表单创建表单创建表单创建表单17.317.3表单的应用实例表单的应用实例表单的应用实例表单的应用实例17.417.4本章小结本章小结本章小结本章小结 本章重点：l交互式表单的特点l表单及表单域的应用l表单应用实例17.1交互式表单概述交互式表单概述表单（表单（表单（表单（FormForm）技术可以实现浏览者同）技术可以实现浏览者同）技术可以实现浏览者同）技术可以实现浏览者同InternetInternet服务器之间信息的交互传送，它是网络信服务器之间信息的交互传

2、送，它是网络信服务器之间信息的交互传送，它是网络信服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从息收集处理的一种重要的方式。通过表单可以从息收集处理的一种重要的方式。通过表单可以从息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经网络的用户端收集信息，然后将收集来的信息经网络的用户端收集信息，然后将收集来的信息经网络的用户端收集信息，然后将收集来的信息经过服务器处理后再返馈给用户。无论是电子商务、过服务器处理后再返馈给用户。无论是电子商务、过服务器处理后再返馈给用户。无论是电子商务、过服务器处理后再返馈给用户。无论是电子商务、网

3、上调查，还是留言板、聊天室，都要求网页能网上调查，还是留言板、聊天室，都要求网页能网上调查，还是留言板、聊天室，都要求网页能网上调查，还是留言板、聊天室，都要求网页能够接收浏览者输入的信息，而表单就是网站获取够接收浏览者输入的信息，而表单就是网站获取够接收浏览者输入的信息，而表单就是网站获取够接收浏览者输入的信息，而表单就是网站获取用户信息的最重要的手段之一。用户信息的最重要的手段之一。用户信息的最重要的手段之一。用户信息的最重要的手段之一。表单有两个重要的组成部分：表单有两个重要的组成部分：（1 1）由）由Dreamweaver 8Dreamweaver 8生成的表单的生成的表单的HTMLH

4、TML页面。页面。（2 2）用于处理浏览者在表单域中输入的信息的服）用于处理浏览者在表单域中输入的信息的服务器端应用程序或客户端脚本。务器端应用程序或客户端脚本。浏览者在网页上看到有关表单的页面，只是浏览者在网页上看到有关表单的页面，只是供浏览者输入信息的表单页面。当浏览者按要求供浏览者输入信息的表单页面。当浏览者按要求在表单中填写有关信息，单击表单的递交在表单中填写有关信息，单击表单的递交（SubmitSubmit）按钮之后，表单内容就会上传到服务）按钮之后，表单内容就会上传到服务器，并且由事先编好的服务器端程序来处理这些器，并且由事先编好的服务器端程序来处理这些信息，最后服务器再将处理结果

5、发送给浏览者的信息，最后服务器再将处理结果发送给浏览者的浏览器。由此可见，表单的应用必须依赖于服务浏览器。由此可见，表单的应用必须依赖于服务器端脚本才能真正发挥其功能。器端脚本才能真正发挥其功能。17.2 创建表单创建表单表单主要的功能是接收输入的信息。浏览者表单主要的功能是接收输入的信息。浏览者输入的信息可以是多种多样的，这些不同类别的输入的信息可以是多种多样的，这些不同类别的信息可以由不同的表单域分别接收。因为每个表信息可以由不同的表单域分别接收。因为每个表单域对应一个项目，所以每个表单域都要添加一单域对应一个项目，所以每个表单域都要添加一个标识，提醒用户在这个表单域中应该输入的内个标识，

6、提醒用户在这个表单域中应该输入的内容。容。在网页中创建一个表单的方法有在网页中创建一个表单的方法有3 3种。种。 （1 1）将光标定位在要插入表单的位置上，选择）将光标定位在要插入表单的位置上，选择【插入插入】| |【表单表单】| |【表单表单】命令，便可在网页的指命令，便可在网页的指定位置上插入一个红色虚线构成的表单区域。定位置上插入一个红色虚线构成的表单区域。（2 2）将光标定位在要插入表单的位置上，单击）将光标定位在要插入表单的位置上，单击【插入插入】栏栏【表单表单】选项中的选项中的【表单表单】按钮，便可在网页的指定位按钮，便可在网页的指定位置上插入一个表单区域。置上插入一个表单区域。（

7、3 3）直接将）直接将【插入插入】栏栏【表单表单】选项中的选项中的【表单表单】按钮按钮 拖入网页文档窗口的表单插入区域。拖入网页文档窗口的表单插入区域。用以上三种方法创建的表单区域，在页面上用红色虚线框用以上三种方法创建的表单区域，在页面上用红色虚线框表示。红色虚线框确定了当前表单的边框，这种红色边框表示。红色虚线框确定了当前表单的边框，这种红色边框的大小是不能被编辑的。当设计者在表单区域中插入对象的大小是不能被编辑的。当设计者在表单区域中插入对象后，表单的区域会自动调整其大小。后，表单的区域会自动调整其大小。在创建表单后，就可以在表单中插入各种表单域。要在网在创建表单后，就可以在表单中插入各

8、种表单域。要在网页中插入表单域有两种方法，一种方法是利用网页文档窗页中插入表单域有两种方法，一种方法是利用网页文档窗口的菜单命令，选择口的菜单命令，选择【插入插入】| |【表单表单】命令，在其级联菜命令，在其级联菜单中选择相应的命令插入表单域；另一种方法是切换到单中选择相应的命令插入表单域；另一种方法是切换到【插入插入】栏栏【表单表单】选项，从中选择要插入的表单域。本章选项，从中选择要插入的表单域。本章主要介绍直接从主要介绍直接从【表单表单】选项中选择有关表单域，然后将选项中选择有关表单域，然后将其插入到网页中。其插入到网页中。下面先简要介绍下面先简要介绍Dreamweaver 8Dreamw

9、eaver 8的表单域的特点。的表单域的特点。（1 1）文本字段：用来输入的文字或数字。）文本字段：用来输入的文字或数字。（2 2）文本区域：插入的文本可显示为单行、多行，但是）文本区域：插入的文本可显示为单行、多行，但是浏览者输入文字较麻烦，故在表单中应少用文本框，尽可浏览者输入文字较麻烦，故在表单中应少用文本框，尽可能使用其它的表单对象。能使用其它的表单对象。（3 3）按钮）按钮 ：表单中一般有两个按钮，一个是：表单中一般有两个按钮，一个是【提交提交】按按钮，单击此按钮可把浏览者输入的信息发送给服务器；另钮，单击此按钮可把浏览者输入的信息发送给服务器；另一个是一个是【重置重置】按钮，用来清

10、除表单中的内容，把当前表按钮，用来清除表单中的内容，把当前表单还原为初始状态。单还原为初始状态。（4 4）复选框）复选框 ：复选框可以单独使用，也可以成组使用，：复选框可以单独使用，也可以成组使用，有选中与不选中两种状态。有选中与不选中两种状态。（5 5）单选按钮：单选按钮常用于一组互斥选择（如）单选按钮：单选按钮常用于一组互斥选择（如“ “男男” ”、“ “女女” ”等）。等）。（6 6）单选按钮组：）单选按钮组：创建一组在表单中使用的单选按钮。创建一组在表单中使用的单选按钮。（7 7）列表按钮：常用于提交一组可供浏览者进行选）列表按钮：常用于提交一组可供浏览者进行选择的列表选项。其表现方式

11、为当单击它右侧的择的列表选项。其表现方式为当单击它右侧的 按按钮时，弹出一个下拉式列表。浏览者可单击列表中钮时，弹出一个下拉式列表。浏览者可单击列表中某一选项。它在功能上与单选按钮相似，可以提供某一选项。它在功能上与单选按钮相似，可以提供浏览者在多个备选项中作一个选择，它占有网页的浏览者在多个备选项中作一个选择，它占有网页的面积比单选按钮小的多。面积比单选按钮小的多。（8 8）文件域：文件域有一个文本框和一个浏览按钮。）文件域：文件域有一个文本框和一个浏览按钮。让浏览者从本地计算机上用表单向服务器上传文件。让浏览者从本地计算机上用表单向服务器上传文件。（9 9）隐藏域）隐藏域 ：表单的隐藏域在

12、浏览时是看不到的，：表单的隐藏域在浏览时是看不到的，浏览者也不能执行该操作。利用隐藏域可以实现浏浏览者也不能执行该操作。利用隐藏域可以实现浏览器同服务器在后台不公开地交换信息。览器同服务器在后台不公开地交换信息。（1010）图片域：用于显示图片，也可用作确认按钮。）图片域：用于显示图片，也可用作确认按钮。 （1111）跳转菜单：插入一个跳转菜单，每个菜单选）跳转菜单：插入一个跳转菜单，每个菜单选项都可链接到一个网页或文件。项都可链接到一个网页或文件。17.2.1创建表单的文本框创建表单的文本框表单中的文本框是网页中常见一种表单元素表单中的文本框是网页中常见一种表单元素, ,网页中表单的文本框包

13、括网页中表单的文本框包括3 3种形式。种形式。（1 1）【单行文本框单行文本框】是浏览者只能输入一行信息是浏览者只能输入一行信息的文本区域。的文本区域。（2 2）【多行文本框多行文本框】是可由网页设计者限定文本是可由网页设计者限定文本的行数，并决定是否显示滚动条，浏览者可在这的行数，并决定是否显示滚动条，浏览者可在这种文本框中输入多行文本信息。种文本框中输入多行文本信息。（3 3）【密码密码】文本框是一种可以让浏览者输入密文本框是一种可以让浏览者输入密码信息的文本框，输入的字符都以码信息的文本框，输入的字符都以“*”“*”号显示在号显示在屏幕上。屏幕上。下面将介绍创建一个带有文本框的最基本的下

14、面将介绍创建一个带有文本框的最基本的表单，通过创建这个简单的表单来了解表单创建表单，通过创建这个简单的表单来了解表单创建的过程，其操作步骤如下：的过程，其操作步骤如下： （1 1）单击）单击【插入插入】栏栏【表单表单】选项。选项。（2 2）此时在）此时在【插入插入】栏栏【表单表单】选项中显示的各选项中显示的各种对象，如图种对象，如图17-117-1所示。所示。（3 3）在网页文档窗口中，确定要插入的表单位置。）在网页文档窗口中，确定要插入的表单位置。（4 4）单击）单击【表单表单】选项中的选项中的【表单表单】 按钮，便按钮，便可在网页编辑区中生成一个表单。此时表单被一可在网页编辑区中生成一个表

15、单。此时表单被一个红色虚线框界定。单击红色虚线框，可以选中个红色虚线框界定。单击红色虚线框，可以选中表单区域，在表单区域，在【属性属性】面板中显示了这个表单区面板中显示了这个表单区域的属性，如图域的属性，如图17-217-2所示。所示。图图17-1 17-1 【插入插入】栏栏【表单表单】选项选项图17-2 表单的【属性】面板 表单的表单的【属性属性】面板中各属性具体意义如下。面板中各属性具体意义如下。l l在在【表单名称表单名称】文本框中输入指定表单的名称文本框中输入指定表单的名称, ,表单的名表单的名称必须唯一。称必须唯一。l l在在【动作动作】文本框中可以输入一个文本框中可以输入一个URL

16、URL，用来指定处理，用来指定处理表单信息的服务端的程序。也可以输入表单信息的服务端的程序。也可以输入mailtomailto：邮件地址，：邮件地址，用用EmailEmail方式来发送表单中的数据。方式来发送表单中的数据。l l在在【方法方法】下拉式列表中指定一个处理表单数据的方法，下拉式列表中指定一个处理表单数据的方法，其下拉列表中的各项意义如下所述。其下拉列表中的各项意义如下所述。 默认：使用浏览器的默认方式，一般为默认：使用浏览器的默认方式，一般为GETGET方式。方式。GETGET：表示把表单值附加到：表示把表单值附加到URLURL，并发送给服务器一个，并发送给服务器一个GETGET请

17、求。请求。POSTPOST：以消息方式发送表单的值，并发送给服务器一个：以消息方式发送表单的值，并发送给服务器一个POSTPOST请求。请求。l在在【目标目标】下拉式列表中指定一个下拉式列表中指定一个窗口方式，在窗口方式，在该窗口中显示调用程序所返回的数据。该窗口中显示调用程序所返回的数据。l在在【MIMEMIME类型类型】下拉式列表下拉式列表可以指定对提交给可以指定对提交给服务器进行处理的数据使用服务器进行处理的数据使用 MIME MIME 编码类型。编码类型。（5 5）将光标插入到表单内，输入标识提示文字）将光标插入到表单内，输入标识提示文字“ “您的姓名：您的姓名：” ”。（6 6）单击

18、）单击【表单表单】选项中的选项中的【文本字段文本字段】按钮按钮 ，就会在表单中生成一个，就会在表单中生成一个【文本字段文本字段】表单域，表单域，如图如图17-317-3所示。所示。图17-3创建表单文本字段示意图(7)(7)单击文本框表单域将其选中，此时单击文本框表单域将其选中，此时【文本字段文本字段】的的【属性属性】面板，如图面板，如图17-317-3所示。所示。【文本字段文本字段】的的【属性属性】面板各项属性意义如下。面板各项属性意义如下。l在在【文本域文本域】文本框中输入当前表单域的名称，文本框中输入当前表单域的名称，系统将以此名称保存文本框表单域中的内容。系统将以此名称保存文本框表单域

19、中的内容。l在在【字符宽度字符宽度】文本框中输入当前表单域的宽度，文本框中输入当前表单域的宽度，即设置文本框中每行所允许输入的字符数目。即设置文本框中每行所允许输入的字符数目。l在在【最大字符数最大字符数】文本框中设置文本框表单域中文本框中设置文本框表单域中最多可允许输入的字符数。最多可允许输入的字符数。l在在【类型类型】区域中确定文本框的类型，区域中确定文本框的类型，3 3个单项个单项选择分别是单行、多行、密码。选择分别是单行、多行、密码。l在在【初始值初始值】文本框中输入表单域的预先设置的文本框中输入表单域的预先设置的值。值。l在在【换行换行】中设置多行文本框表单域的换行方式。中设置多行文

20、本框表单域的换行方式。当选择当选择【类型类型】为多行单选项时，为多行单选项时，【换行换行】下拉下拉式列表就被激活，可选择设置多行文本表单域中式列表就被激活，可选择设置多行文本表单域中不同的换行方式。不同的换行方式。(8)(8)用同样的方法在表单的下一行生成用同样的方法在表单的下一行生成“ “您的您的E-E-mailmail地址：地址：” ”的文本框表单域，如图的文本框表单域，如图17-317-3所示。所示。(9)(9)在在【文本字段文本字段】的的【属性属性】面板中的面板中的【字符宽字符宽度度】文本框中输入文本框中输入4545。并选中单行选项，表示此。并选中单行选项，表示此文本框为单行类型。文本

21、框为单行类型。 17.2.2创建表单的单选按钮和复选框创建表单的单选按钮和复选框单选按钮和复选框是表单中用得较多的元素，而且单选按钮和复选框是表单中用得较多的元素，而且是网页设计者与浏览者进行交流的最有效的手段。是网页设计者与浏览者进行交流的最有效的手段。1. 1.创建表单的单选按钮创建表单的单选按钮创建表单的单选按钮创建表单的单选按钮网页中表单的单选按钮一般都是成组出现的，在页网页中表单的单选按钮一般都是成组出现的，在页面设计时既要为单选按钮组定义一个标识，也要为每一个面设计时既要为单选按钮组定义一个标识，也要为每一个单选按钮定义一个标识。创建单选按钮的操作步骤如下：单选按钮定义一个标识。创

22、建单选按钮的操作步骤如下： （1 1）在表单的合适位置插入光标，并输入单选按钮组的）在表单的合适位置插入光标，并输入单选按钮组的标识文字，例如标识文字，例如“ “性别：性别：” ”。（2 2）然后单击）然后单击【表单表单】选项中的按钮选项中的按钮 ，并输入这个单，并输入这个单选按钮的标识文字，例如选按钮的标识文字，例如“ “男男” ”。（3 3）选中这个单选按钮，打开单选按钮的）选中这个单选按钮，打开单选按钮的【属性属性】面板，面板，如图如图17-417-4所示。所示。图17-4单选按钮的【属性】面板(4)(4)在在【单选按钮单选按钮】文本框中输入单选按钮的名字文本框中输入单选按钮的名字“ “

23、性别性别” ”。并在。并在【选定值选定值】文本框中给单选按钮赋值文本框中给单选按钮赋值“ “男男” ”。(5)(5)并为这个单选按钮设置初始状态，并为这个单选按钮设置初始状态，【初始状态初始状态】为为【已勾选已勾选】状态。状态。(6)(6)用同样的方法添加另一个标识为用同样的方法添加另一个标识为“ “女女” ”的单选按的单选按钮。钮。(7)(7)在在【单选按钮单选按钮】文本框中输入单选按钮的名字文本框中输入单选按钮的名字“ “性别性别” ”。并在选定值文本框中给单选按钮赋值。并在选定值文本框中给单选按钮赋值“ “女女” ”。(8)(8)并为这个单选按钮设置初始状态，并为这个单选按钮设置初始状态

24、，【初始状态初始状态】为为【未选中未选中】状态，如图状态，如图17-5 17-5 所示。所示。图图17-5 17-5 表单的单选按钮表单的单选按钮2. 2.创建表单的复选框创建表单的复选框创建表单的复选框创建表单的复选框网页表单中的复选框可以单个出现也可以成组出现，网页表单中的复选框可以单个出现也可以成组出现，单个复选框可用于答案为是或否的问题，成组的复选框可单个复选框可用于答案为是或否的问题，成组的复选框可用于一个或多个选项选取的问题。一般情况下，复选框组用于一个或多个选项选取的问题。一般情况下，复选框组的标识文字放在复选框之前，而每一个复选框的标识文字的标识文字放在复选框之前，而每一个复选

25、框的标识文字放到复选框的后面。放到复选框的后面。当一个复选框被选中后向服务器发送什么值是一件当一个复选框被选中后向服务器发送什么值是一件需要认真思考的问题。服务器端必须有一个接收程序（如需要认真思考的问题。服务器端必须有一个接收程序（如用用CGICGI、ASPASP、PHPPHP等编制的程序），用来接收表单发来的等编制的程序），用来接收表单发来的数据，并将这些数据处理后以网页的形式发送给用户端的数据，并将这些数据处理后以网页的形式发送给用户端的浏览器。复选框名称和选定值的设置应该要按照服务器端浏览器。复选框名称和选定值的设置应该要按照服务器端接收程序的约定来完成。接收程序的约定来完成。下面将介

26、绍创建复选框的过程，其操作步骤如下。下面将介绍创建复选框的过程，其操作步骤如下。(1) (1) 在表单的合适位置插入光标，并输入复选框组在表单的合适位置插入光标，并输入复选框组的标识文字，例如的标识文字，例如“ “您经常关注本网上书店的您经常关注本网上书店的哪些栏目？哪些栏目？” ”。(2) (2) 将光标插入到合适的位置，然后单击将光标插入到合适的位置，然后单击【表单表单】选项中的按钮选项中的按钮 ，并输入这个单选按钮的标识，并输入这个单选按钮的标识文字，如图文字，如图17-617-6所示。所示。选中该复选框，在复选框的选中该复选框，在复选框的【属性属性】面板中为其面板中为其设置名称和赋值，

27、如图设置名称和赋值，如图17-717-7所示。所示。图图17-617-6表单的复选框表单的复选框图17-7 表单复选框的【属性】面板【属性属性】面板中各项参数意义如下所述。面板中各项参数意义如下所述。l在在【复选框名称复选框名称】文本框中，给选中的复选框起文本框中，给选中的复选框起一个名字，也就是选中该复选框后向服务器发送一个名字，也就是选中该复选框后向服务器发送信息时所用的变量名。信息时所用的变量名。l在在【选定值选定值】文本框中，输入选中该复选框后要文本框中，输入选中该复选框后要向服务器发送的内容向服务器发送的内容l在在【初始状态初始状态】中，选中中，选中【已勾选已勾选】单选项表示单选项表

28、示该复选框初始状态已被选中。选中该复选框初始状态已被选中。选中【未选中未选中】单单选项表示该复选框初始状态为待选状态。选项表示该复选框初始状态为待选状态。复选框复选框【属性属性】面板设置的参数应按照与服务器面板设置的参数应按照与服务器端程序的约定来完成。端程序的约定来完成。17.2.317.2.3创建表单的列表框创建表单的列表框创建表单的列表框创建表单的列表框给表单添加列表框与下拉式列表框的方法基本相同，给表单添加列表框与下拉式列表框的方法基本相同，只需在创建了空白列表后，在列表只需在创建了空白列表后，在列表【属性属性】面板的面板的【类型类型】中选择不同的单选项便可完成设置。选择中选择不同的单

29、选项便可完成设置。选择【菜单菜单】单选单选项，可创建下拉式列表框；选择项，可创建下拉式列表框；选择【列表列表】单选项，可创建单选项，可创建列表框。下面来介绍创建表单的列表框方法，其操作步骤列表框。下面来介绍创建表单的列表框方法，其操作步骤如下。如下。（1 1）在表单的合适位置上插入光标，然后输入下拉式列）在表单的合适位置上插入光标，然后输入下拉式列表的框的标识文字，例如表的框的标识文字，例如“ “您的职业：您的职业：” ”。（2 2）单击）单击【表单表单】选项中的按钮，此时表单的光标位置选项中的按钮，此时表单的光标位置上显示一个很小的下拉式列表框。上显示一个很小的下拉式列表框。（3 3）选中新

30、建的下拉式列表框，下拉列表框的）选中新建的下拉式列表框，下拉列表框的【属性属性】面板，如图面板，如图17-817-8所示。所示。 图17-8 下拉列表框的【属性】面板【属性属性】面板中各项参数的意义如下。面板中各项参数的意义如下。l l在在【列表列表/ /菜单菜单】文本框中设置下拉式列表框的名称。在文本框中设置下拉式列表框的名称。在此文本框中输入下拉式列表框的名称为此文本框中输入下拉式列表框的名称为selectselect。l l在在【类型类型】选项区中设置下拉式列表框的类型为选项区中设置下拉式列表框的类型为【菜单菜单】。l l若下拉式列表框的若下拉式列表框的【类型类型】设置为设置为【列表列表

31、】时，高度文时，高度文本框被激活，在其中可设置该列表框可显示的行数。本框被激活，在其中可设置该列表框可显示的行数。l l选中选中【选定范围选定范围】复选框，可将下拉式列表设置成一次复选框，可将下拉式列表设置成一次选择多个选项。可以通过按选择多个选项。可以通过按CtrlCtrl键，再单击选择不相邻的键，再单击选择不相邻的任意多个选项，也可以通过按任意多个选项，也可以通过按ShiftShift键来选中两次单击选项键来选中两次单击选项之间所有连续的选项。之间所有连续的选项。l l单击单击【列表值列表值】按钮，可以进行列表值的设置。按钮，可以进行列表值的设置。l l在在【初始化时选定初始化时选定】列表

32、中，会显示通过列表值设置的列表中，会显示通过列表值设置的列表项目文字。列表项目文字。（4 4）在）在【属性属性】面板中单击面板中单击【列表值列表值】按钮，打开按钮，打开【列列表值表值】对话框，如图对话框，如图17-917-9所示。所示。（5 5）单击项目标签按钮的下方，在出现的文本框中输入）单击项目标签按钮的下方，在出现的文本框中输入“ “工人工人” ”。（6 6）按）按Tab Tab 键或单击值按钮，在出现的文本框中输入选项键或单击值按钮，在出现的文本框中输入选项的赋值的赋值“ “GR”GR”。（7 7）单击）单击 按钮，重复步骤（按钮，重复步骤（5 5）、（）、（6 6）添加新的列表）添加

33、新的列表选项。选项。（8 8）如果要删除某个选项，可以在）如果要删除某个选项，可以在【列表值列表值】对话框中对话框中选中该项，然后单击选中该项，然后单击 按钮即可。按钮即可。（9 9）可用列表值对话框中按钮）可用列表值对话框中按钮 调整下拉式列表的选调整下拉式列表的选项次序。项次序。 （1010）单击）单击【确定确定】按钮，此时列表项目显示在按钮，此时列表项目显示在【属性属性】面板的面板的【初始化时选定初始化时选定】列表窗口中。列表窗口中。（1111）按）按F12F12键，在浏览器中单击下拉列表框的按钮，可键，在浏览器中单击下拉列表框的按钮，可以看到列表框的下拉菜单。以看到列表框的下拉菜单。图

34、图17-917-9【列表值列表值】对话框对话框17.2.4 17.2.4 创建表单的提交和重置按钮创建表单的提交和重置按钮创建表单的提交和重置按钮创建表单的提交和重置按钮在网页中的表单必须添加在网页中的表单必须添加【提交提交】按钮，才按钮，才能将浏览者填写的信息上传到服务器。在能将浏览者填写的信息上传到服务器。在Dreamweaver 8Dreamweaver 8另外还设置了一个用于清除表单中另外还设置了一个用于清除表单中填写数据的填写数据的【重置重置】按钮。几乎所有网页中的表按钮。几乎所有网页中的表单都包含单都包含【提交提交】和和【重置重置】按钮。在表单中创按钮。在表单中创建建【提交提交】和

35、和【重置重置】按钮的操作步骤如下：按钮的操作步骤如下：（1 1）在表单合适的位置上确定插入点，然后）在表单合适的位置上确定插入点，然后2 2次次单击单击【表单表单】选项卡中的按钮选项卡中的按钮 。 （2 2）在表单中就会生成）在表单中就会生成2 2个按钮，如图个按钮，如图17-1017-10所示。所示。（3 3）选中第一个按钮，在按钮的）选中第一个按钮，在按钮的【属性属性】面板中面板中设置参数。输入设置参数。输入【按钮名称按钮名称】为为“ “Submit”Submit”；在；在【标标签签】文本框中输入该按钮上的文字文本框中输入该按钮上的文字“ “提交提交” ”；在；在【动作动作】选项区中选择选

36、项区中选择【提交表单提交表单】单选项。单选项。（4 4）选中第二个按钮，在按钮的）选中第二个按钮，在按钮的【属性属性】面板中面板中设置参数。输入设置参数。输入【按钮名称按钮名称】为为“ “Reset”Reset”；在；在【标标签签】文本框中输入该按钮上的文字文本框中输入该按钮上的文字“ “重置重置” ”；在；在【动作动作】选项区中选择选项区中选择【重设表单重设表单】单选项。添加单选项。添加按钮后的表单如图按钮后的表单如图17-1017-10所示。所示。 图17-10 表单按钮的【属性】面板17.2.5其它表单域的应用其它表单域的应用1 1表单的图像域表单的图像域表单的图像域表单的图像域图像域是

37、一个比较有用的表单域，它的主体图像域是一个比较有用的表单域，它的主体是一个图片。在浏览时单击这个图片时，表单就是一个图片。在浏览时单击这个图片时，表单就会向服务器发送表单中各个表单域的值。图像域会向服务器发送表单中各个表单域的值。图像域可以代替可以代替【提交提交】按钮，一个图像域有两个值，按钮，一个图像域有两个值，分别表示单击图像域时鼠标指针的纵坐标和横坐分别表示单击图像域时鼠标指针的纵坐标和横坐标。在表单中创建图像域的操作步骤如下。标。在表单中创建图像域的操作步骤如下。（1 1）在表单合适的位置上确定插入点，然后再单）在表单合适的位置上确定插入点，然后再单击击【表单表单】选项中的按钮。选项中

38、的按钮。（2 2）在打开的）在打开的【选择图像源选择图像源】对话框中，选择一对话框中，选择一个图片将其插入到表单中。个图片将其插入到表单中。（3 3）选中该图像，在图像的）选中该图像，在图像的【属性属性】面板中可以设置表面板中可以设置表单的图像属性，如图单的图像属性，如图17-1117-11所示，设置方法同操作普通图像所示，设置方法同操作普通图像类似。类似。表单图像域表单图像域【属性属性】面板的基本参数的意义如下。面板的基本参数的意义如下。在在【图像区域图像区域】文本框中可输入图像域的名称。文本框中可输入图像域的名称。在在【源文件源文件】文本框中输入要选定图像的路径和文件名。文本框中输入要选定

39、图像的路径和文件名。在在【替代替代】文本框中可输入图像的替换文字。当浏览器不文本框中可输入图像的替换文字。当浏览器不能显示图像时，输入的文字将代替图像，显示在浏览器中。能显示图像时，输入的文字将代替图像，显示在浏览器中。在在【对齐对齐】下拉式列表框中设置图像的对齐方式。下拉式列表框中设置图像的对齐方式。单击单击【编辑图像编辑图像】按钮，可以启动外部图像编辑器按钮，可以启动外部图像编辑器Fireworks 8Fireworks 8，编辑该图像。，编辑该图像。图图17-11 17-11 表单图像域的表单图像域的【属性属性】面板面板2 2表单的隐藏域表单的隐藏域表单的隐藏域表单的隐藏域隐藏域是一种在

40、浏览器上看不到的表单域，隐藏域是一种在浏览器上看不到的表单域，也不用对其执行操作，利用隐藏域可以实现浏览也不用对其执行操作，利用隐藏域可以实现浏览器同服务器在后台交换信息。由于它是不可见的，器同服务器在后台交换信息。由于它是不可见的，所以也不需要为它添加标识文字。所以也不需要为它添加标识文字。在表单中，插入隐藏表单域的操作步骤如下。在表单中，插入隐藏表单域的操作步骤如下。（1 1）在表单合适的位置上确定插入点，然后再单）在表单合适的位置上确定插入点，然后再单击击【表单表单】选项中的按钮。选项中的按钮。（2 2）在网页文档窗口的插入点处可以看到一个图）在网页文档窗口的插入点处可以看到一个图标。标

41、。（3 3）双击图标，选中表单的隐藏域，在表单隐藏）双击图标，选中表单的隐藏域，在表单隐藏域的域的【属性属性】面板中可以设置表单隐藏域的属性，面板中可以设置表单隐藏域的属性，如图如图17-1217-12所示。所示。图17-12表单隐藏域的【属性】面板隐藏表单域隐藏表单域【属性属性】面板的基本参数意义如下。面板的基本参数意义如下。在在【隐藏区域隐藏区域】文本框中，输入表单隐藏域的名称。文本框中，输入表单隐藏域的名称。在在【值值】文本框中输入隐藏表单域的初始值。文本框中输入隐藏表单域的初始值。3 3表单的文件域表单的文件域表单的文件域表单的文件域利用表单的文件域可以从本地计算机向服务器上传利用表单

42、的文件域可以从本地计算机向服务器上传文件。表单的文件域包括一个文本框和一个浏览按文件。表单的文件域包括一个文本框和一个浏览按钮。在浏览器中单击浏览按钮，打开选择文件的对钮。在浏览器中单击浏览按钮，打开选择文件的对话框，在对话框中选择相应的文件，然后单击表单话框，在对话框中选择相应的文件，然后单击表单中的提交按钮便可将文件发送到服务器上。中的提交按钮便可将文件发送到服务器上。在表单中，插入文件表单域的操作步骤如下。在表单中，插入文件表单域的操作步骤如下。（1 1）在表单合适的位置上确定插入点，然后再单）在表单合适的位置上确定插入点，然后再单击击【表单表单】选项中的按钮选项中的按钮 。（2 2）在

43、网页文档窗口的插入点处可以创建一个文）在网页文档窗口的插入点处可以创建一个文本框和浏览按钮，如图本框和浏览按钮，如图17-1317-13所示。所示。（3 3）选中表单的文件域，在表单的文件域的）选中表单的文件域，在表单的文件域的【属属性性】面板中可以设置表单文件域的属性。面板中可以设置表单文件域的属性。文件表单域文件表单域【属性属性】面板的基本参数意义如下。面板的基本参数意义如下。图图17-13 17-13 表单的文件域表单的文件域l在在【文件域名称文件域名称】文本框中输入文件表单域的名称。文本框中输入文件表单域的名称。l在在【字符宽度字符宽度】文本框中输入文件域最大字符宽度。文本框中输入文件

44、域最大字符宽度。l在在【最多字符数最多字符数】文本框中输入文件域最多字符数。文本框中输入文件域最多字符数。（4 4）按）按F12F12键预览键预览Web Web 页面，单击页面，单击【浏览浏览】按钮，按钮，系统弹出系统弹出【选择文件选择文件】对话框，浏览者可选择确定对话框，浏览者可选择确定本地计算机重要上传的文件，完成文件上传的操作。本地计算机重要上传的文件，完成文件上传的操作。在在Web Web 页面中若要插入表单的转跳菜单，可单击表页面中若要插入表单的转跳菜单，可单击表单子面板的按钮。单子面板的按钮。17.3表单的应用实例表单的应用实例例例例例17.117.1创建一个如图创建一个如图17-

45、1417-14所示的信息反馈的表单，所示的信息反馈的表单，并根据输入的数据类型设置表单域的验证行为，并根据输入的数据类型设置表单域的验证行为，使得当在表单中输入了无效数据后，递交表单时使得当在表单中输入了无效数据后，递交表单时会显示错误提示信息。会显示错误提示信息。制作分析：制作分析：本例是一个常规的表单网页，制作时应该注本例是一个常规的表单网页，制作时应该注意所有表单元素都必须放在表单的红色虚线框内。意所有表单元素都必须放在表单的红色虚线框内。对重要的数据区域可添加行为来验证数据的正确对重要的数据区域可添加行为来验证数据的正确性。操作步骤见教材性。操作步骤见教材341-342341-342页

46、。页。图 17-14 信息反馈的表单17.4本章小结本章小结在本章中，主要介绍了网络信息交互工具在本章中，主要介绍了网络信息交互工具表单，表单技术是建立动态网站的重要工具之表单，表单技术是建立动态网站的重要工具之一，利用表单技术能充分发挥网络的有利条件，一，利用表单技术能充分发挥网络的有利条件，使信息能够及时得到交互反馈。使信息能够及时得到交互反馈。本章的重点知识有创建表单和表单的文本字本章的重点知识有创建表单和表单的文本字段、文本区域、单选按钮、复选框、下拉式列表段、文本区域、单选按钮、复选框、下拉式列表框等多种表单域的方法，设置各种表单域属性方框等多种表单域的方法，设置各种表单域属性方法，以及用法，以及用E-mailE-mail方式递交表单等知识。方式递交表单等知识。