创建表单网页

第第 7 章章 创建表单网页创建表单网页 7 1 任务题目任务题目 灵活运用各种表单域创建表单 7 2 任务导入任务导入 表单是用于实现网页浏览者与服务器 或者说网页所有者 之间信息交互的一种页面 元素 在 WWW 上它被广泛用于各种信息的搜集和反馈 例如 图 7 1 显示了一个用于 进行电子邮件系统登录的表单 通常 一个表单中包含多个对象 有时也称为控件或表单元素 例如用于输入文本的 文本域 用于发送命令的按钮 用于选择项目的单选按钮和复选框 用于显示列表项的列 表框等 图 7 1 用于进行电子邮件系统登录的表单 7 3 任务目标任务目标 1 目的 1 掌握表单的概念 2 掌握表单的类型 3 掌握表单的创建 4 掌握各类表单对象的实际应用范围 2 重点 1 掌握如何在表单网页中插入表单域 2 掌握如何在表单域中插入文本域和文本区域 3 掌握如何在表单域中插入单选按钮 单选 按钮组和复选框 4 掌握如何在表单域中插入列表 菜单 按钮和图像域 3 难点 1 表单对象的属性设置 2 表单对象的灵活运用 7 4 技能目标技能目标 1 使学生具有设计表单页面的能力 2 使学生熟练表单的创建和使用方法 3 使学生熟悉各种表单域的使用和属性设置 7 5 任务讲析任务讲析 7 5 1 实例演练实例演练 问卷调查表问卷调查表 任务一任务一 设计思路设计思路 新建网页 1 在 D 盘创建新文件夹名为 任务 7 1 作为站点文件夹用于存放站内的文档 2 启动 dreamweaverCS3 软件 新建一个文档 命名为 index html 且将该网页保存 在 任务 7 1 文件夹中 页面标题设置为 表单 插入表单域 1 1 如果网页 index html 处于关闭状态 则先打开该网页 然后将光标置于要插入表单 域的位置 2 在 Dreamweaver CS3 主窗口中 单击菜单 插入记录 表单 表单 在光标处 插入一个表单域 3 设置表单域属性 2 将光标置于表单域中并单击鼠标左键 即可看到表单域 属性 面板 4 在表单域中插入定位表格 输入 畅游旅行社调查表 姓名 等提示信息 光标置于表单域中 插入一个 11 行 2 列的表格 且将第一行及最后两行的单元格合 并 表格的 填充 文本框中输入 1 间距 文本框中输入 2 边框 文本框中输 入 5 边框颜色 文本框中输入 FF9900 对齐方式为 居中对齐 然后在表格中 输入提示信息 效果如图 7 2 所示 图 7 2 在表单域中插入定位表格 插入表单控件 3 1 插入单行文本域 插入文本域的过程如下 1 将光标置于 姓名 一行的第二个单元格中 2 单击 表单 插入工具栏中的 文本字段 按钮 弹出 输入标签辅助功能属性 对话框 直接单击 确定 按钮 在光标所在位置插入一个文本域 默认插入的是单行文 本域 3 设置文本域的属性 选中插入的文本域 在 属性 面板中设置文本域的属性 在 字符宽度 文本框中 输入 14 设置文本框中能显示 7 个汉字 14 个字节的长度 属性 面板如图 7 3 所 示 图 7 3 文本域的 属性 面板 以同样的方法 将光标置于 E mail 一行的第二个单元格中 插入单行文本域 文 本域的属性设置是 字符宽度 为 20 最多字符数 为 30 2 插入单选按钮 1 将光标置于 性别 一行的第二个单元格中 2 单击 表单 插入工具栏中的 单选按钮 按钮 弹出 输入标签辅助功能属性 对话框 在 标签文字 文本框输入 男 位置 选中 在表单项后 单选按钮 然后 单击 确定 按钮 在光标所在位置便插入一个单选按钮 以同样的方法插入另一个单选按钮 标签文字 输入为 女 3 设置单选按钮属性 选择刚插入的 标签文字 为 男 的单选按钮 在 属性 面板上设置 选定值 为 man 初始状态 为 未选中 属性 面板如图 7 4 所示 图 7 4 单选按钮的 属性 面板 以同样的方法设置另一个单选按钮 选定值 为 woman 初始状态 为 未 选中 3 插入单选按钮组 使用单选按钮组 可以一次插入一组单选按钮 1 将光标置于 年龄 一行的第二个单元格中 2 单击 表单 插入工具栏中的 单选按钮组 按钮 弹出 单选按钮组 对话框 单击按钮 向单选按钮组中添加新的单选按钮 然后单击 标签 一列的文字 输入新 的内容 可以使用中文 这里分别输入 20 岁以下 20 30 30 40 40 50 50 岁以上 单击 值 一列的文字 输入需要的值 只能使用英文半角字符 这里分 别输入 50 效果如图 7 5 所示 图 7 5 单选按钮组 对话框 3 单击 确定 按钮 在光标所在处插入单选按钮组 将五个单选按钮调整为两行布 局 提示 同一组单选按钮的名称相同 4 插入列表和菜单 1 插入列表的步骤如下 将光标置于 职业 一行的第二个单元格中 单击 表单 插入工具栏中的 列表 菜单 按钮 弹出 输入标签辅助功能属性 对 话框 直接单击 确定 按钮 在光标所在位置便插入列表 菜单 添加列表值 选中刚插入的 列表 菜单 在 属性 面板上的 类型 中选择 列表 单选按钮 然后单击 列表值 按钮 弹出 列表值 对话框 在该对话框中 中间的列 表项中列出了该菜单所包含的所有选项 每一行代表一个选项 项目标签 用来设置每个 选项所显示的文本 值 设置的是选项的值 单击按钮 为列表添加一个新的项目标 签 在此分别添加 教育行业 金融业 保险业 公共事业 自由职业 并 为每个项目标签设定值为 01 05 项目标签添加完成如图 7 6 所示 在 列表值 对话框中单击 确定 按钮 图 7 6 列表值 属性面板 2 插入菜单的步骤如下 将光标置于 地区 一行的第二个单元格中 单击 表单 插入工具栏中的 列表 菜单 按钮 弹出 输入标签辅助功能属性 对 话框 直接单击 确定 按钮 在光标所在位置插入列表 菜单 添加列表值 选中刚插入的 列表 菜单 在 属性 面板上的 类型 中选择 菜单 单选按钮 然后单击 列表值 按钮 弹出 列表值 对话框 单击按钮 为菜单添加 一个新的选项 在此分别添加 北京 上海 大连 天津 并为每个项目标签设 定值为 001 004 项目标签添加完成如图 7 7 所示 在 列表值 对话框中单击 确定 按钮 图 7 7 列表 菜单 中 菜单 的 列表值 属性面板 5 插入复选框 1 将光标置于 你曾游览过哪些景点 一行的第二个单元格中 2 单击 表单 插入工具栏中的 复选框 按钮 弹出 输入标签辅助功能属性 对 话框 在 标签文字 文本框输入 故宫 位置 选中 在表单项后 单选按钮 然后 单击 确定 按钮 在光标所在位置便插入一个复选框 3 设置复选框的属性 选中刚插入的 复选框 在 属性 面板上的 选定值 中输入 no1 当表单被 提交时 被选中复选框的选定值被传递给服务器的应用程序 如图 7 8 所示 图 7 8 复选框的 属性 面板 用同样的方法插入其他 7 个复选框 标签文字 分别是 东方明珠 水立方 周邓纪念馆 长城 海底世界 鸟巢 和 世博园 位置 为 在表单项后 选定值 为 no2 no8 初始状态都设置为 未选中 6 插入多行文本区域 1 将光标置于 你的意见 一行的第二个单元格中 2 单击 表单 插入工具栏中的 文本区域 按钮 弹出 输入标签辅助功能属性 对话框 直接单击 确定 按钮 在光标所在位置插入多行文本域 3 设置多行文本域的属性 字符宽度 文本框中输入 40 行数 文本框中输入 6 换行 下拉列表框 中选择 实体 如图 7 9 所示 图 7 9 多行文本域的属性设置 7 插入表单按钮 将光标置于表格中的倒数第二行 单击 表单 插入工具栏中的 按钮 按钮 即可 在光标处插入一个按钮 选中所插入的按钮 在 属性 面板中设置其属性 值 文本框 中输入 提交 使按钮上显示的文字为 提交 动作 类型选择 提交表单 单选按 钮 如图 7 10 所示 图 7 10 表单按钮的 属性 面板 以同样的方法插入 清除 按钮 在 属性 面板中设置其属性 值 文本框中输入 清除 使按钮上显示的文字为 清除 动作 类型选择 重设表单 单选按钮 8 插入图像域 将光标置于表格的最后一行 单击 表单 插入工具栏中的 图像域 按钮 弹出 选择图像源文件 对话框 在该对话框中选择 光盘 素材 第 7 章 任务 1 image title jpg 然后单击 确定 按钮 即可在光标处插入一个图像域 如图 7 11 所 示 图 7 11 图像域的 属性 面板 至此 一个表单网页就制作完成了 预览效果如图 7 12 所示 图 7 12 调查问卷预览效果 7 5 2 基础知识解析基础知识解析 1 表单域表单域 每个表单由一个表单域和若干个表单控件组成 所有的表单控件要放置在表单域中才 会有效 因此 制作表单页面的第一步是插入表单域 在 Dreamweaver CS3 主窗口中 单击菜单 插入 表单 表单 在光标处可 以插入一个表单域 一个表单域插入到网页中 在编辑窗口中显示为一个红色虚线框 如图 7 13 所示 其他的表单对象必须要放入这个框内才能起作用 如果看不见插入到页面中的标记表单或 的红色虚线区域 可以单击菜单 查看 可视化助理 不可见元素 使红色虚线 可见 图 7 13 表单 2 表单的属性设置 表单的属性设置 在文档窗口中 选中表单轮廓 即可在表单的 属性 面板中对其进行各种属性设置 表单的 属性 面板如图 7 14 所示 图 7 14 表单的 属性 面板 1 表单名称 属性 在 表单名称 文本框中 键入标识该表单的唯一名称 命名表单后 就可以使用脚本语言 如 JavaScript 或 VBScript 引用或控制该表单 如果未命名表单 则 Dreamweaver 使用语法 formn 生成一个名称 并在向页面中添加 每个表单时递增 n 的值 如 form1 2 动作 属性 在 动作 文本框中指定处理该表单的动态页或脚本的路径 可在 动作 文本框中 键入完整路径 也可单击文件夹图标定位到同一站点中包含该脚本或应用程序页的相应文 件夹 3 MIME 类型 属性 如果需要 可以使用 MIME 类型 弹出菜单指定对提交给服务器进行处理的数据使 用 MIME 编码类型 默认设置 application x www form urlencode 通常与 POST 方法 协同使用 如果要创建文件上传域 请指定 multipart form data MIME 类型 4 方法 属性 在 方法 下拉菜单中 选择将表单数据传输到服务器的方法 默认方法使用浏览器的默认设置将表单数据发送到服务器 通常 默认方法为 GET 方法 GET 方法将值附加到请求该页的 URL 中 不要使用 GET 方法发送长表单 URL 的 长度限制在 819 个字符以内 如果发送的数据量太大 数据将被截断 从而导致意外的或 失败的处理结果 POST 方法将在 HTTP 请求中嵌入表单数据 如果您要收集机密用户名和密码 信用 卡号或其它机密信息 POST 方法看起来比 GET 方法更安全 但是 由 POST 方法发送 的信息是未经加密的 容易被黑客获取 若要确保安全性 请通过安全的连接与安全的服 务器相连 5 目标 属性 如果需要 使用 目标 弹出菜单指定一个窗口 在该窗口中显示被调用程序所返回 的数据 如果命名的窗口尚未打开 则打开一个具有该名称的新窗口 目标值如下所示 blank 在未命名的新窗口中打开目标文档 parent 在显示当前文档的窗口的父窗口中打开目标文档 self 在提交表单所使用的窗口中打开目标文档 top 在当前窗口的窗体内打开目标文档 此值可用于确保目标文档占用整个 窗口 即使原始文档显示在框架中 3 各种表单控件 各种表单控件 1 文本字段与文本域 通过文本域可以创建一个包含单行或多行的文本域 也可以创建一个隐藏用户输入文 本的密码文本域 对其属性设置可以通过文本字段与文本域的 属性 面板进行 如图 7 15 所示 图 7 15 文本字段与文本域的 属性 面板 1 文本域 属性 每个文本域都必须有一个唯一名称 所选名称必须在该表单内唯一标识该文本域 提示 表单对象名称不能包含空格或特殊字符 可以使用字母数字字符和下划线 的任意组合 请注意 为文本域指定的标签是存储该域的值 输入的数据 的变量名 这是发送给服务器进行处理的值 2 字符宽度 属性 字符宽度设置域中最多可显示的字符数 此数字可以小于 最多字符数 最多字符 数 指定在域中最多可输入的字符数 例如 如果 字符宽度 设置为 20 默认值 而 用户输入 100 个字符 则在该文本域中只能看到其中的 20 个字符 请注意 虽然无法在 该域中看到这些字符 但域对象可以识别它们 而且它们会被发送到服务器进行处理 3 最多字符数 属性 最多字符数 设置单行文本域中最多可输入的字符数 如果将 最多字符数 文本 框保留为空白 则用户可以输入任意数量的文本 如果文本超过域的字符宽度 文本将滚 动显示 如果用户输入超过最大字符数 则表单产生警告声 4 类型 属性 选择 单行 属性将产生一个单行文本域 选择 多行 属性将产生一个多行文本域 可通过 行数 属性设置文本域的行数 选择 密码 属性将产生一个密码文本域 当用户在密码文本域中键入时 输入内容 显示为项目符号或 以保护它不被其他人看到 5 初始值 属性 初始值指定在首次载入表单时域中显示的值 例如 通过包含说明或示例值 可以指 示用户在域中输入信息 6 行数 属性 行数 在选中了 多行 选项时可用 设置多行文本域的域高度 7 换行 属性 换行 在选中了 多行 选项时可用 指定当用户输入的信息较多 无法在定义的文 本区域内显示时 如何显示用户输入的内容 换行选项中包含如下选项 关或默认 防止文本换行到下一行 当用户输入的内容超过文本区域的右边界 时 文本将向左侧滚动 用户必须按 Return 键才能将插入点移动到文本区域的 下一行 虚拟 在文本区域中设置自动换行 当用户输入的内容超过文本区域的右边界 时 文本换行到下一行 当提交数据进行处理时 自动换行并不应用于数据 数 据作为一个数据字符串进行提交 实体 在文本区域设置自动换行 当提交数据进行处理时 也对这些数据设置 自动换行 2 隐藏域 使用隐藏域的 属性 面板设置 HTML 表单中的隐藏域属性 如图 7 16 所示 图 7 16 隐藏域的 属性 面板 1 隐藏区域 属性 指定该域的名称 2 值 属性 设置要为该域指定的值 该值将在提交表单时传递给服务器 3 复选框 复选框的属性如图 7 17 所示 图 7 17 复选框的 属性 面板 1 复选框名称 属性 为该对象指定一个名称 每个复选框都必须有一个唯一名称 所选名称必须在该表单 内唯一标识该复选框 此名称不能包含空格或特殊字符 2 选定值 属性 设置在该复选框被选中时发送给服务器的值 3 初始状态 属性 确定在浏览器中载入表单时 该复选框是否被选中 4 单选按钮 单选按钮的属性如图 7 18 所示 图 7 18 单选按钮的 属性 面板 1 单选按钮 属性 文本框中 为该对象指定一个名称 对于单选按钮组 如果您希望这些选项为互斥选 项 必须共用同一名称 此名称不能包含空格或特殊字符 2 选定值 属性 设置在该单选按钮被选中时发送给服务器的值 例如 可以在 选定值 文本框中键 入滑雪 指示用户选择滑雪 3 初始状态 属性 确定在浏览器中载入表单时 该单选按钮是否被选中 5 单选按钮组 单选按钮通常成组地使用 单击 插入记录 表单 单选按钮组 可以创建一 个单选按钮组 如图 7 19 所示 图 7 19 单选按钮组 对话框 1 名称 属性 用于输入单选按钮组的名称 2 单选按钮 属性 单击或按钮 可以向按钮组中添加单选按钮或删除所选的单选按钮 单击或 按钮 可以改变按钮组中按钮的排列顺序 3 布局 使用 属性 选择使用 换行符 或 表格 设置按钮的布局 6 列表 菜单 列表 菜单属性如图 7 20 所示 图 7 20 列表 菜单的 属性 面板 1 列表 菜单 属性 为该菜单指定一个名称 该名称必须是唯一的 2 类型 属性 指定该菜单是单击时下拉的菜单 菜单 选项 还是显示一个列有项目的可滚动列 表 列表 选项 如果您希望表单在浏览器中显示时仅有一个选项可见 则选择 菜单 选项 如果您希望表单在浏览器中显示时列出部分或全部选项 如图 7 21 所示 或者打算允 许用户选择多个菜单项 则选择 列表 选项 图 7 21 列表 菜单 的 类型 属性 3 高度 仅 列表 类型 设置菜单中显示的项数 4 选定范围 仅 列表 类型 指定用户是否可以从列表中选择多个项 5 初始化时选定 设置列表中默认选择的菜单项 单击列表中的一个或多个菜单项 6 列表值 打开一个对话框 您可以在该对话框中向菜单中添加菜单项 7 图像域 图像域属性如图 7 22 所示 图 7 22 图像域的 属性 面板 1 图像区域 属性 为该按钮指定一个名称 2 源文件 属性 指定要为该按钮使用的图像 3 替代 属性 用于输入描述性文本 一旦图像在浏览器中载入失败 将显示这些文本 4 对齐 属性 设置对象的对齐属性 5 编辑图像 属性 启动默认的图像编辑器并打开该图像文件进行编辑 8 文件域 文件域属性如图 7 23 所示 图 7 23 文件域的 属性 面板 1 文件域名称 属性 指定该文件域对象的名称 2 字符宽度 属性 指定希望该域最多可显示的字符数 3 最多字符数 属性 指定域中最多可容纳的字符数 如果用户通过浏览来定位文件 则文件名和路径可超 过指定的 最多字符数 的值 但是 如果用户尝试键入文件名和路径 则文件域仅允许 键入 最多字符数 值所指定的字符数 9 按钮 按钮属性如图 7 24 所示 图 7 24 按钮的 属性 面板 1 按钮名称 属性 为该按钮指定一个名称 提交 和 重置 是两个保留名称 提交 通知表单将表 单数据提交给处理应用程序或脚本 重置 将所有表单域重置为其原始值 2 标签 属性 确定按钮上显示的文本 3 动作 属性 确定单击该按钮时发生的操作 如果选中 提交表单 选项 当单击该按钮时将提交表单数据进行处理 该数据将被 提交到表单的 动作 属性中指定的页面或脚本 如果选中 重置表单 选项 当单击该按钮时将清除该表单的内容 7 6 能力拓展能力拓展 7 6 1 触类旁通触类旁通 制作访客留言板制作访客留言板 任务二任务二 设计思路设计思路 新建文档 1 在 D 盘创建新文件夹名为 任务 7 2 作为站点文件夹用于存放站内的文档 2 启动 dreamweaverCS3 软件 新建一个文档 命名为 index html 的网页 且保存 该网页 将页面标题设置为 留言板 插入表格 1 在文档窗口中插入一个 2 行 4 列的表格 用于留言板页面的布局 表格属性设置如图 7 25 所示 图 7 25 表格的 属性 设置 2 在表格的第 1 行第 1 列单元格内插入图像 光盘 素材 第 7 章 任务 2 image Snap1 01 jpg 在表格的第 2 行第 1 列单元格内插入图像 光盘 素材 第 7 章 任务 2 image Snap1 02 jpg 在表格的第 2 行第 2 列单元格内插入图像 光盘 素材 第 7 章 任务 2 image Snap1 03 jpg 在表格的第 2 行第 3 列单元格内插入图像 光盘 素材 第 7 章 任务 2 image Snap1 04 jpg 效果如图 7 26 所示 图 7 26 在表格内插入图像效果 3 将表格的第 1 行第 4 列单元格与第 2 行第 4 列单元格合并 并在该单元格内插入图像 光盘 素材 第 7 章 任务 2 image Snap1 05 jpg 4 再将表格的第 1 行第 2 列单元格与第 1 行第 3 列单元格合并 选中合并后的单元格 设置单元格背景图像为 光盘 素材 第 7 章 任务 2 image Snap1 06 jpg 效果及属性设 置如图 7 27 所示 图 7 27 合并单元格及设置单元格背景图像效果 5 将设置了背景图像的单元格拆分为 2 行 1 列 在拆分后的第 1 行输入文字 访客留言