《图像处理及网页制作》课件第17章.ppt

1、1 1第17章 表单的使用17.1 表单简述表单简述17.2 创建表单创建表单17.3 添加表单对象添加表单对象17.4 检查表单检查表单本章小结本章小结2 2表单在站点的创建过程中起着非常重要的作用，它的使用实现了站点管理员和访问者之间的信息交换。使用传统的电子邮件方式与站点管理员进行信息交互时，访问者提供的信息不可能具有统一的模式，对于站点管理员而言，这些信息是很难整理的。在网页中使用表单功能后，不仅可以为网页提供交互功能，而且还可以按照统一的模式，收集访问者的反馈信息，提高信息统计的效率。表单的使用主要包括如何创建表单、如何添加表单对象和检查表单。3 3表单的作用就是收集访问者的输入信息

2、，与访问者实现交互。例如，用户可以用表单收集访问者的个人资料，然后把访问者的个人资料输入数据库；用户还可以用表单设计一个订货单，让客户指定要购买的商品名称、型号和数量等，实现网上购物。表单是个由文本和表单域组成的集合，站点访问者通过输入信息或从列表中选择一些选项，就可实现与站点管理员的交互访问。例如，图17-1所示就是利用表单制作的一个留言本。17.1 表表 单单 简简 述述4 4图17-1 留言本示意图5 5从图17-1中可以看到，表单通常是由一系列标签文本和相关的表单域(如文本域、复选框、单选按钮以及确定、取消、提交按钮等)组成的。站点访问者可以在表单的各个域中输入或选择相关的信息，然后单

3、击“提交”按钮向站点管理员提交，或单击“清除”按钮撤销所填内容。表单的工作原理很简单，站点访问者可以在被称为“表单域”的特定网页元素中，根据自己的意愿键入或选择相关的信息，然后将指定的信息提交给服务器。服务器利用指定的表单结果处理程序将这些信息保存到特定的文件中，以便站点管理员查看。6 6表单处理程序是Web服务器上的一个程序，站点访问者向服务器提交一个表单时，它就开始执行。因此，只有将网页中的表单与某个表单结果处理程序相关联，才可以实现该表单的功能。7 7向网页中添加表单的方法很简单，用户可以选择下列方法之一：(1)将插入点置于要插入表单的位置，然后单击“插入表单”命令，即可看到表单被插入到

4、当前的位置。(2)将插入点置于要插入表单的位置，然后单击“表单”标签中的“表单”按钮，如图17-2所示。17.2 创创 建建 表表 单单8 8图17-2 “表单”标签页9 9创建一个表单后，文档中会出现红色的虚线框。如果看不到该虚线框，可以执行“查看可视化助理不可见元素”命令。将插入点置于表单内部时，“属性”面板呈现的是表单属性(如图17-3所示)，其中主要选项的意义如下：“表单名称”：为表单设置一个名称，如from1。命名表单后就可以用诸如JavaScript或VBScript之类的脚本语言对表单进行控制。1010“动作”：指定表单被客户端提交后，在服务器端要对其信息和数据作出响应和处理的程

5、序或脚本的URL地址，在此项中输入程序的路径名称，或者单击右边的文件夹图标，在弹出的对话框中选择要运行的程序或带有脚本程序的网页。“目标”：指定一种窗口显示方式显示调用程序所返回的数据，如blank、parent、self、top。“方法”：指定用何种方法在服务器端和客户端传输数据，有三个选项：“Get”(将值追加到请求该页的URL中)、“POST”(在HTTP请求中嵌入表单数据)、“默认”(使用浏览1111图17-3 表单的“属性”面板1212器的默认设置将表单数据发送到服务器)。“MIME类型”：指定对提交给服务器进行处理的数据使用MIME编码类型。1313在文档中创建表单之后，就可以在其

