1.2网页表单的处理ppt课件_第1页
1.2网页表单的处理ppt课件_第2页
1.2网页表单的处理ppt课件_第3页
1.2网页表单的处理ppt课件_第4页
1.2网页表单的处理ppt课件_第5页
已阅读5页,还剩25页未读, 继续免费阅读

下载本文档

kok电子竞技权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

kok电子竞技:文档简介

1、通过本章学习,应该掌握以下内容:通过本章学习,应该掌握以下内容:认识网页表单认识网页表单利用利用Dreamweaver创建表单的方法创建表单的方法利用利用Dreamweaver编辑表单的方法编辑表单的方法利用利用HTML处理网页表单的方法处理网页表单的方法 为了制作好复杂的表单网页,在为了制作好复杂的表单网页,在Dreamweaver MX中提供了文本框、文本区、单选按钮、复选框、中提供了文本框、文本区、单选按钮、复选框、下拉列表框、提交按钮和重置按钮等丰富的表单域。下拉列表框、提交按钮和重置按钮等丰富的表单域。这些表单域具有以下各自不同的功能:这些表单域具有以下各自不同的功能: (1单行文本

2、框单行文本框 单行文本框用来输入比较简单的信息。单行文本框用来输入比较简单的信息。 (2多行文本框多行文本框 如果需要输入建议、需求等大段文字,使用单行文本如果需要输入建议、需求等大段文字,使用单行文本框就显得力不从心了,这时通常使用带有滚动条的多框就显得力不从心了,这时通常使用带有滚动条的多行文本框。行文本框。 (3单选按钮单选按钮 单选按钮常用于表示唯一的选择结果,如单选按钮常用于表示唯一的选择结果,如“同学录同学录注册表单中的注册表单中的“性别按钮。性别按钮。 (4复选框复选框 复选框常用来表示许多项可以同时选中的事物,复选框常用来表示许多项可以同时选中的事物,比如个人爱好、所学科目和选

3、购的产品种类等。比如个人爱好、所学科目和选购的产品种类等。 (5下拉列表框下拉列表框 当需要选择职业、文化程度等事项时,除了文本区当需要选择职业、文化程度等事项时,除了文本区以外,还可以考虑使用下拉列表框。以外,还可以考虑使用下拉列表框。 (6提交按钮和重置按钮提交按钮和重置按钮 当用户完成了表单的填写后,如果需要提交数据,当用户完成了表单的填写后,如果需要提交数据,则可以单击表单中的提交按钮,通常按钮上的文字则可以单击表单中的提交按钮,通常按钮上的文字为为“提交或提交或“确认等。如上图中的确认等。如上图中的“确定按钮;确定按钮;如果希望恢复表单为填写前的状态,以便重新填写,如果希望恢复表单为

4、填写前的状态,以便重新填写,则可以单击重置按钮,通常按钮上的文字为则可以单击重置按钮,通常按钮上的文字为“重置重置”、“重填或重填或“重新填写等。重新填写等。 Dreamweaver MX提供了一个专门的表单对象插提供了一个专门的表单对象插入面板,面板上包含了各种表单对象。选择入面板,面板上包含了各种表单对象。选择“窗窗口口”|“插入命令,打开插入面板,单击插入面板上插入命令,打开插入面板,单击插入面板上的的“表单标签,切换到插入表单标签,切换到插入“表单面板如图表单面板如图2所示。所示。10.2 利用利用Dreamweaver处理表单处理表单 10.2.1 表单插入面板表单插入面板 10.2

5、.2 创建空白表单创建空白表单 因为在发送表单时是以整个表单发送的,所以因为在发送表单时是以整个表单发送的,所以在插入表单元素前,先要在网页中插入空白的表单,在插入表单元素前,先要在网页中插入空白的表单,然后才能在表单中插入表单元素如文本框、按钮、然后才能在表单中插入表单元素如文本框、按钮、列表列表/ /菜单、图片等),以达到整体发送的效果。菜单、图片等),以达到整体发送的效果。演示创建空白表单的过程演示创建空白表单的过程 。 10.2.3 插入文本框插入文本框 文本框是一个接受文本信息的空白框。在文本框文本框是一个接受文本信息的空白框。在文本框中几乎可以容纳任何类型的文本数据。利用它可以中几

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

7、后选择先输入提示信息,然后选择“插入插入”|“表单对表单对象象”|“文本域命令。此时会在表单中插入一个文本域命令。此时会在表单中插入一个单行文本框。单行文本框。 2插入多行文本框插入多行文本框 先输入提示信息,然后选择先输入提示信息,然后选择“插入插入”|“表单对表单对象象”|“文本区域命令。此时会在表单中插入一文本区域命令。此时会在表单中插入一个单行文本框。个单行文本框。 3插入密码文本框插入密码文本框 先输入提示信息,然后选择先输入提示信息,然后选择“插入插入”|“表单对表单对象象”|“文本域命令。此时会在表单中插入一个文本域命令。此时会在表单中插入一个单行文本框。用鼠标单击此单行文本框,

8、在属单行文本框。用鼠标单击此单行文本框,在属性面板上的性面板上的“类型下单击类型下单击“密码单选按钮,密码单选按钮,则单行文本框变成了密码文本框。则单行文本框变成了密码文本框。 4设置文本框属性设置文本框属性 在表单中插入文本框后,选择所插入的文在表单中插入文本框后,选择所插入的文本框,本框,d打开属性面板设置文本框属性。打开属性面板设置文本框属性。 10.2.4 插入单选按钮插入单选按钮 1插入单选按钮插入单选按钮 要在表单中插入单选按钮,首先将光标置于表单要在表单中插入单选按钮,首先将光标置于表单中的相应位置,输入提示信息,然后单击插入中的相应位置,输入提示信息,然后单击插入“表单表单面板

9、上的图标面板上的图标 ,或选择,或选择“插入插入”|“表单对象表单对象”|“单选单选按钮命令,插入单选按钮。按钮命令,插入单选按钮。 2设置单选按钮的属性设置单选按钮的属性 在表单中选择单选按钮后,属性面板将变为如在表单中选择单选按钮后,属性面板将变为如图所示。图所示。 (1单选按钮:给单选按钮命名。同一组的单选按单选按钮:给单选按钮命名。同一组的单选按钮的名称必须相同,这一点非常重要。钮的名称必须相同,这一点非常重要。(2选定值:设置单选按钮被选时的取值。当用户选定值:设置单选按钮被选时的取值。当用户提交表单时,该值被传送给处理程序如提交表单时,该值被传送给处理程序如CGI脚脚本),应赋给同

10、组的每个单选按钮不同的值。本),应赋给同组的每个单选按钮不同的值。 (3初始状态:指定首次载入表单时单选按钮是初始状态:指定首次载入表单时单选按钮是“已勾选还是已勾选还是“未勾选未勾选”。一组单选按钮中,只能。一组单选按钮中,只能有一个按钮的初始状态被设为选中。有一个按钮的初始状态被设为选中。 1插入复选框插入复选框10.2.5 插入复选框插入复选框 将光标置于表单中适当位置,输入提示信息将光标置于表单中适当位置,输入提示信息“兴兴趣趣”,再给复选框添加说明性语言,再给复选框添加说明性语言“读书读书”、“旅游旅游”、“体育和体育和“音乐音乐”;然后单击插入;然后单击插入“表单面板上的表单面板上

11、的图标图标 ,或选择,或选择“插入插入”|“表单对象表单对象”|“复选框命复选框命令,在选项的合适位置加入复选框。令,在选项的合适位置加入复选框。 在表单中选择复选框后,其属性面板的显示与在表单中选择复选框后,其属性面板的显示与单选按钮属性面板基本相同只是图标不同)。但单选按钮属性面板基本相同只是图标不同)。但在给复选框命名时,要注意复选框与单选按钮命名在给复选框命名时,要注意复选框与单选按钮命名的区别。单选按钮是以的区别。单选按钮是以“组为单位的,而复选框组为单位的,而复选框则是以则是以“个为单位的,所以每一个复选框的名称个为单位的,所以每一个复选框的名称都不应该相同。都不应该相同。 2设置

12、复选框的属性设置复选框的属性 10.2.6 插入下拉列表框插入下拉列表框 1插入下拉列表框插入下拉列表框 要在表单中插入下拉列表框,应按如下步骤进行:要在表单中插入下拉列表框,应按如下步骤进行:(1将光标定位在表单中适当位置,输入提示信息。将光标定位在表单中适当位置,输入提示信息。(2单击插入单击插入“表单面板上的图标表单面板上的图标 ,或选择,或选择“插插入入”|“表单对象表单对象”|“列表列表/菜单命令,则在表单中出菜单命令,则在表单中出现下拉列表框的框架;选中该下拉列表框,属性面现下拉列表框的框架;选中该下拉列表框,属性面板变成下拉列表属性面板,如下图;板变成下拉列表属性面板,如下图;

13、(3选择选择“类型为类型为“列表列表”,单击属性面板上的,单击属性面板上的“列列表值按钮确保下拉列表框处于选择状态),弹表值按钮确保下拉列表框处于选择状态),弹出出“列表值对话框,如下图。列表值对话框,如下图。 (4在在“列表值对话框的列表值对话框的“项目标签下输入要在项目标签下输入要在列表框中显示的内容,在列表框中显示的内容,在“值下输入与显示内容值下输入与显示内容相应的值传送到服务器中的即为该值),即可为相应的值传送到服务器中的即为该值),即可为列表框加入显示的内容。列表框加入显示的内容。 在表单中插入下拉列表框后,选择所插入的下在表单中插入下拉列表框后,选择所插入的下拉列表框,其属性面板

14、如图所示。拉列表框,其属性面板如图所示。2设置下拉列表框属性设置下拉列表框属性 根据要求完成下拉列表框类型、高度、列表值、根据要求完成下拉列表框类型、高度、列表值、选定范围等属性的设置。选定范围等属性的设置。 10.2.7 插入按钮插入按钮 1插入插入“提交按钮提交按钮 首先将光标置于需要插入按钮的表单中,单击插首先将光标置于需要插入按钮的表单中,单击插入入“表单面板上的图标表单面板上的图标 ,或选择,或选择“插入插入”|“表单对表单对象象”|“按钮命令,则在表单中将插入一个按钮命令,则在表单中将插入一个“提交按提交按钮。钮。2插入插入“重置按钮重置按钮 首先在表单中插入首先在表单中插入“提交

15、按钮,选中此按钮,提交按钮,选中此按钮,在属性面板上的在属性面板上的“动作下单击动作下单击“重设表单单选按钮。重设表单单选按钮。则在表单中出现则在表单中出现“重置按钮。重置按钮。 3插入普通按钮插入普通按钮 普通按钮的创建方法与普通按钮的创建方法与“重置按钮的创建方法基重置按钮的创建方法基本上相同,但在属性面板上的本上相同,但在属性面板上的“动作下要选择动作下要选择“无无单选按钮。单选按钮。 4按钮属性设置按钮属性设置 表单中的表单中的3种按钮可以通过选择属性面板种按钮可以通过选择属性面板“动作中动作中的不同选项实现相互转换。的不同选项实现相互转换。 因为表单是以表格的形式创建的,所以可以通过

16、因为表单是以表格的形式创建的,所以可以通过设置表格的背景颜色来设置表单的背景颜色。设置表格的背景颜色来设置表单的背景颜色。10.2.8 设置表单的背景颜色设置表单的背景颜色 利用利用HTML也可以创建表单,创建表单时要用到也可以创建表单,创建表单时要用到表单标记符和表单输入标记符。表单标记符和表单输入标记符。 10.3 利用利用HTML处理表单处理表单 HTML中表单标记符为中表单标记符为FORM,其主要作用是设,其主要作用是设定表单的起止位置,并指定处理表单数据程序的定表单的起止位置,并指定处理表单数据程序的URL地址。其基本语法结构如下:地址。其基本语法结构如下: FORM action=

17、 URL method= GET/POST 其中其中Action用于设定处理表单数据程序用于设定处理表单数据程序URL的地址。的地址。 method指定数据传送到服务器的方式。有两种主要的指定数据传送到服务器的方式。有两种主要的方式,当方式,当method=GET时,将输入数据加在时,将输入数据加在action指定的地址后面传送到服务器;当指定的地址后面传送到服务器;当method=POST时则将输入数据按照时则将输入数据按照HTTP输送协议中的输送协议中的POST传输传输方式传送到服务器。方式传送到服务器。 10.3.1 表单标记符表单标记符 INPUT是表单输入标记符,在表单创建中使用频是

18、表单输入标记符,在表单创建中使用频繁,大部分表单内容需要用到此标记符。其语法如下:繁,大部分表单内容需要用到此标记符。其语法如下:各项的意义是:各项的意义是:type:text表示输入单行文本。表示输入单行文本。type:textarea表示输入多行文本。表示输入多行文本。type:password表示输入数据为密码,用表示输入数据为密码,用“*”表示。表示。10.3.2 表单输入标记符表单输入标记符 type:checkbox表示复选框。表示复选框。type:radio表示单选框。表示单选框。type:submit表示提交按钮,数据将被送到服务器。表示提交按钮,数据将被送到服务器。type:

19、reset表示清除表单数据,以利于重新输入。表示清除表单数据,以利于重新输入。type:file表示插入一个文件。表示插入一个文件。type:hidden表示隐藏按钮。表示隐藏按钮。type:image表示插入一个图像。表示插入一个图像。type:button表示普通按钮。表示普通按钮。 创建单行文本框的基本语法如下:创建单行文本框的基本语法如下: 其中其中name属性指定了控件的名称;属性指定了控件的名称;value属性指定了属性指定了控件的初始值;控件的初始值;size属性指定了文本框的宽度;属性指定了文本框的宽度;maxlength属性指定了在文本框中可以输入的最长文属性指定了在文本框中

20、可以输入的最长文本数。本数。 10.3.3 控件定义方法控件定义方法 1文本框和口令框文本框和口令框 创建复选框和单选框也是使用创建复选框和单选框也是使用INPUT标记符,语标记符,语法分别如下:法分别如下: type属性为属性为checkbox,说明该控件是一个复选框,说明该控件是一个复选框,type属性为属性为radio,说明该控件是一个单选框;,说明该控件是一个单选框;name属性和属性和value属性的值都是程序处理表单数据属性的值都是程序处理表单数据时需要的;时需要的;checked属性是可选的,属性是可选的, 2复选框与单选按钮复选框与单选按钮 创建提交按钮、重置按钮和自定义按钮的

21、语法分别创建提交按钮、重置按钮和自定义按钮的语法分别如下:如下: 3按钮按钮 利用利用HTML创建多行文本框应使用创建多行文本框应使用TEXTAREA标标记符,其使用格式如下:记符,其使用格式如下:默认多行文默认多行文本本 其中其中name属性用于指定控件名;属性用于指定控件名;rows属性用于设置多属性用于设置多行文本框的行数用户的输入可以多于这个行数,超行文本框的行数用户的输入可以多于这个行数,超过可视区域的内容可以用滚动条进行控制操作);过可视区域的内容可以用滚动条进行控制操作);cols属性用于设置多行文本框的列数属性用于设置多行文本框的列数 。4多行文本框文本区)多行文本框文本区)

