网页设计与制作 Dreamweaver CS6 标准教程 第13章 表单 网页设计与制作 Dreamweaver CS6 标准教程

本章学习的主要内容： 1. 使用表单 2. Spry验证

13.1 使用表单 表单（Form）技术可以实现浏览者同服务器之 间的信息交互和传递。目前表单主要应用在用 户注册、论坛登录等。 一个表单由三个基本组成部分：表单标签、表 单域和表单按钮。 表单标签包含了处理表单数据所用的URL地址以 及数据提交到服务器的方法。表单域包含了文 本域、文本区域、隐藏域、复选框、单选按钮、 选择列表和文件域等。表单按钮包括提交按钮 和复位按钮，确定将数据传送到服务器上或者 重新输入。

13.1 使用表单 13.1.1 课堂案例-办公用品公司 13.1.2 表单及属性 13.1.3 文本域 13.1.4 单选按钮和单选按钮组 13.1.5 复选框和复选框组 13.1.6 选择列表/菜单 13.1.7 跳转菜单 13.1.8 文件域 13.1.9 图像域 13.1.10 提交和重置按钮

13.1.1课堂案例-办公用品公司 案例学习目标：学习表单的基本操作。 案例知识要点：选择菜单【插入】|【表单】或使 用【插入】面板【表单】选项卡创建表单。在表 单中，插入各种表单元素，并利用【属性】面板 进行设置。 素材所在位置：光盘/案例素材/ch13/课堂案例- 办公用品公司。 案例效果如图13-1所示。

13.1.2 表单及属性 在网页中创建表单的操作步骤如下。 将光标定位在要插入表单的位置上。 选择【插入】|【表单】|【表单】，或单击 【插入】面板【表单】选项卡中的【表单】按 钮，或将【表单】面板中的【表单】按钮拖入 网页文档窗口。 在网页中创建了由红色虚线框所确定的表单 区域。

13.1.3 文本域 文本域用来接收用户输入的信息，它包括单行 文本域、文本区域和密码域三种类型。 1．单行文本域 2．文本区域 3．密码域 4．文本域属性

13.1.4 单选按钮和单选按钮组 1．单选按钮 2．单选按钮组

13.1.5 复选框和复选框组 1．复选框 2．复选框组

13.1.6 选择列表/菜单 选择列表/菜单用来创建一个列表或菜单来显示一组选 项，并且可以设置允许单选或多选。插入选择列表/菜 单的操作步骤如下。 将光标置于要插入选择列表/菜单的位置。 选择菜单【插入】|【表单】|【选择（列表/菜单）】 或单击【插入】面板【表单】选项卡中的【选择（列表 /菜单）】按钮 插入一个选择（列表/菜单。 选中插入的选择列表/菜单，单击【属性】面板中 【列表值…】按钮 ，在【列表值】对话框中添加列表值， 如图13-37所示。单击【确定】按钮，效果如图13-38 所示。 根据需要修改【属性】面板中其他设置，如图13-39 所示。

13.1.7 跳转菜单 跳转菜单可以将某个网页URL与菜单列表中的选 项建立关联，用户从跳转菜单中选择一个菜单项 就会打开相关联的网页。 在网页中插入跳转菜单的操作步骤如下。 将光标置于要插入跳转菜单的位置。 选择菜单【插入】|【表单】|【跳转菜单】或单 击【插入】面板【表单】选项卡中的【跳转菜单】 按钮 ，打开【插入跳转菜单】对话框，如图13- 42所示，在【文本】项中输入菜单项内容，在【选 择时，转到URL】选项中输入要跳转到的网页URL 地址，单击【确定】按钮，效果如图13-43所示。

13.1.8 文件域 文件域由一个文本框和一个显示“浏览”字样 的按钮组成，它的作用是使访问者能浏览到本 地计算机上的某个文件，并将该文件作为表单 数据上传。 在网页中插入文件域的操作步骤如下。 将光标置于要插入文件域的位置。 选择菜单【插入】|【表单】|【文件域】或单 击【插入】面板【表单】选项卡中的【文件域】 按钮 插入一个文件域，如图13-44所示。 选中文件域，在【属性】面板中进行相应设 置，如图13-45所示。

13.1.9 图像域 通过插入图像域可以使用漂亮的图像按钮或根 据网站风格制作按钮来代替普通按钮。 在网页中插入图像域的操作步骤如下。 将光标置于要插入文件域的位置。 选择菜单【插入】|【表单】|【图像域】或单 击【插入】面板【表单】选项卡中的【图像域】 按钮 ，打开【选择图像源文件】对话框，如图 13-46所示，并查找到并选择所需的图像，单 击【确定】按钮。 在图像域【属性】面板中进行相应设置，保 存网页文档，如图13-47所示。

