Dreamweaver表单制作.ppt

第9讲表单网页 本讲要点内容 表单的概念和作用 创建不同的表单元素 本讲学习目标了解表单在网页中的用途 熟悉在各种表单元素的特点 掌握在网页中插入编辑表单的方法 本讲学前要求会创建复杂结构的网页 熟悉论坛 电子邮件 搜索引擎等使用 9 1认识表单 表单 form 一种与用户交互的接口界面 通过表单将用户信息提交给服务器端相应程序进行处理 所有的表单对象都包含在一对和标签中 图9 2表单对象面板 9 2创建表单域 无论插入什么表单对象 都必须先创建一个表单 9 3插入文本域 9 3 1插入文本字段 图9 6文本字段属性面板 字符宽度 指定文本字段的宽度 最多字符数 指定在该文本域中最多可输入的字符个数 注 如果 最多字符数 大于 字符宽度 那么也多余宽度的字符不被显示 类型 单行 多行 密码 注 密码文本域不显示内容 用 来代替显示 初始值 指定在首次载入表单时文本字段中显示的值 9 3 2插入文本区域 换行 指定当用户输入的信息较多 无法在定义的文本区域内显示时 如何显示用户输入的内容 分别有以下四个值 1 关闭或默认 当用户输入的内容超过文本区域的右边界时 文本将向左侧滚动 用户必须按Return键才能将插入点移动到文本区域的下一行 2 虚拟 在文本区域中设置自动换行 当用户输入的内容超过文本区域的右边界时 文本换行到下一行 当提交数据进行处理时 自动换行并不应用于数据 3 实体 在文本区域设置自动换行 当提交数据进行处理时 也对这些数据设置自动换行 选定值 设置在该复选框被选中时发送给服务器的值 初始状态 确定在浏览器中载入表单时 该复选框是否被选中 9 4创建复选框 9 5插入单选按钮 9 5 1插入单选按钮 单选按钮 用来设置对象的名称 在同一选项组中的所有单选项按钮的名称必须相同 如将标签值为 男 的单选按钮名称设置有sex 则标签值为 女 的单选按钮名称也要设置为sex 才能实现在这两个选项中选择其中的一个的目的 9 5 2插入单选按钮组 单个的插入单选按钮在候选项较多的时候显得比较麻烦 Dreamweaver还提供了插入单选按钮组的功能 具体操作如下 步骤1 将光标定位在需要插入表单对象的位置 步骤2 在插入栏的 表单 对象面板中单击 单选按钮组 按钮 弹出 单选按钮组 对话框 如图9 19所示 步骤3 设置 单选按钮组 的对话框 默认设置的效果如图9 20所示 各设置项如下所示 图9 19 单选按钮组 对话框图9 20单选按钮组效果 名称 用来设置单选按钮组的名称 名称要唯一 单选按钮 单击 添加单选按钮 Label 列是单选按钮的文本说明 Value 列是单选按钮的值 单击 删除选择好的单选按钮 通过单击按钮来调整单选按钮的次序 布局 使用 用来设置单选按钮组的布局方式 选择 换行符 则使用换行符 竖项排列 否则使用表格 提示 一旦单选按钮被选择 同一组的单选按钮将始终有一个处于选中状态 除非点击重置按钮进行重新设定 比如 男女性别两个单选按钮 初始状态是两个都不选中 选中男后女不被选中 选中女后男不被选中 总有一个处于选中状态 只有重置才能回到两个都不选中的初始状态 9 6插入列表和菜单 9 6 1插入列表 菜单列表和菜单菜单都属于HTML表单菜单 对应的标签为 列表和菜单的区别在于 一种菜单是用户单击时下拉的 称之为下拉菜单或下拉列表 另一种菜单则显示一个列有项目的可滚动列表 用户可从该列表中选择项目 称之为滚动列表或者列表菜单 插入列表 菜单的具体操作步骤如下 步骤1 将光标定位在需要插入表单对象的位置 步骤2 在插入栏的 表单 对象面板中单击 列表菜单 按钮 即在文档中插入了一个列表 菜单 如图9 21所示 步骤3 选中列表 菜单对象 在 属性 面板可以对其属性进行设置 如9 22图所示 各选项的含义如下 类型 指定该菜单是单击时下拉的菜单 菜单 选项 还是显示一个列有项目的可滚动列表 列表 选项 9 21插入列表 菜单 图9 22列表 菜单的属性面板 高度 用来设置列表中显示的项数 该属性值只有在 列表 类型中才有效 选定范围 指定用户是否可以从列表中选择多个项 该属性值只有在 列表 类型中才有效 列表值 单击该按钮 打开一个 列表值 对话框 如9 24图所示 单击 按钮增加列表值 单击 按钮删除列表值 项目标签 指用户看到的列表项目的文本 值 指的是该项目所要传递给处理页面的信息 如网址 出身地址等 初始化时选定 用来设置表单首次被载入时 该菜单 列表中哪个值将被选定 9 6 2插入跳转菜单 跳转菜单实际就是一个下拉列表 其中显示当前站点的导航名称 单击某个选项 即可跳转到相应的网页上 从而实现跳转的目的 其具体操作过程如下 步骤1 将光标定位在需要插入表单对象的位置 步骤2 在插入栏的 表单 对象面板中单击 定此转菜单 按钮 弹出如图9 17所示的对话框 图9 25跳转菜单的对话框 步骤3 单击 添加项 按钮添加菜单项 在 文本 文本框中为菜单项输入要在列表中显示的文本 步骤4 在 选择时 转到URL 文本框中 单击 浏览 按钮找到要打开的文件 或者在文本框中输入该文件的路径 步骤5 在 打开URL于 下拉列表框中选择文件打开的位置 步骤6 在 菜单名称 文本框中 输入菜单项的名称 步骤7 单击 确定 按钮完成操作 9 7插入按钮 9 7 1插入标准按钮插入按钮的步骤如下 步骤1 将光标定位在需要插入表单对象的位置 步骤2 在插入栏的 表单 对象面板中单击 按钮 按钮 即在文档中创建了一个按钮 如图9 27所示 图9 28按钮的属性面板 步骤3 选中该按钮 其属性面板如9 28图所示 各属性值的含义如下 按钮名称 为该按钮指定一个名称 标签 确定按钮上显示的文本 如果是提交按钮可以是 提交 确认 等等 如果是重置按钮可以是 重置 重来 取消 等等 动作 确定单击该按钮时发生的操作 分别有 提交表单 重设表单 和 无 若选择 提交表单 则该按钮为提交按钮 对应的type值为submit 将当前表单域内所有数据提交到服务器处理 若选择 重设表单 则该按钮为重置按钮 对应的type值为reset 单击后将复原所有表单对象的值 若选择 无 则该按钮为普通按钮 对应的type值为button 9 7 2插入图像按钮 可以使用图像作为按钮图标 如果使用图像来执行任务而不是提交数据 则需要将某种行为附加到表单对象 插入图像按钮的操作过程如下 步骤1 将插入点放在表单区域内 在插入栏的 表单 对象面板中单击 图像域 按钮 弹出 选择图像源文件 对话框 如图9 29所示 图9 29选择图像源文件对话框 步骤2 本书在 本讲实例 目录下准备了图片submit gif和reset gif 分别选中图片 单击 确定 按钮 两个图像域随即出现在表单中 如图9 30所示 步骤3 选中图片域对象 从 属性 面板上可以设置其属性 图像区域 为该按钮指定一个名称 提交 和 重置 是两个保留名称 如果名称为 提交 单击时就通知表单将表单数据提交给处理页面 功能就相当于submit 如果名称为 重置 单击时就将所有该表单域内的表单对象值重置 功能相当于重置按钮 图9 30图像按钮 图9 31图像按钮属性面板 源文件 指定要为该按钮使用的图像 替代 用于输入描述性文本 一旦图像在浏览器中载入失败 将显示这些文本 对齐 设置对象的对齐属性 分别有默认 顶端 居中 底部 左对齐和右对齐 编辑图像 启动默认的图像编辑器并打开该图像文件进行编辑 类 可以将CSS规则应用于该对象 步骤4 若要将某个JavaScript行为附加到该按钮 选择该图像 然后在 行为 面板 窗口 行为 中选择行为 小结表单的在网页上的应用已经相当广泛 如收发Email邮件 搜索引擎搜索数据 申请个人空间等等 都是利用表单来收集客户端的数据 并将这些提交给相应的动态网页进行数