《清华大学_网页设计培训教程_dreamweaver5章》由会员分享，可在线阅读，更多相关《清华大学_网页设计培训教程_dreamweaver5章（54页珍藏版）》请在金锄头文库上搜索。
1、第5章 创建交互式表单,第5章 创建交互式表单,教学提示：本章将首先利用Dreamweaver在页面中创建表单，然后一步步地介绍在表单域中添加各种表单对象，最后讲述如何校验表单和处理表单，使用户能够逐步掌握创建一个交互性表单的过程，并能根据本书的讲解熟练地创建不同的表单。 教学目标：在第1章分析页面元素时，曾经介绍过几种表单的不同应用，如网站的登录系统、站点搜索引擎、友情链接和用户信息反馈等。这些都是表单的具体应用。,第5章 创建交互式表单,5.1 创 建 表 单 5.2 添加表单对象 5.3 校 验 表 单 5.4 处 理 表 单 5.5 上 机 实 战,5.1 创 建 表 单,表单主要是为
2、了实现浏览者同Internet服务器之间的交互。通过表单，可以将浏览者的信息发送到Internet服务器上，以供处理。表单也可以使用户与站点的浏览者交互或者从浏览者那里收集信息。例如，用户可以询问浏览者的用户名和电子邮件地址，或者让浏览者做一个调查、在访客簿上签名，或者提供关于用户的站点信息反馈。 表单包括两个部分：一部分是HTML源代码，用于描述表单(如域、标签和在页面上看见的按钮)；另一部分是脚本或应用程序，用于处理提交的信息(如CGI脚本)。不通过脚本，用户就不能搜集表单数据。 表单包括用户不可见的属性。这些属性指定了表单将被如何处理。 表单由以下3个基本部分组成。 表单标签：包括将要处
3、理该表单的CGI脚本的URL及数据传送到服务器的 方式。 表单域：包括文本域、菜单、复选框或单选按钮。 提交按钮：该按钮将数据传送给服务器的CGI脚本，可以是文本表单按钮和图像提交按钮。 在Dreamweaver中，要添加表单对象，首先应该创建表单域。由于表单域属于不可见元素，因此，如果希望在屏幕上显示表单域，应该激活Dreamweaver的显示不可见元素特性，可以通过单击【查看】|【可视化助理】|【不可见元素】命令来实现。,5.1 创 建 表 单,1. 插入表单域 要插入表单域，其具体操作如下。 (1) 将插入点放在要插入表单的地方。 (2) 单击【插入】面板上的【表单】选项图标，如图5.1
4、所示。也可以选择【插入】|【表单】|【表单】命令来插入表单域，如图5.2所示。 当激活了文档窗口显示不可见元素的特性并插入表单以后，就会看到文档窗口中出现红色虚线围绕的区域，该区域就是表单域，如图5.3所示。 2. 设置表单域属性 用户可以利用【属性】面板继续对表单域设置其他属性。在文档窗口中，将插入点放入表单域中，【属性】面板如图5.4所示。 可以在表单域的【属性】面板上，对以下几个属性进行设置： 在【表单名称】文本框中，输入表单域的名称“denglu”。 在【动作】文本框中，输入一个URL地址，可以是Http类型的地址，也可以是mailto类型的地址。也可以单击右边的文件夹按钮提取URL。
5、这里输入“mailto:NetB”。 在【方法】下拉列表框中，可以设置表单数据发送的步骤，选择POST(发送)选项，表明将表单数据发往服务器时，进行POST请求。,5.1 创 建 表 单,图5.1 【表单】类【插入】面板 图5.2 插入表单,5.1 创 建 表 单,图5.3 插入表单后的页面,5.1 创 建 表 单,图5.4 表单域的【属性】面板,5.2 添加表单对象,5.2.1 添加文本域 5.2.2 添加表单按钮 5.2.3 添加图像域 5.2.4 添加单选按钮 5.2.5 添加复选框 5.2.6 添加列表框,5.2 添加表单对象,表单中包含多种对象，对象有时候也称作控件。例如：文本框用于
6、输入文字；按钮用于执行标准任务，提交、重新设置表单内容或完成自定义的功能；复选框用于在多个选项中选择多项；单选按钮用于在多个选项中选择其一；列表框显示选项列表等。这些对象同常见的Windows应用程序非常相似。这一节将讲述如何在表单域中添加表单对象。 在创建好表单域之后，就可以在其中添加表单对象。用户可以利用菜单来添加表单对象，也可以利用表单【插入】面板来添加表单对象。打开【插入】面板上的下拉列表，选择【表单】，这时就会显示如图5.5所示的表单【插入】面板。 如果希望删除表单对象，可以首先选中表单对象，然后按Delete键。表单对象与普通文本一样，可以进行各种编辑操作，如复制、剪切和粘贴等。,
7、5.2 添加表单对象,图5.5 表单【插入】面板,5.2.1 添加文本域,可以利用表单创建网站的用户登录系统，在登录系统中主要的表单对象是文本域和提交按钮。文本域是一个通称，它代表的控件可以是单行的文本框、单行的密码框或多行的文本编辑区。 1. 插入文本域 要往文档中插入文本域，可以先将插入点放在要添加文本域的位置，选择【插入】|【表单】|【文本域】命令，如图5.6所示，或单击如图5.5所示的表单【插入】面板上的【文本域】按钮。 2. 设置文本域的属性 插入文本域以后就需要根据不同的需要设置文本域的属性。可以首先在文档窗口中选中文本域控件(这时控件四周带有虚线边框)，然后在【属性】面板上设置文
8、本域的各种属性。文本域的【属性】面板如图5.8所示。 可以在文本域的【属性】面板上对以下几种属性进行设置。 在【文本域】文本框中输入文本域控件的名称。 在【字符宽度】文本框中，设置在文本域控件中所允许显示的字符数目，实际上它也控制了文本域本身的宽度。 在【最多字符数】文本框中，设置文本框或密码框中允许输入的最大字符数。 在【类型】选项组中，可以指定文本域控件的类型。 在【初始值】文本框中，可以设置文本域控件中默认状态下显示的文本。在【换行】下拉列表中，可以为【多行】类型的文本编辑区文本域设置文本编辑格式。,5.2.1 添加文本域,图5.6 插入文本域,5.2.1 添加文本域,图5.8 文本域【
9、属性】面板,5.2.2 添加表单按钮,文本表单按钮是标准的表单按钮，其中包含需要显示的文本和所进行的操作，如【提交】和【重置】等。 1. 插入表单按钮 用户为登录系统添加了文本域以后，需要对登录系统添加【提交】按钮。要插入表单按钮，其具体操作如下。 (1) 将插入点放在要添加按钮的位置。 (2) 选择【插入】|【表单】|【按钮】命令，或单击如图5.5所示的表单【插入】面板上的【按钮】按钮。 (3) 在默认状态下，添加的按钮是一个提交类型的按钮。 2. 设置表单按钮属性 插入表单按钮以后就需要对不同的表单按钮根据不同的需要设置属性。可以首先在文档窗口中选中表单按钮对象(这时控件四周带有虚线边框)
10、，然后在【属性】面板上设置表单按钮的各种属性。表单按钮【属性】面板如图5.9所示。 可以在表单按钮【属性】面板上对以下几种属性进行设置。 在【按钮名称】文本框中输入按钮控件的名称。 在【值】文本框中，输入按钮上显示的文字。 在【动作】选项组中，允许用户指定单击按钮时进行的行为，实际上也是选择按钮的类型。,5.2.2 添加表单按钮,图5.9 表单按钮【属性】面板,5.2.3 添加图像域,如果用户感觉标准的表单按钮文本表单按钮在页面中比较单调，可以通过使用【插入】面板的【图像域】命令在表单中插入图像，从而制作一个更加吸引人的图像表单按钮。 用户也可以使用图形按钮来执行其他的表单操作，如重置表单或播
11、放声音等。如果使用图像执行非提交数据的任务则需要为表单对象附加行为。用户可以使用Dreamweaver【行为】面板来附加行为，或者使用JavaScript代码来控制表单。 1. 插入图像表单按钮 要插入图像表单按钮，其具体操作如下。 (1) 将插入点放在要添加图像按钮的位置。 (2) 选择【插入】|【表单】|【图像域】命令，或单击如图5.5所示的【插入】面板上的【图像域】按钮。这时会出现如图5.10所示的【选择图像源文件】对话框。,5.2.3 添加图像域,图5.10 【选择图像源文件】对话框,5.2.3 添加图像域,(3) 在对话框中的文件夹中选择一个作为表单按钮的图像文件，然后单击【确定】按
12、钮，确定插入图像。 2. 设置图像表单按钮的属性 插入图像表单按钮以后就需要对不同的图像按钮根据不同的需要设置图像按钮的属性。用户可以首先在文档窗口中选中图像表单按钮对象(这时控件四周带有虚线边框)，然后在【属性】面板上设置图像表单按钮的各种属性。图像表单按钮【属性】面板如图5.11所示。 可以在图像表单按钮的【属性】面板上对以下几种属性进行设置。 在【图像区域】文本框中输入图像按钮控件的名称。 在【源文件】文本框后，可以单击文件夹图标，然后浏览并定位需要在页面中插入的图像。 在【替换】文本框中，输入可能出现在图像位置的替代文本。这种情况出现在浏览者使用的是文本浏览器或将浏览器设置为手工下载图
13、像时。,5.2.3 添加图像域,图5.11 图像表单按钮的【属性】面板,5.2.4 添加单选按钮,当用户在一个选项组中只能选取一个选项时使用单选按钮。在Dreamweaver中一个选项组中的所有单选按钮都必须有相同的名称，但包含不同的域值。 1. 插入单选按钮 在为用户提供表单反馈信息的页面中一般都添加了单选按钮。这些单选按钮主要是为了让用户提供一个惟一的信息，如“性别”、“职业”和“政治面貌”等。要插入表单单选按钮，其具体操作如下。 (1) 将插入点放在要添加单选按钮的地方。 (2) 选择【插入】|【表单】|【单选按钮】命令，或单击如图5.5所示的表单【插入】面板上的【单选按钮】按钮。 在默
14、认状态下，在文档窗口中添加一个空白的圆形按钮，表明该单选按钮尚未被选中。通常，还需要在单选按钮的左边或右边按照正常的文本输入方法输入说明性文字。 如果希望精确调整单选按钮和说明性文字之间的位置，可以将单选按钮或文字放入层中，然后进行精确定位。,5.2.4 添加单选按钮,2. 设置单选按钮的属性 插入单选按钮以后就需要分别设置每个单选按钮的属性。用户可以首先在文档窗口中选中单选按钮对象(这时控件四周带有虚线边框)，然后从【属性】面板上设置单选按钮的各种属性。单选按钮的【属性】面板如图5.12所示。 可以在单选按钮的【属性】面板上对以下几种属性进行设置。 在【单选按钮】文本框中设置单选按钮控件的名
15、称，该名称可以被脚本或程序 引用。 在【选定值】文本框中，设置选中单选按钮后控件的值，该值可以被递交到服务器上，被应用程序处理。 在【初始状态】选项组中，允许用户设置单选按钮的初始选中状态。选中【已勾选】单选按钮，则单选按钮初始时是选中的。,5.2.4 添加单选按钮,图5.12 单选按钮的【属性】面板,5.2.5 添加复选框,复选框也叫做检查框，主要用于标记一个选项是否被选中。复选框允许用户从一组选项中选取一个以上的选项。 每个复选框表单对象都是一个独立的元素，所以在【复选框名称】文本框中都必须有一个惟一的名称。 1. 插入复选框 在为用户提供表单反馈信息的页面中一般也都包含一些复选框。要插入
16、表单复选框，其具体操作如下。 (1) 将插入点放在要添加复选框的地方。 (2) 选择【插入】|【表单】|【复选框】命令，或单击表单【插入】面板上的【复选框】按钮。 在默认状态下，在文档窗口中添加一个空白的方框，表明该复选框尚未被选中。通常还需要在复选框的左边或右边按照正常的文本输入方法输入说明性的文字。,5.2.5 添加复选框,2. 设置复选框的属性 插入复选框以后就需要对这一组复选框设置各个复选框的属性。用户可以首先在文档窗口中选中复选框对象(这时控件四周带有虚线边框)，然后从【属性】面板上设置复选框的各种【属性】。复选框的【属性】面板如图5.13所示。 用户可以在复选框的【属性】面板上对以下几种属性进行设置。 在【复选框名称】(复选框名称)文本框中设置复选框控件的名称。这是标记的name属性，该名称可以被脚本或程序所引用。 在【选定值】文本框中，设置选中复选框后控件的值，该值可以被递交到服务器上，以供应用程序处理。 在【初始状态)】选项组中，允许用户设置复选框的初始选中状态。选中【已勾选】单选按钮，则复选框初始时是