6、中添加表单对象了。站点的访问者正是通过表单对象中的数据与站点实现互动的。具体操作方法如下：17.3 添加表单对象添加表单对象1414(1)将插入点置于表单中要插入对象的位置。(2)单击“表单”标签中的表单对象对应的按钮加入该对象。151516161717181817.3.1 添加文本域对象文本域是用来输入信息的表单对象。文本域的形式有三种：单行文本域通常用来填写单个字符或者简短的回答，如名字、地址等。多行文本域用于填写较长的内容，该文本域的行数和字数都可由浏览者自己定义。密码域是一种特殊的文本域。当输入文本时，文本会被星号或其他符号代替。1919下面以制作“个人信息调查表”为例，介绍文本域的使

7、用方法。1添加单行文本添加单行文本域的操作步骤如下：(1)在已设计好的表格中，选择一个合适的单元格，输入如“姓名”、“通讯地址”等标签元素；将插入点移到下一个单元格，2020然后单击“表单”标签下的“文本域”按钮，完成单行“文本域”的插入。(2)点击“文本域”呈选定状，并在其“属性”面板中对各选项进行以下设置(如图17-4所示)：在“文本域”文本框中输入Name。在“字符宽度”文本框中设置文本域的宽度为20。在“最大字符数”文本框中设置文本的最大字符数为16。在“类型”区内选中“单行”按钮。“初始值”不设任何值。“类”为无。2121图17-4 设置单行文本域2222(3)用同样的方法，在“年”

8、之前插入“文本域”，并将其选定；在对应的“属性”面板的“文本域”文本框中输入Year，设置“字符宽度”为10，“最大字符数”为2，“类型”为“单行”，“初始值”为19，如图17-5所示。2323图17-5 设置“年”的“文本域”24242.添加多行文本添加多行文本域的操作如下：(1)将插入点置于“留言”右侧的单元格中。(2)单击“表单”标签下的“文本字段”按钮，完成多行文本域的插入。(3)选定插入的文本域，并在其“属性”面板中对各选项进行以下设置(如图17-6所示)：在“文本域”文本框中输入Year。在“字符宽度”文本框中设置文本域的宽度为80。在“行数”文本框中设置文本的最多行数为5。252

9、5 在“类型”区内选中“多行”按钮。在“换行”下拉列表框中选择“默认”。在“初始值”文本框中不设任何值。“类”下拉列表框中选“无”。注意：当用户输入的信息太多，无法在定义的文本区域内显示时，可从“换行”下拉列表框中选择一种设置方式来显示用户输入的内容。“换行”列表中包括以下4个选项。2626“默认”：当用户输入的内容超过文本区域的右边界时，文本转到下一行。“关”：当用户输入的内容超过文本区域的右边界时，文本将向左侧滚动，防止文本转到下一行。“虚拟”：在文本区域中设置自动换行。当用户输入的内容超过文本区域的右边界时，文本转到下一行。“实体”：在文本区域中设置自动换行，当提交数据进行处理时，也对这

10、些数据设置自动换行。2727图17-6 设置多行文本域28283.添加密码域要添加密码域，可进行以下操作：(1)将插入点置于“密码”右侧的单元格中。(2)单击“表单”标签下的“文本域”按钮，完成单行“文本域”的插入。(3)选定插入的“文本域”，在其“属性”面板中对各选项进行以下设置(如图17-7所示)：在“文本域”文本框中输入Password。在“字符宽度”文本框中设置文本域的宽度为10。在“类型”区内选中“密码”单选按钮。在“最大字符数”文本框中设置文本的最大字符数为8。2929“初始值”文本框中不设任何值。“类”下拉列表中设为“无”。3030图17-7 设置密码域313117.3.2 添加

11、单选按钮在表单中使用“单选按钮”设置预定义的答案，访问者可以单击“单选按钮”选择答案。“单选按钮”作为一个组使用，可提供彼此排斥的选项值，即用户在“单选按钮”组内只能选择一个选项。要添加“单选按钮”，可进行以下操作：(1)将插入点置于“性别”右侧的单元格中。(2)单击“表单”标签下的“单选按钮”，然后输入“男”，完成“单选按钮”的插入。3232(3)选定插入的“单选按钮”，并在其“属性”面板中对各选项进行以下设置(如图17-8所示)：在“单选按钮”文本框中输入sex。在“选定值”文本框中输入male。在“初始状态”区内选中“已勾选”单选按钮。“类”下拉列表中设为“无”。3333图17-8 设置

