商务网页实例项目09课件.pptx

1、 内容提要在Internet上使用表单主要是为了实现浏览者同Internet服务器之间的交互。通过表单，可以将浏览者的信息发送到Internet服务器上，以供处理。表单也可以使用户与站点的浏览者交互。例如，用户可以询问浏览者的用户名称和电子邮件地址，或者对浏览者做一个调查，在访客簿上签名，或者提供关于用户的站点信息反馈。通过本项目的学习，你能够掌握创建和设置表单的方法。1有关表单的概念表单是网页设计者与网页的浏览者进行交流的工具，其作用就是从访问Web站点的浏览者那里获得信息。表单在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集浏览者的名字和E-mail地址、调查表、留言簿等。一

2、个表单有3个基本组成部分：表单标签，包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。活动活动1 1 学习表单相关知识学习表单相关知识 2常用表单域（1）表单域当浏览者在网页的表单对象内输入信息后，这些信息将被程序处理，或者发送到规定的邮箱里，于是需要给出网页一个范围。只有在该范围内的表单对象中的信息才会被发送，这个范围就叫做表单域。表单域标签功能：用于

3、申明表单，定义采集数据的范围，也就是和里面包含的数据将被提交到服务器或者电子邮件里。语法：.属性解释见表9-1。表9-1 表单域标签属性属 性解 释action=url指定一个处理提交表单的格式，它可以是一个URL地址（提交给程式）或一个电子邮件地址method=get或post指明提交表单的HTTP方法，可能的值如下。post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器。这是往前兼容的默认值，这个值由于国际化的原因不赞成使用enctype=cdata指明用来把表单提

4、交给服务器时（当method值为post）的互联网媒体形式。这个特性的默认值是application/x-www-form-urlencodedTARGET=.指定提交的结果文档显示的位置。_blank：在一个新的、无名浏览器窗口调入指定的文档_self：在指向这个目标的元素的相同的框架中调入文档_parent：把文档调入当前框的直接的父框中；这个值在当前框没有父框时等价于_self_top：把文档调入原来的最顶部的浏览器窗口中（因此取消所有其他框架）；这个值等价于当前框没有框时的_self 例如：.表示表单将向http:/ 隐藏域属性（6）复选框复选框允许在待选项中选中一项以上的选项。每个复

5、选框都是一个独立的元素，都必须有一个唯一的名称。代码格式：属性解释见表9-6。（7）单选按钮当需要访问者在待选项中选择唯一的答案时，就需要用到单选按钮了。代码格式：属性解释见表9-7。（8）文件域有时候，需要浏览者上传自己的文件，文件域看上去和其他文本域差不多，只是它还包含了一个“浏览”按钮。浏览者可以输入需要上传的文件的路径或者单击“浏览”按钮选择需要上传的文件。注意：在使用文件域以前，请先确定服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=multipart/form-data来确保文件被正确编码；另外，表单的传送方式必须设置成POST。代码格式：属性解释见表9-8。（9）下

6、拉选择框下拉选择框允许你在一个有限的空间设置多种选项。代码格式：.属性解释见表9-9。（10）表单按钮表单按钮控制表单的运作。1）提交按钮。提交按钮用来将输入的信息提交到服务器。代码格式：属性解释见表9-10。2）复位按钮。复位按钮用来重置表单。代码格式：属性解释见表9-11。3）一般按钮。一般按钮用来控制其他定义了处理脚本的处理工作。代码格式：属性解释见表9-12。1活动分析注册表单是网页和浏览者进行交互的一个重要窗口，通过表单可以将浏览者反应的信息提交到服务器。2知识要点 表单的使用。掌握文本域、密码框、单选按钮、复选框等的使用。3动手操作步骤步骤1 添加文本添加文本域域1）打开“regi

7、ster.html”文件。鼠标单击要插入表单的位置。2）选择“插入”“表单”“表单”命令，或单击“插入”面板上的“表单”选项卡中的“表单”按钮，此时在编辑区里可看到一个红色虚线的矩形区域，如图9-1所示。活动活动2 2 完成网上商城注册页面完成网上商城注册页面 3）在“插入”面板中单击“布局”中的表格，创建一个宽600像素的5行2列的表格，如图9-2所示。4）在第一行第一个单元格内输入“用户名：”，调整这一列的宽度为200像素，对齐方式为水平右对齐，如图9-3所示。5）选择第一行第二个单元格，设置对齐方式为水平左对齐。在“插入”面板上单击“表单”中的“文本域”按钮。在弹出的“输入标签辅助功能”

