网页设计与制作 第13章 表单.ppt

第13章 表单 本章导读 本章主要介绍如何在网页中使用表单 第一 二节介绍了关于表单对象和表单域的基本知识 第三节以实例的形式详细展示了如何使用每个表单对象 最后制作了一个综合的表单实例 本章要点 表单对象表单域表单对象应用实例制作注册表单 使用表单可以收集来自用户提交的各类信息 它是网站管理者与浏览者之间沟通的重要途径 通过表单收集和对用户反馈意见的分析 作出科学的和合理的决策 是一个网站成功的重要因素 有了表单 网站不仅是信息提供者 同时也是信息收集者 充分体现了网站的动态和交互效果 真正体现了用户与网站交互的目的 表单的通常应用是调查表 订单和搜索界面等 表单有两个重要的组成部分 一是描述表单的HTML源代码 二是用于处理用户在表单中输入的信息的服务器端应用程序或客户端脚本等 所有的表单元素放到表单域中才会有效 因此制作表单页面的第一步是创建表单域 13 1表单对象 在Dreamweaver8中 表单输入类型称为表单对象 表单可以包含标准对象 如文本域 按钮 图像域 复选框 单选按钮 列表菜单 文件域等 在菜单栏选择 插入 表单 选项 切换到 表单 插入栏 在插入栏中单击要插入的对象类型按钮或者将其拖入到文档窗口中 如图1所示 图1 在图1中 由左边第一个图标开始 分别代表表单域 文本字段 隐藏域 文本区域 复选框 单选按钮 单选按钮组 列表 菜单 跳转菜单 图像域 文本域 按钮 标签 字段集 下面将详细介绍各个表单对象的使用 13 2创建表单域 构成表单文档的图片 文本等元素必须处于表单区域内 这样才会被确认为表单文档 为了使文档能够顺利运行 首先要制作表单文档的框架 即表单区域 由此可见 要先设置表单文档 然后再插入构成元素 要在网页中创建表单文档 可以选择菜单命令 插入 表单 表单 或者选择 插入 栏中的 表单 选项卡 在 表单 选项卡中单击 表单 按钮 将在文档中插入一个表单 如图2所示 图2 要设置表单属性 可以先选中表单 然后选择 窗口 属性 命令来显示表单 属性 面板 如图3所示 图3 属性 面板中的各个选项参数含义为 1 表单名称 用于输入表单的名称 在同一个文档中表单的名称必须唯一 2 动作 用于指定处理该表单的动态页或者脚本路径 可以是HTTP类型的地址或者mailto类型的地址 3 目标 若要使链接的文档出现在当前窗口或者框架以外的其他位置 可以从 属性 面板中的 目标 下拉列表中选择一个选项 4 类 用于指定用于该表单的CSS样式 5 方法 用于选择需要设置表单数据的发送方法 包含3个选项 6 MIME类型 用于指定对提交给服务器进行处理的数据使用MIME编码类型 13 3使用表单对象 表单由文本字段 传送按钮 单选按钮等表单对象组成 当访问者将信息输入表单并单击 提交 按钮时 这些信息将被发送到服务器 服务器端脚本或应用程序在该处对这些信息进行处理 并且通过将请求信息发送回用户 基于该表单内容执行一些操作来进行响应 因此表单样式文档的学习是进行网页编程的基础 13 3 1创建文本域 在Dreamweaver8中 可以使用 文本字段 和 文本区域 两种方法来创建文本域 文本域包括 单行 多行 和 密码 3种类型 以适应不同情况下的需要 文本域在网页中的主要作用是输入如用户名 密码等相关信息 在网页中创建文本域的具体步骤如下 1 选择 插入 工具栏中的 表单 选项卡 在 表单 工具栏中单击 文本字段 按钮 将在文档中创建一个单行的文本区域 如图4所示 图4 2 设置文本区域属性 先单击文档中的文本域 然后选择菜单命令 窗口 属性 以显示其 属性 面板 如图5所示 图5 属性 面板中的各个选项参数含义为 1 文本域 用于输入文本域的名称 2 字段宽度 指定在文本字段栏中能够显示的最多字数 用于设置文本字段的长度 3 类型 指定在文本字段中可以输入的最多字数 4 类 用于应用CSS样式中的类 5 行数 用来限制文档的行数 6 换行 用于指定多行文本的换行方式 其中包括4个选项 选择 默认 选项 则使用默认的自动回行的方式 选择 关 选项 当文本域中的文本超出文本域的宽度时 则会自动为文本域添加水平滚动条来浏览文本 选择 虚拟 选项 当文本域中的文本超出文本域的宽度时 会自动按照文本域的宽度进行回行符号 选择 实体 选项 则当文本域中的文本超出文本域的宽度时 会自动按照文本域的宽度进行回行 这种回行是物理行为 在实际发送的行数中 文本中相应的位置被添加回行符号 7 初始值 用于输入文本域中默认状态下显示的文本 13 3 2创建隐藏域 在浏览器中不被显示出来的文本域主要是用来实现浏览器和服务器后台隐藏数据的交换信息 在提交表单时 该域中存储的信息将一起被发送到服务器 选择菜单命令 插入 表单 隐藏域 将在文档中创建一个隐藏域 如图6所示 图6 要设置隐藏域 可以单击选择文档中的隐藏域 然后再选择 窗口 属性 命令 就可以显示隐藏域的 属性 面板 如图7所示 图7 属性 面板中的各个选项参数含义为 1 隐藏区域 指定隐藏域的名称 默认为hiddenField 2 值 设置要为隐藏域指定的值 该值将在提交表单时传递给服务器 13 3 3创建文件上传域 通过文件上传域 用户可以实现将计算机上的文件 如文档或图形文件 上传到服务器 文件域的外观与其他文本与类似 只是文本域还包含一个 浏览 按钮 用户可以手动输入要上传的文件的路径 也可以使用 浏览 按钮定位并选择该文件 选择菜单命令 插入 表单 文件域 将会在文档中创建一个文本上传域 如图8所示 图8 单击文件域 然后单击工作区域下的属性标签 就可以看到文件域的 属性 面板 如图9所示 面板中各个参数的含义与文本域相同 图9 13 3 4创建复选框 复选框是预定义选择对象的表单对象 利用这样的表单对象可以限制访问者填写的内容 并且有利于信息的统计 选择 插入 表单 复选框 命令 将在文档中创建一个复选框 如图10所示 图10 要设置复选框的属性 可以先单击复选框 然后执行 窗口 属性 命令 以显示复选框 属性 面板 如图11所示 图11 属性 面板中各个参数的含义如下 1 复选框名称 用于输入复选框的名称 2 选定值 用于输入复选框选中后控件的值 3 初始状态 用于设置复选框在文档中的初始状态 13 3 5创建单选按钮及单选按钮组 单选按钮是预定义选择对象的表单对象 单选按钮组是单选按钮的组合 当需要对不同的单选按钮进行选择时 为了使不同组之间互不干涉 即需要使用单选按钮组 选择菜单命令 插入 表单 单选按钮 如图12所示 属性 面板中的参数含义和复选框的相同 图12 要使用单选按钮组 可以执行菜单栏 插入 表单 单选按钮组 如图13所示 图13 对话框中各个参数的含义如下 1 名称 用于指定单选按钮组的名称 2 和 用于增减单选按钮 3 标签 左边列为按钮的Label标签 4 值 右边列是按钮的值 13 3 6创建列表和菜单 列表和菜单是比较常用的两个表单 其优点是在有限的空间为用户提供多个选项 列表提供一个滚动条 允许访问者浏览多个选项并进行多重选择 菜单仅显示一个选项 该项也是活动选项 访问者只能从菜单中选择一项 选择菜单栏中的 插入 表单 列表 菜单 命令 将在文档中创建一个列表和菜单 默认情况下为菜单 如图14所示 图14 若要设置列表菜单属性 可以单击选取文档中的菜单 然后执行菜单栏中的 窗口 属性 命令 显示列表 菜单 属性 面板 如图15所示 图15 面板中各个参数选项的含义如下 1 列表 菜单 用于输入列表 菜单的名称 2 类型 用于选择 列表 菜单 的显示方式 包括 菜单 和 列表 选项 3 高度 用于输入列表框的高度 单位为字符 4 列表值 单击打开列表值对话框 在对话框的左边列为列表和菜单的项目标签 也就是显示在列表中的名称 右边是该项的值 也就是该项要传送到服务器的值 可以通过单击左上角的 按钮来增删项目 通过右上角的上下按钮来改变项目的显示顺序 5 类 指定用于该列表和此案单的CSS样式 6 初始化时选定 用于设置列表或菜单的初始值 13 3 7创建跳转菜单 跳转菜单实际上是一种下拉列表菜单 它通常被用来实现网页之间的跳转 一般在论坛上比较常用 要在网页中创建跳转菜单 可以通过以下方法实现 执行菜单命令 插入 表单 跳转菜单 打开 插入跳转菜单 对话框 如图16所示 图16 对话框中各个参数的含义如下 1 和 增加或减少项目 2 上移或下移按钮 单击上移或下移按钮 可以在菜单列表中上移或下移项 3 菜单项 菜单列表中显示所有项 4 文本 在 文本 文本框中 为菜单项输入要在菜单列表中显示的文本 5 选择时 转到URL 单击文件夹图标并通过浏览找到要打开的文件 或者在文本框中输入该文件的路径 6 菜单名称 输入菜单项的名称 7 选项 选中 选项 下的 菜单之后插入前往按钮 复选框 可添加一个 前往 按钮 而非菜单选择提示 如果要使菜单选择提示 应选中 选项 下的 更改URL后选择第一个项目 复选框 如果用户要编辑跳转菜单 可以在工作区域中选择跳转菜单 然后执行菜单栏中的 窗口 属性 命令 在打开的 属性 面板中设置跳转菜单 它的设置与菜单 列表属性设置相似 13 3 8创建文本表单按钮 表单制作好以后 就要把表单提交给服务器 这就需要文本表单按钮来完成表单制作的最后一步 另外 如果对输入的值不满意 可以插入一个重置按钮重新在表单中设置数据 执行 菜单 表单 按钮 命令来插入表单按钮 如图17所示 图17 要设置 提交 按钮属性 可以单击选取 提交 按钮 然后执行菜单栏命令 窗口 属性 打开其 属性 面板 如图18所示 图18 面板中个选项参数含义如下 1 按钮名称 用于输入按钮名称 2 值 用于设置按钮标签的文本 3 提交表单 单选按钮 将当前按钮设置为一个提交表单类型的按钮 4 无 单选按钮 不能对当前按钮设置行为 5 重设表单 单选按钮 将当前按钮设置为一个复位类型的按钮 13 3 9创建图形提交按钮 在网页中除标准表单提交按钮以外 还有图形提交按钮 采用图形提交按钮一般可以增强网页的美观效果 如果要将某个JavaScript行为附加到该按钮 可以先选择该图形 然后在 行为 面板中选择行为 这个在其他的章节将会介绍到 在网页中插入图形提交按钮的步骤如下 1 执行菜单命令 插入 表单 图像域 弹出如图19所示的 选择图像源文件 对话框 图19 2 在 选择图像源文件 对话框中选择一幅图像 单击 确定 按钮 在网页中插入一幅图像 3 在工作区中选中图像 然后执行菜单栏中的 窗口 属性 命令 打开其 属性 面板 如图20所示 图20 13 4制作注册表单实例 1 选择菜单命令 插入 表单 表单 如图21所示 将插入一个表单 图21 2 将光标定位于表单内 执行菜单命令 插入 表格 弹出如图22所示的对话框 在对话框中设置行数为6 列数为1 表格宽度为 380 图22 如图23所示为插入的表格 下一步将插入表单对象 图23 3 在表格的第1行输入 用户注册系统 并设置相应的格式 如图24所示 图24 4 把光标定位于表格的第2行 选择菜单命令 插入 表单 文本域 弹出如图13 25所示的对话框 在 标签文字 文本框中输入 姓名 然后选中 无标签标记 和 在表单项前 单选按钮 并单击 确定按钮 如图25所示为插入的文本域 图25 如图26所示为插入的文本域 图26 5 重复第 4 步的操作 分别插入 密码 确认密码 邮件 四个文本域 并设置相应的格式 操作完毕如图27所示 图27 6 选择菜单栏的 插入 表单 按钮 命令 在弹出 输入标签辅助功能属性 对话框中 选中 无标签标记 和 在表单项前 单选按钮 然后单击 确定 即可插入一个按钮 如图28所示 图28 7 重复第6步 再插入一个按钮 然后单击选中第1个按钮 在该按钮的属性面板中 将其