CH8 网页表单的处理.ppt

通过本章学习 应该掌握以下内容 认识网页表单利用Dreamweaver8创建表单的方法利用Dreamweaver8编辑表单的方法利用HTML和FrontPage2003处理网页表单的方法 第8章网页表单的处理 8 1利用FrontPage2003处理表单 表单是用来收集浏览者的用户名 密码 E mail地址 个人爱好和联系地址等用户信息的输入区域集合 浏览者填表单的方式一般是输入文本 选择单选按钮与复选框 以及从下拉框中选择选项等 在填好表单后 浏览者应该提交所输入的数据 这些数据会根据网页设计者设置的表单处理程序 以各种不同的方式进行处理 8 1 1创建表单 1 表单概述 为了制作好复杂的表单网页 FrontPage2003提供了文本框 文本区 单选按钮 复选框 下拉框 提交按钮和重置按钮等丰富的表单域 这些表单域具有以下各自不同的功能 1 文本框 文本框用来输入比较简单的信息 如上图网页中的 用户名 密码 生日 等 2 文本区 如果需要输入建议 需求等大段文字 使用文本框就显得力不从心了 这时通常使用带有滚动条的文本区 3 单选按钮 单选按钮常用于表示唯一的选择结果 4 复选框 复选框常用来表示许多项可以同时选中的事物 比如个人爱好 所学科目和选购的产品种类等 5 下拉列表框 当需要选择职业 文化程度等事项时 除了文本区以外 还可以考虑使用下拉列表框 6 提交按钮和重置按钮 当用户完成了表单的填写后 如果需要提交数据 则可以单击表单中的提交按钮 如果希望恢复表单为填写前的状态 以便重新填写 则可以单击重置按钮 1 使用向导和模板创建表单应用向导创建表单方法比较简单 只要按照向导提示一步一步地执行就可以 但这样创建的表单不一定完全令自己满意 还需进行大量的修改工作 2 手动创建表单手动插入表单时 FrontPage2003会插入一个带虚线边框的矩形区域 其中包含一个 提交 按钮和一个 重置 按钮 在此矩形区域内 可以添加文本框 选项按钮 复选框和下拉列表框等 2 创建表单 1 修改表单 删除不必要的域如果是手动创建的表单 删除不必要的域的方法很简单 只需将选中需要删除的域 单击Delete键即可 修改文本框的宽度在FrontPage2003中修改文本框的宽度有以下两种方法 8 1 2编辑表单 鼠标拖动法用鼠标选中要修改文本框 选中状态下的文本框被6个小方框包围起来 拖动其中的小方框就可以改变文本框的宽度 精确设置法用鼠标选中要修改文本框 然后单击右键 从弹出的快捷菜单中选择 表单域属性 命令 弹出 文本框属性 对话框 在 宽度 文本框中输入精确数值 然后单击 确定 按钮 2 设置背景颜色因为表单是以表格的形式创建的 所以可以通过设置表格的背景颜色来设置表单的背景颜色 3 设置光标顺序在填写表单时 使用键盘上的 Tab 键 就可以在各项之间进行切换 这里的 Tab 键顺序就是给各个表单域编上序号 访问者在按下 Tab 键时 光标的插入点就会按着 Tab 键顺序移动 而 Tab 键顺序是在各属性对话框中设置的 4 设置密码域属性在填写表单时 填写的某些内容会以 表示 这是为了防止输入的某些重要内容被其他人偷看 要想为表单加上此功能 只要在 文本框属性 对话框里的 密码域 选项组中选择 是 按钮即可 访问者填写完表单内容后发送出去 发送后的表单结果要存放在某一位置 表单结果存放的位置是由表单属性指定的 8 1 3保存表单结果 利用HTML也可以创建表单 这样创建的表单通常由两类元素构成 一是普通的页面元素 例如表格 图像 文字等 二是用于接收信息的特定页面元素 也就是所谓的表单控件 控件是表单中用于接收用户输入或处理的元素 典型的控件有 文本框 复选框 单选框 选项菜单等 8 2处理网页表单的其他方法 8 2 1利用HTML处理表单 HTML中表单标记符为FORM 其主要作用是设定表单的起止位置 并指定处理表单数据程序的URL地址 其基本语法结构如下 其中Action用于设定处理表单数据程序URL的地址 method指定数据传送到服务器的方式 有两种主要的方式 当method GET 时 将输入数据加在action指定的地址后面传送到服务器 当method POST 时则将输入数据按照HTTP输送协议中的POST传输方式传送到服务器 1 表单标记符 INPUT是表单输入标记符 在表单创建中使用频繁 大部分表单内容需要用到此标记符 其语法如下 各项的意义是 type text表示输入单行文本 type textarea表示输入多行文本 type password表示输入数据为密码 用 表示 2 表单输入标记符 type checkbox表示复选框 type radio表示单选框 type submit表示提交按钮 数据将被送到服务器 type reset表示清除表单数据 以利于重新输入 type file表示插入一个文件 type hidden表示隐藏按钮 type image表示插入一个图像 type button表示普通按钮 创建单行文本框的基本语法如下 其中name属性指定了控件的名称 value属性指定了控件的初始值 size属性指定了文本框的宽度 maxlength属性指定了在文本框中可以输入的最长文本数 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属性用于指定选项菜单中一次显示多少行 默认值为1 multiple属性用于设置允许用户选择多个选项 如果不设置此属性 则仅允许选择一个选项 OPTION标记符的label属性可以为选项指定一个标记符 当使用此属性时 浏览器将采用此属性的值而非OPTION标记符中的内容作为选项标记符 selected属性用于设置当前选项为预先选中状态 value属性指定了控件的初始值 Dreamweaver8提供了大量的表单元素 将插入面板切换到 表单 类下 打开 表单 插入面板 即可看到各种表单元素 如图8 19所示 8 2 2利用Dreamweaver8处理表单 图8 19 表单 插入面板 1 插入文本框 文本框是一个接受文本信息的空白框 在文本框中几乎可以容纳任何类型的文本数据 利用它可以使网页设计师不必限制访问者提交的内容 在网页中 常见的文本框有3种形式 1 单行文本框只能用来输入一行的信息 2 多行文本框可以由设计者限定行数 并决定是否出现滚动条 该文本框可以输入多行信息 3 密码文本框在该文本框中输入的信息 都会以 显示在屏幕上 1 创建空白表单 因为在发送表单时是以整个表单发送的 所以在插入表单元素前 先要在网页中插入空白的表单 然后才能在表单中插入表单元素 如文本框 按钮 列表 菜单 图片等 以达到整体发送的效果 演示创建空白表单的过程 2 插入文本域 1 插入单行文本域先输入提示信息 然后单击 表单 插入面板上的图标 或选择 插入 表单 文本域 命令 此时会在表单中插入一个单行文本域 2 插入多行文本域先输入提示信息 然后单击 表单 插入面板上的图标 或选择 插入 表单 文本区域 命令 此时会在表单中插入一个单行文本框 3 插入密码文本域先输入提示信息 然后选择 插入 表单 文本域 命令 此时会在表单中插入一个单行文本域 用鼠标单击此单行文本域 在属性面板上的 类型 下单击 密码 单选按钮 如图8 23所示 则单行文本域变成了密码文本域 图8 23文本域的属性面板 2 设置文本域属性在表单中插入文本域后 选择所插入的文本域 打开属性面板设置文本域属性 3 单选按钮 1 插入单选按钮 要在表单中插入单选按钮 首先将光标置于表单中的相应位置 输入提示信息 然后单击插入 表单 面板上的图标 或选择 插入 表单 单选按钮 命令 插入单选按钮 2 设置单选按钮的属性 在表单中选择单选按钮后 属性面板将变为如图所示 面板中各项的含义为 1 单选按钮 给单选按钮命名 同一组的单选按钮的名称必须相同 这一点非常重要 2 选定值 设置单选按钮被选时的取值 当用户提交表单时 该值被传送给处理程序 如CGI脚本 应赋给同组的每个单选按钮不同的值 3 初始状态 指定首次载入表单时单选按钮是 已勾选 还是 未勾选 一组单选按钮中 只能有一个按钮的初始状态被设为选中 1 插入复选框 4 复选框 将光标置于表单中适当位置 输入提示信息 兴趣 再给复选框添加说明性语言 读书 旅游 体育 和 音乐 然后单击插入 表单 面板上的图标 或选择 插入 表单 复选框 命令 在选项的合适位置加入复选框 在表单中选择复选框后 其属性面板的显示与单选按钮属性面板基本相同 只是图标不同 但在给复选框命名时 要注意复选框与单选按钮命名的区别 单选按钮是以 组 为单位的 而复选框则是以 个 为单位的 所以每一个复选框的名称都不应该相同 2 设置复选框的属性 5 下拉列表框 1 插入下拉列表框 要在表单中插入下拉列表框 应按如下步骤进行 1 将光标定位在表单中适当位置 输入提示信息 2 单击插入 表单 面板上的图标 或选择 插入 表单 列表 菜单 命令 则在表单中出现下拉列表框的框架 选中该下拉列表框 属性面板变成下拉列表属性面板 如图所示 3 选择 类型 为 列表 单击属性面板上的 列表值 按钮 确保下拉列表框处于选择状态 弹出 列表值 对话框 如图所示 4 在 列表值 对话框的 项目标签 下输入要在列表框中显示的内容 在 值 下输入与显示内容相应的值 传送到服务器中的即为该值 即可为列表框加入显示的内容 在表单中插入下拉列表框后 选择所插入的下拉列表框 其属性面板如图所示 2 设置下拉列表框属性 根据要求完成下拉列表框类型 高度 列表值 选定范围等属性的设置 6 插入按钮 1 插入 提交 按钮 首先将光标置于需要插入按钮的表单中 单击插入 表单 面板上的图标 或选择 插入 表单 按钮 命令 则在表单中将插入一个 提交 按钮 2 插入 重置 按钮 首先在表单中插入 提交 按钮 选中此按钮 在属性面板上的 动作 下单击 重设表单 单选按钮 则在表单中出现 重置 按钮 3 插入普通按钮 普通按钮的创建方法与 重