第11章 - 路,在脚下——以 踏实·执着·进取 的态度迎接美好的

1、 第第13章章 表 单 本章导读本章导读 l本章主要介绍如何在网页中使用表单：第一、 二节介绍了关于表单对象和表单域的基本知识； 第三节以实例的形式详细展示了如何使用每个 表单对象；最后制作了一个综合的表单实例。 本章要点本章要点 l表单对象 l表单域 l表单对象应用实例 l制作注册表单 l使用表单可以收集来自用户提交的各类信息，它是网站管理者与 浏览者之间沟通的重要途径。通过表单收集和对用户反馈意见的 分析，作出科学的和合理的决策，是一个网站成功的重要因素。 有了表单，网站不仅是信息提供者，同时也是信息收集者，充分 体现了网站的动态和交互效果，真正体现了用户与网站交互的目 的，表单的通常应用

2、是调查表、订单和搜索界面等。 l表单有两个重要的组成部分，一是描述表单的HTML源代码；二是 用于处理用户在表单中输入的信息的服务器端应用程序或客户端 脚本等，所有的表单元素放到表单域中才会有效，因此制作表单 页面的第一步是创建表单域。 13.1 表表 单单 对对 象象 l在Dreamweaver 8中，表单输入类型称为表单 对象，表单可以包含标准对象，如文本域、按 钮、图像域、复选框、单选按钮、列表菜单、 文件域等。 l在菜单栏选择【插入表单】选项，切换到 【表单】插入栏，在插入栏中单击要插入的对 象类型按钮或者将其拖入到文档窗口中，如图 1所示。 图图1: l在图1中，由左边第一个图标开始

3、，分别代表 表单域、文本字段、隐藏域、文本区域、复选 框、单选按钮、单选按钮组、列表/菜单、跳 转菜单、图像域、文本域、按钮、标签、字段 集。下面将详细介绍各个表单对象的使用。 13.2 创建表单域创建表单域 l构成表单文档的图片、文本等元素必须处于表单 区域内，这样才会被确认为表单文档，为了使文档能 够顺利运行，首先要制作表单文档的框架，即表单区 域。由此可见，要先设置表单文档，然后再插入构成 元素。 l要在网页中创建表单文档，可以选择菜单命令【插入 表单表单】，或者选择【插入】栏中的【表单】选 项卡，在【表单】选项卡中单击【表单】按钮，将在 文档中插入一个表单，如图2所示。 图图2: l要

4、设置表单属性，可以先选中表单，然后选择 【窗口属性】命令来显示表单【属性】面板， 如图3所示。 图图3: l【属性】面板中的各个选项参数含义为： l（1）表单名称：用于输入表单的名称，在同一个文档中表单的名 称必须唯一； l（2）动作：用于指定处理该表单的动态页或者脚本路径，可以是 HTTP类型的地址或者mailto类型的地址； l（3）目标：若要使链接的文档出现在当前窗口或者框架以外的其 他位置，可以从【属性】面板中的“目标”下拉列表中选择一个 选项； l（4）类：用于指定用于该表单的CSS样式； l（5）方法：用于选择需要设置表单数据的发送方法，包含3个选 项； l（6）MIME类型：用于

5、指定对提交给服务器进行处理的数据使用 MIME编码类型。 13.3 使用表单对象使用表单对象 l表单由文本字段、传送按钮、单选按钮等表单 对象组成。当访问者将信息输入表单并单击 “提交”按钮时，这些信息将被发送到服务器。 服务器端脚本或应用程序在该处对这些信息进 行处理，并且通过将请求信息发送回用户，基 于该表单内容执行一些操作来进行响应。因此 表单样式文档的学习是进行网页编程的基础。 13.3.1 创建文本域创建文本域 l在Dreamweaver 8中，可以使用“文本字段”和“文 本区域”两种方法来创建文本域，文本域包括“单 行”、“多行”和“密码”3种类型。以适应不同情 况下的需要。文本域

6、在网页中的主要作用是输入如用 户名、密码等相关信息，在网页中创建文本域的具体 步骤如下： l1、选择【插入】工具栏中的【表单】选项卡，在 【表单】工具栏中单击“文本字段”按钮，将在文档 中创建一个单行的文本区域，如图4所示。 图图4: l2、设置文本区域属性。先单击文档中的文本 域，然后选择菜单命令【窗口属性】，以显 示其【属性】面板，如图5所示。 图图5: l【属性】面板中的各个选项参数含义为： l（1）文本域：用于输入文本域的名称； l（2）字段宽度：指定在文本字段栏中能够显示的最 多字数，用于设置文本字段的长度； l（3）类型：指定在文本字段中可以输入的最多字数； l（4）类：用于应用C

