16.7　使用表单

使用表单可以制作简单的交互式页面，收集来自用户的信息。表单是网站管理者与浏览者之间沟通的桥梁。收集、分析用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。有了表单，网站不仅是“信息提供者”，同时也是“信息收集者”。

一个完整的表单有两个重要的组成部分，一是页面中进行描述的HTML代码，二是服务器的应用程序或客户端脚本，用于分析处理用户在表单中输入的信息。

16.7.1　插入表单

表单可在文档中定义一个表单区域，表单对象都是插入在这个表单区域中的。插入表单的具体操作步骤如下：

1　将光标放置在插入表单的位置，选择菜单中的【插入】|【表单】|【表单】命令，即可在文档中插入红色虚线的表单，如图16.80所示。

图16.80　插入表单

提示

在【表单】插入栏中单击【表单】按钮，也可以插入表单域。

2　选中表单，选择菜单中的【窗口】|【属性】命令，打开【属性】面板，如图16.81所示，在【属性】面板中可以设置相应的属性。

图16.81　设置表单属性

在表单的【属性】面板中可以设置以下参数。

●　表单名称：输入标识该表单的惟一名称。

●　动作：指定处理该表单的动态页或脚本的路径。可以在【动作】文本框中输入完整的路径，也可以单击文件夹图标浏览应用程序。

●　类：在【类】下拉列表中选择要定义的表单样式。

●　方法：在【方法】下拉列表中，选择将表单数据传输到服务器的传送方式，包括3个选项。

POST：用标准输入方式将表单内的数据传送给服务器，服务器用读取标准输入的方式读取表单内的数据。

GET：将表单内的数据附加到URL后面传送给服务器，服务器用读取环境变量的方式读取表单内的数据。

【默认】：用浏览器默认的方式，一般默认为GET。

●　【编码类型】：用来设置发送数据的MIME编码类型，一般情况下应选择application/x-www-form-urlencoded。

●　目标：使用【目标】下拉列表指定一个窗口，这个窗口中显示应用程序或者脚本程序，将表单处理完成后所显示的结果。

_blank:反馈网页将在新开窗口里打开。

_parent:反馈网页将在副窗口里打开。

_self:反馈网页将在原窗口里打开。

_top:反馈网页将在顶层窗口里打开。

16.7.2　插入文本域

文本域可用来接受任何类型的字母、数据文本输入内容。文本域非常有用，大多数信息都可以以文本域的形式输入。文本可以以单行或多行显示，也可以以密码的形式显示，在这种情况下，输入的文本将被替换为星号或项目符号。插入文本域的具体操作步骤如下：

1　将光标置于表单域内，在弹出的【表格】对话框中设置【行数】为12，【列数】为2，单击【确定】按钮，插入12行2列的表格。如图16.82所示。

图16.82　插入表格

提示

在【表单】插入栏中单击【文本字段】按钮，也可以插入单行文本域。

2　将光标置于第1行第1列中，输入文字“客人姓名”，如图16.83所示。

图16.83　输入文字

3　将光标置于表格的第1行第2列中，选择【插入】|【表单】|【文本域】命令，插入文本域，如图16.84所示。

图16.84　插入文本域

3　打开【属性】面板，在【属性】面板中将【字符宽度】设置为20，【最多字符数】设置为10，【类型】选择单行，如图16.85所示。

图16.85　文本域的【属性】面板

在文本域【属性】面板中可以设置以下参数。

●文本域：在【文本域】文本框中，为该文本域指定一个名称。每个文本域都必须有一个惟一名称，文本域名称不能包含空格或特殊字符，可以使用字母、数字、字符和下画线(_)的任意组合，所选名称最好与用户输入的信息要有所联系。

●　字符宽度：设置文本域一次最多可显示的字符数，它可以小于【最多字符数】。

●　最多字符数：设置单行文本域中最多可输入的字符数，使用【最多字符数】将邮政编码限制为6位数，将密码限制为10个字符等。如果将【最多字符数】文本框保留为空白，则用户可以输入任意数量的文本，如果文本超过域的字符宽度，文本将滚动显示，如果用户输入超过最大字符数，则表单产生警告声。

●　类型：文本域的类型，包括【单行】、【多行】和【密码】3个选项。选择【单行】将产生一个type属性设置为text的input标签。【字符宽度】设置映射为size属性，【最多字符数】设置映射为maxlength属性。

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

选择【多行】将产生一个textarea标签。

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

5　将光标置于表格的第3行单元格中，输入文本，并插入文本域，如图16.86所示。

图16.86　插入文本域

6　使用同样的方法插入密码域和多行文本域，如图16.87所示。

图16.87　插入密码域和多行文本域

16.7.3　插入单选按钮和复选框

单选按钮代表互相排斥的选择，在单选按钮组中选择一个按钮，就会取消选择该组中的所有其他的按钮。在复选框组中，可以同时选择任意多个使用的选项。复选框可以单独使用，也可成组使用。

插入单选按钮和复选框的具体操作步骤如下：

1　将光标置于第5行第1列中，输入文字“电话：”，如图16.88所示。

图16.88　输入文本

提示

在【表单】插入栏中单击【单选按钮】按钮，可插入单选按钮。

在【表单】插入栏中单击【单选按钮组】按钮，弹出【单选按钮组】对话框，可插入单选按钮组。

