电子商务网页制作-项目表单应用培训课程9/13/2024 理解表单和表单域的概念 认识表单是如何工作的 了解表单的设计原则 学习创建表单 了解验证和提交表单的方法项目目标表单概述衡量电子商务网页的一个重要标准就是网页的交互性。对电子商务网站来说，每一个浏览者都是公司的客户或潜在客户，了解他们的意见和建议、收集他们的私人信息、获取订单、设立留言簿、提供商品检索等，都是极其重要的。表单是实现网页交互性的重要手段之一，通过表单，可以从浏览者那里收集信息，经过服务器处理后，把结果反馈给浏览者。设计一个高效、友好的表单，对浏览者和电子商务网站都是十分有利的：浏览者可以发现更多的关于产品和服务的信息，而网站可以了解更多的有关浏览者的信息，甚至还可以使用表单进行网上调查和竞赛，激励更多的浏览者加入进来。请你仔细观察电子商务网站中的表单出现在什么位置、不同作用的表单是否选择了不同的呈现方式。试一试无所不在的表单第一步：打开IE浏览器，在地址栏中输入http:/new.ehaier.com，将打开下图所示的页面。在页面的顶部，可以看到搜索产品用的表单，页面右上角可以看到会员注册与登录的按钮与链接。试一试无所不在的表单第二步：点击右上角“免费注册”进入到注册页面。电子商务网站在要求浏览者进行注册时，通常会为此单独建立一个独立的表单网页，因为注册时可能会触及到浏览者个人隐私，单独的表单网页容易使浏览者产生被保护的安全感。此页面的注册表单并没有要求用户留下真实姓名和邮政地址，但电子邮件地址和手机号被列为必选项，这样既可以取得和浏览者的联系，又能使浏览者不至于感到被侵犯。这个注册表单的设计十分精心，使用尽可能少的表单域，获取了尽可能多的有用信息，浏览者不必花费太多的时间就能完成表单填写。试一试无所不在的表单第三步：选择一项商品，点击进入商品详情页面：试一试无所不在的表单第四步：浏览商品详情页面，了解商品信息，点击“立即购买”按钮进入购物车页面：试一试无所不在的表单第五步：点击“立即结算”按钮进入订单信息页面，如图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复选框必须选择至少一项，否则提示“请进行选择”：spry验证复选框实施范围：设置spry复选框必须选择多项，在下面的最小选择数和最大选择数中设置选择的数量，若未选择设置的数量则提示“不符合最小选择数要求”或“已超过最大选择数”：项目总结本项目主要介绍了表单的概念、表单的工作原理、表单及表单域的创建以及表单的验证等知识和技能。表单是实现网页交互性的一个主要途径，使用表单可以进行客户的注册、收集各种信息等等。表单的设计要从多用户的角度去考虑，设计出简洁、实用的表单可以提高表单的使用效果。DreamweaverCS5提供了spry表单验证工具，可以对表单及表单域进行验证，从而确保表单填写的完整性和规范性。推荐资源“Iteye资讯”之“Web前端”：http:/www.iteye.com/news/category/web“站长之家”之“运营交互”：http:/www.chinaz.com/manage/id“表单设计_互联网的一些事”:http:/www.yixieshi.com/tags/%B1%ED%B5%A5%C9%E8%BC%C6.html