电子商务网制作项目表单应用培训课程

DW项目七电子商务网页制作表单应用 理解表单和表单域的概念 认识表单是如何工作的 了解表单的设计原则 学习创建表单 了解验证和提交表单的方法项目目标表单概述衡量电子商务网页的一个重要标准就是网页的交互性。对电子商务网站来说，每一个浏览者都是公司的客户或潜在客户，了解他们的意见和建议、收集他们的私人信息、获取订单、设立留言簿、提供商品检索等，都是极其重要的。表单是实现网页交互性的重要手段之一，通过表单，可以从浏览者那里收集信息，经过服务器处理后，把结果反馈给浏览者。

设计一个高效、友好的表单，对浏览者和电子商务网站都是十分有利的：浏览者可以发现更多的关于产品和服务的信息，而网站可以了解更多的有关浏览者的信息，甚至还可以使用表单进行网上调查和竞赛，激励更多的浏览者加入进来。请你仔细观察电子商务网站中的表单出现在什么位置、不同作用的表单是否选择了不同的呈现方式。试一试——无所不在的表单

第一步：打开IE浏览器，在地址栏中输入，将打开下图所示的页面。在页面的顶部，可以看到搜索产品用的表单，页面右上角可以看到会员注册与登录的按钮与链接。试一试——无所不在的表单

第二步：点击右上角“免费注册”进入到注册页面。电子商务网站在要求浏览者进行注册时，通常会为此单独建立一个独立的表单网页，因为注册时可能会触及到浏览者个人隐私，单独的表单网页容易使浏览者产生被保护的安全感。

此页面的注册表单并没有要求用户留下真实姓名和邮政地址，但电子邮件地址和手机号被列为必选项，这样既可以取得和浏览者的联系，又能使浏览者不至于感到被侵犯。这个注册表单的设计十分精心，使用尽可能少的表单域，获取了尽可能多的有用信息，浏览者不必花费太多的时间就能完成表单填写。试一试——无所不在的表单

第三步：选择一项商品，点击进入商品详情页面：试一试——无所不在的表单

第四步：浏览商品详情页面，了解商品信息，点击“立即购买”按钮进入购物车页面：试一试——无所不在的表单