12、“单选按钮”343417.3.3 添加复选框“复选框”对每个单独的操作进行“关闭”和“打开”状态切换。用户可以从“复选框”组内选择多个选项。要添加“复选框”，可进行以下操作：(1)将插入点置于“兴趣爱好”右侧的单元格中。(2)单击“表单”标签下的“复选框”，然后输入“音乐”，完成“复选框”的插入。(3)选定插入的复选框，并在其“属性”面板中对各选项进行以下设置(如图17-9所示)：在“复选框名称”文本框中输入interest。3535 在“选定值”文本框中输入music。在“初始状态”区内选中“未选中”单选按钮。“类”下拉列表中选择“无”。3636图17-9 设置“复选框”373717.3.4

13、 添加列表“列表”可以在有限的空间内为用户提供许多选项。“列表”提供一个滚动条，用户可以浏览许多项，并进行多重选择。要添加“列表”，可进行以下操作：(1)将插入点置于“年”和“月”的中间。(2)单击“表单”标签下的“列表/菜单”按钮，完成“列表/菜单”的插入。(3)选定插入的“列表/菜单”，并在其“属性”面板中对各选项进行以下设置(如图17-10所示)：在“列表/菜单”文本框中输入Month。3838图17-10 设置列表3939 在“类型”区内选中“列表”单选按钮。在“高度”文本框中输入1。单击“列表值”按钮，打开“列表值”对话框(如图17-11所示)。将插入点置于“项目标签”列，输入要显示

14、的文本。在“值”列中输入用户选择该项时发送到服务器的数据。若要向选项列表中添加其他项，可单击按钮，然后重复上述步骤。注意：在“高度”文本框中用户也可以输入该列表将显示的行数。如果指定的数字小于该列表包含的选项数，则出现滚动条。如果希望允许用户选择该列表中的多个项，可选中“允许多选”复选框。4040图17-11 “列表值”对话框414117.3.5 添加按钮对象使用表单按钮可以将输入表单的数据提交到服务器，或者重置该表单。还可以将其他已经在脚本中定义的处理任务分配给按钮，例如，表单按钮可以根据指定的值计算所选商品的总价。要添加“按钮对象”，可进行以下操作：(1)将插入点置于表格底部第8行第2个单

15、元格。(2)单击“表单”标签下的“按钮”，完成“提交按钮”的插入。4242(3)选定插入的“提交按钮”，并在其“属性”面板中对各选项进行以下设置(如图17-12所示)：在“按钮名称”文本框中输入Submit。在“标签”文本框中输入文字说明，如“提交”、“重置”等。如果为“提交”，则在“动作”区内选中“提交表单”单选按钮；如果为“重置”，则在“动作”区内选中“重置表单”单选按钮。4343图17-12 设置“提交”按钮示意图444417.3.6 制作留言本留言本是与服务器的脚本程序结合使用的。一般地，由访问者向留言表单输入留言，单击“提交”按钮时，浏览器将信息发至服务器，经过服务器端程序解释执行后

16、，向客户浏览器打印出留言信息。因此，留言的表格是动态产生的。程序开发者一般先制作出静态的网页，将其调整至合适的效果后再编辑实现动态打印表格。本小节制作的表格是静态的。4545制作留言本，首先应在Dreamweaver中新建一文档，左侧的留言使用表格来布局，右侧的表单使用层来定位，表格的宽度与层的大小都要精确控制以避免表格与层的内容发生冲突。“表格”布局如图17-13所示。然后，在右侧的层中添加表单，具体操作步骤如下：(1)添加表单。把插入点放入层中，执行“插入表单”菜单命令，在层中插入一表单，如图17-14所示。4646图17-13 “表格”布局4747图17-14 在层中插入“表单”4848

