CH8网页表单的处理.ppt

通过本章学习，应该掌握以下内容： 1. 认识网页表单 2. 利用Dreamweaver 8创建表单的方法 3. 利用Dreamweaver 8编辑表单的方法 4. 利用HTML和FrontPage 2003处理网 页表单的方法 第8章 网页表单的处理 8.1 利用FrontPage 2003处理表单 表单是用来收集浏览者的用户名、密码、E-mail地 址、个人爱好和联系地址等用户信息的输入区域集合 。浏览者填表单的方式一般是输入文本、选择单选按 钮与复选框，以及从下拉框中选择选项等。在填好表 单后，浏览者应该提交所输入的数据，这些数据会根 据网页设计者设置的表单处理程序，以各种不同的方 式进行处理。 8.1.1 创建表单 1表单概述 为了制作好复杂的表单网页，FrontPage 2003提供 了文本框、文本区、单选按钮、复选框、下拉框、提 交按钮和重置按钮等丰富的表单域。这些表单域具有 以下各自不同的功能： （1）文本框：文本框用来输入比较简单的信息，如 上图网页中的“用户名”、“密码”、“生日”等。 （2）文本区：如果需要输入建议、需求等大段文字 ，使用文本框就显得力不从心了，这时通常使用带有 滚动条的文本区。 （3）单选按钮：单选按钮常用于表示唯一的选择结 果。 （4）复选框：复选框常用来表示许多项可以同时选 中的事物，比如个人爱好、所学科目和选购的产品种 类等。 （5）下拉列表框：当需要选择职业、文化程度等事 项时，除了文本区以外，还可以考虑使用下拉列表框 。 （6）提交按钮和重置按钮：当用户完成了表单的填 写后，如果需要提交数据，则可以单击表单中的提交 按钮；如果希望恢复表单为填写前的状态，以便重新 填写，则可以单击重置按钮 （1）使用向导和模板创建表单 应用向导创建表单方法比较简单，只要按照向导 提示一步一步地执行就可以，但这样创建的表单不一 定完全令自己满意，还需进行大量的修改工作。 （2）手动创建表单 手动插入表单时，FrontPage 2003会插入一个带 虚线边框的矩形区域，其中包含一个“提交”按钮和一 个“重置”按钮。在此矩形区域内，可以添加文本框、 选项按钮、复选框和下拉列表框等。 2创建表单 1. 修改表单 删除不必要的域 如果是手动创建的表单，删除不必要的域的方法很 简单，只需将选中需要删除的域，单击Delete键即可 。 修改文本框的宽度 在FrontPage 2003中修改文本框的宽度有以下两种 方法： 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属性指定了控件的初始值。 Dreamweaver 8提供了大量的表单元素。将插入 面板切换到“表单”类下，打开“表单”插入面板，即 可看到各种表单元素，如图8-19所示。 8.2.2 利用Dreamweaver 8处理表单 图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）插入普通按钮 普通按钮的创建方