10网页表单的处理

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

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

1 / 30
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功