第12章 旅游网站表单网页制作

Dreamweaver还可以编写用于验证访问者所提供的信息的代码。 例如，可以检查用户输入的电子邮件地址是否包含“@”符号， 或者必须填写的文本域是否包含输入值等。
12.3 创建普通表单网页
创建数据添加页面 创建数据修改页面 创建数据删除页面 创建用户登录页面 使用行为验证表单
12.3.1 创建数据添加页面
五、 Spry验证选择
Spry验证选择构件是一个下拉菜单，该菜单在用户进 行选择时会显示构件的状态（有效或无效）。
在菜单栏中选择【插入】/【表单】/【Spry验证选择】 命令，插入一个Spry验证选择域。
如果要添加菜单项和值，必须选中菜单域，在列表/菜 单【属性】面板中进行设置。
六、 Spry验证复选框
12.5 拓展训练
根据操作要求创建表单网页，效果如图所示。
12.3.2 创建数据修改页面
一、单选按钮
单选按钮代表互相排斥的选择，在某单选按钮组中选择一个按 钮，就会取消选择该组中的所有其他按钮。单选按钮一般以两 个或者两个以上的形式出现，同一组单选按钮的名称都是一样 的。在菜单栏中选择【插入】/【表单】/【单选按钮】命令，将 在文档中插入一个单选按钮，反复执行该操作将插入多个单选 按钮。
CODEPAGE="936"，用于定义在浏览器中显示页内容的代码页为 简体中文（GB2312）。代码页是字符集的数字值，不同的语言 使用不同的代码页。例如，繁体中文（Big5）代码页为950，日 文（Shift-JIS）代码页为932，Unicode（UTF-8）代码页为65001。
二、表单
在页面中插入表单对象时，首先需要插入一个表单区域，然后再 在其中插入各种表单对象。当然，也可以直接插入表单对象，在 首次插入表单对象时，将自动插入表单区域。
12.3.3 创建数据删除页面
一、复选框
复选框允许在一组选项中选择多个选项。每个复选框都是独立 的，必须有一个唯一的名称。在菜单栏中选择【插入】/【表单】 /【复选框】命令，将在文档中插入一个复选框，反复执行该操 作将插入多个复选框。
二、复选框组
使用【插入】/【表单】/【复选框】命令，一次只能插入一个复 选框。在实际应用中，复选框通常是多个同时使用，因此可以 使用【插入】/【表单】/【复选框组】命令一次插入多个复选框。
Spry验证复选框用于显示在用户选择（或没有选择） 复选框时构件的状态。
在菜单栏中选择【插入】/【表单】/【Spry验证复选 框】命令，插入一个Spry验证复选框。
七、 Spry验证文本区域
Spry验证文本区域用于在输入文本段落时显示文本的状态。
在菜单栏中选择【插入】/【表单】/【Spry验证文本区域】命 令，插入一个Spry验证文本区域。
三、 Spry验证确认
Spry验证确认主要用于设置在输入确认密码时显示文 本的状态。
在菜单栏中选择【插入】/【表单】/【Spry验证确认】 命令，在单元格内中插入Spry验证确认密码域。
四、 Spry验证单选按钮组
Spry验证单选按钮组用于对所选内容进行验证，可强 制从组中选择一个单选按钮。
在菜单栏中选择【插入】/【表单】/【Spry验证单选 按钮组】命令，打开【Spry验证单选按钮组】对话框， 进行参数设置即可。
12.3.4 创建用户登录页面
一、文件域 通过文件域用户可以浏览到其计算机上的某个文件并将该文件 作为表单数据上传。必须要有服务器端脚本或能够处理文件提 交操作的页面，才可以使用文件上传域。在菜单栏中选择【插 入】/【表单】/【文件域】命令，将在文档中插入一个文件域。
二、跳转菜单
使用跳转菜单可以插入一个菜单，其中的每个选项都与URL关 联。在用户选择一个选项时，它们会重跳转到关联的 URL。在 菜单栏中选择【插入】/【表单】/【跳转菜单】命令，将打开 【跳转菜单】对话框，根据需要添加菜单项。
12.4.2 创建用户注册页面
一、 Spry验证文本域
Spry验证文本域主要用于设置在输入文本时显示文本 的状态。在菜单栏中选择【插入】/【表单】/【Spry 验证文本域】命令，在单元格中插入一个Spry验证文 本域。
二、 Spry验证密码
Spry验证密码主要用于设置在输入密码文本时显示文 本的状态。在菜单栏中选择【插入】/【表单】/ 【Spry验证密码】命令，在单元格内中插入Spry验证 密码域。
在菜单栏中选择【插入】/【表单】/【列表/菜单】命令，插入一 个列表/菜单域。
五ቤተ መጻሕፍቲ ባይዱ隐藏域
隐藏域主要用来储存并提交非用户输入信息，如用户注册时间、 文章发表时间、发表文章的用户等，隐藏域在网页中一般不显现。
在菜单栏中选择【插入】/【表单】/【隐藏域】命令，插入一个 隐藏域。
六、按钮和图像域
按钮对于表单来说是必不可少的，它可以控制表单的操作。使用 按钮可以将表单数据提交到服务器或者重置该表单。
12.2 认识Web表单
在Dreamweaver CS5中，表单输入类型称为表单对象。表单对 象是允许用户输入数据的机制。每个文本域、隐藏域、复选框 和选择（列表/菜单）对象必须具有可在表单中标识其自身的唯 一名称，表单对象名称不能包含空格或特殊字符，可以使用字 母数字字符和下划线的任意组合。设计表单时，要用描述性文 本来标记表单域，以使用户知道他们要回答哪些内容。例如， “请输入您的用户名”表示请求输入用户名信息。
跳转菜单实际上由一个选择域和一个按钮组成，因此如果要更 改链接文件的打开位置或者添加或更改菜单选择提示，最简单 的方法就是，选择菜单域并单击【属性】面板的【列表值】按 钮进行编辑。如果要修改按钮上的文字，可以选择该按钮，然 后在【属性】面板中进行修改相关属性。
12.4 创建Spry验证表单网页
认识Spry验证表单 创建用户注册页面
一、创建ASP网页
在菜单栏中选择【文件】/【新建】命令，打开【新建文档】对话 框，依次选择【空白页】/【ASP VBScript】/【无】选项。
查看该网页源代码，可以发现第1行是如下代码。
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
其中，LANGUAGE="VBSCRIPT"，用于声明该ASP动态网页当 前使用的编程脚本为VBSCRIPT。当使用该脚本声明后，该动态 网页中使用的程序都必须符合该脚本语言的所有语法规范。如果 使用JAVASCRIPT脚本语言创建ASP动态网页，那么声明代码中 脚本语言声明项应该修改为LANGUAGE="JAVASCRIPT"。
12.4.1 认识Spry验证表单
在制作表单页面时，为了确保采集信息的有效性，往 往会要求在网页中实现表单数据验证的功能， Dreamweaver CS5提供了7个Spry验证表单对象。Spry 验证表单对象与普通表单对象最简单的区别就是， Spry验证表单对象是在普通表单的基础上添加了验证 功能，读者可以通过Spry验证表单对象的【属性】面 板进行验证方式的设置。这就意味着Spry验证表单对 象的【属性】面板是设置验证方面的内容的，不涉及 具体表单对象的属性设置。如果要设置具体表单对象 的属性，仍然需要按照设置普通表单对象的方法进行。
在菜单栏中选择【插入】/【表单】/【文本区域】命令， 插入一个多行文本域。实际上，文本区域和文本域是可 以通过【类型】选项中的选项进行切换的，文本区域只 是文本域的一种特殊形式。【属性】面板中的【行数】， 用于设置多行文本域的域高度。
四、选择（列表/菜单）
在一个滚动列表中显示选项值，用户可以从该滚动列表中选择需 要的选项。
12.1 设计思路
本章制作的“崂山旅游”网站中的表单页面包括数 据添加页面“append.asp”、数据修改页面 “modify.asp”、数据删除页面“delete.asp”、用户注 册页面“reguser.asp”、用户登录页面“login.asp”等。 本章的主要目的就是让读者明白创建表单网页的方 法以及创建ASP网页文件与静态HTML网页文件的 区别，普通表单对象和Spry验证表单对象的区别。
二、单选按钮组
使用【插入】/【表单】/【单选按钮】命令，一次只能插入一个 单选按钮。在实际应用中，单选按钮至少要有两个或者更多， 因此可以使用【插入】/【表单】/【单选按钮组】命令一次插入 多个单选按钮。由于其布局使用换行符或表格，每个单元按钮 都是单独一行，可以根据实际需要进行调整。例如，如果一行 显示3个单选按钮，就可以将它们之间的换行符删除，让它们在 一行中显示。
在菜单栏中选择【插入】/【表单】/【按钮】命令，插入一个按 钮。
在Dreamweaver CS5中，使用图像域可生成图形化按钮，例如 “提交” 或“重置” 按钮。如果使用图像作为按钮图标来执行 任务而不是向服务器提交数据，则需要将某种行为附加到表单对 象上。
在菜单栏中选择【插入】/【表单】/【图像域】命令，插入一个 图像域。
在菜单栏中选择【插入】/【表单】/【表单】命令，插 入一个表单区域。
三、文本域
文本域是可以输入文本内容的表单对象。在Dreamweaver CS5中 可以创建一个包含单行或多行的文本域，也可以创建一个隐藏用 户输入文本的密码文本域。
在菜单栏中选择【插入】/【表单】/【文本域】命令， 插入一个文本域。
Dreamweaver CS5 网页制作基础教程
第12章 旅游网站表单网页制作
本章介绍在Dreamweaver CS5中创 建表单网页的基本方法。
学习目标
了解表单的基本概念和表单对象。 掌握创建ASP网页文件的方法。 掌握插入和设置普通表单对象的方法。 掌握使用行为验证表单的方法。 掌握插入和设置Spry验证表单对象的方法。