7、SS样式中的类； l（5）行数：用来限制文档的行数； l（6）换行：用于指定多行文本的换行方式，其中包 括4个选项： l选择“默认”选项，则使用默认的自动回行的方式； l选择“关”选项，当文本域中的文本超出文本域的宽度时，则会 自动为文本域添加水平滚动条来浏览文本； l选择“虚拟”选项，当文本域中的文本超出文本域的宽度时，会 自动按照文本域的宽度进行回行符号； l选择“实体”选项，则当文本域中的文本超出文本域的宽度时， 会自动按照文本域的宽度进行回行，这种回行是物理行为，在实 际发送的行数中，文本中相应的位置被添加回行符号。 l（7）初始值：用于输入文本域中默认状态下显示的文本。 13.3.2

8、 创建隐藏域创建隐藏域 l在浏览器中不被显示出来的文本域主要是用来 实现浏览器和服务器后台隐藏数据的交换信息。 在提交表单时，该域中存储的信息将一起被发 送到服务器。 l选择菜单命令【插入】表单】隐藏域】，将在 文档中创建一个隐藏域，如图6所示。 图图6: l要设置隐藏域，可以单击选择文档中的隐藏域， 然后再选择【窗口属性】命令，就可以显示 隐藏域的“属性”面板，如图7所示。 图图7: l【属性】面板中的各个选项参数含义为： l（1）隐藏区域：指定隐藏域的名称，默认为 hiddenField； l（2）值：设置要为隐藏域指定的值，该值将 在提交表单时传递给服务器。 13.3.3 创建文件上传域

9、创建文件上传域 l通过文件上传域，用户可以实现将计算机上的 文件（如文档或图形文件），上传到服务器。 文件域的外观与其他文本与类似，只是文本域 还包含一个“浏览”按钮。用户可以手动输入 要上传的文件的路径，也可以使用“浏览”按 钮定位并选择该文件。 l选择菜单命令【插入】表单】文件域】， 将会在文档中创建一个文本上传域，如图8所 示。 图图8: l单击文件域，然后单击工作区域下的属性标签， 就可以看到文件域的【属性】面板，如图9所 示，面板中各个参数的含义与文本域相同。 图图9: 13.3.4 创建复选框创建复选框 l复选框是预定义选择对象的表单对象，利用这 样的表单对象可以限制访问者填写的内

10、容，并 且有利于信息的统计。 l选择【插入】表单】复选框】命令，将在文档 中创建一个复选框，如图10所示。 图图10: l要设置复选框的属性，可以先单击复选框，然 后执行【窗口属性】命令，以显示复选框 【属性】面板，如图11所示。 图图11: l【属性】面板中各个参数的含义如下： l（1）复选框名称：用于输入复选框的名称； l（2）选定值：用于输入复选框选中后控件的 值； l（3）初始状态：用于设置复选框在文档中的 初始状态。 13.3.5 创建单选按钮及单选按钮创建单选按钮及单选按钮 组组 l单选按钮是预定义选择对象的表单对象，单选 按钮组是单选按钮的组合。当需要对不同的单 选按钮进行选择时

11、，为了使不同组之间互不干 涉，即需要使用单选按钮组。 l选择菜单命令【插入表单单选按钮】，如 图12所示，【属性】面板中的参数含义和复选 框的相同。 图图12: l要使用单选按钮组，可以执行菜单栏【插入 表单单选按钮组】，如图13所示。 图图13: l对话框中各个参数的含义如下： l（1）名称：用于指定单选按钮组的名称； l（2）和：用于增减单选按钮； l（3）标签：左边列为按钮的Label标签； l（4）值：右边列是按钮的值。 13.3.6 创建列表和菜单创建列表和菜单 l列表和菜单是比较常用的两个表单，其优点是 在有限的空间为用户提供多个选项，列表提供 一个滚动条，允许访问者浏览多个选项并

12、进行 多重选择。菜单仅显示一个选项，该项也是活 动选项，访问者只能从菜单中选择一项。 l选择菜单栏中的【插入表单列表/菜单】 命令，将在文档中创建一个列表和菜单，默认 情况下为菜单，如图14所示。 图图14: l若要设置列表菜单属性，可以单击选取文档中 的菜单，然后执行菜单栏中的【窗口属性】 命令，显示列表/菜单【属性】面板，如图15 所示。 图图15: l面板中各个参数选项的含义如下： l（1）列表/菜单：用于输入列表/菜单的名称； l（2）类型：用于选择“列表/菜单”的显示方式，包括“菜单”和 “列表”选项； l（3）高度：用于输入列表框的高度，单位为字符； l（4）列表值：单击打开列表值

