网页设计技术教程 第6章 表单.ppt

1、第6章 表单,本章要点： 表单的功能特点 表单的创建方法 各种表单域的使用 表单结果的保存和处理,6.1 表单概述,如图是一个简单的表单。表单中包含单行文本框、单选按钮、复选框、提交按钮、重置按钮等项目（即下节中所说的表单域）。,6.1.1 创建表单,1用户自己直接创建表单 具体操作步骤如下： （1）明确表单要收集哪些信息，从而确定表单需要有哪些表单域以及表单域的类型； （2）将光标放置在编辑区要插入表单的空白处，执行【插入】【表单】【表单】命令，插入空白表单，此时表单只包含【提交】和【重置】按钮; （3）向表单中添加所需的表单域及其注释 2使用向导创建表单网页 具体操作步骤如下：,（1）打开

2、【网页模板】对话框中，选择【常规】选项卡，从中选择【表单网页向导】，打开【表单网页向导】对话框，【表单网页向导】对话框中有一个进度条，指示设置整个表单的进度。 （2）单击【下一步】按钮，进入对话框。在这里可以点击【添加】按钮来进入添加表单项的对话框 。 （3）在该对话框中，【选择此问题要收集的输入类型】列表里列出可供选择的表单域提示信息。可以根据需要多次单击【添加】按钮添加问题，也可以对这些问题直接进行编辑。 （4）每添加完一个问题提示，单击【下一步】按钮，进入这个表单项的属性设置对话框 。设置完毕后，单击【下一步】按钮，进入【设置表单处理程序】对话框 。 （6）这里可以设置如何处理表单，如【

3、将结果保存到Web页】、【将结果存为文本文件】以及【使用自定义的CGI脚本】等。 （7）回到编辑窗口，会发现新建的网页上产生了一个表单。如图,3使用模板创建表单,在FrontPage 2002的【网页模板】对话框中，打开【常规】选项卡，可以看到系统提供的多种表单网页的模板，如“确认表单”、“搜索网页”、“意见簿”、“意见反馈表单”、“用户注册”等模板，和其它网页模板一起列出。用户可以像使用表单网页模板一样来创建一个表单网页，这和使用普通模板创建网页没有什么区别 。,6.1.2 表单域类型,在执行【插入】【表单】命令时，用户可以按住所弹出子菜单的最上方，将其拖出到编辑的窗口上，生成一个【表单】工

4、具栏，如图 ：,6.2 表单域,6.2.1 单行文本框 插入单行文本框的具体操作步骤如下： （1）先确定要插入单行文本框的位置，然后执行【插入】【表单】【文本框】命令，也可以单击【表单】工具栏中的【文本框】按钮 进行插入。 （2）鼠标右键单击文本框，执行弹出菜单中的【表单域属性】命令，也可以直接双击文本框，打开【文本框属性】对话框，如下图所示：,6.2.2 文本区（滚动文本框）,对文本区可进行如下操作： （1）插入一个文本区，同样有两种方法可以实现：将光标移到要插入的位置，执行【插入】【表单】【文本区】命令，也可以单击【表单】工具栏上的【文本区】按钮 ，插入文本区 。 （2）鼠标右键单击文本区

5、，执行弹出菜单中的【表单域属性】命令，或直接双击文本区，打开【文本框属性】对话框。 在【文本区属性】对话框中，可以设置文本区的相关属性。文本区的属性与单行文本框的属性基本相同，不同的是可以输入多行的初始值，并且可以在【行数】文本框中指定文本区的行数，其默认值是2。还可以通过拖动文本区周围的控制点来改变文本区的宽度和行数。,6.2.3 文件上载,操作步骤如下： （1）先确定要插入单行文本框的位置，然后执行【插入】【表单】【文件上载】命令，或者单击【表单】工具栏上的【文件上载】按钮 ，插入文件上载控件。 （2）直接在编辑窗口中双击文件上载表单域，打开【文件上载属性】对话框。 （3）在对话框中可以设

6、置文件上载域的相关属性。 （4）单击【文件夹】按钮，打开【文件夹列表】窗口。 （5）单击鼠标右键，执行【新建】【文件夹】命令。 （6）用鼠标右键单击表单，选择【表单属性】菜单项。,6.2.4 复选框,操作步骤如下： （1）通过单击【表单】工具栏上的【复选框】按钮 ，可以插入复选框，添加文本注释。 （2）双击所添加【复选框】表单域，打开【复选框属性】对话框，进行属性设置。 在【名称】框中输入该表单域的名称。在【值】框中输入的文本用来描述选中后的复选框所表示的含义。若要该选项初始状态是选中的，在【初始状态】选项栏中选中【选中】单选按钮。如果一个表单上有多个复选框，每个复选框的名字可以是相同的。,6

