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

第17章 表单及其应用 17.1交互式表单概述 17.2 创建表单 17.3表单的应用实例 17.4本章小结 本章重点：本章重点： l交互式表单的特点 l表单及表单域的应用 l表单应用实例 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-1 【插入插入】栏栏【表单表单】选项选项 图17-2 表单的【属性】面板 表单的【属性】面板中各属性具体意义如下。 l在【表单名称】文本框中输入指定表单的名称,表单的名 称必须唯一。 l在【动作】文本框中可以输入一个URL，用来指定处理 表单信息的服务端的程序。也可以输入mailto：邮件地址 ，用Email方式来发送表单中的数据。 l在【方法】下拉式列表中指定一个处理表单数据的方法 ，其下拉列表中的各项意义如下所述。 默认：使用浏览器的默认方式，一般为GET方式。 GET：表示把表单值附加到URL，并发送给服务器一个 GET请求。 POST：以消息方式发送表单的值，并发送给服务器一个 POST请求。 l在【目标】下拉式列表中指定一个窗口方式，在 该窗口中显示调用程序所返回的数据。 l在【MIME类型】下拉式列表可以指定对提交给 服务器进行处理的数据使用 MIME 编码类型。 （5）将光标插入到表单内，输入标识提示文字“ 您的姓名：”。 （6）单击【表单】选项中的【文本字段】按钮 ，就会在表单中生成一个【文本字段】表单域， 如图17-3所示。 图17-3创建表单文本字段示意图 (7)单击文本框表单域将其选中，此时【文本字段 】的【属性】面板，如图17-3所示。 【文本字段】的【属性】面板各项属性意义如下 。 l在【文本域】文本框中输入当前表单域的名称， 系统将以此名称保存文本框表单域中的内容。 l在【字符宽度】文本框中输入当前表单域的宽度 ，即设置文本框中每行所允许输入的字符数目。 l在【最大字符数】文本框中设置文本框表单域中 最多可允许输入的字符数。 l在【类型】区域中确定文本框的类型，3个单项 选择分别是单行、多行、密码。 l在【初始值】文本框中输入表单域的预先设置的 值。 l在【换行】中设置多行文本框表单域的换行方式 。当选择【类型】为多行单选项时，【换行】下 拉式列表就被激活，可选择设置多行文本表单域 中不同的换行方式。 (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 17-5 表单的单选按钮表单的单选按钮 2.创建表单的复选框 网页表单中的复选框可以单个出现也可以成组出现 ，单个复选框可用于答案为是或否的问题，成组的复选框 可用于一个或多个选项选取的问题。一般情况下，复选框 组的标识文字放在复选框之前，而每一个复选框的标识文 字放到复选框的后面。 当一个复选框被选中后向服务器发送什么值是一件 需要认真思考的问题。服务器端必须有一个接收程序（如 用CGI、ASP、PHP等编制的程序），用来接收表单发来 的数据，并将这些数据处理后以网页的形式发送给用户端 的浏览器。复选框名称和选定值的设置应该要按照服务器 端接收程序的约定来完成。 下面将介绍创建复选框的过程，其操作步骤如 下。 (1) 在表单的合适位置插入光标，并输入复选 框组的标识文字，例如“您经常关注本网上书 店的哪些栏目？”。 (2) 将光标插入到合适的位置，然后单击【表 单】选项中的按钮 ，并输入这个单选按钮的 标识文字，如图17-6所示。 选中该复选框，在复选框的【属性】面板中为 其设置名称和赋值，如图17-7所示。 图图17-617-6表单的复选框表单的复选框 图17-7 表单复选框的【属性】面板 【属性】面板中各项参数意义如下所述。 l在【复选框名称】文本框中，给选中的复选框起 一个名字，也就是选中该复选框后向服务器发送 信息时所用的变量名。 l在【选定值】文本框中，输入选中该复选框后要 向服务器发送的内容 l在【初始状态】中，选中【已勾选】单选项表示 该复选框初始状态已被选中。选中【未选中】单 选项表示该复选框初始状态为待选状态。 复选框【属性】面板设置的参数应按照与服务器 端程序的约定来完成。 17.2.3创建表单的列表框 给表单添加列表框与下拉式列表框的方法基本相同 ，只需在创建了空白列表后，在列表【属性】面板的【类 型】中选择不同的单选项便可完成设置。选择【菜单】单 选项，可创建下拉式列表框；选择【列表】单选项，可创 建列表框。下面来介绍创建表单的列表框方法，其操作步 骤如下。 （1）在表单的合适位置上插入光标，然后输入下拉式列 表的框的标识文字，例如“您的职业：”。 （2）单击【表单】选项中的按钮，此时表单的光标位置 上显示一个很小的下拉式列表框。 （3）选中新建的下拉式列表框，下拉列表框的【属性】 面板，如图17-8所示。 图17-8 下拉列表框的【属性】面板 【属性】面板中各项参数的意义如下。 l在【列表/菜单】文本框中设置下拉式列表框的名称。在 此文本框中输入下拉式列表框的名称为select。 l在【类型】选项区中设置下拉式列表框的类型为【菜单 】。 l若下拉式列表框的【类型】设置为【列表】时，高度文 本框被激活，在其中可设置该列表框可显示的行数。 l选中【选定范围】复选框，可将下拉式列表设置成一次 选择多个选项。可以通过按Ctrl键，再单击选择不相邻的 任意多个选项，也可以通过按Shift键来选中两次单击选项 之间所有连续的选项。 l单击【列表值】按钮，可以进行列表值的设置。 l在【初始化时选定】列表中，会显示通过列表值设置的 列表项目文字。 （4）在【属性】面板中单击【列表值】按钮，打开【列 表值】对话框，如图17-9所示。 （5）单击项目标签按钮的下方，在出现的文本框中输入“ 工人”。 （6）按Tab 键或单击值按钮，在出现的文本框中输入选项 的赋值“GR”。 （7）单击 按钮，重复步骤（5）、（6）添加新的列表 选项。 （8）如果要删除某个选项，可以在【列表值】对话框中 选中该项，然后单击 按钮即可。 （9）可用列表值对话框中按钮 调整下拉式列表的选项 次序。 （10）单击【确定】按钮，此时列表项目显示在【属性】 面板的【初始化时选定】列表窗口中。 （11）按F12键，在浏览器中单击下拉列表框的按钮，可 以看到列表框的下拉菜单。 图图17-917-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 17-11 表单图像域的表单图像域的【属性属性】面板面板 2表单的隐藏域 隐藏域是一种在浏览器上看不到的表单域， 也不用对其执行操作，利用隐藏域可以实现浏览 器同服务器在后台交换信息。由于它是不可见的 ，所以也不需要为它添加标识文字。 在表单中，插入隐藏表单域的操作步骤如下。 （1）在表单合适的位置上确定插入点，然后再单 击【表单】选项中的按钮。 （2）在网页文档窗口的插入点处可以看到一个图 标。 （3）双击图标，选中表单的隐藏域，在表单隐藏 域的【属性】面板中可以设置表单隐藏域的属性 ，如图17-12所示。 图17-12表单隐藏域的【属性】面板 隐藏表单域【属性】面板的基本参数意义如下 。 在【隐藏区域】文本框中，输入表单隐藏域的名称 。 在【值】文本框中输入隐藏表单域的初始值。 3表单的文件域 利用表单的文件域可以从本地计算机向服务器上传 文件。表单的文件域包括一个文本框和一个浏览按 钮。在浏览器中单击浏览按钮，打开选择文件的对 话框，在对话框中选择相应的文件，然后单击表单 中的提交按钮便可将文件发送到服务器上。 在表单中，插入文件表单域的