第五步：点击“立即结算”按钮进入订单信息页面，如图7-5所示。该表单页用于提交在线订单。试一试——无所不在的表单表单设计至关重要，然而并不是所有的浏览者都愿意填写表单，一个糟糕的表单甚至会吓跑浏览者。首先要明确使用表单的目的，即为什么要设计这个表单。在设计表单前，可以尽量多地浏览相关的网页，看一看别的网站是怎么做的，同时要把网络营销知识运用到设计中去，要记住一点：为浏览者考虑得越多，能收到的填写好的表单就越多。表单网页要和其他网页保持一致的颜色和风格，每一个表单域尺寸要适当，既能满足要求，又要保证网页的美感。活动小结表单的概念表单可以实现浏览者与Web服务器之间信息的交互传送，它是网络信息收集处理的一种重要方式，一个能正常工作的表单必须包含以下两个部分：（1）含有表单的网页。（2）用于处理浏览者提交信息的表单处理程序，如CGI或ASP程序等服务器端应用程序或客户端脚本。浏览者在表单中填写相关信息，然后单击“提交”按钮，将表单内容上传到服务器，服务器用事先编好的表单处理程序来处理这些信息，再将处理结果反馈给浏览者的浏览器，可见表单的使用必须依赖于服务器端脚本才能真正发挥其功能。表单工作流程图表单的概概念除去表单处理理程序以以外，所所有表单单一般都都由以下下几个部部分组成成：（1）表单单域：又又称表单单元素，，是组成成表单的的最小单单位。（2）表单单域的说说明文字字：用于于提示浏浏览者如如何填写写表单域域，以及及在表单单域中填填写何种种内容的的有关说说明文字字。（3）“提提交”和和“重置置”按钮钮：浏览览者用它它们来提提交自己己填写的的信息或或重新修修改刚刚刚填写的的信息。。常用表单单域在使用DreamweaverCS5编辑网页页时，表表单是一一个用红红色虚线线标记的的方形区区域。一一个表单单包含若若干种类类型的表表单域，，同时也也可以包包含其他他网页元元素。每每个表单单都有自自己的名名称，该该表单中中的每个个表单域域也有自自己的名名称，同同一个表表单中的的表单域域不允许许同名。。表单域域还附有有相应的的说明文文字，用用于提示示浏览者者在表单单域中输输入什么么样的内内容。表单域的名名称是由由DreamweaverCS5在创建表表单域时时自动生生成的，，我们也也可以自自己修改改表单域域的名称称；而表表单域的的值则为为浏览者者所填写写或选择择的内容容。在浏浏览者按按下“提提交”按按钮之后后，表单单域的名名称和值值将被发发送到Web服务器的的表单处处理程序序进行处处理。常用表单单域DreamweaverCS5提供了以以下几种种表单域域，不同同的表单单域用来来收集不不同的信信息。打打开“插插入”菜菜单中的的“表单单”子菜菜单，如图所示示可以看到DreamweaverCS5提供的不不同种类类的表单单域。常用表单单域也可以在在插入栏栏中选择择“表单单”类别别，直接接选择相相应的按按钮创建建表单域：1．文本字字段和文文本区域域文本字段和文文本区域域用于接接收浏览览者的文文本输入入内容。。文本字字段和文文本区域域可以显显示单行行或多行行文本，，还能以以密码域域的方式式显示，，其中密密码域显显示时，，输入文文本将被被替换成成星号，，以免其其他人看看到密码码常用表单单域2．按钮在单击时执执行某种种操作，，例如重重置表单单操作和和提交表表单操作作。3．单选按按钮由两个或两两上以上上的一组组按钮组组成，浏浏览者只只能选择择其中的的一个选项：4．复选框框由一组按按钮组成成，浏览览者可以以选择其其中的任任意多个个合适的的项：常用表表单域域5．选择择（列列表/菜单））选择有两种种类型型：一一种是是浏览览者单单击对对象对对的下下拉菜菜单，，另一一种是是一列列有项项目的的可滚滚动的的列表。。6．其他他表单单对象象除了以上几几种常常见的的表单单域外外，还还有隐隐藏域域、文文件域域、图图像域域、跳跳转菜菜单等。并不是是所有类类型的的表单单域都都同样样的受受欢迎迎，毕毕竟大大多数数人喜喜欢做选择择题而不是是论述述题。。因此此，在在构思思表单单时，，应尽尽可能能把要要提的的问题题做成成浏览览者更更容易易接受受的题题型。。小贴士士创建框框架和和框架架集（2）在““示例例页””列表表中选选择框框架集集类型型，可可以在在对话话框右右端看看到该该框架架集的的预览览效果果和相相关描描述。。（3）单击击“创创建””按钮钮，在在文档档窗口口可以以看到到新创创建的的框架架集，，同时时DreamweaverCS5会打开开一个个“框框架标标签辅辅助功功能属属性””对话框框。（4）为每每个框框架输输入恰恰当的的标题题名称称，然然后点点击““确定定”即即可成成功创创建框框架页页。框架的的标题题即框框架的的名称称，它它用于于识别别不同同的框框架，，在指指定打打开链链接目目标的的目标标框架架或脚脚本在在引用用该框框架时时，框框架名名称就就派上上用场场了。。一般般情况况下使使用系系统提提供的的默认认值，，如mainFrame，topFrame，leftFrame等，这这些名名称都都是约约定俗俗成的的。当当然，，你也也可以以使用用自己己定义义的名名称。。小贴士士选择框框架和和框架架集对框架和和框架架集进进行操操作，，首先先必须须选中中它。。我们们可以以在文文档窗窗口中中选择择框架架或框框架集集，也也可以以通过过“框框架””面板板进行行选择择。1．在文文档窗窗口中中选择择框架架或框框架集集（1）选择择框架架在“设计计”视视图中中，按按住Alt键的同同时单单击某某个框框架内内部，，即可可选中中该框框架，，此时时该框框架的的边框框被虚虚线环环绕。。（2）选择择框架架集单击框架集集的某某一内内部框框架边边框即即可选选中该该框架架集，，此时时该框框架集集的所所有边边框被被虚线线环绕绕。要执行行这一一操作作，框框架边边框必必须是是可见见的。。如果果看不不到框框架边边框，，你可可以通通过打打开““查看看”菜菜单，，选择择“可可视化化助理理”子子菜单单中的的“框框架边边框””使框框架边边框可可见。。小贴士士创建表表单创建表表单的的一般般步骤骤如下下：1．将光光标定定位在在要插插入表表单的的位置置，打打开““插入入”菜菜单，，选择择“表表单””子菜菜单中中的““表单单”命命令，，或选选择插插入栏栏上的的“表表单””类别别，然然后单单击““表单单”按按钮，，将插插入一一个空空的表表单，，在设设计图图像中中可以以看到到，红红色的的虚轮轮廓线线指示示表单：创建表表单创建表表单的的一般般步骤骤如下下：1．将光光标定定位在在要插插入表表单的的位置置，打打开““插入入”菜菜单，，选择择“表表单””子菜菜单中中的““表单单”命命令，，或选选择插插入栏栏上的的“表表单””类别别，然然后单单击““表单单”按按钮，，将插插入一一个空空的表表单，，在设设计图图像中中可以以看到到，红红色的的虚轮轮廓线线指示示表单：2．在属属性面面板中中指定定将表表单数数据传传输到到服务务器所所使用用的方方法。。其中中GET方法将将值附附加到到请求求该页页面的的URL中，POST方法将将在HTTP请求中中嵌入入表单单数据据。3．插入入表单单域。。将插插入点点放置置在希希望表表单域域在表表单中中出现现的位位置，，然后后在““插入入”菜菜单的的“表表单””子菜菜单中中，或或者在在插入入栏的的“表表单””类别别中选选择相相应的的表单单域命命令，，将表表单域域插入入页面面后可可以设设置其其属性性。添加文本域域将插入点定位位到表单中中相应位置置，打开““插入”菜菜单，选择择“表单””子菜单中中的“文本本域”，或或者单击插插入栏“表表单”类别别中的“文文本字段””按钮，即即可插入一一个文本域域。可根据据需要在属性性面板中设设置文字域的属性：文本域：为该文文本域指定定一个名称称。字符宽度：最多多可显示的的字符数。。例如，如如果“字符符宽度”设设置为20，而浏览者者输入了30个字符，则则在该文本本域中只能能看到前20个字符。请请注意，虽虽然无法看看到其余的的字符，但但文本域可可以识别它它们，而且且它们会被被发送到服服务器进行行处理。最多字符数：设设置文本域域中最多可可输入的字字符数。例例如，可以以使用“最最多字符数数”将邮政政编码限制制为6位数，浏览览者在输入入时就无法法输入6位以上的数数字了。如如果“最多多字符数””设为空白白，则浏览览者可以输输入任意数数量的文本本而不受限限制。类型：可以设置置文本域为为单行、多多行和密码码。当设置置为密码时时，浏览者者输入的内内容显示为为星号，以以免被其他他人看到。。初始值：指定在首首次载入表表单时文本本域中显示示的值。例例如，通过过说明或示示例值，可可以提示浏浏览者在文文本域中输输入正确的的信息。类：将CSS规则应用于于对象。禁用：勾选此项项用于禁用用文本框。。只读：勾选此项项用于设置置文本框为为只读属性性。添加复选框框将插入点定定位到表单单中相应位位置，打开开“插入””菜单，选选择“表单单”子菜单单中的“复复选框”，，或者单击击插入栏““表单”类类别中的““复选框””按钮，即即可插入一一个复选框框。可根据据需要在属属性面板板中设置复选框的的属性：：复选框名称：为为该复选选框指定定一个名名称。每每个复选选框都必必须有一一个唯一一名称，，所用名名称必须须在表单单内唯一一标识该该复选框框。选定值：设置置在该复复选框被被选中时时发送给给服务器器的值。。初始状态态：确定在在浏览器器中载入入表单时时该复选选框是否否被选中中。类：将CSS规则应用用于对象象。一般需要在复复选框前前添加说说明性文文字作为为复选框框的标签签，然后后继续添添加复选选框直至至所有复复选框添添加完成成。添加单选选按钮单选按钮钮一般以以组为单单位出现现，在一一组单选选按钮中中只能选选择一个个选项，，因此叫叫单选按按钮。将将插入点点定位到到表单中中相应位位置，打打开“插插入”菜菜单，选选择“表表单”子子菜单中中的“单单选按钮钮”，或或者单击击插入栏栏“表单单”类别别中的““单选按按钮”按按钮，即即可插入入一个单单选按钮钮。可根根据需要在属属性面板板中设置单单选按钮的属属性：单选按钮：为为该单选选按钮指指定一个个名称。。由于单单选按钮钮一般是是以组出出现，单单选按钮钮组内的的每个单单选按钮钮的名称称必须都都一样，，否则不不能实现现单选的的效果。。选定值：设置置在该单单选按钮钮被选中中时发送送给服务务器的值值。初始状态态：确定在在浏览器器中载入入表单时时该单选选按钮是是否被选选中。类：将CSS规则应用用于对象象。一般需要在单单选按钮钮前添加加说明性性文字作作为单选选按钮的的标签，，然后继继续添加加单选按按钮直至至所有单单选按钮钮添加完完成。添加选择择（列表表/菜单）如果提供的选选项很多多，比如如要设计计籍贯选选项，使使用复选选框或单单选按钮钮就会占占用太多多的网页页，菜单单能有效效地解决决这个问问题，所所有的选选项缩成成只显示示一行信信息的小小框，其其他的选选项则隐隐藏起来来，当浏浏览者用用鼠标单单击菜单单将其展展开时，，才会显显示所有有的选项项供浏览览者选择择。可根根据需要要在属性性面板中中设置选选择（列列表/菜单）的的属性：选择：为该选选择指定定一个名名称。每每个选择择都必须须有一个个唯一名名称，所所用名称称必须在在表单内内唯一标标识该选选择。类型：设置该该选择的的类型为为菜单或或者列表表。列表值：设置置列表或或菜单里里的选项项标签和和值。初始化时选定：：确定在在浏览器器中载入入表单时时该列表表或菜单单选定的的值。类：将CSS规则应用用于对象象。单击列表值，，将弹出出“列表表值”对对话框，，点击加加号可添添加项目目标签和和值，点点击三角角箭头可可调整选选项的上上下顺序。添加按钮钮按钮常用于控控制表单单的操作作，使用用按钮可可将表单单数据提提交到服服务器，，或者重重置该表表单。标标准表单单按钮通通常带有有“提交交”、““重置””标签。。使用按按钮还可可以执行行相关事事件，如如单击事事件、提提交表单单事件等等。将插入点定定位到表表单中相相应位置置，打开开“插入入”菜单单，选择择“表单单”子菜菜单中的的“按钮钮”，或或者单击击插入栏栏“表单单”类别别中的““按钮””按钮，，即可插插入一个个按钮。。可根据据需要在在属性面面板中设置按钮钮的属性：按钮名称：为为该按钮钮指定一一个名称称。值：设置按按钮上显显示的文文本。动作：确定单单击按钮钮时发生生的操作作。如果果选中了了“提交交表单””选项，，当单击击该按钮钮时，将将提交表表单数据据进行处处理。如如果选中中了“重重置”选选项，当当单击该该按钮时时，将清清除该表表单的内内容。选选择“无无”选项项，指定定单击该该按钮时时要执行行的操作作，例如如，可以以添加一一个JavaScript脚本，当当浏览者者单击该该按钮时时打开另另一个页页面。类：将CSS规则应用用于对象象。表单的验验证有时，需要对对浏览者者输入的的信息进进行一些些限制，，如限制制输入信信息的类类型和长长度等。。如电话话号码要要求7位以上，，如果浏浏览者输输入的信信息不符符限制条条件，则则弹出一一个对话话框表明明输入不不符合要要求，让让浏览者者重新输输入。这这种方式式称为验验证输入入的有效效性。spry验证文本域spry验证文本域是是DreamweaverCS5提供的一种包包含验证功能能的文本域。。将插入点定位到到表单中相应应位置，打开开“插入”菜菜单，选择““表单”子菜菜单中的“spry验证文本域””，或者单击击插入栏“表表单”类别中中的“spry验证文本域””按钮，插入入一个spry验证文本域，，当鼠标靠近近spry文本域时会出出现蓝色提示：spry验证文本域鼠标单击蓝色色提示，可以以在属性面板板设置spry文本域的属性：spry文本域：为spry文本域指定一一个名称。类型：设置spry文本域的验证证数据类型。。例如整数、、日期、货币币、电子邮件件地址等，设设置成功后，，若输入数据据数型与设置置的不一致，，则提示“格式无效””：spry验证文本域预览状态：设设置spry文本域预览时时的状态。验证于：设置置验证的触发发事件，默认认为提交表单单时验证。提示：设置spry文本域的提示示信息。最小字符数/最大字符数：：设置spry文本域允许输输入的字符数数的范围，若若超出范围则则提示“不符符合最小字符符数要求”或或“已超过最最大字符数”：spry验证文本域必须的：勾选此项项设置spry文本域为必填填，若不填则则提示“需要要提供一个值值”：最小值/最大值：当““类型”属性性为可比较大大小的数据类类型时，可以以设置spry文本域允许输输入的数值范范围，若超出出范围则提示示“输入值小小于所需的最最小值”或““输入值大于于所允许的最最大值”：spry验证复选框将插入点定位到到表单中相应应位置，打开开“插入”菜菜单，选择““表单”子菜菜单中的“spry验证复选框””，或者单击击插入栏“表表单”类别中中的“spry验证复选框””按钮，插入入一个spry验证复选框，，当鼠标靠近近spry复选框时会出出现蓝色提示：spry验证复选框鼠标单击蓝色色提示，可以以在属性面板板设置spry复选选框框的的属性性：：spry复选选框框：：为为spry复选选框框指指定定一一个个名名称称。。必需需：设设置置spry复选选框框必必须须选选择择至至少少一一项项，，