《网页表单的处理》PPT课件.ppt

通过本章学习 应该掌握以下内容 认识网页表单利用Dreamweaver创建表单的方法利用Dreamweaver编辑表单的方法利用HTML处理网页表单的方法 第10章网页表单的处理 10 1表单概述 为了制作好复杂的表单网页 在DreamweaverMX中提供了文本框 文本区 单选按钮 复选框 下拉列表框 提交按钮和重置按钮等丰富的表单域 这些表单域具有以下各自不同的功能 1 单行文本框单行文本框用来输入比较简单的信息 2 多行文本框如果需要输入建议 需求等大段文字 使用单行文本框就显得力不从心了 这时通常使用带有滚动条的多行文本框 3 单选按钮单选按钮常用于表示唯一的选择结果 如 同学录注册 表单中的 性别 按钮 4 复选框复选框常用来表示许多项可以同时选中的事物 比如个人爱好 所学科目和选购的产品种类等 5 下拉列表框当需要选择职业 文化程度等事项时 除了文本区以外 还可以考虑使用下拉列表框 6 提交按钮和重置按钮当用户完成了表单的填写后 如果需要提交数据 则可以单击表单中的提交按钮 通常按钮上的文字为 提交 或 确认 等 如上图中的 确定 按钮 如果希望恢复表单为填写前的状态 以便重新填写 则可以单击重置按钮 通常按钮上的文字为 重置 重填 或 重新填写 等 DreamweaverMX提供了一个专门的表单对象插入面板 面板上包含了各种表单对象 选择 窗口 插入 命令 打开插入面板 单击插入面板上的 表单 标签 切换到插入 表单 面板如图2所示 10 2利用Dreamweaver处理表单 10 2 1表单插入面板 10 2 2创建空白表单 因为在发送表单时是以整个表单发送的 所以在插入表单元素前 先要在网页中插入空白的表单 然后才能在表单中插入表单元素 如文本框 按钮 列表 菜单 图片等 以达到整体发送的效果 演示创建空白表单的过程 10 2 3插入文本框 文本框是一个接受文本信息的空白框 在文本框中几乎可以容纳任何类型的文本数据 利用它可以使网页设计师不必限制访问者提交的内容 在网页中 常见的文本框有3种形式 1 单行文本框只能用来输入一行的信息 2 多行文本框可以由设计者限定行数 并决定是否出现滚动条 该文本框可以输入多行信息 3 密码文本框在该文本框中输入的信息 都会以 显示在屏幕上 1 插入单行文本框先输入提示信息 然后选择 插入 表单对象 文本域 命令 此时会在表单中插入一个单行文本框 2 插入多行文本框先输入提示信息 然后选择 插入 表单对象 文本区域 命令 此时会在表单中插入一个单行文本框 3 插入密码文本框先输入提示信息 然后选择 插入 表单对象 文本域 命令 此时会在表单中插入一个单行文本框 用鼠标单击此单行文本框 在属性面板上的 类型 下单击 密码 单选按钮 则单行文本框变成了密码文本框 4 设置文本框属性在表单中插入文本框后 选择所插入的文本框 d打开属性面板设置文本框属性 10 2 4插入单选按钮 1 插入单选按钮 要在表单中插入单选按钮 首先将光标置于表单中的相应位置 输入提示信息 然后单击插入 表单 面板上的图标 或选择 插入 表单对象 单选按钮 命令 插入单选按钮 2 设置单选按钮的属性 在表单中选择单选按钮后 属性面板将变为如图所示 1 单选按钮 给单选按钮命名 同一组的单选按钮的名称必须相同 这一点非常重要 2 选定值 设置单选按钮被选时的取值 当用户提交表单时 该值被传送给处理程序 如CGI脚本 应赋给同组的每个单选按钮不同的值 3 初始状态 指定首次载入表单时单选按钮是 已勾选 还是 未勾选 一组单选按钮中 只能有一个按钮的初始状态被设为选中 1 插入复选框 10 2 5插入复选框 将光标置于表单中适当位置 输入提示信息 兴趣 再给复选框添加说明性语言 读书 旅游 体育 和 音乐 然后单击插入 表单 面板上的图标 或选择 插入 表单对象 复选框 命令 在选项的合适位置加入复选框 在表单中选择复选框后 其属性面板的显示与单选按钮属性面板基本相同 只是图标不同 但在给复选框命名时 要注意复选框与单选按钮命名的区别 单选按钮是以 组 为单位的 而复选框则是以 个 为单位的 所以每一个复选框的名称都不应该相同 2 设置复选框的属性 10 2 6插入下拉列表框 1 插入下拉列表框 要在表单中插入下拉列表框 应按如下步骤进行 1 将光标定位在表单中适当位置 输入提示信息 2 单击插入 表单 面板上的图标 或选择 插入 表单对象 列表 菜单 命令 则在表单中出现下拉列表框的框架 选中该下拉列表框 属性面板变成下拉列表属性面板 如图所示 3 选择 类型 为 列表 单击属性面板上的 列表值 按钮 确保下拉列表框处于选择状态 弹出 列表值 对话框 如图所示 4 在 列表值 对话框的 项目标签 下输入要在列表框中显示的内容 在 值 下输入与显示内容相应的值 传送到服务器中的即为该值 即可为列表框加入显示的内容 在表单中插入下拉列表框后 选择所插入的下拉列表框 其属性面板如图所示 2 设置下拉列表框属性 根据要求完成下拉列表框类型 高度 列表值 选定范围等属性的设置 10 2 7插入按钮 1 插入 提交 按钮 首先将光标置于需要插入按钮的表单中 单击插入 表单 面板上的图标 或选择 插入 表单对象 按钮 命令 则在表单中将插入一个 提交 按钮 2 插入 重置 按钮 首先在表单中插入 提交 按钮 选中此按钮 在属性面板上的 动作 下单击 重设表单 单选按钮 则在表单中出现 重置 按钮 3 插入普通按钮 普通按钮的创建方法与 重置 按钮的创建方法基本上相同 但在属性面板上的 动作 下要选择 无 单选按钮 4 按钮属性设置 表单中的3种按钮可以通过选择属性面板 动作 中的不同选项实现相互转换 因为表单是以表格的形式创建的 所以可以通过设置表格的背景颜色来设置表单的背景颜色 10 2 8设置表单的背景颜色 利用HTML也可以创建表单 创建表单时要用到表单标记符和表单输入标记符 10 3利用HTML处理表单 HTML中表单标记符为FORM 其主要作用是设定表单的起止位置 并指定处理表单数据程序的URL地址 其基本语法结构如下 其中Action用于设定处理表单数据程序URL的地址 method指定数据传送到服务器的方式 有两种主要的方式 当method GET 时 将输入数据加在action指定的地址后面传送到服务器 当method POST 时则将输入数据按照HTTP输送协议中的POST传输方式传送到服务器 10 3 1表单标记符 INPUT是表单输入标记符 在表单创建中使用频繁 大部分表单内容需要用到此标记符 其语法如下 各项的意义是 type text表示输入单行文本 type textarea表示输入多行文本 type password表示输入数据为密码 用 表示 10 3 2表单输入标记符 type checkbox表示复选框 type radio表示单选框 type submit表示提交按钮 数据将被送到服务器 type reset表示清除表单数据 以利于重新输入 type file表示插入一个文件 type hidden表示隐藏按钮 type image表示插入一个图像 type button表示普通按钮 创建单行文本框的基本语法如下 其中name属性指定了控件的名称 value属性指定了控件的初始值 size属性指定了文本框的宽度 maxlength属性指定了在文本框中可以输入的最长文本数 10 3 3控件定义方法 1 文本框和口令框 创建复选框和单选框也是使用INPUT标记符 语法分别如下 type属性为 checkbox 说明该控件是一个复选框 type属性为radio 说明该控件是一个单选框 name属性和value属性的值都是程序处理表单数据时需要的 checked属性是可选的 2 复选框与单选按钮 创建提交按钮 重置按钮和自定义按钮的语法分别如下 3 按钮 利用HTML创建多行文本框应使用TEXTAREA标记符 其使用格式如下 默认多行文本其中name属性用于指定控件名 rows属性用于设置多行文本框的行数 用户的输入可以多于这个行数 超过可视区域的内容可以用滚动条进行控制操作 cols属性用于设置多行文本框的列数 4 多行文本框 文本区 要创建选项菜单应使用SELECT标记符 并将每个可独立选取的项用一个OPTION标记符标出来 创建选项菜单的语法如下 选项1内容选项2内容 5 选项菜单 其中 SELECT标记符的name属性用于指定控件名 size属