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