[经济学]Dreamweaver_8_网页设计培训教程_第5章.ppt

第5章 创建交互式表单 （时间：2次课，4学时） 第5章 创建交互式表单 教学提示：本章将首先利用Dreamweaver在页面中创建表单，然后一步步地介绍在表单域中添加各种表单对象，最后讲述如何校验表单和处理表单，使用户能够逐步掌握创建一个交互性表单的过程，并能根据本书的讲解熟练地创建不同的表单。 教学目标：在第1章分析页面元素时，曾经介绍过几种表单的不同应用，如网站的登录系统、站点有哪些信誉好的足球投注网站引擎、友情链接和用户信息反馈等。这些都是表单的具体应用。 第5章 创建交互式表单 5.1 创 建 表 单 5.2 添加表单对象 5.3 校 验 表 单 5.4 处 理 表 单 5.5 上 机 实 战 5.1 创 建 表 单 表单主要是为了实现浏览者同Internet服务器之间的交互。通过表单，可以将浏览者的信息发送到Internet服务器上，以供处理。表单也可以使用户与站点的浏览者交互或者从浏览者那里收集信息。例如，用户可以询问浏览者的用户名和电子邮件地址，或者让浏览者做一个调查、在访客簿上签名，或者提供关于用户的站点信息反馈。 表单包括两个部分：一部分是HTML源代码，用于描述表单(如域、标签和在页面上看见的按钮)；另一部分是脚本或应用程序，用于处理提交的信息(如CGI脚本)。不通过脚本，用户就不能搜集表单数据。 表单包括用户不可见的属性。这些属性指定了表单将被如何处理。 表单由以下3个基本部分组成。 表单标签：包括将要处理该表单的CGI脚本的URL及数据传送到服务器的 方式。 表单域：包括文本域、菜单、复选框或单选按钮。 提交按钮：该按钮将数据传送给服务器的CGI脚本，可以是文本表单按钮和图像提交按钮。 在Dreamweaver中，要添加表单对象，首先应该创建表单域。由于表单域属于不可见元素，因此，如果希望在屏幕上显示表单域，应该激活Dreamweaver的显示不可见元素特性，可以通过单击【查看】|【可视化助理】|【不可见元素】命令来实现。 5.1 创 建 表 单 1. 插入表单域 要插入表单域，其具体操作如下。 (1) 将插入点放在要插入表单的地方。 (2) 单击【插入】面板上的【表单】选项图标，如图5.1所示。也可以选择【插入】|【表单】|【表单】命令来插入表单域，如图5.2所示。 当激活了文档窗口显示不可见元素的特性并插入表单以后，就会看到文档窗口中出现红色虚线围绕的区域，该区域就是表单域，如图5.3所示。 2. 设置表单域属性 用户可以利用【属性】面板继续对表单域设置其他属性。在文档窗口中，将插入点放入表单域中，【属性】面板如图5.4所示。 可以在表单域的【属性】面板上，对以下几个属性进行设置： 在【表单名称】文本框中，输入表单域的名称“denglu”。 在【动作】文本框中，输入一个URL地址，可以是Http类型的地址，也可以是mailto类型的地址。也可以单击右边的文件夹按钮提取URL。这里输入“mailto:NetBook@”。 在【方法】下拉列表框中，可以设置表单数据发送的步骤，选择POST(发送)选项，表明将表单数据发往服务器时，进行POST请求。 5.1 创 建 表 单 5.1 创 建 表 单 5.1 创 建 表 单 5.2 添加表单对象 5.2.1 添加文本域 5.2.2 添加表单按钮 5.2.3 添加图像域 5.2.4 添加单选按钮 5.2.5 添加复选框 5.2.6 添加列表框 5.2 添加表单对象 表单中包含多种对象，对象有时候也称作控件。例如：文本框用于输入文字；按钮用于执行标准任务，提交、重新设置表单内容或完成自定义的功能；复选框用于在多个选项中选择多项；单选按钮用于在多个选项中选择其一；列表框显示选项列表等。这些对象同常见的Windows应用程序非常相似。这一节将讲述如何在表单域中添加表单对象。 在创建好表单域之后，就可以在其中添加表单对象。用户可以利用菜单来添加表单对象，也可以利用表单【插入】面板来添加表单对象。打开【插入】面板上的下拉列表，选择【表单】，这时就会显示如图5.5所示的表单【插入】面板。 如果希望删除表单对象，可以首先选中表单对象，然后按Delete键。表单对象与普通文本一样，可以进行各种编辑操作，如复制、剪切和粘贴等。 5.2 添加表单对象 5.2.1 添加文本域 可以利用表单创建网站的用户登录系统，在登录系统中主要的表单对象是文本域和提交按钮。文本域是一个通称，它代表的控件可以是单行的文本框、单行的密码框或多行的文本编辑区。 1. 插入文本域 要往文档中插入文本域，可以先将插入点放在要添加文本域的位置，选择【插入】|【表单】|【文本域】命令，如图5.6所示，或单击如图5.5所示的表单【插入】面板上的【文本域】按钮。 2