表单的使用

第一节　表单的使用

表单是网页与浏览者的一种交互界面。有了表单，才能够输入会员资料，提供站点的反馈资料、调查报告等信息，从而使服务器端能够处理表单输入的数据。表单的目的是让用户输入数据，这些数据传送到页面服务器供查询或者登录。单纯的表单页面只是一个输入数据的前端界面，实际的数据处理是由运行在网页服务器的相关服务器端脚本或数据库，如ASP、PHP、JSP、ASP.NET等完成。

一、表单概述

表单由表单域及很多的表单对象组成。如用于输入用户名的文本域、用于输入密码的密码域、用于提交表单的“提交”按钮、用于上传文件的文件域等。

在Internet上存在大量的表单。用户可以利用表单收集信息，也可以实现搜索。表单是在Internet中实现用户同服务器进行信息交流的主要方式。例如，想要通过登录Web页面收发E-mail邮件，就需要先注册，并在登录邮箱表单输入用户名、密码等，如图5-1所示。

图5-1　登录邮箱表单

二、创建表单

（一）插入表单

在Dreamweaver中，可以将整个页面创建成一个表单网页，也可以在网页的部分区域中添加表单，其方法都相同。要插入表单，在【插入】工具栏中选择【表单】选项卡，单击最左边的【表单】按钮（见图5-2）即可。

图5-2　插入表单

插入表单后，在文档页中显示一个红色虚线框，并弹出该表单的【属性】面板，用户可以设置表单的一些参数，如表单名称、动作、方法等。

【属性】面板中各参数含义如下：

◇ 表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本语言（如JavaScript 或 VBScript）引用或控制该表单。如果不命名表单，Dreamweaver 将使用语法 formn 生成一个名称，并为添加到页面中的每个表单递增 n 的值。

◇ 动作：键入路径或者单击文件夹图标导航到相应的页面或脚本，以指定将处理表单数据的页面或脚本。

◇ 目标：指定一个窗口来显示被调用程序返回的数据。如果命名的窗口尚未打开，则打开一个具有该名称的新窗口。可设置以下任一目标值：

■ _blank：在未命名的新窗口中打开目标文档。

■ _parent：在显示当前文档的窗口的父窗口中打开目标文档。

■ _self：在提交表单时所在的同一窗口中打开目标文档。

■ _top：在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中时也是如此。

◇ 方法：指定将表单数据传输到服务器的方法。可设置以下任一选项：

■ 默认值：使用浏览器的默认设置将表单数据发送到服务器。通常，默认值为 GET方法。

■ GET：将值附加到请求该页面的URL中。

■ POST：在 HTTP 请求中嵌入表单数据。

◇ MIME类型：指定对提交给服务器进行处理的数据使用 MIME 编码类型。 默认设置 application/x-www-form-urlencode 的通常与 POST 方法一起使用。如果要创建文件上传域，请指定 multipart/form-data MIME 类型。

（二）添加表单对象

Dreamweaver 表单中可创建包含文本域、密码域、隐藏域、单选按钮、复选框、弹出菜单、图像域、可单击按钮等多种表单对象。

1. 插入文本域

文本域是表单中最常使用的域。用户可以创建一个包含单行或多行文本的文本域，也可以创建一个隐藏用户输入文本的密码文本域，在后一种情况下，输入文本将被替换为星号或项目符号，以避免旁观者看到这些文本。各类文本域如图5-3所示。

图5-3　文本域分类

选择菜单命令【插入】〉【表单】〉【文本字段】，在弹出的【输入标签辅助功能属性】对话框中输入【标签文字】为“用户名”，并单击【确定】按钮。如图5-4所示。

通过文本域【属性】面板，可以设置文本域相关参数及功能。例如，将文本域调整为单行或多行，各属性含义如下所示。

◇ 字符宽度：指定域中最多可显示的字符数。此数字可以小于【最多字符数】，【最多字符数】指定在域中最多可输入的字符数。例如，如果【字符宽度】设置为 20（默认值），而用户输入了 100 个字符，则在该文本域中只能看到其中的 20 个字符。虽然在该域中无法看到这些字符，但域对象可以识别它们，而且它们会被发送到服务器进行处理。

图5-4　添加文本字段

◇ 最多字符数：指定用户在单行文本域中最多可输入的字符数。可以使用【最多字符数】将密码限制为 10 个字符等。如果将【最多字符数】框保留为空白，则用户可以输入任意数量的文本。如果文本超过域的字符宽度，文本将滚动显示。如果用户的输入超过了最多字符数，则表单会发出警告声。

◇ 行数：（在选中了【多行】选项时可用）设置多行文本域的域高度。