7、.2.5 选项按钮（单选按钮）,使用选项按钮的具体操作方法如下： （1）在编辑窗口中的确定位置，单击【表单】工具栏上的【选项】按钮 ，插入选项按钮。如下图所示，插入了4个选项按钮，并分别为其添加了文字内容。 （2）双击编辑窗口中的选项按钮，打开【选项按钮属性】对话框，设置选项按钮的属性。,6.2.6 下拉框（下拉菜单）,操作方法如下： （1）先确定要插入下拉框的位置，再单击【表单】工具栏上的【下拉框】按钮 ，插入一个空的下拉框，如图 ： （2）双击页面中的下拉框，打开【下拉框属性】对话框，并进行相关属性的设置。 （3）单击【下拉框属性】对话框中的【添加】按钮，打开【添加选项】对话框。 （4）在

8、其中的【选项】文本框中输入列表项中各项的标题，若想在下拉框中选择的值与下拉框中的选项的文本不同，可选中【指定值】复选框输入该项所代表的值。,6.2.7 按钮,按钮是表单中最常见的表单域，它可以完成访问者提交表单、重置表单或其它特定功能。,6.2.8 高级按钮,单击【表单】工具栏上的【高级按钮】 可以在表单中插入高级按钮。,6.2.9 分组框,使用分组框的具体操作如下： （1）单击【表单】工具栏上的【分组框】按钮 ，在页面上插入一个分组框。用户可以直接在分组框中添加各种表单域。 （2）右击编辑页面上的分组框，执行快捷菜单上的【分组框属性】命令，打开【分组框属性】对话框。 （3）在【标签】文本框中

9、，键入分组框标签的名称。在【对齐】下拉列表中，选择所需的分组框标签对齐方式。单击【式样】按钮访问其它使用级联样式表作为嵌入式样式来设置表单格式的选项。,6.2.10 图片,表单中可以存放两种图片，一种是普通的图片，还有一种是表单中具有特殊作用的图片。,6.2.11 标签,要在网页中插入标签，首先选中要建立一个标签的表单域和它的标签文本，然后单击【表单】工具栏中的【标签】按钮 ，或执行【插入】【表单】【标签】命令。 6.2.12 隐藏表单域 操作步骤如下： （1）在表单中单击鼠标右键，弹出一个快捷菜单，执行【表单属性】命令，打开【表单属性】对话框。 （2）单击【表单属性】对话框中的【高级】按钮，

10、出现【高级表单属性】对话框， （3）在这里可以添加隐藏域。单击【添加】按钮，出现一个【名称/值对】对话框。输入后单击【确定】，回到高级表单属性对话框。通过【添加】按钮可以重复添加隐藏域，并且可以通过【修改】、【删除】按钮对隐藏域的名称和值进行编辑。,6.3 保存表单结果,6.3.1 【文件结果】选项卡,6.3.2 把表单结果发送到某电子邮件地址,6.3.3 设置【确认网页】选项,6.3.4 选择保存到文件的表单域,6.4 表单的辅助设置和操作,6.4.1 设置表单域数据的有效性规则 用户可以在上面介绍的单行文本框、文本区、选项按钮、下拉框等表单域的属性对话框中看到一个【验证有效性】按钮，它是用

11、来限定访问者按照某种规则来输入数据信息。打开相应属性对话框，单击【验证有效性】按钮，打开【文本框有效性验证】对话框。 在【数据类型】下拉列表中制定客户输入的数据类型，以此限制客户只能输入文本、整数或数字，默认值是【无限制】，表示可以输入任何类型数据。对于文本来说可以指定是否包含字母、数字元、空格（包括Tab、回车和换行）以及其它的字符。对于整数来说，可以指定分组符号使用逗号还是小圆点或不需要。对数字来说，可以指定小数点符号。,6.4.2 设置表单中的【Tab】键次序,在除了文件上载表单域外的另外八个表单域的属性对话框中，都有一个【Tab键顺序】选项。它是用于设置浏览者按【Tab】键时光标在表单

12、域间移动的顺序。缺省情况下是按照加入的次序进行移动的，可以通过修改【Tab键顺序】来设置光标在表单域之间的移动顺序，范围在199999之间。 6.4.3 为表单中的域设置键盘快捷键操作步骤如下： （1）在表单域的后面键入文本，同时选择该表单域和文本，单击【表单】工具栏的标签按钮 ，或执行【插入】【表单】【标签】命令，创建域标签。 （2）在域标签中插入要用作快捷键的字母，并为该字母加上“下划线。 （3）单击编辑窗口上的【预览】标签，进行表单网页的预览。,6.4.4 禁用表单域的自动表单功能,操作步骤如下： （1）执行【工具】【网页选项】命令，打开【网页选项】对话框。 （2）在其中的【常规】选项卡中，去掉【在表单中自动围绕表单域】复选项。 （3）单击【确定】按钮，完成设置。现在就禁用了自动表单功能，可以通过编写脚本来使用表单域了。 6.4.5 删除表单中的域 操作步骤如下： （1）对于可见域，点击鼠标左键选中要删除的域，再按【Del】键。 （2）由于隐藏域在编辑页面中是不可见的，可以用鼠标右键单击表单，在快捷菜单上选中【表单属性】选项，打开【表单属性】对话框，单击【高级】按钮，从列表中选择隐藏域，单击【删除】即可 。,小结,表单是制作交互式网页的重要手段，站点访问者可以通