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

第17章 表单及其应用,17.1交互式表单概述 17.2 创建表单 17.3表单的应用实例 17.4本章小结,本章重点： 交互式表单的特点 表单及表单域的应用 表单应用实例,17.1交互式表单概述 表单（Form）技术可以实现浏览者同Internet服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再返馈给用户。无论是电子商务、网上调查，还是留言板、聊天室，都要求网页能够接收浏览者输入的信息，而表单就是网站获取用户信息的最重要的手段之一。,表单有两个重要的组成部分： （1）由Dreamweaver 8生成的表单的HTML页面。 （2）用于处理浏览者在表单域中输入的信息的服务器端应用程序或客户端脚本。 浏览者在网页上看到有关表单的页面，只是供浏览者输入信息的表单页面。当浏览者按要求在表单中填写有关信息，单击表单的递交（Submit）按钮之后，表单内容就会上传到服务器，并且由事先编好的服务器端程序来处理这些信息，最后服务器再将处理结果发送给浏览者的浏览器。由此可见，表单的应用必须依赖于服务器端脚本才能真正发挥其功能。,17.2 创建表单 表单主要的功能是接收输入的信息。浏览者输入的信息可以是多种多样的，这些不同类别的信息可以由不同的表单域分别接收。因为每个表单域对应一个项目，所以每个表单域都要添加一个标识，提醒用户在这个表单域中应该输入的内容。 在网页中创建一个表单的方法有3种。 （1）将光标定位在要插入表单的位置上，选择【插入】|【表单】|【表单】命令，便可在网页的指定位置上插入一个红色虚线构成的表单区域。,（2）将光标定位在要插入表单的位置上，单击【插入】栏【表单】选项中的【表单】按钮，便可在网页的指定位置上插入一个表单区域。 （3）直接将【插入】栏【表单】选项中的【表单】按钮 拖入网页文档窗口的表单插入区域。 用以上三种方法创建的表单区域，在页面上用红色虚线框表示。红色虚线框确定了当前表单的边框，这种红色边框的大小是不能被编辑的。当设计者在表单区域中插入对象后，表单的区域会自动调整其大小。 在创建表单后，就可以在表单中插入各种表单域。要在网页中插入表单域有两种方法，一种方法是利用网页文档窗口的菜单命令，选择【插入】|【表单】命令，在其级联菜单中选择相应的命令插入表单域；另一种方法是切换到【插入】栏【表单】选项，从中选择要插入的表单域。本章主要介绍直接从【表单】选项中选择有关表单域，然后将其插入到网页中。,下面先简要介绍Dreamweaver 8的表单域的特点。 （1）文本字段：用来输入的文字或数字。 （2）文本区域：插入的文本可显示为单行、多行，但是浏览者输入文字较麻烦，故在表单中应少用文本框，尽可能使用其它的表单对象。 （3）按钮 ：表单中一般有两个按钮，一个是【提交】按钮，单击此按钮可把浏览者输入的信息发送给服务器；另一个是【重置】按钮，用来清除表单中的内容，把当前表单还原为初始状态。 （4）复选框 ：复选框可以单独使用，也可以成组使用，有选中与不选中两种状态。 （5）单选按钮：单选按钮常用于一组互斥选择（如“男”、“女”等）。 （6）单选按钮组：创建一组在表单中使用的单选按钮。,（7）列表按钮：常用于提交一组可供浏览者进行选择的列表选项。其表现方式为当单击它右侧的 按钮时，弹出一个下拉式列表。浏览者可单击列表中某一选项。它在功能上与单选按钮相似，可以提供浏览者在多个备选项中作一个选择，它占有网页的面积比单选按钮小的多。 （8）文件域：文件域有一个文本框和一个浏览按钮。让浏览者从本地计算机上用表单向服务器上传文件。 （9）隐藏域 ：表单的隐藏域在浏览时是看不到的，浏览者也不能执行该操作。利用隐藏域可以实现浏览器同服务器在后台不公开地交换信息。 （10）图片域：用于显示图片，也可用作确认按钮。 （11）跳转菜单：插入一个跳转菜单，每个菜单选项都可链接到一个网页或文件。,17.2.1创建表单的文本框 表单中的文本框是网页中常见一种表单元素,网页中表单的文本框包括3种形式。 （1）【单行文本框】是浏览者只能输入一行信息的文本区域。 （2）【多行文本框】是可由网页设计者限定文本的行数，并决定是否显示滚动条，浏览者可在这种文本框中输入多行文本信息。 （3）【密码】文本框是一种可以让浏览者输入密码信息的文本框，输入的字符都以“*”号显示在屏幕上。,下面将介绍创建一个带有文本框的最基本的表单，通过创建这个简单的表单来了解表单创建的过程，其操作步骤如下： （1）单击【插入】栏【表单】选项。 （2）此时在【插入】栏【表单】选项中显示的各种对象，如图17-1所示。 （3）在网页文档窗口中，确定要插入的表单位置。 （4）单击【表单】选项中的【表单】 按钮，便可在网页编辑区中生成一个表单。此时表单被一个红色虚线框界定。单击红色虚线框，可以选中表单区域，在【属性】面板中显示了这个表单区域的属性，如图17-2所示。,图17-1 【插入】栏【表单】选项,图17-2 表单的【属性】面板,表单的【属性】面板中各属性具体意义如下。 在【表单名称】文本框中输入指定表单的名称,表单的名称必须唯一。 在【动作】文本框中可以输入一个URL，用来指定处理表单信息的服务端的程序。也可以输入mailto：邮件地址，用Email方式来发送表单中的数据。 在【方法】下拉式列表中指定一个处理表单数据的方法，其下拉列表中的各项意义如下所述。 默认：使用浏览器的默认方式，一般为GET方式。 GET：表示把表单值附加到URL，并发送给服务器一个GET请求。 POST：以消息方式发送表单的值，并发送给服务器一个POST请求。,在【目标】下拉式列表中指定一个窗口方式，在该窗口中显示调用程序所返回的数据。 在【MIME类型】下拉式列表可以指定对提交给服务器进行处理的数据使用 MIME 编码类型。 （5）将光标插入到表单内，输入标识提示文字“您的姓名：”。 （6）单击【表单】选项中的【文本字段】按钮 ，就会在表单中生成一个【文本字段】表单域，如图17-3所示。,图17-3创建表单文本字段示意图,(7)单击文本框表单域将其选中，此时【文本字段】的【属性】面板，如图17-3所示。 【文本字段】的【属性】面板各项属性意义如下。 在【文本域】文本框中输入当前表单域的名称，系统将以此名称保存文本框表单域中的内容。 在【字符宽度】文本框中输入当前表单域的宽度，即设置文本框中每行所允许输入的字符数目。 在【最大字符数】文本框中设置文本框表单域中最多可允许输入的字符数。 在【类型】区域中确定文本框的类型，3个单项选择分别是单行、多行、密码。,在【初始值】文本框中输入表单域的预先设置的值。 在【换行】中设置多行文本框表单域的换行方式。当选择【类型】为多行单选项时，【换行】下拉式列表就被激活，可选择设置多行文本表单域中不同的换行方式。 (8)用同样的方法在表单的下一行生成“您的E-mail地址：”的文本框表单域，如图17-3所示。 (9)在【文本字段】的【属性】面板中的【字符宽度】文本框中输入45。并选中单行选项，表示此文本框为单行类型。,17.2.2创建表单的单选按钮和复选框 单选按钮和复选框是表单中用得较多的元素，而且是网页设计者与浏览者进行交流的最有效的手段。 1.创建表单的单选按钮 网页中表单的单选按钮一般都是成组出现的，在页面设计时既要为单选按钮组定义一个标识，也要为每一个单选按钮定义一个标识。创建单选按钮的操作步骤如下： （1）在表单的合适位置插入光标，并输入单选按钮组的标识文字，例如“性别：”。 （2）然后单击【表单】选项中的按钮 ，并输入这个单选按钮的标识文字，例如“男”。 （3）选中这个单选按钮，打开单选按钮的【属性】面板，如图17-4所示。,图17-4单选按钮的【属性】面板,(4)在【单选按钮】文本框中输入单选按钮的名字“性别”。并在【选定值】文本框中给单选按钮赋值“男”。 (5)并为这个单选按钮设置初始状态，【初始状态】为【已勾选】状态。 (6)用同样的方法添加另一个标识为“女”的单选按钮。 (7)在【单选按钮】文本框中输入单选按钮的名字“性别”。并在选定值文本框中给单选按钮赋值“女”。 (8)并为这个单选按钮设置初始状态，【初始状态】为【未选中】状态，如图17-5 所示。,图17-5 表单的单选按钮,2.创建表单的复选框 网页表单中的复选框可以单个出现也可以成组出现，单个复选框可用于答案为是或否的问题，成组的复选框可用于一个或多个选项选取的问题。一般情况下，复选框组的标识文字放在复选框之前，而每一个复选框的标识文字放到复选框的后面。 当一个复选框被选中后向服务器发送什么值是一件需要认真思考的问题。服务器端必须有一个接收程序（如用CGI、ASP、PHP等编制的程序），用来接收表单发来的数据，并将这些数据处理后以网页的形式发送给用户端的浏览器。复选框名称和选定值的设置应该要按照服务器端接收程序的约定来完成。,下面将介绍创建复选框的过程，其操作步骤如下。 (1) 在表单的合适位置插入光标，并输入复选框组的标识文字，例如“您经常关注本网上书店的哪些栏目？”。 (2) 将光标插入到合适的位置，然后单击【表单】选项中的按钮 ，并输入这个单选按钮的标识文字，如图17-6所示。 选中该复选框，在复选框的【属性】面板中为其设置名称和赋值，如图17-7所示。,图17-6表单的复选框,图17-7 表单复选框的【属性】面板,【属性】面板中各项参数意义如下所述。 在【复选框名称】文本框中，给选中的复选框起一个名字，也就是选中该复选框后向服务器发送信息时所用的变量名。 在【选定值】文本框中，输入选中该复选框后要向服务器发送的内容 在【初始状态】中，选中【已勾选】单选项表示该复选框初始状态已被选中。选中【未选中】单选项表示该复选框初始状态为待选状态。 复选框【属性】面板设置的参数应按照与服务器端程序的约定来完成。,17.2.3创建表单的列表框 给表单添加列表框与下拉式列表框的方法基本相同，只需在创建了空白列表后，在列表【属性】面板的【类型】中选择不同的单选项便可完成设置。选择【菜单】单选项，可创建下拉式列表框；选择【列表】单选项，可创建列表框。下面来介绍创建表单的列表框方法，其操作步骤如下。 （1）在表单的合适位置上插入光标，然后输入下拉式列表的框的标识文字，例如“您的职业：”。 （2）单击【表单】选项中的按钮，此时表单的光标位置上显示一个很小的下拉式列表框。 （3）选中新建的下拉式列表框，下拉列表框的【属性】面板，如图17-8所示。,图17-8 下拉列表框的【属性】面板,【属性】面板中各项参数的意义如下。 在【列表/菜单】文本框中设置下拉式列表框的名称。在此文本框中输入下拉式列表框的名称为select。 在【类型】选项区中设置下拉式列表框的类型为【菜单】。 若下拉式列表框的【类型】设置为【列表】时，高度文本框被激活，在其中可设置该列表框可显示的行数。 选中【选定范围】复选框，可将下拉式列表设置成一次选择多个选项。可以通过按Ctrl键，再单击选择不相邻的任意多个选项，也可以通过按Shift键来选中两次单击选项之间所有连续的选项。 单击【列表值】按钮，可以进行列表值的设置。 在【初始化时选定】列表中，会显示通过列表值设置的列表项目文字。,（4）在【属性】面板中单击【列表值】按钮，打开【列表值】对话框，如图17-9所示。 （5）单击项目标签按钮的下方，在出现的文本框中输入“工人”。 （6）按Tab 键或单击值按钮，在出现的文本框中输入选项的赋值“GR”。 （7）单击 按钮，重复步骤（5）、（6）添加新的列表选项。 （8）如果要删除某个选项，可以在【列表值】对话框中选中该项，然后单击 按钮即可。 （9）可用列表值对话框中按钮 调整下拉式列表的选项次序。 （10）单击【确定】按钮，此时列表项目显示在【属性】面板的【初始化时选定】列表窗口中。 （11）按F12键，在浏览器中单击下拉列表框的按钮，可以看到列表框的下拉菜单。,图17-9【列表值】对话框,17.2.4 创建表单的提交和重置按钮 在网页中的表单必须添加【提交】按钮，才能将浏览者填写的信息上传到服务器。在Dreamweaver 8另外还设置了一个用于清除表单中填写数据的【重置】按钮。几乎所有网页中的表单都包含【提交】和【重置】按钮。在表单中创建【提交】和【重置】按钮的操作步骤如下： （1）在表单合适的位置上确定插入点，然后2次单击【表单】选项卡中的按钮 。 （2）在表单中就会生成2个按钮，如图17-10所示。,（3）选中第一个按钮，在按钮的【属性】面板中设置参数。输入【按钮名称】为“Submit”；在【标签】文本框中输入该按钮上的文字“提交”；在【动作】选项区中选择【提交表单】单选项。 （4）选中第二个按钮，在按钮的【属性】面板中设置参数。输入【按钮名称】为“Reset”；在【标签】文本框中输入该按钮上的文字“重置”；在【动作】选项区中选择【重设表单】单选项。添加按钮后的表单如图17-10所示。,图17-10 表单按钮的【属性】面板,17.2.5其它表单域的应用 1表单的图像域 图像域是一个比较有用的表单域，它的主体是一个图片。在浏览时单击这个图片时，表单就会向服务器发送表单中各个表单域的值。图像域可以代替【提交】按钮，一个图像域有两个值，分别表示单击图像域时鼠标指针的纵坐标和横坐标。在表单中创建图像域的操作步骤如下。 （1）在表单合适的位置上确定插入点，然后再单击【表单】选项中的按钮。 （2）在打开的【选择图像源】对话框中，选择一个图片将其插入到表单中。,（3）选中该图像，在图像的【属性】面板中可以设置表单的图像属性，如图17-11所示，设置方法同操作普通图像类似。 表单图像域【属性】面板的基本参数的意义如下。 在【图像区域】文本框中可输入图像域的名称。 在【源文件】文本框中输入要选定图像的路径和文件名。 在【替代】文本框中可输入图像的替换文字。当浏览器不能显示图像时，输入的文字将代替图像，显示在浏览器中。 在【对齐】下拉式列表框中设置图像的对齐方式。 单击【编辑图像】按钮，可以启动外部图像编辑器Fireworks 8，编辑该图像。,图17-11 表单图像域的【属性】面板,2表单的隐藏域 隐藏域是一种在浏览器上看不到的表单域，也不用对其执行操作，利用隐藏域可以实现浏览器同服务器在后台交换信息。由于它是不可见的，所以也不需要为它添加标识文字。 在表单中，插入隐藏表单域的操作步骤如下。 （1）在表单合适的位置上确定插入点，然后再单击【表单】选项中的按钮。 （2）在网页文档窗口的插入点处可以看到一个图标。 （3）双击图标，选中表单的隐藏域，在表单隐藏域的【属性】面板中可以设置表单隐藏域的属性，如图17-12所示。,图17-12表单隐藏域的【属性】面板,隐藏表单域【属性】面板的基本参数意义如下。 在【隐藏区域】文本框中，输入表单隐藏域的名称。 在【值】文本框中输入隐藏表单域的初始值。 3表单的文件域 利用表单的文件域可以从本地计算机向服务器上传文件。表单的文件域包括一个文本框和一个浏览按钮。在浏览器中单击浏览按钮，打开选择文件的对话框，在对话框中选择相应的文件，然后单击表单中的提交按钮便可将文件发送到服务器上。,在表单中，插入文