8、对话框中选择“无标签标记”单选按钮，单击“确定”按钮，文本域就添加完成。用户还可以利用“属性”面板对文本域进行设置。打开“属性”面板，选取文本域，如图9-4所示。其中各项属性如下。“文本域”：设置当前文本域的名字。“字符宽度”：设置文本域在网页中的长度。注意，不是以像素而是以字数来定义的。“类型”：其中的三个单选按钮用于设置文本域的类型，分别是单行、多行、密码，默认为多行。单行方式适用于输入姓名、证件号码等信息，多行方式常用于输入留言，而密码方式多用于输入密码。如果用户选择了“密码”单选按钮，那么这个文本域的内容就成为密码类型，它将以“*”形式显示。预览效果如图9-5所示。步骤步骤2 添加密码

9、添加密码框框1）选择第二行第一个单元格，在单元格内输入“密码：”，调整这一列的宽度为200像素，对齐方式为水平右对齐。2）选择第二行第二个单元格，设置单元格左对齐。插入一个文本域。3）将属性面板上的“类型”选择为“密码”单选按钮，字符宽度为：22。4）复制第二行单元格内容，全部粘贴到第三行，并将文字改为“确认密码”。预览效果如图9-6所示。步骤步骤3 添加单选添加单选按钮按钮对于只能允许浏览者在多个选择中选取一个选项时，设计者应该使用单选按钮。这种按钮只允许浏览者在一组选项中做出唯一的选择，如在通常的问卷调查中，性别选项中的“男”或“女”；在确认选项中的“是”或“否”等。如果选择之后需作调整，

10、可选择另外一个而取消前面的选择。插入单选按钮的方法如下：1）选择第四行第一个单元格，输入文本“性别”。2）在“插入”面板的“表单”选项卡上单击“单选按钮”按钮，也可选择“插入”“表单”“单选按钮”命令，光标所在位置将出现一个单选按钮元素。在后面输入“男”。用同样的方法再插入一个单选按钮，然后输入“女”。3）如需修改单选按钮属性，选取单选按钮，打开“属性”面板，如图9-7所示。其中的各项属性如下。“单选按钮”：设置单选按钮组的名字。“选定值”：设置选中单选按钮时的值。“初始状态”：设置单选按钮的初始状态。最终效果如图9-8所示。步骤步骤4 添加添加复选框复选框插入复选框的方法与插入单选按钮的方法

11、相似：选择“插入”“表单”“复选框”命令，或者在“插入”面板的“表单”组上单击“复选框”按钮，光标所在位置出现一个复选框元素。在“属性”面板中可以设置复选框的属性，如图9-9所示。插入复选框后，在它的旁边添加一些解释是非常必要的，最终效果如图9-10所示。步骤步骤5 添加列表与添加列表与菜单菜单1）选择“插入”“表单”“选择（列表/菜单）”命令，或单击“插入”面板“表单”选项卡中的“列表/菜单”按钮。成功创建后，在光标所在位置就会出现一个列表/菜单元素。2）列表/菜单的大小按照设计者给定的选项的长短而变化，因此不需要修改它的长度。选择一个列表/菜单，其“属性”面板如图9-11所示。3）在“列表

12、/菜单”的“选择”文本框中输入“diqu”，作为菜单的名称。4）在“类型”选项组中选取“菜单”单选按钮。5）单击“列表值”按钮，弹出“列表值”对话框，如图9-12所示。6）在“项目标签”栏中输入项目名称，在“值”栏中输入项目的值，按键可以方便地在名称和值之间切换。输入项目的“列表值”对话框如图9-13所示。7）可以在菜单中设置默认值。如果用户没有在菜单中做出选择而直接提交表单，浏览器将发送默认值。打开“属性”面板的扩展栏，在“初始化时选定”列表区中选择一个项目，将其作为默认值。本例中，选中了“所在地区”选项，如图9-14所示。创建列表与创建菜单十分类似，只不过在“类型”选项区中选取“列表”单选

