新网页设计与制作实用技术 电子教案－齐建玲 CH7.PPTVIP

7.1 表单概述 * * 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 通过本章学习，应该掌握以下内容： 认识网页表单 利用Dreamweaver MX创建表单的方法 利用Dreamweaver MX编辑表单的方法 利用HTML处理网页表单的方法 第7章 网页表单的处理 为了制作好复杂的表单网页，在Dreamweaver MX中提供了文本框、文本区、单选按钮、复选框、下拉列表框、提交按钮和重置按钮等丰富的表单域。这些表单域具有以下各自不同的功能： （1）单行文本框 单行文本框用来输入比较简单的信息。 （2）多行文本框 如果需要输入建议、需求等大段文字，使用单行文本框就显得力不从心了，这时通常使用带有滚动条的多行文本框。 （3）单选按钮 单选按钮常用于表示唯一的选择结果，如“同学录注册”表单中的“性别”按钮。 （4）复选框 复选框常用来表示许多项可以同时选中的事物，比如个人爱好、所学科目和选购的产品种类等。 （5）下拉列表框 当需要选择职业、文化程度等事项时，除了文本区以外，还可以考虑使用下拉列表框。 （6）提交按钮和重置按钮 当用户完成了表单的填写后，如果需要提交数据，则可以单击表单中的提交按钮，通常按钮上的文字为“提交”或“确认”等。如上图中的“确定”按钮；如果希望恢复表单为填写前的状态，以便重新填写，则可以单击重置按钮，通常按钮上的文字为“重置”、“重填”或“重新填写”等。 Dreamweaver MX提供了一个专门的表单对象插入面板，面板上包含了各种表单对象。选择“窗口”|“插入”命令，打开插入面板，单击插入面板上的“表单”标签，切换到插入“表单”面板如图2所示。 7.2 利用Dreamweaver MX处理表单 7.2.1 表单插入面板 7.2.2 创建空白表单 因为在发送表单时是以整个表单发送的，所以在插入表单元素前，先要在网页中插入空白的表单，然后才能在表单中插入表单元素（如文本框、按钮、列表/菜单、图片等），以达到整体发送的效果。 演示创建空白表单的过程 。 7.2.3 插入文本框 文本框是一个接受文本信息的空白框。在文本框中几乎可以容纳任何类型的文本数据。利用它可以使网页设计师不必限制访问者提交的内容。在网页中，常见的文本框有3种形式： （1）单行文本框 只能用来输入一行的信息。 （2）多行文本框 可以由设计者限定行数，并决定是否出现滚动条。该文本框可以输入多行信息。 （3）密码文本框 在该文本框中输入的信息，都会以“*”显示在屏幕上。 1．插入单行文本框 先输入提示信息，然后选择“插入”|“表单对象”|“文本域”命令。此时会在表单中插入一个单行文本框。 2．插入多行文本框 先输入提示信息，然后选择“插入”|“表单对象”|“文本区域”命令。此时会在表单中插入一个单行文本框。 3．插入密码文本框 先输入提示信息，然后选择“插入”|“表单对象”|“文本域”命令。此时会在表单中插入一个单行文本框。用鼠标单击此单行文本框，在属性面板上的“类型”下单击“密码”单选按钮，则单行文本框变成了密码文本框。 4．设置文本框属性 在表单中插入文本框后，选择所插入的文本框，d打开属性面板设置文本框属性。 7.2.4 插入单选按钮 1．插入单选按钮 要在表单中插入单选按钮，首先将光标置于表单中的相应位置，输入提示信息，然后单击插入“表单”面板上的图标 ，或选择“插入”|“表单对象”|“单选按钮”命令，插入单选按钮。 2．设置单选按钮的属性 在表单中选择单选按钮后，属性面板将变为如图所示。 （1）单选按钮：给单选按钮命名。同一组的单选按钮的名称必须相同，这一点非常重要。 （2）选定值：设置单选按钮被选时的取值。当用户提交表单时，该值被传送给处理程序（如CGI脚本），应赋给同组的每个单选按钮不同的值。 （3）初始状态：指定首次载入表单时单选按钮是“已勾选”还是“未勾选”。一组单选按钮中，只能有一个按钮的初始状态被设为选中。 1．插入复选框 7.2.5 插入复选框 将光标置于