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