13、按钮，同时在“高度”文本框中设置控制列表的显示行数，在“选定范围”选项组中选中“允许多选”复选框，设置是否允许访问者作多项选择。图9-15上部分为插入了“地区”列表后的页面，下部分为“属性”面板上显示了此列表的属性。最后预览效果如图9-16、图9-17所示。步骤步骤6 添加自我介绍文本添加自我介绍文本域域1）多行文本域的添加和单行文本域的添加方法基本相同。选择第七行第二个单元格。2）在“插入”面板上单击“表单”中的“文本区域”按钮。3）利用“属性”面板对文本域进行设置。打开“属性”面板，选取文本域，如图9-18所示。其中的各项属性如下。“文本域”：设置当前文本域的名字。“字符宽度”：设置文本域

14、在网页中的长度。注意，不是以像素而是以字数来定义的。“行数”：设置允许用户输入的行数。“类型”：其中的三个单选按钮用于设置文本域的类型，分别是单行、多行、密码，默认为多行。单行方式适用于输入姓名、证件号码等信息，多行方式常用于输入留言，而密码方式多用于输入密码。预览效果如图9-19所示。步骤步骤7 添加按钮添加按钮 1）选择第八行，合并单元格。设置居中对齐。2）在“插入”面板上单击“表单”组中的“按钮”按钮，或选择“插入”“表单”“按钮”命令，即在表单域内插入提交按钮，并打开“属性”面板，如图9-20所示。3）在“按钮名称”文本框内输入按钮的名称。4）在“动作”选项区选择按钮类型，即设置按钮触

15、发的动作。系统默认选定“提交表单”动作类型。5）再次插入一个按钮，设置其“动作”为“重设表单”。表示当对表单中填写的内容不满意时，重新填写表单。这样就完成了一般按钮的创建和设置工作。最后效果如图9-21所示。1活动分析网页验证是网页信息交互前必须要做的工作，通常情况下需要编写JavaScript代码来检测用户输入信息的正确性。在Dreamweaver CS5中提供了方便的Spry验证。不需要用户编写JavaScript代码就可以实现页面的检测。Spry验证文本域构件是一个文本域，该域用于在站点访问者输入文本时显示文本的状态（有效或无效）。例如，您可以向访问者电子邮件地址的表单中添加验证文本域构

16、件。如果访问者无法在电子邮件地址中输入“”符号和句点，验证文本域构件会返回一条消息，声明用户输入的信息无效。2知识要点 表单的基本操作。Spry验证的使用。活动活动3 3 实现网上商城注册页面表单的验证与提交实现网上商城注册页面表单的验证与提交 3动手操作步骤步骤1 插入验证文本域插入验证文本域构件构件1）在“文档”窗口的“设计”视图中，选择用户文本框。2）单击“插入”“Spry”“Spry验证文本域”，或单击“插入”栏上的“表单”类别，选择“Spry验证文本域”，如图9-22所示。3）在弹出的“输入标签辅助功能属性”对话框中单击“确定”按钮，如图9-23所示。4）Dreamweaver自动完

17、成的效果，如图9-24图9-27所示。最终效果如图9-28所示。步骤步骤2 验证文本域构件的验证文本域构件的属性属性在“文档”窗口中选择一个验证文本域构件，单击“窗口”“属性”，将打开“属性检查器”，如图9-29所示。其中各项属性如下。“Spry文本域”：设置Spry文本域的名称。“类型”：为验证文本域构件指定不同的验证类型。包括“整数”“电子邮件”“日期”等。“验证于”：用来设置验证发生的时间，包括站点访问者在文本域构件外部单击时、输入内容时或尝试提交表单时。onBlur（模糊）：当用户在文本域的外部单击时验证。onChange（更改）：当用户更改文本域中的文本时验证。onSubmit（提交

18、）：当用户尝试提交表单时验证。“最小字符数”：设置验证文本域中允许的最小字符数。此选项仅适用于“无”“整数”“电子邮件”和“URL”验证类型。例如，如果在“最小字符数”框中输入数字3，那么，只有当用户输入三个或更多个字符时，该构件才通过验证。“最大字符数”：设置验证文本域中允许的最大字符数。此选项仅适用于“无”“整数”“电子邮件”和“URL”验证类型。“最小值”：设置验证文本域中允许的最小值。此选项仅适用于“整数”“时间”“货币”和“实数/科学记数法”验证类型。例如，如果您在“最小值”框中输入3，那么，只有当用户在文本域中输入3或者更大的值时，该构件才通过验证。“最大值”：设置验证文本域中允许

