个人主页个把瘾(15)
第十五讲 表单制作

一、表单简介
  l、表单的概念
  经常上网的朋友都知道,很多企业网站都用留言薄来搜集客户信息。每当有访问者填完表点一下“提交”按钮后,网站管理者便会收到一份包含站点访问者输入到表单中的全部数据的邮件,这就是表单。
  我们在申请免费邮箱和免费空间时,必须选填写一份包括个人的姓名、E-MAIL地址等信息的注册表。通过互连网订购商品时,用户需要填写,欲购商品的信息,如,品名、规格、数量等。通过网上进行股票交易时,客户需要仔细填写网页上的各项交易信息。这些也是表单。其他表单应用实例有:用户反馈意见,收集需求信息,网上讨论,网上考试等等。
  这些允许用户填写信息并提交给网站管理者的网页,是含有表单元素的网页,常简称为表单网页。表单中包含着允许用户输入和选择信息的表单域。
  简单地说,表单就是用户可以在网页中填写信息的表格,其作用是接收用户信息并将其提交给网站管理者进行处理。它方便了浏览者与网页制作者之间的交流,实现了网页的互动性。
  下面将要讲述表单中表单域的概念、如何创建表单和添加表单域、怎样设置表单域属性、如何指定表单处理程序,以及如何使用表单模板与向导等内容。
  2、表单域类型及作用
  表单域,也称表单控件,是表单上的基本组成元素,用户通过表单中的表单域输入信息或选择项目。

  1)单行文本框:
  用于接收用户输入的一行文本信息,如用户名、口令等。我们可以通过设定来决定栏位中最多可以输入多少字。
  2)滚动文本框:
  滚动文本框和单行文本框相似,只是可以输入多行文字,栏位的右端和下方有滚动条。它用于让用户输入一个文字段,如观点、意见、建议等。
  3)单选按钮:
  单选按钮就像单选题,浏览者只能在各种选项中选择一种。单选按钮用处十分广泛,上图中的性别选择栏就是单选按钮。
  4)复选框:
  复选框提供一个或一组选项,用户可以选中其中的一个或多个选项。
  5)下拉菜单:
  下拉菜单也叫下拉列表,它允许用户从中选择一项或多项,虽然其功能可通过一组复选框或单选按钮来实现,但是由于下拉菜单可以占用较小的网页空间,因而特别适合于可选项目比较多的情况。
  6)按钮:
  FrontPage 2000中的按钮表单域有三种类型,即“普通”、“提交”和“重置”。创建表单时自动生成的“提交”和“全部重写”按组分别属于后两种。“普通”类型的按钮需要您自己编写响应事件的脚本处理程序。
  7)图片
  8)标签:
  标签是用来说明一个表单域的作用的文本,但是在FrontPage 2000中,可以将标签与所说明的表单域关联起来,使其具有可击性,还可为其指定热键。