2　将光标置于第5行第2列中，选择【插入】|【表单】|【复选框】命令，插入复选框，并在复选框的右边输入文字，如图16.89所示。

图16.89　插入复选框

3　选择插入的复选框，在【属性】面板中【初始状态】设置为未选中，如图16.90所示。

图16.90　设置复选框属性

4　将光标置于文字的右边的插入其他的复选框，并输入相应的文字，如图16.91所示。

图16.91　插入其他复选框

5　将光标置于表格的第2行第1列中，输入文字“性别”，如图16.92所示。

图16.92　输入文本

6　将光标置于表格的第2列单元格中，选择【插入】|【表单】|【单选按钮】命令，插入单选按钮，并在单选按钮的右边输入文字，如图16.93所示。

图16.93　插入单选按钮

7　选中插入的单选按钮，【属性】面板中【初始状态】设置为未选中，如图16.94所示。

图16.94　单选按钮【属性】面板

8　将光标置于表格的第6行第1列中，输入文字“房间名称：”，如图16.95所示。

图16.95　输入文字

9　将光标置于表格的第6行第2列中，选择【插入】|【表单】|【单选按钮组】命令，弹出【单选按钮组】对话框，在对话框中添加标签，如图16.96所示。单击【确定】按钮，插入单选按钮组，如图16.97所示。

图16.96　插入单选按钮组

图16.97　插入单选按钮组

16.7.4　插入菜单和列表

列表框可以以列表的方式显示一组选项，根据设置的不同，可以在其中选择一项或多项。下拉列表框是列表框中的一种特例，它通常显示为一行，单击右侧的箭头，则展开下拉列表，允许进行选择，通常这种下拉列表称为“下拉菜单”。

插入列表/菜单的具体操作步骤如下：

1　将光标置于表格的第2列单元格中，选择【插入】|【表单】|【选择（列表/菜单）】命令，插入列表/菜单，如图16.98所示。

图16.98　插入列表/菜单

提示

在【表单】插入栏中单击【列表/菜单】按钮，可插入列表/菜单。

2　选中插入的列表/菜单，单在【属性】面板中单击按钮，弹出【列表值】对话框，在对话框中单击按钮，添加内容，如图16.99所示。

图16.99　【列表值】对话框

3　单击【确定】按钮，添加列表/菜单，【类型】设置为菜单，如图16.100所示。

图16.100　设置列表/菜单属性

在列表/菜单【属性】面板中可以进行以下设置：

　【列表/菜单】：设置列表/菜单的名称，这个名称是必需的，必须是惟一的。

　【类型】：指将当前对象设置为下拉菜单还是滚动列表。

　单击按钮，弹出【列表值】对话框，在对话框中可以增减和修改列表/菜单。当列表或者菜单中的某项内容被选中，提交表单时它对应的值就会被传送给服务器端的表单处理程序；若没有对应的值，则传送标记本身。

　【初始化时选定】：此文本框首先显示【列表值】对话框内的列表/菜单的内容，然后可在其中设置列表/菜单的初始选择，方法是单击要作为初始选择的选项，若【类型】选项为【列表】，则可初始选择多个选项，若【类型】选项为【菜单】，则只能选择一个选项。

4　将光标置于列表/菜单的右边，输入文本，并插入其他的列表/菜单，如图16.101所示。

图16.101　插入其他的列表/菜单

16.7.5　插入跳转菜单

跳转菜单可建立URL与列表/菜单中选项之间的关联。通过在列表中选择一项，浏览器将跳转到指定的URL。插入跳转菜单的具体操作方法如下：

1　将光标置于表格的第8行第1列单元格中，选择【插入】|【表单】|【跳转菜单】命令，弹出【插入跳转菜单】对话框，在对话框中单击按钮，添加内容，如图16.102所示。

图16.102　【插入跳转菜单】对话框

2　单击【确定】按钮，插入跳转菜单，如图16.103所示。

图16.103　插入跳转菜单

提示

在【表单】插入栏中单击【跳转菜单】按钮，也可在文档中插入跳转菜单。

16.7.6　插入按钮

表单按钮可控制表单操作，使用表单按钮将输入的表单数据提交到服务器或者重置该表单，还可以将其他已经在脚本中定义的处理任务分配给按钮。插入按钮的具体操作步骤如下：

1　将光标放置在插入按钮的位置，选择菜单中的【插入】|【表单】|【按钮】命令，插入按钮，如图16.104所示。

图16.104　插入按钮

2　选中按钮，在【属性】面板中的【值】文本框中输入“提交”，【动作】设置为【提交表单】，如图16.105所示。

图16.105　设置按钮属性

在按钮【属性】面板中可以进行以下设置：

　【按钮名称】：在文本框中设置按钮的名称，如果想对按钮添加功能效果，则必须命名，然后采用脚本语言来控制执行。

　【值】：在文本框中输入的文本就是显示在按钮上的文本。

　【动作】：有3个选项，分别是【提交表单】、【重设表单】和【无】。

3　将光标放置在按钮的右边，插入按钮，在【属性】面板中的【值】文本框中输入“重置”，【动作】设置为【重设表单】，如图16.106所示。

图16.106　插入按钮

4　保存文档，按F12键在浏览器中预览效果，如图16.107所示。

图16.107　表单网页效果