17、(2)添加表格。把表格放入表单中是为了布局表单元素。把插入点放入表单的红色虚线框中，执行“插入表格”菜单命令，插入一张7行3列的表格，经过单元格的拆分与合并操作之后，得到如图17-15所示的表格。(3)插入“标题”和“姓名”文本框。发言者的标题和姓名是不能缺少的，为了标明这两个文本框的意义，应该在文本框的前面分别添加标签元素，标签的文本分别为“标题”和“姓名”。首先在合适的两个单元格中分别输入“标题”和“姓名”，然后将光标分别插入右侧单元格中，再单击“表单”标签中的“文本域”按钮 ，分别完成两个文本框的插入，即“标题”文本框和“姓名”文本框。4949图17-15 插入表格示意图5050在它们的

18、“属性”面板中分别进行以下设置：在“文本域”文本框中分别输入“title”和“Name”；“字符宽度”取默认值，并把title域的“最大字符数”设定为40，把Name域的“最大字符数”设定为16，如图17-16所示。注意：由于使用时使用者可能忽略输入标题，所以可在标题文本框的后面添加说明文字“不能缺少”以示提醒。5151图17-16 插入“标题”和“姓名”文本框5252(4)插入“选择表情”。这其实是一件额外的工作，别人看到表情标志，就可以大致了解留言的内容性质了。表情信息用单选按钮来实现，但要事先准备好一些表示表情的小图像。向单元格中添加6个单选按钮，“名称”都设成“face”，单选按钮的“

19、选定值”依次为1，2，3，6，并把第一个按钮的“初始状态”设定为“已勾选”。选中这6个单选按钮，单击“表单”标签中的“域集按钮”添加一个域集，在“域设置”对话框的“标签”文本框中输入“选择表情”，如图17-17所示。5353图17-17 “域设置”对话框5454(5)添加正文文本框。向单元格中插入40个字符宽、10行的文本区，名称设定为“content”；在正文文本框上方输入文字：“请在下面文本框中输入留言(不能为空)”，如图17-18所示。(6)添加按钮。为表单添加“提交”和“清空”按钮，并为表单设置“动作”、“方法”等属性；最后，在较醒目的位置输入“返回主页”并为其设置超链接，如图17-1

20、9所示。5555图17-18 添加正文文本框示意图5656图17-19 为留言表添加按钮5757一个表单通常有它的填写规范，如果访问者不清楚该规范，将表单的内容填错，必须等到服务器的CGI程序处理完填写的信息后才知道自己填写有误，然后才能修改，这样显然在资源和时间上造成了一些不必要的浪费。因此，在网页中提醒访问者避免一些简单的错误是很有必要的。17.4 检检 查查 表表 单单5858“检查表单”动作检查指定文本域的内容以确保用户输入了正确的数据类型。使用onBulr事件将此动作附加到单个文本域，在用户填写表单时对域进行检查；或者使用onSubmit事件将其附加到表单，在用户单击“提交”按钮时对

21、多个文本域进行检查。对已完成的表单进行检查，操作方法如下：选定“提交”按钮，在“行为”面板中单击“添加行为”按钮，从弹出的菜单中选择“检查表单”命令(如图17-20所示)，弹出“检查表单”对话框，如图17-21所示。5959 图17-20 “添加行为”菜单6060 图17-21 “检查表单”对话框6161在“检查表单”对话框的“命名区域”文本框中列出了form1表单中的所有文本域，对title域、name域、content域作如下设置：“title”域：将“值”选中为“必须的”，在“可接受”区内选中“任何东西”单选按钮。“name”域：不选“必须的”复选框，则“名字”文本框的输入可以为空。“content“：选中“必须的”复选框，在“可接受”区内选中“任何东西”单选按钮。6262上述设置完成后，单击“确定”按钮，在“行为”面板上添加一个“检查表单”的交互行为，其“动作”为“检查表单”，“事件”为onClick，如图17-22所示。至此，完成了留言本的制作。6363图17-22 “行为”面板6464本章主要介绍如何创建表单、插入表单对象以及设置各种对象属性等。利用表单可以增强网页的交互性，当然，表单必须与后台的程序或脚本联系起来才能发挥作用。有关服务器端的开发，请参阅相关的书籍。通过本章的学习，学习者应初步学会表单的制作,并建立起如何与访问者交互的概念。本本 章章 小小 结结