21世纪高等院校规划教材：《网页设计与制作实用技术》课程配套电子教案（PPT教学课件）第七章 网页表单的处理

第7章网页表单的处理 通过本章学习,应该掌握以下内容: 1.认识网页表单 2.利用 Dreamweaver mx创建表单的方法 3利用 Dreamweaver mx编辑表单的方法 4.利用HTMI处理网页表单的方法

通过本章学习，应该掌握以下内容： 1. 认识网页表单 2. 利用Dreamweaver MX创建表单的方法 3. 利用Dreamweaver MX编辑表单的方法 4. 利用HTML处理网页表单的方法 第7章 网页表单的处理

71表单概述 为了制作好复杂的表单网页,在 Dreamweaver mX 中提供了文本框、文本区、单选按钮、复选框、下拉 列表框、提交按钮和重置按钮等丰富的表单域。这些 表单域具有以下各自不同的功能: (1)单行文本框 单行文本框用来输入比较简单的信息。 (2)多行文本框 如果需要输入建议、需求等大段文字,使用单行文本 框就显得力不从心了,这时通常使用带有滚动条的多 行文本框

7.1 表单概述 为了制作好复杂的表单网页，在Dreamweaver MX 中提供了文本框、文本区、单选按钮、复选框、下拉 列表框、提交按钮和重置按钮等丰富的表单域。这些 表单域具有以下各自不同的功能： （1）单行文本框 单行文本框用来输入比较简单的信息。 （2）多行文本框 如果需要输入建议、需求等大段文字，使用单行文本 框就显得力不从心了，这时通常使用带有滚动条的多 行文本框

(3)单选按钮 单选按钮常用于表示唯一的选择结果,如“同学 录注册”表单中的“性别”按钮。 (4)复选框 复选框常用来表示许多项可以同时选中的事物, 比如个人爱好、所学科目和选购的产品种类等 (5)下拉列表框 当需要选择职业、文化程度等事项时,除了文本 区以外,还可以考虑使用下拉列表框

（3）单选按钮 单选按钮常用于表示唯一的选择结果，如“同学 录注册”表单中的“性别”按钮。 （4）复选框 复选框常用来表示许多项可以同时选中的事物， 比如个人爱好、所学科目和选购的产品种类等。 （5）下拉列表框 当需要选择职业、文化程度等事项时，除了文本 区以外，还可以考虑使用下拉列表框

(6)提交按钮和重置按钮 当用户完成了表单的填写后,如果需要提交数 据,则可以单击表单中的提交按钮,通常按钮上的 文字为“提交”或“确认”等。如上图中的“确定” 按钮;如果希望恢复表单为填写前的状态,以便重 新填写,则可以单击重置按钮,通常按钮上的文字 为“重置”、“重填”或“重新填写”等

（6）提交按钮和重置按钮 当用户完成了表单的填写后，如果需要提交数 据，则可以单击表单中的提交按钮，通常按钮上的 文字为“提交”或“确认”等。如上图中的“确定” 按钮；如果希望恢复表单为填写前的状态，以便重 新填写，则可以单击重置按钮，通常按钮上的文字 为“重置” 、 “重填”或“重新填写”等

72利用 Dreamweaver mx处理表单 721表单插入面板 Dreamweaver mX提供了一个专门的表单对象插 入面板,面板上包含了各种表单对象。选择“窗 口”|“插入”命令,打开插入面板,单击插入面板 上的“表单”标签,切换到插入“表单”面板如图2 所示。 匕插入常用布局文本表格架表单模板宇符槳体文忤头脚本AsP应用程序气 目囗N园回围圓召口回

Dreamweaver MX提供了一个专门的表单对象插 入面板，面板上包含了各种表单对象。选择“窗 口”|“插入”命令，打开插入面板，单击插入面板 上的“表单”标签，切换到插入“表单”面板如图2 所示。 7.2 利用Dreamweaver MX处理表单 7.2.1 表单插入面板

7.22创建空白表单 因为在发送表单时是以整个表单发送的,所以 在插入表单元素前,先要在网页中插入空白的表单 然后才能在表单中插入表单元素(如文本框、按钮、 列表/菜单、图片等),以达到整体发送的效果。 演示创建空白表单的过程

7.2.2 创建空白表单 因为在发送表单时是以整个表单发送的，所以 在插入表单元素前，先要在网页中插入空白的表单， 然后才能在表单中插入表单元素（如文本框、按钮、 列表/菜单、图片等），以达到整体发送的效果。 演示创建空白表单的过程

7.23插入文本框 文本框是一个接受文本信息的空白框。在文本框 中几乎可以容纳任何类型的文本数据。利用它可以 使网页设计师不必限制访问者提交的内容。在网页 中,常见的文本框有3种形式: (1)单行文本框只能用来输入一行的信息。 (2)多行文本框可以由设计者限定行数,并决 定是否出现滚动条。该文本框可以输入多行信息 (3)密码文本框在该文本框中输入的信息,都 会以“*”显示在屏幕上

7.2.3 插入文本框 文本框是一个接受文本信息的空白框。在文本框 中几乎可以容纳任何类型的文本数据。利用它可以 使网页设计师不必限制访问者提交的内容。在网页 中，常见的文本框有3种形式： （1）单行文本框 只能用来输入一行的信息。 （2）多行文本框 可以由设计者限定行数，并决 定是否出现滚动条。该文本框可以输入多行信息。 （3）密码文本框 在该文本框中输入的信息，都 会以“*”显示在屏幕上

1.插入单行文本框 先输入提示信息,然后选择“插入”“表单对 象”|“文本域”命令。此时会在表单中插入一个单行 文本框。 2.插入多行文本框 先输入提示信息,然后选择“插入”|“表单对 象”|“文本区域”命令。此时会在表单中插入一个单 行文本框

1．插入单行文本框 先输入提示信息，然后选择“插入”|“表单对 象”|“文本域”命令。此时会在表单中插入一个单行 文本框。 2．插入多行文本框 先输入提示信息，然后选择“插入”|“表单对 象”|“文本区域”命令。此时会在表单中插入一个单 行文本框

3.插入密码文本框 先输入提示信息,然后选择“插入”“表单对 象”|“文本域”命令。此时会在表单中插入一个单行 文本框。用鼠标单击此单行文本框,在属性面板上的 “类型”下单击“密码”单选按钮,则单行文本框变 成了密码文本框。 4.设置文本框属性 在表单中插入文本框后,选择所插入的文本框,d 打开属性面板设置文本框属性

3．插入密码文本框 先输入提示信息，然后选择“插入”|“表单对 象”|“文本域”命令。此时会在表单中插入一个单行 文本框。用鼠标单击此单行文本框，在属性面板上的 “类型”下单击“密码”单选按钮，则单行文本框变 成了密码文本框。 4．设置文本框属性 在表单中插入文本框后，选择所插入的文本框，d 打开属性面板设置文本框属性

7.24插入单选按钮 1.插入单选按钮 要在表单中插入单选按钮,首先将光标置于表单 中的相应位置,输入提示信息,然后单击插入“表单 面板上的图标回或选择“插入”|“表单对象”“单 选按钮”命令,插入单选按钮

7.2.4 插入单选按钮 1．插入单选按钮 要在表单中插入单选按钮，首先将光标置于表单 中的相应位置，输入提示信息，然后单击插入“表单” 面板上的图标 ，或选择“插入”|“表单对象”|“单 选按钮”命令，插入单选按钮