二、表单的创建与表单域属性设置
  FrontPage 2000提供了一个专门的“表单”工具栏。但是,与其他工具拦不同的是表单工具栏不是标准工具栏,它不出现在“查看”菜单的“工具栏”子菜单中。若要使用表单工具栏,则需单击“插入”菜单下的“表单”命令,打开其子菜单:

  然后再用鼠标拖动其顶部的横条将其拽出。拽出的表单工具栏可像普通工具栏那样悬浮在屏幕上(如下图),也可放入屏幕上部的工具栏区域。利用表单工具栏可以完成大部分表单的操作,如在网页中插入表单,添加表单域以及设置表单属性等等。

  FrontPage 2000为我们提供了三种创建表单的方式:使用“表单”工具栏或菜单创建表单,使用表单模板创建表单,以及使用表单向导创建表单。
  这里介绍如何使用菜单或“表单”工具栏创建表单。
  插入表单(域)的方法非常简单。只要将光标移动到要插入表单(域)的位置,然后单击表单工具栏中的对应表单域按钮即可。也可单击“插入”菜单,将光标移到其下拉菜单的“表单”上,在弹出的子菜单(如前图所示)中选择一种表单域。也可以使用剪贴板的复制和粘贴操作插入多个相同种类的表单域。
  插入的表单域一般须要对其属性进行设置才能满足要求。下面我们以如何设计一个简单的留言薄为例来说明表单域的添加和设置方法。
  1、插入表单
  1)新建一个空白网页,在首行居中位置写好标题文字“留言薄”;
  2)单击“表单”工具栏上的“表单”按钮。
  在网页的当前位置将生成一个只含有“提交”和“全部重写”两个按钮的表单:

  创建一个表单后,应为其添加表单域,这样表单才具有实际意义。
  也可直接插入表单域,会自动产生一个表单。

  2、单行文本框表单域的插入
  1)光标置于“提交”按钮前,打一回车,并置光标于表单(虚框)的首行左端(左对齐);
  2)输入“姓名:”;
  3)单击“表单”工具栏上的“单行文本框”按钮,即产生下图所示的单行文本框。

  双击单行文本框,出现如下图所示的单行文本框表单域的属性对话框:

  文本框表单域的的各属性项说明如下,其他表单栏位的设置与它大体相似:
  “名称”:单行文本框的名字,它是在引用表单域时内部使用的。默认为Tn,(n为系统从1开始的自动编号)。
  “初始值”:指用户首次打开含有此表单的网页时该文本框中显示的初始文本信息,这里不需要。
  “宽度”:以字符个数指定文本框的宽度,默认值为20,您可根据需要进行设置。也可以通过用鼠标直接拖动栏位的框线来调整。
  文本框宽度只是决定文本框中同一时刻最多显示的字符个数,并不限制文本框中实际可输入的字符数。当实际字符数超过宽度规定的字符数时,可以通过左右移动光标键显示其全部内容。
  “密码域”:选中“是”单选框时,用户输入的文本被认为是密文,每个字符都显示为“*”,否则显示为明文。
  3、插入单选按钮
  1)通过强迫换行(Shift+回车),在表单域中空出一行,并将光标移到要插入单选按钮的地方,然