22、要创建选项菜单应使用要创建选项菜单应使用SELECT标记符,并将每标记符,并将每个可独立选取的项用一个个可独立选取的项用一个OPTION标记符标出来。创标记符标出来。创建选项菜单的语法如下:建选项菜单的语法如下:选项选项1内容内容选项选项2内容内容5选项菜单选项菜单 其中,其中,SELECTSELECT标记符的标记符的namename属性用于指定控件名;属性用于指定控件名;sizesize属性用于指定选项菜单中一次显示多少行默认属性用于指定选项菜单中一次显示多少行默认值为值为1 1););multiplemultiple属性用于设置允许用户选择多个属性用于设置允许用户选择多个选项如果不设置此属性,则仅允许选择一个选项)。选项如果不设置此属性,则仅允许选择一个选项)。OPTIONOPTION标记符的标记符的labellabel属性可以为选项指定一个标记属性可以为选项指定一个标记符,当使用此属性时,浏览器将采用此属性的值而非符,当使用此属性时,浏览器将采用此属性的值而非OPTIONOPTION标记符中的内容作为选项标记符;标记符中的内容作为选项标记符;selected selected 属性用于设置当前选项为预先选中状态;属性用于设置当前选项为预先选中状态;valuevalue属性属性指定了控件的初始值。指定了控件的初始值。 E N D

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

kok电子竞技:最新文档

评论

0/150

提交评论