19、的最大值。此选项仅适用于“整数”“时间”“货币”和“实数/科学记数法”验证类型。“预览状态”：选择要查看验证文本域的状态。包括“初始”“必填”“有效”3个选项。“必需的”：默认情况下，用Dreamweaver插入的所有验证文本域构件都要求用户在将构件发布到Web页之前输入内容。但是，您可以将填写文本域设置为对于用户是可选的。“提示”：设置验证文本域的提示信息。例如，验证类型设置为“电话号码”的文本域将只接受（000）000-0000形式的电话号码。可以输入这些示例号码作为提示，以便用户在浏览器中加载页面时，文本域中将显示正确的格式。“强制模式”：设置是否禁止用户在验证文本域构件中输入无效字符。

20、例如，如果对具有“整数”验证类型的构件集选择此选项，那么，当用户尝试输入字母时，文本域中将不显示任何内容。步骤步骤3 验证密码域验证密码域构件构件1）选择密码文本框，并改名为“pwa1”。2）选择“插入”“表单”“Spry验证密码”。3）设置Spry密码验证属性为：必填、最小字符数6、验证时间onBlur，如图9-30所示。验证密码域构件预览效果如图9-31所示。步骤步骤4 验证确认验证确认构件构件1）选择确认密码框，并命名为“pwa2”。2）选择“插入”“表单”“Spry确认”。3）设置Spry确认验证属性为：必填、验证时间onBlur。验证参照对象为“pwa1”在表单“form1”，如图9

21、-32所示。验证确认构件预览效果如图9-33所示。步骤步骤5 Spry验证单选按钮验证单选按钮组组1）删除原有“性别“单选按钮。2）选择“插入”“表单”“Spry验证单选按钮组”。3）设置Spry验证单选按钮组属性，如图9-34所示。步骤步骤6 Spry验证复选框验证复选框构件构件Spry验证复选框构件是HTML表单中的一个或一组复选框，该复选框在用户选择（或没有选择）复选框时会显示构件的状态（有效或无效）。例如，向表单中添加一个验证复选框构件，并要求用户进行三项选择。如果用户没有进行三项选择，该构件会返回一条消息，声明不符合最小选择数要求。1）插入验证复选框构件。插入方法与插入验证文本域构件

22、相同。2）验证复选框构件的属性。在“文档”窗口中选择一个验证复选框构件，单击“窗口”“属性”，将打开“属性检查器”，如图9-35所示。步骤步骤7 Spry验证选择验证选择构件构件Spry验证选择构件是一个下拉菜单，该菜单在用户进行选择时会显示构件的状态（有效或无效）。例如，当插入一个包含状态列表的验证选择构件时，这些状态按不同的部分组合并用水平线分隔。如果用户意外选择了某条分界线（而不是某个状态），验证选择构件会向用户返回一条消息，声明它们的选择无效。Spry验证选择构件预览效果如图9-36所示。1）插入验证选择构件。插入方法与插入验证文本域构件相同。2）验证选择构件的属性。在“文档”窗口中选

23、择一个验证选择构件，单击“窗口”“属性”，将打开“属性检查器”，如图9-37所示。步骤步骤8 Spry验证文本区域验证文本区域构件构件Spry验证文本区域构件是一个文本区域，该区域在用户输入几个文本句子时显示文本的状态（有效或无效）。如果文本区域是必填区域，而用户没有输入任何文本，该构件将返回一条消息，声明必须输入值。1）插入验证文本区域构件。插入方法与插入验证文本域构件相同。2）验证文本区域构件的属性。在“文档”窗口中选择一个验证文本区域构件，单击“窗口”“属性”，将打开“属性检查器”，如图9-38所示。步骤步骤9 提交表提交表单单1）在拆分模式下，选择form标签，选择整个form区域，如图9-39所示。2）选择属性面板进行设置，如图9-40所示。最终预览效果如图9-41所示。表单可以实现浏览者同Internet服务器之间的交互。通过表单，可以将浏览者的信息发送到Internet服务器上，以供处理。表单也可以使用户与站点的浏览者交互。例如，用户可以询问浏览者的用户名称和电子邮件地址，或者对浏览者做一个调查，在访客簿签名，或者提供关于用户的站点信息反馈。在本项目的活动中，我们学习了表单相关的各项知识，并且使用表单的知识制作了“贸贸女装”网上商城的注册页面。项项 目目 小小 结结