后插入两个单选按钮,并输入合适的文字,如下图所示:

  2)双击“男”前面的按钮,出现如下图的对话框,将“值”改为“男”。?

  3)双击“女”后面的按钮,出现相同的对话框,将“值”改为“女”。
  “组名称”:单选按钮一般以组为单位使用,“组名称”是用来区分不同的按组组的,组名相同的单选或可以实现多者选一的互斥性选择。
  “值”:它是用来标识单选按钮的,当用户选择了此单选或后,提交表单时,该单选钮所属的组名取此值。
  “初始状态”:设置该单选或是否是所属单选或组中的约定选项,系统默认单选组组中最先建立者为“已选”状态。
  注意:由于这两个单选按钮属于同一组,所以两个单选按钮的“组名称”的值必须相同,在同组内的单选按钮超过两个时也是一样。另外同一组内只能有一个单选按钮的“初 始状态”设为“已选”,而其它单选按钮的“初始状态”必须是“未选”。
  4、插入复选框
  与单选按钮类似,在其下一行插入多个复选框,并输入相应的说明文字:

  双击任意一个复选框,出现如下图所示的对话框。对话框中各选项与单选按钮对话框大体一样,只是各复选框是独立的,其名称各不相同。而属性“值”是复选框处在选中状态时返回给表单处理程序的值,系统默认为ON。
  属性“初始状态”可为“选中”或“未选中”两者之一。若选择“选中”则用户开始看到的复选框中有一个对号,若选择“未选中”则为一空框,系统默认为“未选中”状态。

  5、下拉菜单的插入和菜单选项添加
  1)如下图所示,插入下拉菜单并输入说明文字。

  2)添加选项
  双击下拉菜单,得到如下图所示的对话框。

  单击“添加”按钮,出现如下图所示的“添加选项”对话框:

  输入“20~29”,将初始状态改为“已选”,单击“确定”按钮。然后再重复操作,输入其他年龄段名单,但在属性“允许多重选项”为“否”时,只能有一个选项的初始状态为“已选”:

  在“下拉菜单属性”对话框中,单击“修改”按钮可以修改选项值:单击“删除”按钮可以将选项删除;单击“上移”和“下移”按钮可以移动各选项的排列位置;单击“确定”按钮则设置被确认。
  6、插入滚动文本框
  在“请留下宝贵意见”下面单击“表单”工具栏上的“滚动文本框”按钮,就可以插入一个滚动文本框:

  在滚动文本框上双击两下,出现如下图所示的“滚动文本框属性”对话框。对话框中的设定值与单行文本框大致相同,只是多了一个“行数”,它是滚动文本框同一时刻最多可显示的文本行数。同样,我们也可以用鼠标拖动边框来调整栏位的大小。

  7、按钮
  当我们第一次插入表单栏时,就有自动加入的“提交”和“全部重写”两个按钮,我们也可以根据实际情况添加按钮。
  FrontPage 2000中的按钮表单域有三种类型,即“普通”、“提交”和“重置”。创建表单时自动生成的“提交”和“全部重写”按钮分别属于后两种,它们都有现成的处理程序:单击“提交”按钮可将表单资料传送到相应位置;单击“重置”(“全部重写”)按钮会将表单资料全部清除,等待重新输入。而“普通”类型的按钮需要您自己编写响应事件的脚本处理程序。
  双击任一按钮,得到如下图所示的对话框:

  其中“值/标签”的值就是按钮上显示的文字,可以设置一个具有实际含义的说明性文字,如“添加”、“修改”、“删除”等。“按钮类型”可选择三种类型之一,除系统自动生成的按钮之外,一般应选“普通”。
  通过留言薄的设计,我们熟悉了基本表单域的添加和设置方法。下面简单介绍一下标签和图片的使用:
  1)标签
  用来说明一个表单域的作用的一段文字都可称为标签,比如您可以在一个要求用户输入姓名的单行文本框左边加上“请输入姓名”的标签。所以可以用输入普通文本的方法来插入标签。但是在FrontPage 2000中,可以将标签与所说明的表单域关联起来,使其具有可击性,即当用户单击这个标签时,输入焦点就会切换至相应的表单域。如果可击性标签对应一个单行文本框,则单击该标签后光标会定位到该文本框中,如果可击性标签对应一个复选框,则单击该标签后会改变此复选框的状态。为方便用户使用键盘操作,还可以为标签设置“热键”,即当按下Aft与该标签上的某个特定字母时,相应的操作热点就转移到这个表单域上来。如在可击性标签“请输入姓名”内加上字母N,并给该字母设置下划线属性,则此字母便成为此标签的热键,用户在此表单上可直接按Aft+N组合键把输人焦点转移到该表单域上。
  建立关联标签的步骤:
  (1)把插入点定位在目标表单域左侧,并键入标签文字。
  (2)同时选定目标表单域和标签文字。
  (3)选择“插入”菜单中“表单”菜单项下的“标签”命令,或单击表单工具栏上的“标签”按钮。
  (4)如果要为该标签设置热键,则选中其中的一个字母,给它加上下划线。
  下面是两个复选框和它们的标签的实例:单击任何一个复选框都能改变它的选中状态(打上钩或把钩去掉)。但左边的非关联标签只是普通文本,您单击它不能改变它前面的复选框的选中状态;而左边的关联标签则具有可击性,即您单击它就能改变它前面的复选框的选中状态。

非关联标签  

  2)图片
  在表单中的图片可以和普通网页中插入图片的方法插入,也可以用单击“表单”工具栏上的“图片”按钮作为表单域插入。图片表单域可以替代“提交”按钮,当用户单击此图片时,表单的数据连同图片表单域的名称一并传送到表单处理程序。图片表单域可以返回在图片上单击的X、Y坐标,这使它较普通的“提交”按钮有了更多的意义。
三、表单模板和向导
  FrontPage提供了各种用途的表单模板,如“确认表单”、“搜索网页”、“意见簿”、“意见反馈表单”、“用户注册表单”等。利用这些表单模板,用户可以快速建立所需要的表单网页。另外,FrontPage还提供了表单向导,通过它可以一步一步带领用户建立表单。这里我们简单介绍一下如何利用这些模板和向导。
  利用表单模板和向导的方法和利用模板和向导新建网页的方法完全一样。即单击“文件”菜单,在“新建”子菜单中,选择“网页”,出现如下图所示的对话框:

  在对话框的“常规”卡的在左边的窗口中显示有各种网页的模板,包括了表单网页的模板和向导。其中第一行第二个就是“表单网页向导”,选中(单击)后,再单击“确定”按钮,就可打开表单制作向导,并且一步一步按照向导的提示完成表单域的添加和设置。
  表单模板则位于模板窗口的下部,多数要通过滚动条才能出现。单击某一模板,在右边的预览窗口中将显示模板相应的大体轮廓,确认后,单击“确定”按钮。
  用模板生成表单网页后,FrontPage 2000在网页上放置了一些说明性的文字、应仔细阅读这些一文字,以便更好地操作和使用这些表单。
  由于用模板建立的网页笔记比较简单,所以我们并不能直接使用,必须对网页进行修改。