13、对话框。在对话框的左边列为列表 和菜单的项目标签，也就是显示在列表中的名称；右边是该项的 值，也就是该项要传送到服务器的值，可以通过单击左上角的 “”、“”按钮来增删项目，通过右上角的上下按钮来改变 项目的显示顺序； l（5）类：指定用于该列表和此案单的CSS样式； l（6）初始化时选定：用于设置列表或菜单的初始值。 13.3.7 创建跳转菜单创建跳转菜单 l跳转菜单实际上是一种下拉列表菜单，它通常 被用来实现网页之间的跳转，一般在论坛上比 较常用。要在网页中创建跳转菜单，可以通过 以下方法实现：执行菜单命令【插入表单 跳转菜单】，打开【插入跳转菜单】对话框， 如图16所示。 图图16: l对

14、话框中各个参数的含义如下： l（1）“”和“”：增加或减少项目； l（2）上移或下移按钮：单击上移或下移按钮，可以 在菜单列表中上移或下移项； l（3）菜单项：菜单列表中显示所有项； l（4）文本：在“文本”文本框中，为菜单项输入要 在菜单列表中显示的文本； l（5）选择时，转到URL：单击文件夹图标并通过浏 览找到要打开的文件，或者在文本框中输入该文件的 路径； l（6）菜单名称：输入菜单项的名称； l（7）选项：选中“选项”下的“菜单之后插入前往 按钮”复选框，可添加一个“前往”按钮，而非菜单 选择提示。如果要使菜单选择提示，应选中“选项” 下的“更改URL后选择第一个项目”复选框。 l如

15、果用户要编辑跳转菜单，可以在工作区域中选择跳 转菜单，然后执行菜单栏中的【窗口属性】命令， 在打开的“属性”面板中设置跳转菜单，它的设置与 菜单/列表属性设置相似。 13.3.8 创建文本表单按钮创建文本表单按钮 l表单制作好以后，就要把表单提交给服务器， 这就需要文本表单按钮来完成表单制作的最后 一步，另外，如果对输入的值不满意，可以插 入一个重置按钮重新在表单中设置数据。 l执行【菜单】表单】按钮】命令来插入表单按 钮。如图17所示。 图图17: l要设置“提交”按钮属性，可以单击选取“提 交”按钮，然后执行菜单栏命令【窗口属 性】，打开其【属性】面板，如图18所示。 图图18: l面板中

16、个选项参数含义如下： l（1）按钮名称：用于输入按钮名称； l（2）值：用于设置按钮标签的文本； l（3）“提交表单”单选按钮：将当前按钮设 置为一个提交表单类型的按钮； l（4）“无”单选按钮：不能对当前按钮设置 行为； l（5）“重设表单”单选按钮：将当前按钮设 置为一个复位类型的按钮。 13.3.9 创建图形提交按钮创建图形提交按钮 l在网页中除标准表单提交按钮以外，还有图形提 交按钮，采用图形提交按钮一般可以增强网页的美观 效果。如果要将某个JavaScript行为附加到该按钮， 可以先选择该图形，然后在【行为】面板中选择行为， 这个在其他的章节将会介绍到。在网页中插入图形提 交按钮的

17、步骤如下： l（1）执行菜单命令【插入表单图像域】，弹出 如图19所示的“选择图像源文件”对话框。 图图19: l（2）在【选择图像源文件】对话框中选择一 幅图像，单击“确定”按钮，在网页中插入一 幅图像。 l（3）在工作区中选中图像，然后执行菜单栏 中的【窗口属性】命令，打开其【属性】面 板，如图20所示。 图图20: 13.4 制作注册表单实例制作注册表单实例 l（1）选择菜单命令【插入】表单】表单】， 如图21所示，将插入一个表单。 图图21: l（2）将光标定位于表单内，执行菜单命令 【插入表格】，弹出如图22所示的对话框， 在对话框中设置行数为6，列数为1，表格宽度 为“380”。

18、图图22: l如图23所示为插入的表格，下一步将插入表单 对象。 图图23: l（3）在表格的第1行输入“用户注册系统”， 并设置相应的格式。如图24所示。 图图24: l（4）把光标定位于表格的第2行，选择菜单命 令【插入】表单】文本域】，弹出如图13-25 所示的对话框。在“标签文字”文本框中输入 “姓名”，然后选中“无标签标记”和“在表 单项前”单选按钮，并单击“确定按钮”。如 图25所示为插入的文本域。 图图25: l如图26所示为插入的文本域。 图图26: l（5）重复第（4）步的操作，分别插入“密 码”、“确认密码”、“邮件”四个文本域， 并设置相应的格式，操作完毕如图27所示。 图图27: l（6）选择菜单栏的【插入表单按钮】命 令，在弹出“输入标签辅助功能属性”对话框 中，选中“无标签标记”和“在表单项前”单 选按钮，然后单击“确定”，即可插入一个按 钮，如图28所示。 图图28: l（7）重复第6步，再插入一个按钮，然后单击 选中第1个按钮，在该按钮的属性面板中，将 其值设为