《第12章 创建表单网页.ppt》由会员分享，可在线阅读，更多相关《第12章 创建表单网页.ppt（33页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、本章将介绍表单的基本知识以及创本章将介绍表单的基本知识以及创建表单网页的方法。建表单网页的方法。第第1212章章 创建表单网页创建表单网页教学目标了解表单的概念。了解表单的概念。掌握创建表单网页的方法。掌握创建表单网页的方法。掌握使用行为验证表单的方法。掌握使用行为验证表单的方法。12.1 创建表单网页认识表单认识表单创建表单创建表单本节主要内容：本节主要内容：12.1.1 认识表单表单是用户与服务器之间信息交互的桥梁，用户可以表单是用户与服务器之间信息交互的桥梁，用户可以使用诸如文本域、列表框、复选框以及单选按钮之类的表使用诸如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单
2、击某个按钮向服务器提交信息。单对象输入信息，然后单击某个按钮向服务器提交信息。当这些信息将被发送到服务器，服务器端脚本或应用当这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时会将被请程序将对这些信息进行处理。服务器进行响应时会将被请求信息发送回用户（或客户端），或基于该表单内容执行求信息发送回用户（或客户端），或基于该表单内容执行一些操作。当然，也可以将表单数据直接发送给某个电子一些操作。当然，也可以将表单数据直接发送给某个电子邮件收件人。邮件收件人。12.1.1 认识表单12.1.2 创建表单在制作表单页面时，需要插入表单对象。插入表单对象在制作表单页面
3、时，需要插入表单对象。插入表单对象通常有两种方法，一种是使用菜单命令通常有两种方法，一种是使用菜单命令【插入插入】/【表单表单】中的相应选项，另一种是使用中的相应选项，另一种是使用【插入插入】/【表单表单】面板中的面板中的相应工具按钮。相应工具按钮。在在【首选参数首选参数】对话框的对话框的【辅助功能辅助功能】分类中取消勾选分类中取消勾选【表单对象表单对象】复选框，在插入表单对象时将不会出现复选框，在插入表单对象时将不会出现【输输入标签辅助功能属性入标签辅助功能属性】对话框。对话框。插入表单对象后，如果要设置表单对象的属性，需要保证表插入表单对象后，如果要设置表单对象的属性，需要保证表单对象处于
4、选中状态，然后在单对象处于选中状态，然后在【属性属性】面板中进行设置。面板中进行设置。12.1.2 创建表单一、表单一、表单选择选择【插入插入】/【表单表单】/【表单表单】命令，插入一个表单命令，插入一个表单区域。区域。表表单单的的轮轮廓廓线线以以红红色的虚色的虚线线表示。如果看不到表示。如果看不到轮轮廓廓线线，可以，可以选择选择【查查看看】/【可可视视化助理化助理】/【不可不可见见元素元素】命命令令显显示示轮轮廓廓线线。12.1.2 创建表单【属性属性】面板中的面板中的【方法方法】选项选项用于用于设设置将表置将表单单内的数内的数据据传传送送给给服服务务器的方法，共有器的方法，共有3个个选项选
5、项。“GET”是指将表是指将表单单内的数据附加到内的数据附加到URL后面后面传传送送给给服服务务器，不适用表器，不适用表单单内容比内容比较较多的情况。多的情况。“POST”将在将在HTTP请请求中嵌入表求中嵌入表单单数据，在理数据，在理论论上不限上不限制表制表单单的的长长度，但由度，但由POST方法方法发发送的信息是未送的信息是未经经加密的。加密的。“默默认认”是指用是指用浏览浏览器的默器的默认设认设置将表置将表单单数据数据发发送到服送到服务务器。通常，默器。通常，默认认方法方法为为“GET”方法。方法。【MIME类类型型】选项选项用于用于设设置置对对提交提交给给服服务务器器进进行行处处理理的
6、数据使用的数据使用“MIME”编码类编码类型型，默默认设认设置置“application/x-www-form-urlencoded”常与常与【POST】方法方法协协同使用同使用。如果。如果要要创创建文件上建文件上传传域，域，应应指定指定“multipart/form-data MIME”类类型。型。12.1.2 创建表单二、文本域二、文本域文本域是可以文本域是可以输输入文本内容的表入文本内容的表单对单对象。象。选择选择【插入插入】/【表表单单】/【文本域文本域】命令插入一个文本域命令插入一个文本域。当当【类类型型】设设置置为为“密密码码”时时，文本内容，文本内容显显示示为为“*”号。当号。当
7、设设置置为为“多行多行”时时，单单行文本域将会行文本域将会变为变为多行的文本区域。多行的文本区域。12.1.2 创建表单三、三、列表列表/菜菜单单域域列表列表/菜菜单单可以可以显显示一个包含有多个示一个包含有多个选项选项的可的可滚动滚动列表，列表，在列表中可以在列表中可以选择选择需要的需要的项项目。目。选择选择【插入插入】/【表表单单】/【列表列表/菜菜单单】命令，插入一个列表命令，插入一个列表/菜菜单单域域。12.1.2 创建表单当当【类类型型】选项设选项设置置为为“菜菜单单”时时，【高度高度】和和【选选定范定范围围】选项为选项为不可不可选选状状态态，在，在【初始化初始化时选时选定定】列表框
8、中只列表框中只能能选择选择1个初始个初始选项选项。将。将【类类型型】选项设选项设置置为为“列表列表”时时，【高度高度】和和【选选定范定范围围】选项为选项为可可选选状状态态。其中，其中，【高度高度】选项选项用于用于设设置列表中置列表中显显示的示的项项数，数，【选选定范定范围围】选项选项用于用于设设置是否允置是否允许许多多项选择项选择。单击单击【列表列表值值】按按钮钮将打开将打开【列表列表值值】对话对话框，在框，在这这个个对话对话框中可以增减和修改框中可以增减和修改【列表列表/菜菜单单】的内容。每的内容。每项项内容内容都有一个都有一个项项目目标签标签和一个和一个值值，标签标签将将显显示在示在浏览浏
9、览器中的列器中的列表表/菜菜单单中。当列表或者菜中。当列表或者菜单单中的某中的某项项内容被内容被选选中，提交表中，提交表单时单时它它对应对应的的值值就会被就会被传传送到服送到服务务器端的表器端的表单处单处理程序，理程序，若没有若没有对应对应的的值值，则传则传送送标签标签本身。本身。12.1.2 创建表单四、四、单选单选按按钮钮单选单选按按钮钮主要用于主要用于标记标记一个一个选项选项是否被是否被选选中，中，单选单选按按钮钮只允只允许许用用户户从从选项选项中中选择选择一个一个选项选项。选择选择【插入插入】/【表表单单】/【单选单选按按钮钮】命令，插入命令，插入单选单选按按钮钮。12.1.2 创建表
10、单在在设设置置单选单选按按钮钮属性属性时时，需要依次，需要依次选选中各个中各个单选单选按按钮钮分分别进别进行行设设置。同一置。同一组单选组单选按按钮钮的名称都是一的名称都是一样样的，那么依的，那么依靠什么来判断哪个按靠什么来判断哪个按钮钮被被选选定呢？因定呢？因为单选为单选按按钮钮具有唯一具有唯一性，即多个性，即多个单选单选按按钮钮只能有一个被只能有一个被选选定，所以定，所以【选选定定值值】选项选项就是判断的唯一依据。就是判断的唯一依据。由于由于【选选定定值值】选项选项是用来是用来设设置在置在该单选该单选按按钮钮被被选选中中时时发发送送给给服服务务器的器的值值，因此每个，因此每个单选单选按按钮
11、钮的的【选选定定值值】选项选项被被设设置置为为不同的数不同的数值值，如性，如性别别“男男”的的单选单选按按钮钮的的【选选定定值值】选项选项被被设设置置为为“1”，性，性别别“女女”的的单选单选按按钮钮的的【选选定定值值】选选项项被被设设置置为为“0”。12.1.2 创建表单五、五、复复选选框框复复选选框允框允许许在一在一组选项组选项中中选择选择多个多个选项选项。选择选择【插入插入】/【表表单单】/【复复选选框框】命令，插入复命令，插入复选选框。框。12.1.2 创建表单每个复每个复选选框都是独立的，必框都是独立的，必须须有一个唯一的名称。在有一个唯一的名称。在设设置复置复选选框属性框属性时时，
12、需要依次，需要依次选选中各个复中各个复选选框分框分别进别进行行设设置。置。由于复由于复选选框在表框在表单单中一般都不中一般都不单单独出独出现现，而是多个复，而是多个复选选框框同同时时使用，因此其使用，因此其【选选定定值值】选项选项就就显显得格外重要。得格外重要。【选选定定值值】选项选项主要用来主要用来设设置在置在该该复复选选框被框被选选中中时发时发送送给给服服务务器的器的值值。例如，在一。例如，在一项调查项调查中，可以将中，可以将值值4设设置置为为表表示非常同意，示非常同意，值值1设设置置为为表示表示强强烈反烈反对对。另外，复。另外，复选选框的名框的名称最好与其称最好与其说说明性文字明性文字发
13、发生生联联系，系，这样这样在表在表单单脚本程序的脚本程序的编编制中将会制中将会节节省省许许多多时间时间和精力。和精力。12.1.2 创建表单六、六、文件域文件域文件域的作用是使用文件域的作用是使用户户可以可以选择选择其其计计算机上的文件，并算机上的文件，并将将该该文件上文件上传传到服到服务务器。器。选择选择【插入插入】/【表表单单】/【文件域文件域】命令，插入一个文件域。命令，插入一个文件域。12.1.2 创建表单文件域的外文件域的外观观与其他文本域与其他文本域类类似，只是文件域似，只是文件域还还包含一包含一个名称个名称为为【浏览浏览】的的按按钮钮。用用户户可以手可以手动输动输入要上入要上传传
14、的文件路径，也可以使用的文件路径，也可以使用该该按按钮钮定位并定位并选择选择文件。文件。当然，当然，真正上真正上传传文件文件还还需要需要具有服具有服务务器端脚本或能器端脚本或能够处够处理文件提交的理文件提交的页页面才行。面才行。文件域要求使用文件域要求使用POST方法将文件从方法将文件从浏览浏览器器传输传输到服到服务务器。器。该该文件被文件被发发送到表送到表单单的的【动动作作】文本框中所指定的地文本框中所指定的地址。址。12.1.2 创建表单七、七、文本区域文本区域文本区域是含有多行的文本域。文本区域是含有多行的文本域。选择选择【插入插入】/【表表单单】/【文本区域文本区域】命令插入一个文本区
15、域。命令插入一个文本区域。12.1.2 创建表单【属性属性】面板中的面板中的【行数行数】选项选项用于用于设设置多行文本域的置多行文本域的高度。高度。【换换行行】选项选项用于指定当用用于指定当用户输户输入的信息入的信息较较多，无多，无法在定法在定义义的文本区域内的文本区域内显显示示时时，如何，如何显显示用示用户输户输入的内容。入的内容。选择选择“关或默关或默认认”，防止文本，防止文本换换行到下一行。当用行到下一行。当用户输户输入入的内容超的内容超过过文本区域的右文本区域的右边边界界时时，文本将向左，文本将向左侧滚动侧滚动。用。用户户必必须须按按Enter 键键才能将插入点移才能将插入点移动动到文
16、本区域的下一行。到文本区域的下一行。选选择择“虚虚拟拟”，在在文文本本区区域域中中设设置置自自动动换换行行。当当用用户户输输入入的的内内容容超超过过文文本本区区域域的的右右边边界界时时，文文本本换换行行到到下下一一行行。当当提提交交数数据据进进行行处处理理时时，自自动动换换行行并并不不应应用用于于数数据据。数数据据作作为为一个数据字符串一个数据字符串进进行提交。行提交。选择选择“物理物理”，在文本区域，在文本区域设设置自置自动换动换行，当提交数据行，当提交数据进进行行处处理理时时，也，也对这对这些数据些数据设设置自置自动换动换行。行。12.1.2 创建表单八、八、隐隐藏域藏域隐隐藏域主要用来藏
17、域主要用来储储存并提交非用存并提交非用户输户输入信息，如注册入信息，如注册时时间间、认证认证号等，号等，这这些都需要使用些都需要使用JavaScript、ASP等源代等源代码码来来编编写，当然也可以根据需要直接写，当然也可以根据需要直接输输入文本或数字等内容。入文本或数字等内容。12.1.2 创建表单隐藏域在网页中一般不显现。隐藏域在网页中一般不显现。【属性】面板中的属性】面板中的【隐藏区域隐藏区域】文本框，主要用来设置文本框，主要用来设置隐藏域的名称。隐藏域的名称。【值值】文本框内可以输入文本框内可以输入ASPASP代码，如：代码，如：“”其中其中“%”是是ASPASP代码的开始、结束标志。
18、代码的开始、结束标志。“Date()Date()”表示当前的系统日期（如，表示当前的系统日期（如，2010-12-202010-12-20）。）。如果换成如果换成“Now()Now()”则表示当前的系统日期和时间（如，则表示当前的系统日期和时间（如，2010-12-20 10:16:442010-12-20 10:16:44）。）。而而“Time()Time()”则表示当前的系统时间（如，则表示当前的系统时间（如，10:16:4410:16:44）。）。12.1.2 创建表单九、九、按按钮钮按按钮对钮对于表于表单单来来说说是必不可少的，使用按是必不可少的，使用按钮钮可以将表可以将表单单数据提交
19、到服数据提交到服务务器，或者重置器，或者重置该该表表单单。选择选择【插入插入】/【表表单单】/【按按钮钮】命令，插入按命令，插入按钮钮。12.1.2 创建表单在在按按钮钮【属属性性】面面板板中中，【值值】用用于于设设置置按按钮钮上上显显示示的的文文本本，【动动作作】用用于于设设置置单单击击该该按按钮钮后后运运行行的的程程序序。【提提交交表表单单】表表示示单单击击该该按按钮钮后后将将表表单单中中的的数数据据提提交交给给表表单单处处理理应应用用程程序序，【重重设设表表单单】表表示示单单击击该该按按钮钮后后表表单单中中的的数数据据将将恢恢复复到到初初始始值值，【无无】表表示示单单击击该该按按钮钮后后
20、表表单单中中的的数数据既不提交也不重据既不提交也不重设设。另外，表另外，表单对单对象中的象中的图图像域也可用于生成像域也可用于生成图图形化的按形化的按钮钮，例如例如“提交提交”或或“重置重置”按按钮钮。图图像域使用像域使用户户可以在表可以在表单单中插中插入一个入一个图图像。像。方法是，方法是，选择选择【插入插入】/【表表单单】/【图图像域像域】命令，插入命令，插入图图像域。像域。12.1.2 创建表单十、十、单选单选按按钮组钮组 单选单选按按钮组钮组是指一次性插入多个是指一次性插入多个单选单选按按钮钮，省去了多次，省去了多次插入插入单单个个单选单选按按钮钮的麻的麻烦烦。选择选择【插入插入】/【
21、表表单单】/【单选单选按按钮组钮组】命令，打开命令，打开【单选单选按按钮组钮组】对话对话框框进进行行设设置即可。置即可。12.1.2 创建表单十一、十一、跳跳转转菜菜单单跳跳转转菜菜单单利用表利用表单单元素形成各种元素形成各种选项选项的列表。当的列表。当选择选择列列表中的某个表中的某个选项时选项时，浏览浏览器会立即跳器会立即跳转转到一个新网到一个新网页页。插。插入跳入跳转转菜菜单单的方法是，的方法是，选择选择【插入插入】/【表表单单】/【跳跳转转菜菜单单】命令，打开命令，打开【插入跳插入跳转转菜菜单单】对话对话框，添加菜框，添加菜单项单项并并进进行参数行参数设设置即可。置即可。12.1.2 创
22、建表单跳跳转转菜菜单单的外的外观观和菜和菜单单域相似，不同的是跳域相似，不同的是跳转转菜菜单单具有具有超超级链级链接功能。如果要修改跳接功能。如果要修改跳转转菜菜单单的菜的菜单项单项，方法与列，方法与列表表/菜菜单单一一样样。如果通。如果通过过【跳跳转转菜菜单单】行行为为来来进进行修改可能行修改可能更方便一些，因更方便一些，因为为添加添加【跳跳转转菜菜单单】后，在后，在【行行为为】面板面板中自中自动动出出现现了了【跳跳转转菜菜单单】行行为为，对对其其进进行双行双击击将打开将打开【跳跳转转菜菜单单】对话对话框，可以框，可以继续设继续设置相关参数。置相关参数。12.1.2 创建表单十二、字段集（补
23、充内容）十二、字段集（补充内容）使用字段集可以在页面中显示一个圆角矩形框，将一些内使用字段集可以在页面中显示一个圆角矩形框，将一些内容相关的表单对象放在一起。可以先插入字段集，然后再在容相关的表单对象放在一起。可以先插入字段集，然后再在其中插入表单对象。也可以先插入表单对象，然后将它们选其中插入表单对象。也可以先插入表单对象，然后将它们选中再插入字段集。选择中再插入字段集。选择【插入插入】/【表单表单】/【字段集字段集】命令，命令，插入一个字段集。插入一个字段集。12.1.2 创建表单十三、标签（补充内容）十三、标签（补充内容）使用标签可以向源代码中插入一对使用标签可以向源代码中插入一对HTM
24、L标签标签“”。其作用与在。其作用与在【输入标签辅助功能属输入标签辅助功能属性性】对话框的对话框的【样式样式】选项中选择选项中选择【用标签标记环绕用标签标记环绕】单选单选按钮的用途是一样的。选择按钮的用途是一样的。选择【插入插入】/【表单表单】/【标签标签】命命令，插入一个标签。令，插入一个标签。12.2 使用行为验证表单表表单单在提交到服在提交到服务务器端以前，必器端以前，必须进须进行行验证验证，以确保，以确保输输入数据的合法性。使用入数据的合法性。使用【检查检查表表单单】行行为为可以可以检查检查指定文指定文本域的内容，以确保用本域的内容，以确保用户输户输入了正确的数据入了正确的数据类类型。
25、型。选选中整个表中整个表单单，在，在【行行为为】面板的面板的【行行为为】菜菜单单中中选择选择【检查检查表表单单】命令，打开命令，打开【检查检查表表单单】对话对话框框进进行参数行参数设设置，然后在置，然后在【行行为为】面板中面板中设设置触置触发发事件事件为为“onSubmit”。12.2 使用行为验证表单如果用如果用户户是在填写表是在填写表单时单时分分别检查别检查各个表各个表单单域，此域，此时时需要分需要分别选择别选择各个表各个表单单域，然后在域，然后在【行行为为】面板的面板的【行行为为】菜菜单单中中选择选择【检查检查表表单单】命令。如果用命令。如果用户户是在提交表是在提交表单单时检查时检查各个
26、表各个表单单域，需要先域，需要先选选中整个表中整个表单单，然后再，然后再选择选择【检查检查表表单单】命令，打开命令，打开【检查检查表表单单】对话对话框框进进行参数行参数设设置。置。在在设设置了置了【检查检查表表单单】行行为为后，当表后，当表单单被提交被提交时时（“onSubmit”大小写不能随意更改），大小写不能随意更改），验证验证程序会自程序会自动动启启动动，必填，必填项项如果如果为为空空则发则发生警告，提示用生警告，提示用户户重新填写，如重新填写，如果不果不为为空空则则提交表提交表单单。12.2 使用行为验证表单使用代码验证密码是否相同（补充内容）使用代码验证密码是否相同（补充内容）在表单中右键单击具有在表单中右键单击具有“提交提交”功能的按钮，在弹出功能的按钮，在弹出的快捷菜单中选择的快捷菜单中选择【编辑标签编辑标签E】命令，打开命令，打开【标签编辑器标签编辑器input】对话框。对话框。12.2 使用行为验证表单在对话框中选中在对话框中选中“onClick”事件，在右侧的文本框中输事件，在右侧的文本框中输入代码。其中的入代码。其中的“PassWord1”和和“PassWord2”分别换成表分别换成表单网页中两个密码文本域的名称单网页中两个密码文本域的名称“passw1”和和“passw2”即可。即可。