Dreamweaver cs6入门与提高实例教程课件Dreamweaver cs6入门与提高实例教程课件第9章应用表单

9.3 处理表单
一个完整的表单应该有两个重要组成部分：一是含有表单和表单 元素的网页文档，另一个是用于处理用户输入的信息的服务器端应用 程序或客户端脚本。因此，若要在网页中实现信息的真正交互，仅在 文档中创建表单及表单对象是不够的，还必须使用脚本或应用程序来 处理相应的信息。通常这些脚本或应用程序由<form>标记中的action 属性指定。如果需要完成的操作比较简单，可以放在客户端进行。
一般而言，当可用的页面空间非常小的时候，使用下拉菜单；当需要控制显 示的选项数时，通常使用滚动列表。
9.1.4 跳转菜单
跳转菜单的静态外观类似于下拉菜单，但它们的本质功能却是完全不同的。 跳转菜单一般用于选择一个网页地址，浏览器将会自动跳转到指定的页面。 这项功能特别适合于友情链接、导航系统等。
隐藏域占位符
在属性设置面板中设置隐藏域的参数值。 “隐藏区域”：用于设置隐藏域的名称。该名称可以被脚本或程序所引用。 “值”：用于设置隐藏域的参数值。该值将在提交表单时传递给服务器。
9.2 使用Spry表单验证控件
在Dreamweaver CS6中，Adobe预制了一系列表单验证构件（validation widgets），例如，Spry验证文本域、Spry验证文本区域、Spry验证密码、 Spry验证确认、Spry验证选择、Spry验证复选框和Spry验证单选按钮组等， 可以帮助用户更加轻松快捷地验证表单数据、构建AJAX页面。
Spry验证选择构件与列表/菜单相似，是一个下拉菜单。其中，“焦 点状态”表示当用户单击该选择构件时的状态。
Spry 验证复选框构件是 HTML 表单中的一个或一组复选框。例如本 例中，表单要求用户至少选择一项，但不能多于两项。如果用户没有 进行选择，或选择的项多于两项，则该构件会自动返回一条消息，声 明不符合最小选择数或最大选择数要求。
会使用POST方法将表单提交给指定的动作进一步处理，通常是服务器端程 序的URL或者一个mailto地址；“重置”按钮会清除表单中所有的域，以便重 新输入表单数据；“无”按钮通常用于执行一些脚本操作。
9.1.7 图像域
“图像域”可以替代“提交”按钮来执行将表单数据提交给服务器端程序的 功能。而且使用图像域可以使文档更为美观。
在图像域代码末尾加上“value=Submit”，这时图像域代码成为：<input name=“imageField” type=“image” src=“mail.gif” width=“23” height=“16” border=“0” value=“Submit”>。
9.1.8 隐藏域
“隐藏域”是一种在浏览器上不显示的表单对象，利用“隐藏域”可以实现浏 览器同服务器在后台隐藏地交换信息。“隐藏域”可以为表单处理程序提供 一些有用的参数，而这些参数是用户不关心的，不必在浏览器中显示。
return false;
}
if(document.f1.password.value==""){ alert("密码不能为空！"); return false; } return true; }
右击“确定”按钮，在弹出上下文菜单中执行“编辑标签”命令，弹出如图 所示的“标签编辑器”对话框。
单击“事件”前面的加号展开事件，选中onClick，这时标签编辑对话框右边 将显示Input-onClick文本框。
Adobe公司的AJAX框架Spry能与Dreamweaver无缝地整合，设计的宗旨就是 标记尽量简单，JavaScript的使用尽量少，直接用拖拉的方式完成程序代码的 编写。
Spry验证文本域与文本域相似，不同的是，网页设计者不需要为Spry 验证文本域编写验证代码，只要在属性面板中设置好其类型、格式、 预览状态和验证的事件，即可自动验证用户输入的数据是否合法。
执行“查看”/“文件头内容”命令显示文档窗口的头部。在插入栏单击“常用”面板中 的插入脚本图标。
在 “脚本”对话框的“语言”分类中选择“JavaScript”，在“内容”文本框输入以下
JavaScript程序段：
function checkForm(){
if(.value==""){ alert("用户名不能为空！");
Spry 验证文本区域构件是一个文本区域，该区域在用户输入文本时 显示文本的状态有效或无效。如果文本区域是必填域，而用户没有输 入任何文本，该构件将返回一条消息，声明必须输入值。
默认情况下，用 Dreamweaver 插入的所有验证选择构件都要求用户在将构 件发布到 Web 页之前，选择具有相关值的菜单项。但是，也可以禁用此选项， 即取消选择“不允许空值”选项。
当用户选择的单选按钮与none或 invalid 关联时，指定的值也相应地注册为 none或 invalid。如果用户选择具有空值的单选按钮，则浏览器将返回“请进 行选择”的错误消息。如果用户选择具有无效值的单选按钮，则浏览器将返 回“请选择一个有效值”的错误消息。
注意：单选按钮本身和单选按钮组构件都必须分配有 none 或 invalid 值，中使用单选框和复选框可以设置预定义的选项。 单选框和复选框的区别在于它们的运作方式不同。每个复选框都是独立的，
点击选中只是在切换单个选项的选中与否，因此可以选中多个选项。而单选 框所有的待选项是一个整体，对于选项的选择具有独占性，也就是说，在单 选框的待选项中，只允许有一个选项处于被选中状态。
注意：由于单选按钮是以组为单位的，因此 所有的单选按钮都必须拥有同一个名称，并且其 值均不能相同。
注意：与单选按钮不同， 由于每一个复选框都是独立的， 因此应为每个复选框设置唯一 的名称。
9.1.6 按钮
表单中的按钮对象是用于触发服务器端脚本处理程序的工具。 HTML提供了三种基本类型的按钮：提交、重置、无。其中，“提交”按钮
在Input-onClick文本框中输入事件处理代码“return checkForm()”后单击“确 定”按钮关闭对话框。
9.4 实例制作之制作留言板
插入可编辑区域
页面预览效果
在属性面板上设置其ID为f1，动作为mailto:webmaster@。然后在 表单中插入一张表格，并设置表格的背景颜色，输入相关文本，最终的效果如图 所示。
设置表格、文本
通过测试会发现在表单中没填任何数据，或填的数据无效，单击“提交”按钮后仍然
会发送邮件。这是网页设计者所不愿看到的，为了解决这个问题，可以用JavaScript脚本语 言来对表单各对象的值进行有效性检查。以下的步骤增加这方面的功能。
如果选中了“无效值”，且在其后的文本框中指定了无效值，则当用户选择 与该值相关的菜单项时，该值将注册为无效。例如，如果指定 -1 是无效值， 并将该值赋给某个选项标签，则当用户选择该菜单项时，该构件将返回一条 错误消息。
在单选按钮的属性面板中为单选按钮分配了一个选定值之后，若要创建具有 空值的单选按钮，则单击验证单选按钮组构件的蓝色选项卡之后，在“选定 值”文本框中键入 none。若要创建具有无效值的单选按钮，则在“选定值” 文本框中键入 invalid。
第9章 应用表单
9.1.3 下拉菜单与列表
下拉菜单和列表都能够给浏览者以列表的形式提供一系列的预设选择项。这 对于美化版面和空间有限的页面来说，是非常不错的选择。
在属性面板中创建下拉菜单和滚动列表的方式是一样的，但是下拉菜单和滚 动列表却提供了不同的功能。下拉菜单通过下拉方式显示多个可选项，一般 只允许选择一个可选项。列表通过类似浏览器滚动条的滚动框显示多个可选 项，并可以自定义滚动框的行高，允许浏览者选择一个或多个可选项。