13.1.10 提交和重置按钮 按钮能够控制对表单内容的操作，如提交或重 置。要将表单的内容发送到远程服务器上，需 要使用提交按钮；要清除现有表单内容，需使 用重置按钮。 在网页中插入按钮的操作步骤如下。 将光标置于要插入按钮的位置。 选择菜单【插入】|【表单】|【按钮】或单击 【插入】面板【表单】选项卡中的【按钮】按 钮 插入一个按钮，如图13-49所示。 在按钮【属性】面板中设置相应的属性，如 图13-50所示。

13.2 Spry验证 表单在提交到服务器端之前必须进行验证，以确 保输入数据的合法性，如必须输入数据的文本域 是否输入了数据、输入电子邮件的格式是否正确 等。在Dreamweaver中可以通过插入Spry验证构 件来检查表单。 在实际应用中，可以直接使用Spry验证构件创建 表单，即创建了表单，也完成了对表单的验证。

13.2 Spry验证 13.2.1 课堂案例-网页设计 13.2.2 Spry验证文本 13.2.3 Spry验证密码

13.2.1课堂案例-网页设计 案例学习目标：学习Spry验证的基本操作。 素材所在位置：光盘/案例素材/ch13/课堂案例 -网页设计。 案例效果如图13-51所示。

13.2.2 Spry验证文本 Spry验证文本域用于验证文本域表单对象的有效 性。与普通文本域的区别在于它可以对用户输入 的信息进行验证。

13.2.3 Spry验证密码 Spry验证密码用于密码类型的文本域的验证，例 如要求用户输入的密码最少必需几位、必需几位 大写字母、必需几位数字等。 在网页中插入Spry验证密码的操作步骤如下。 将光标置于要插入Spry验证密码的位置。 选择菜单【插入】|【表单】|【Spry验证密码】或 单击【插入】面板【表单】选项卡中的【Spry验证 密码】按钮 。 完成【输入标签辅助功能属性】对话框设置，然 后单击【确定】，即可插入Spry验证密码，如图 13-70所示。

13.2.4 Spry验证复选框 Spry验证复选框是HTML表单中的一个或一组复选 框，该复选框在用户选择（或没有选择）复选框 时会显示相应状态（有效或无效）。 在网页中插入Spry验证复选框的操作步骤如下。 将光标置于要插入Spry验证复选框的位置。 选择菜单【插入】|【表单】|【Spry验证复选框】 或单击【插入】面板【表单】选项卡中的【Spry验 证复选框】按钮 。 完成【输入标签辅助功能属性】对话框设置，然 后单击【确定】，即可插入Spry验证复选框，如图 13-72所示。

13.2.5 Spry验证单选按钮组 Spry验证单选按钮组用来验证单选按钮组的选中 情况。

13.2.6 Spry验证确认 Spry验证确认是一个文本域或密码域，当用户 输入的值与同一表单中类似域的值不匹配时， 将显示无效状态。

13.3 练习案例 13.3.1练习案例-咖啡 13.3.2练习案例-儿童培训

13.3.1练习案例-咖啡 案例练习目标：练习表单的基本操作。 案例操作要点： 1． 在页面中部已经插入一个表单和一个内嵌表 格，继续完成餐厅预订信息的表单。各单元格插 入表单元素并设置如下。 预订时间分为年、月、日以及中午、晚上选项和 具体时间，均采用选择（列表/菜单）； 就餐人数分为成人和儿童两类，均采用文本域， 字符宽度为4； 订餐内容分为小点心、正餐、酒水、水果和其他， 采用复选框； 订餐类型分为家宴、商宴和婚宴，采用单选按钮；

13.3.1练习案例-咖啡 其他说明采用文本域，字符宽度为50，行数为6； 顾客名称采用文本域，字符宽度为10； 性别分为男和女，采用单选按钮组； 手机电话采用文本域，字符宽度为25； 电子邮件采用文本域，字符宽度为25。 提交按钮和重置按钮采用图像域，其ID分别设为 submit和Reset。 2．在页面右下角插入第二个表单并在其中添加一 个跳转菜单，列表值为：--新闻链接--、搜狗、 新浪和凤凰以及相应网站网址，勾选“更改URL后 选择第一项目”。 素材所在位置：光盘/案例素材/ch13/练习案例- 咖啡，效果如图13-79所示。

13.3.2练习案例-儿童培训 案例练习目标：练习Spry验证的基本操作。 案例操作要点： 小朋友姓名采用Spry验证文本域，最小字符数 为4，勾选onBlur； 性别采用Spry验证单选按钮组，必填； 兴趣与特长采用Spry验证复选框，最小选择数 为1；

13.3.2练习案例-儿童培训 年龄采用Spry验证选择，列表值分别为四岁、 五岁、六岁、七岁，对应值为4、5、6、7， 不允许空值； 素材所在位置：光盘/案例素材/ch13/练习案 例-儿童培训，效果如图13-80所示。