四、表单处理程序
   表单是网页浏览者向网页设计者提交信息的工具。所以在单击表单的“提交”按钮后必须就表单中的信息提交给网页设计者。FrontPage可以将表单结果发送到一个文件中;或者发送到电子邮箱中;再或者发送到数据库中;甚至发送到其他对象,诸如CGI程序、ASP脚本等其他对象。
  
在表单区域内单击鼠标右键,在快捷菜单中选择“表单属性”,打开如下图所示的“表单属性”对话框:

  在“表单属性”对话框中可以发现,通过单击“将结果保存到”栏下的三个单选按钮中的一个,就可以确定信息提交的目的地,最后单击“确定”按钮,完成设置,这样表单信息将发布到指定的地方。假如不做改变,表单结果自动发送到网站服务器下的_privatekform_results.txt中,可以通过查看该文本文件了解别人写了什么。您也可以通过改变“文件名称”栏中的文件名来改变信息发送目的文件。
  除了用文件保存信息外,Frontpage还支持将信息直接以电子邮件的形式传送到指定的信箱。
  在“表单属性”对话框中选中“发送到”,在“电子邮件地址”栏中输入电子邮件地址,这样浏览者的留言将随时发送到你的邮箱中。
  【注意】处理表单需要服务器的支持,即服务器中要有相应的表单处理程序。假如要将表单发送到一个文件中,则要求服务器允许浏览者能修改这个文件;要将表单发送到数据库中,则服务器必须开放数据库。若要将表单结果以Email形式发送到某个邮箱,则要求服务器有发送电子邮件的服务程序。由于几乎所有服务器中都不安装FrontPage的服务器扩展程序而安装其它的电子邮件的处理程序,所以若要将表单结果发送到某个邮箱,则在表单的“提交”按钮还得加上相应的程序代码。
五、在普通网页中使用表单控件
  在很多网站上采用下拉菜单来实现友情链接,可以节省网页的幅面。我们介绍一下实现方法。
  在普通网页中使用下拉菜单来实现友情链接要解决二个问题:
  1、一个表单控件时自动创建表单
  缺省情况下,如果在网页中则插入一个表单控件(表单域)能自动创建一个含有两个按钮的表单,这是普通网页中不需要的。我们可以通过对“网页选项”的设置来解决这个问题。
  选择“工具”菜单中的“网页选项”命令,出现下图所示的“网页选项”对话框。单击“常规”选项卡下的“在表单中自动围绕表单域”复选框,清除其选中状态。就可以在网页上添加一个独立的表单控。独立的表单控不隶属于任何表单,但是仍然可以像对表单中的其他表单控一样来进行各种操作。

  2、怎么使单击下拉菜单的选项有超链接功能
  正常的下拉菜单没有趁链接功能,必须再给它加一段代码才行。下面介绍一个实例:
  1)在FrontPage窗口中打开一个网页,插入一个下拉菜单:

  2)选中此下拉菜单,将在FrontPage窗口转为HTML视图,可在光标所在处找到如下代码:

  3)将光标放到“

  【注意】插入代码的与“

  4)FrontPage窗口转到普通视图,双击下拉菜单,在下右图所示的“下拉菜单属性”对话框中填入名称:“select1”;

  5)单击“添加”按钮,在“添加选项”对话框中加一个“老年天地”选项,初始状态选为“已选”。
  【注意】下拉菜单的第一个选项是没有超链接功能的,“老年天地”只作为一个次级标题。
  6)再次单击“添加”按钮,在“添加选项”对话框中加一个“月湖老年网”选项。单击“指定值”复选框,并将该选项的值改为月湖老年网的URL:“http://www.nbyh.info/”,如下左图所示。
  【注意】URL中“http://”不能省略。
  多次重复“添加”动作(每次添加都要单击“确定”按钮),使所有要链接的网站都成为此下拉菜单的选项(如下右图所示)。最后单击“下拉菜单属性”对话框中的“确定”按钮完成设置。

  最后单击“下拉菜单属性”对话框中的“确定”按钮完成设置。在“预览”状态预览此网页,单击友情链接的下拉菜单右边的下拉按钮,将鼠标移到菜单中的一个站点上单击(如下图),就可打开此网站。

回上讲 老顽童撰写 下一讲