《Dreamweaver cs5中文版入门与提高实例教程第9章》由会员分享，可在线阅读，更多相关《Dreamweaver cs5中文版入门与提高实例教程第9章（18页珍藏版）》请在金锄头文库上搜索。
1、第9章 表单的应用,本章重点 本章将介绍表单的基本知识及使用方法，内容包括：表单的创建，各种表单对象的添加及属性设置。这些表单对象包括文本域、单选框、复选框、文件域、按钮、图像域、列表/菜单、跳转菜单、隐藏域、Spry表单验证构件，以及表单的简单处理等。其中文本域、单选框、复选框、按钮是表单常用的基本对象，要重点掌握。 学习目的 通过本章的学习，您可以掌握： 插入表单和设置表单属性的方法。 插入各种表单对象和设置各种表单对象属性的方法。 利用电子邮件简单地处理提交的表单。,9.1 创建表单,执行“插入”/“表单”/“表单”菜单命令。,提示：表单标记可以嵌套在其他HTML标记中，其他HTML标记
2、也可以嵌套在表单中。但是，一个表单不能嵌套在另一个表单中。,选择“窗口”/“属性”命令，打开表单属性面板，对表单参数进行设置。,技巧：不要使用GET方法发送长表单。URL的长度限制在8192个字符以内。如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。而且，在发送机密用户名和密码、信用卡号或其他机密信息时，用GET方法传递信息不安全。,9.2.1 文本字段和文件域,“文本字段”即网页中供用户输入文本的区域，“文本字段”分为单行、多行和密码三种类型，可以接受任何类型的文本、字母或数字。 文件域与单行文本字段非常相似，不同的是文件域多了一个“浏览”按钮，用于浏览选择随表单一起上传
3、的文件。利用文件域的功能，可以将图像文件、压缩文件、可执行文件等本地计算机上的文件上传到服务器上，前提条件是服务器支持文件匿名上传功能。,9.2 表单对象,9.2.2 下拉菜单与列表,下拉菜单和列表都能够给浏览者以列表的形式提供一系列的预设选择项。这对于美化版面和空间有限的页面来说，是非常不错的选择。 在属性面板中创建下拉菜单和滚动列表的方式是一样的，但是下拉菜单和滚动列表却提供了不同的功能。下拉菜单通过下拉方式显示多个可选项，一般只允许选择一个可选项。列表通过类似浏览器滚动条的滚动框显示多个可选项，并可以自定义滚动框的行高，允许浏览者选择一个或多个可选项。 一般而言，当可用的页面空间非常小的
4、时候，使用下拉菜单；当需要控制显示的选项数时，通常使用滚动列表。,9.2.3 跳转菜单,跳转菜单的静态外观类似于下拉菜单，但它们的本质功能却是完全不同的。跳转菜单一般用于选择一个网页地址，浏览器将会自动跳转到指定的页面。这项功能特别适合于友情链接、导航系统等。,9.2.4 单选按钮与复选框,在表单中使用单选框和复选框可以设置预定义的选项。 单选框和复选框的区别在于它们的运作方式不同。每个复选框都是独立的，点击选中只是在切换单个选项的选中与否，因此可以选中多个选项。而单选框所有的待选项是一个整体，对于选项的选择具有独占性，也就是说，在单选框的待选项中，只允许有一个选项处于被选中状态。,注意：由于
5、单选按钮是以组为单位的，因此所有的单选按钮都必须拥有同一个名称，并且其值均不能相同。,注意：与单选按钮不同，由于每一个复选框都是独立的，因此应为每个复选框设置唯一的名称。,9.2.5 按钮,表单中的按钮对象是用于触发服务器端脚本处理程序的工具。 HTML提供了三种基本类型的按钮：提交、重置、无。其中，“提交”按钮会使用POST方法将表单提交给指定的动作进一步处理，通常是服务器端程序的URL或者一个mailto地址；“重置”按钮会清除表单中所有的域，以便重新输入表单数据；“无”按钮通常用于执行一些脚本操作。,9.2.6 图像域,“图像域”可以替代“提交”按钮来执行将表单数据提交给服务器端程序的功
6、能。而且使用图像域可以使文档更为美观。 在图像域代码末尾加上“value=Submit”，这时图像域代码成为：。,9.2.7 隐藏域,“隐藏域”是一种在浏览器上不显示的表单对象，利用“隐藏域”可以实现浏览器同服务器在后台隐藏地交换信息。“隐藏域”可以为表单处理程序提供一些有用的参数，而这些参数是用户不关心的，不必在浏览器中显示。,隐藏域占位符,在属性设置面板中设置隐藏域的参数值。 “隐藏区域”：用于设置隐藏域的名称。该名称可以被脚本或程序所引用。 “值”：用于设置隐藏域的参数值。该值将在提交表单时传递给服务器。,9.2.10 Spry表单验证控件,在Dreamweaver CS5中，Adobe
7、预制了一系列表单验证构件（validation widgets），例如，Spry验证文本域、Spry验证文本区域、Spry验证密码、Spry验证确认、Spry验证选择、Spry验证复选框和Spry验证单选按钮组等，可以帮助用户更加轻松快捷地验证表单数据、构建AJAX页面。 Adobe公司的AJAX框架Spry能与Dreamweaver无缝地整合，设计的宗旨就是标记尽量简单，JavaScript的使用尽量少，直接用拖拉的方式完成程序代码的编写。,Spry验证文本域与文本域相似，不同的是，网页设计者不需要为Spry验证文本域编写验证代码，只要在属性面板中设置好其类型、格式、预览状态和验证的事件，即
8、可自动验证用户输入的数据是否合法。 Spry验证选择构件与列表/菜单相似，是一个下拉菜单。其中，“焦点状态”表示当用户单击该选择构件时的状态。 Spry 验证复选框构件是 HTML 表单中的一个或一组复选框。例如本例中，表单要求用户至少选择一项，但不能多于两项。如果用户没有进行选择，或选择的项多于两项，则该构件会自动返回一条消息，声明不符合最小选择数或最大选择数要求。 Spry 验证文本区域构件是一个文本区域，该区域在用户输入文本时显示文本的状态有效或无效。如果文本区域是必填域，而用户没有输入任何文本，该构件将返回一条消息，声明必须输入值。,默认情况下，用 Dreamweaver 插入的所有验
9、证选择构件都要求用户在将构件发布到 Web 页之前，选择具有相关值的菜单项。但是，也可以禁用此选项，即取消选择“不允许空值”选项。 如果选中了“无效值”，且在其后的文本框中指定了无效值，则当用户选择与该值相关的菜单项时，该值将注册为无效。例如，如果指定 -1 是无效值，并将该值赋给某个选项标签，则当用户选择该菜单项时，该构件将返回一条错误消息。 在单选按钮的属性面板中为单选按钮分配了一个选定值之后，若要创建具有空值的单选按钮，则单击验证单选按钮组构件的蓝色选项卡之后，在“选定值”文本框中键入 none。若要创建具有无效值的单选按钮，则在“选定值”文本框中键入 invalid。 当用户选择的单选
10、按钮与none或 invalid 关联时，指定的值也相应地注册为none或 invalid。如果用户选择具有空值的单选按钮，则浏览器将返回“请进行选择”的错误消息。如果用户选择具有无效值的单选按钮，则浏览器将返回“请选择一个有效值”的错误消息。 注意：单选按钮本身和单选按钮组构件都必须分配有 none 或 invalid 值，错误消息才能正确显示。,9.3 处理表单,一个完整的表单应该有两个重要组成部分：一是含有表单和表单元素的网页文档，另一个是用于处理用户输入的信息的服务器端应用程序或客户端脚本。因此，若要在网页中实现信息的真正交互，仅在文档中创建表单及表单对象是不够的，还必须使用脚本或应用
11、程序来处理相应的信息。通常这些脚本或应用程序由标记中的action属性指定。如果需要完成的操作比较简单，可以放在客户端进行。,在属性面板上设置表单ID为form1 ，动作为mailto:， 方法为POST，编码类型为text/plain,执行“查看”/“文件头内容”命令显示文档窗口的头部。在插入栏单击“常用”面板中的插入脚本图标。 在 “脚本”对话框的“语言”分类中选择“JavaScript”，在“内容”文本框输入以下JavaScript程序段：,function checkForm() if(document.f1.name.value=) alert(用户名不能为空！); return f
12、alse; if(document.f1.password.value=) alert(密码不能为空！); return false; return true; ,通过测试会发现在表单中没填任何数据，或填的数据无效，单击“提交”按钮后仍然会发送邮件。这是网页设计者所不愿看到的，为了解决这个问题，可以用JavaScript脚本语言来对表单各对象的值进行有效性检查。以下的步骤增加这方面的功能。,右击“提交”按钮，在弹出上下文菜单中执行“编辑标签”命令，弹出如图所示的“标签编辑器”对话框。 单击“事件”前面的加号展开事件，选中onClick，这时标签编辑对话框右边将显示Input-onClick文本框。 在Input-onClick文本框中输入事件处理代码“return checkForm()”后单击“确定”按钮关闭对话框。,