◇ 换行：（在选中了【多行】选项时可用）指定当用户输入的信息较多以至无法在定义的文本域内显示时，如何显示用户输入的内容。换行选项如下所示：

■ 关或默认：禁止将文本换行到下一行来显示。当用户输入的内容超过文本域的右边界时，文本将向左侧滚动。用户必须按 Return键才能将插入点移动到文本域的下一行。

■ 虚拟：设置在文本域中自动换行。当用户输入的内容超过文本域的右边界时，文本换行到下一行。当提交数据进行处理时，自动换行并不应用于数据。数据作为一个数据字符串进行提交。

■ 实体：设置在文本域自动换行，以及设置在提交数据进行处理时对这些数据自动换行。

◇ 类型：指定域为单行、多行还是密码域。

■ 单行：生成一个 input 标记且其 type 属性设置为 text。【字符宽度】设置映射为size 属性，【最多字符数】设置映射为 maxlength 属性。

■ 多行：生成一个 textarea 标记。【字符宽度】设置映射为 cols 属性，【行数】设置映射为 rows 属性。

■ 密码：生成一个 input 标记且其 type 属性设置为 password。【字符宽度】和【最多字符数】设置映射到与单行文本域情况下相同的那些属性。当用户在密码文本域中键入时，输入内容显示为项目符号或星号，以保护它不被其他人看到。

◇ 初始值：指定在首次加载表单时域中显示的值。例如，可以通过在域中包含说明或示例值的形式，指示用户在域中输入信息。

◇ 类：使您可以将 CSS 规则应用于对象。

插入多行文本域也可直接单击【表单】选项卡中的【文本区域】按钮。

2. 插入复选框

当需要用户从一组选项中选择多个选项时可以使用复选框。表单中的复选框如同一个开关，可以决定是否选取该选项。如需插入复选框，可使用菜单命令【插入】〉【表单】〉【复选框】。插入后选中该复选框，显示的【属性】面板如图5-5所示。

图5-5　复选框属性

【属性】面板中相关属性说明如下。

◇ 选定值：设置在该复选框被选中时发送给服务器的值。例如，在一项调查中，可以将值 4 设置为表示非常同意，将值 1 设置为表示强烈反对。

◇ 初始状态：确定在浏览器中加载表单时，该复选框是否处于选中状态。

3. 插入单选按钮

单选按钮代表互相排斥的选择。在某单选按钮组（由两个或多个共享同一名称的单选按钮组成）中选择一个按钮，就会取消选择该组中的所有其他按钮。

如需插入单选按钮，可使用菜单命令【插入】〉【表单】〉【单选按钮】。插入后选中该单选按钮，显示的【属性】面板如图5-6所示。

图5-6　单项按钮属性

注意：“男”、“女”两个单选按钮必须设置为相同的名字，如“radio”，才能设置为只能二选一。

【属性】面板中主要属性说明如下。

◇ 选定值：设置在该单选按钮被选中时发送给服务器的值。例如，可以在“选定值”文本框中键入滑雪，指示用户选择滑雪。

◇ 初始状态：确定在浏览器中加载表单时，该单选按钮是否处于选中状态。

如需插入的单项按钮较多，也可以使用菜单命令【插入】〉【表单】〉【单选按钮组】，在弹出的【单项按钮组】对话框（见图5-7）中进行设置。

图5-7　【单项按钮组】对话框

4. 插入列表/菜单

列表/菜单，在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“列表”选项在一个菜单中显示选项值，用户只能从中选择单个选项。在下列情况下使用菜单：只有有限的空间但必须显示多个内容项，或者要控制返回给服务器的值。菜单与文本域不同，在文本域中用户可以随心所欲键入任何信息，甚至包括无效的数据，对于菜单而言，只能具体设置某个菜单返回的确切值。

如需插入列表/菜单，可使用菜单命令【插入】〉【表单】〉【列表/菜单】。插入后选中该列表/菜单，显示的【属性】面板如图5-8所示。单击【属性】面板中的【列表值】按钮，并在弹出的“列表值”对话框中修改列表的标记及取值。

图5-8 【列表/菜单】属性

【属性】面板中主要属性说明如下。

◇ 列表/菜单：为该菜单指定一个名称。该名称必须是惟一的。

◇ 类型：指定该列表/菜单是单击时下拉的菜单（“菜单”选项），还是显示一个列有项目的可滚动列表（“列表”选项）。如果您希望表单在浏览器中显示时仅有一个选项可见，则选择【菜单】单选按钮。若要显示其他选项，用户必须单击向下箭头。选择【列表】单选按钮可以在浏览器显示表单时列出一些或所有选项，以便用户可以选择多个项。

