通过Dreamweaver_CS3学习HTML+DIV+CSS_第8章__表单.ppt

第8章表单Form 万维网向浏览者传递信息 使浏览者非常方便地从互联网取得需要的信息 在交互式的网络中 表单是一个不可缺少的元素 它是交互的一个入口 只要有交互出现的地方 就会有表单 本章将介绍表单的用法 一个完整的交互表单由两部分组成 一是客户端包含的表单页面 用于填写浏览者进行交互的信息 另一个是服务端的应用程序 用于处理浏览者提交的信息 8 1插入表单 表单是交互过程不可缺少的工具 那么如何在网页中添加表单 具体步骤如下 8 1插入表单 单击 表单 按钮 完成插入表单 效果如图左所示 按F12键进行预览 如图右所示 插入表单效果预览效果 8 2文字对象 在网页的交互过程中 文字是一个重要内容 如何把文字内容从客户端传送到服务端 表单的文字对象就是传送文字的入口 文本对象有单行文本域 多行文本域和密码文本域 单行文本域适用于输入少量文字内容 多行文本域适用于输入大量文字内容 密码文本域用于页面密码验证 8 2 1使用单行文本域 单行文本域适用于输入少量文字 例如页面验证的用户名及文章标题等 如何在网页中加入单行文本域 具体步骤如下 输入标签辅助功能属性 对话框单行文本域效果图 8 2 1使用单行文本域 按Ctrl F3组合键 打开 属性 面板 如图上所示 在 初始值 文本框中输入 文本内容 视图如图下所示 属性 面板 输入文本内容效果 8 2 2使用多行文本域 前面介绍了单行文本域 了解了如何把客户端的内容通过单行文本域提交到服务端 但是单行文本域提交的内容毕竟是有限的 如果需要提交更多的内容 则要用到多行文本域 使用多行文本域的具体步骤如下 输入标签辅助功能属性 对话框多行文本域效果 8 2 2使用多行文本域 选中多行文本域 按Ctrl F3组合键 打开 属性 面板 如图上所示 在 字符宽度 文本框中输入10 在 行数 文本框中输入5 在 初始值 多行文本域中输入 多行文本域 按Enter键 效果如图下所示 属性 面板 设置属性效果 8 2 3使用密码文本域 在网页提交的内容中包含密码 用于验证用户身份 这时就要用到密码文本域 这是因为提交的密码不能以明文显示 如何在网页中添加密码文本域 具体步骤如下 密码文本域效果 8 2 4使用隐藏域 在网页的制作过程中 有时需要提交预先设置好的内容 但这些内容又不宜显示给用户 因此隐藏域是一个不错的选择 如何向网页添加隐藏域 具体步骤如下 隐藏域效果 8 3选择标签 在网页中除了需要提交输入的文字 还有许多内容需要做成选项 从而为用户提供多种选择 使用起来更方便 在选择的时候可以是单选 也可以是多选 单选时使用单选按钮 多选时使用复选框 本小节将介绍如何对这两种选择方式进行操作 8 3 1使用单选按钮 单选按钮用于在众多选项中只能选取一个 例如填写个人信息的性别 只能是男或女 不可能同时是男又是女 此时需要用到单选按钮 插入单选按钮的具体步骤如下 输入标签辅助功能属性 对话框功夫单选按钮效果图 8 3 1使用单选按钮 从图中可以看出 单选按钮的初始状态是未选中的 修改单选按钮可以改变初始值 属性 面板 初始选中状态效果 8 3 2使用单选按钮组 前面介绍了如何操作单选按钮 通过上面的方法可以插入一个单选按钮组 但显示却有点繁琐 Dreamweaver提供了一个更简便的方法 可以直接插入一个单选按钮组 具体步骤如下 单选按钮组 对话框单选按钮组效果 8 3 3使用复选框 前面介绍了如何操作单选按钮和单选按钮组 有时在选择时需要同时选择多个选项 例如用户提交的个人兴趣爱好 可以同时选择音乐 旅游和体育等 此时可以使用复选框 具体步骤如下 输入标签辅助功能属性 复选框效果 8 4列表与菜单 在网页中除了单选按钮和复选框供用户选择 还可以通过列表和菜单的方式提供选择 本小节将介绍如何在网页中添加列表与菜单 8 4 1使用菜单 像应用程序中的菜单一样 可以在很小的空间内为用户提供多种选择和操作 在网页添加菜单的具体步骤如下 列表值 对话框菜单预览效果 8 4 2使用列表 前面介绍了菜单的操作 本小节介绍列表的操作 其操作的前8个步骤与插入菜单的步骤一样 这里就从第9步开始介绍 具体步骤如下 列表效果列表预览效果 8 4 3使用跳转菜单 在网页中可以设计一个下拉跳转菜单 从而为网页节省很多空间 设计跳转菜单可能需要脚本编程 但在Dreamweaver中通过简单的步骤便可实现 具体步骤如下 插入跳转菜单效果跳转菜单预览效果 8 5表单按钮 表单按钮用于控制网页中的表单 提交按钮用于提交已经填写好的表单内容 重置按钮用于重新填写表单的内容 它们是表单按钮的两个最基本的功能 除此之外还可以用作完成其他的任务 例如 通过单击按钮产生一个事件 调用脚本程序等 8 5 1表单按钮 填写好表单内容 最终要提交到服务端 此时单击提交按钮把表单内容发送到服务端 本小节将介绍如何在网页中插入表单按钮 具体步骤如下 重置 按钮效果普通按钮效果 8 5 2图像域 上一小节介绍了如何插入表单按钮 但这些按钮的外观都是由系统预设的 如果需要插入自定义的个性按钮 可以使用图像域 具体步骤如下 插入图像域效果 属性 面板 8 6文件域和字段集 在网站中需要把文件传送到服务端 从而供用户使用 如相册和演示文件等 此时就需要使用文件域 把客户端的文件上传 为了方便用户的使用 需要把同类表单放在一起 并进行标识 此时需要使用字段集 8 6 1使用文件域 文件域用于提交文件 在网页中插入文件域的具体步骤如下 文件域效果 8 6 2使用字段集 字段集能使表单按类进行排放 从而使网页结构更清晰 在此举一简单实例 具体步骤如下 字段集效果字段集预览效果 8 7专家总结 本章介绍了如何操作表单的