如图5-9所示，左侧的是菜单效果，使用箭头下拉选择，只能单选；右侧是列表效果，使用滚动条拖动选择，并且可设置为多选。

图5-9　列表、菜单对比

◇ 高度：（仅“列表”类型）设置菜单中显示的项数。

◇ 选定范围：（仅“列表”类型）指定用户是否可以从列表中选择多个项。

◇ 列表值：单击该按钮到打开一个对话框，可通过它向表单/菜单添加项：

（1）使用加号（+）和减号（–）按钮添加和删除列表中的项。

（2）输入每个菜单项的标签文本和可选值。列表中的每项都有一个标签（在列表中显示的文本）和一个值（选中该项时，发送给处理应用程序的值）。如果没有指定值，则改为将标签文字发送给处理应用程序。

（3）使用向上和向下箭头按钮重新排列列表中的项。

菜单项在菜单中出现的顺序与在【列表值】对话框中出现的顺序相同。在浏览器中加载页面时，列表中的第一个项是选中的项。

如果菜单或列表中的选项需要添加链接，可使用菜单命令【插入】〉【表单】〉【跳转菜单】，打开如图5-10所示的【插入跳转菜单】对话框进行设置。跳转菜单实质上是为菜单或列表添加了相应的行为，以实现选择选项后即自动跳转，其他属性大致相同。

5. 插入隐藏域

隐藏域对于用户是不可见的，它的主要作用是在网页间传递一些隐秘的信息，方便网页对数据的处理。如果在登录表单中添加一个隐藏域，并赋予一个值，当表单提交后，网页就会首先查找是否有这个隐藏域字段，其值是否是设置的值，如果是则进行处理，否则自动跳转到登录页面要求用户重新进行登录。

如需插入隐藏域，可使用菜单命令【插入】〉【表单】〉【隐藏域】。

图5-10　【插入跳转菜单】对话框

6. 插入文件域

文件上传域使用户可以选择其计算机上的文件（如字处理文档或图形文件），并将该文件上传到服务器。文件域的外观与其他文本域类似，只不过，文件域还包含一个【浏览】按钮。用户可以手动输入要上传的文件的路径，也可以使用【浏览】按钮定位并选择该文件，如图5-11所示。

必须要有服务器端脚本或能够处理文件提交操作的页面，才可以使用文件上传域。文件域要求使用 POST 方法将文件从浏览器传输到服务器。该文件被发送到表单的【动作】框中所指定的地址。

如需插入文件上传域，可使用菜单命令【插入】〉【表单】〉【文件域】。

图5-11　文件域及属性

7. 插入图像域

图像域是将自己制作的图像作为提交按钮，可以将按钮制作为多种形状，体现个性化的需求。如果使用图像来执行任务而不是提交数据，则需要将某种行为附加到表单对象。

如需插入图像域，可使用菜单命令【插入】〉【表单】〉【图像域】，如图5-12所示。

图5-12　图像域及属性

【属性】面板中主要属性说明如下。

◇ 图像区域：为该按钮指定一个名称。“提交”和“重置”是两个保留名称，“提交”通知表单将表单数据提交给处理应用程序或脚本，而“重置”则将所有表单域重置为其原始值。

◇ 源文件：指定要为该按钮使用的图像。

◇ 替换：用于输入描述性文本，一旦图像在浏览器中加载失败，将显示这些文本。

◇ 对齐：设置对象的对齐方式。

◇ 编辑图像：单击该按钮启动默认的图像编辑器并打开该图像文件以待编辑。

8. 插入按钮

按钮是表单中最重要的对象之一。使用按钮可将表单数据提交到服务器，或者重置表单，还可以指定其他已在脚本中定义的处理任务。例如，可能会使用按钮根据指定的值计算所选商品的总价。

如需插入按钮，可使用菜单命令【插入】〉【表单】〉【按钮】，如图5-13所示。

图5-13　按钮及属性

【属性】面板中主要属性说明如下。

◇ 按钮名称：为该按钮指定一个名称。“提交”和“重置”是两个保留名称，“提交”通知表单将表单数据提交给处理应用程序或脚本，而“重置”则将所有表单域重置为其原始值。

◇ 值：确定按钮上显示的文本。

◇ 动作：确定单击该按钮时发生的动作。

■ 提交表单：在用户单击该按钮时提交表单数据以进行处理。该数据将被提交到在表单的【动作】属性中指定的页面或脚本。

■ 重置表单：在单击该按钮时清除表单内容。

■ 无：由用户自行指定单击该按钮时要执行的动作。例如，您可以添加一个 JavaScript脚本，使得当用户单击该按钮时打开另一个页面。