电子商务网站建设第8章

第8章表单及应用8.1交互式表单概述8.2创建表单8.3表单应用实例8.4本章摘要与重点回顾表单（Form）技术可以实现浏览者与Internet服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。无论是电子商务、网上调查，还是留言板、聊天室，都要求网页能够接收浏览者输入的信息，而表单就是网站获取用户信息的最重要的手段之一。表单有两个重要的组成部分：(1)由DreamweaverMX生成的表单的页面。8.1交互式表单概述(2)用于处理浏览者在表单域中输入的信息的服务器端应用程序或客户端脚本，如CGI或ASP程序等。浏览者在网页上看到有关表单的页面，只是供浏览者输入信息的表单页面。当浏览者按要求在表单中填写有关信息，单击表单的【递交】（Submit）按钮之后，表单内容就会上传到服务器，并且由事先编好的CGI或ASP程序来处理这些信息，最后服务器再将处理结果发送给浏览者的浏览器。由此可见，表单的应用必须依赖于服务器端脚本才能真正发挥其功能。表单主要的功能是接收输入的信息。浏览者输入的信息可以是多种多样的，这些不同类别的信息可以由不同的表单域分别接收。因为每个表单域对应一个项目，所以每个表单域都要添加一个标识，提醒用户在这个表单域中应该输入的内容。在网页中创建一个表单的方法有3种:(1)将光标定位在要插入表单的位置上，选择【插入】|【表单】命令，便可在网页的指定位置上插入一个红色虚线构成的表单区域。8.2创建表单(2)将光标定位在要插入表单的位置上，单击【插入】浮动面板组的【表单】选项卡中的【表单】按钮，便可在网页的指定位置上插入一个表单区域。(3)直接将【插入】浮动面板组的【表单】选项卡中的【表单】按钮拖入网页编辑窗口的表单插入区域。用以上3种方法创建的表单区域，在页面上用红色虚线框表示。红色虚线框确定了当前表单的边框，这种红色边框的大小是不能被编辑的。当设计者在表单区域中插入对象后，表单的区域会自动调整其大小。在创建表单后，就可以在表单中插入各种表单域。在网页中插入表单域有两种方法：一种方法是利用网页编辑窗口的菜单命令，选择【插入】|【表单对象】命令，在其级联菜单中选择相应的命令插入表单域；另一种方法是直接单击【插入】浮动面板组的【表单】选项卡，从中选择要插入的表单域。本章主要介绍直接从【表单】选项卡中选择有关表单域，然后将其插入到网页中。下面先简要介绍DreamweaverMX的表单域的特点。用来输入的文字或数字。插入的文本可显示为单行、多行，但是浏览者输入文字较麻烦，故在表单中应少用文本框，尽可能使用其他表单对象。表单中一般有两个按钮，一个是【提交】按钮，单击此按钮可把浏览者输入的信息发送给服务器；另一个是【重置】按钮，用来清除表单中的内容，把当前表单还原为初始状态。复选框可以单独使用，也可以成组使用，有选中与不选中两种状态。单选按钮常用于一组互斥选项（如“男”、“女”等）。常用于提交一组可供浏览者进行选择的列表选项。其表现方式是，当单击它右侧的按钮时，弹出一个下拉式列表。浏览者可单击列表中某一选项。它在功能上与单选按钮相似，可以供浏览者在多个备选项中作一个选择，它占有网页的面积比单选按钮小得多。文件域有一个文本框和一个浏览按钮，可供浏览者从本地计算机上用表单向服务器上传文件。表单的隐藏域在浏览时是看不到的，浏览者也不能执行该操作。利用隐藏域可以实现浏览器同服务器在后台不公开地交换信息。用于显示图片，也可用作确认按钮。插入一个跳转菜单，每个菜单选项都可链接到一个网页或文件。表单中的文本框是网页中用得比较多的一种表单元素，网页中表单的文本框包括3种形式。本区域。数，并决定是否显示滚动条，浏览者可在这种文本框中输入多行文本信息。息的文本框，输入的字符都以“*”号显示在屏幕上。8.2.1创建表单的文本框下面将介绍创建一个带有文本框的最基本的表单，通过创建这个简单的表单来了解表单创建的过程，其操作步骤如下。（1）单击【插入】浮动面板组的【表单】选项卡。（2）此时在【插入】浮动面板组中显示【表单】选项卡的各种对象，如图8-1所示。（3）在网页编辑窗口中，确定要插入的表单位置。（4）单击【表单】选项卡中的【表单】按钮，便可在网页编辑区中生成一个表单。此时表单被一个红色虚线框界定。单击红色虚线框，可以选中表单区域，在【属性】面板中显示了这个表单区域的属性，如图8-2所示。图8-1【表单】选项卡图8-2表单的【属性】面板表单的【属性】面板中各属性的具体意义如下。①在【表单名称】文本框中输入指定表单的名称,表单的名称必须惟一。②在【动作】文本框中可以输入一个URL，用来指定处理表单信息的服务器端程序。也可以输入“mailto：邮件地址”，用E-mail方式来发送表单中的数据。③在【方法】下拉式列表框中指定一个处理表单数据的方法，其下拉列表中的各项意义如下所述。使用浏览器的默认方式，一般为GET方式。GET：表示把表单值附加到URL，并发送给服务器一个GET请求。POST：以消息方式发送表单的值，并发送给服务器一个POST请求。④在【目标】下拉式列表中指定一个窗口方式，在该窗口中显示调用程序所返回的数据。⑤在【MIME类型】下拉式列表中可以指定对提交给服务器进行处理的数据使用MIME编码类型。（5）将光标插入到表单内，输入标识提示文字“您的姓名：”。（6）单击【表单】选项卡中的【文本字段】按钮，就会在表单中生成一个文本框表单域，如图8-3所示。图8-3创建表单文本字段示意图(7)单击文本框表单域将其选中，此时【文本字段】的【属性】面板如图8-3所示。【文本字段】的【属性】面板的各项属性意义如下所述。①在【文本域】文本框中输入当前表单域的名称，系统将以此名称保存文本框表单域中的内容。②在【字符宽度】文本框中输入当前表单域的宽度，即设置文本框中每行所允许输入的字符数目。③在【最大字符数】文本框中设置文本框表单域中最多可允许输入的字符数。④在【类型】区域中确定文本框的类型，3个选项选择分别是【单行】、【多行】、【密码】。⑤在【初始值】文本框中输入表单域的预先设置的值。⑥在【换行】中设置多行文本框表单域的换行方式。当选择【类型】为【多行】选项时，【换行】下拉式列表就被激活，可选择设置多行文本表单域中不同的换行方式。(8)用同样的方法在表单的下一行生成“您的Email地址：”的文本框表单域，如图8-3所示。(9)在【文本字段】的【属性】面板中的【字符宽度】文本框中输入45。并选中【单行】选项，表示此文本框为单行类型。至此为止，一个带有文本框的简单表单便创建成功了。单选按钮和复选框是表单中用得较多的元素，而且是网页设计者与浏览者进行交流的最有效的手段。1.创建表单的单选按钮网页中表单的单选按钮一般都是成组出现的。在页面设计时，既要为单选按钮组定义一个标识，也要为每一个单选按钮定义一个标识。创建单选按钮的操作步骤如下。(1)在表单的合适位置插入光标，并输入单选按钮组的标识文字，例如“性别”。(2)然后单击【表单】选项卡中的按钮，并输入这个单选按钮的标识文字，例如“男”。8.2.2建立表单的单选按钮和复选框(3)选中这个单选按钮，打开单选按钮的【属性】面板，如图8-4所示。图8-4单选按钮的【属性】面板(4)在【单选按钮】文本框中输入单选按钮的名字“性别”。并在【选定值】文本框中给单选按钮赋值“男”。(5)并为这个单选按钮设置初始状态，【初始状态】为【已勾选】状态。(6)用同样的方法添加另一个标识为“女”的单选按钮。(7)在【单选按钮】文本框中输入单选按钮的名字“性别”。并在选定值文本框中给单选按钮赋值“女”。(8)并为这个单选按钮设置初始状态，【初始状态】为【未选中】状态，如图8-5所示。图8-5表单的单选按钮2.创建表单的复选框网页表单中的复选框可以单个出现，也可以成组出现，单个复选框可用于答案为是或否的问题，成组的复选框可用于一个或多个选项选取的问题。一般情况下，复选框组的标识文字放在复选框之前，而每一个复选框的标识文字放到复选框的后面。当一个复选框被选中后向服务器发送什么值是一个需要认真思考的问题。服务器端必须有一个接收程序（如用CGI、ASP、PHP等编制的程序），用来接收表单发来的数据，并将这些数据处理后以网页的形式发送给用户端的浏览器。复选框名称和选定值的设置应该按照服务器端接收程序的约定来完成，现在试举两例加以说明。一种方法是：在【复选框名称】文本框中输入复选框的标识名；在【选定值】文本框中输入数值1。另一种方法是：在【复选框名称】文本框中输入复选框组的标识文字的缩写“喜欢”；在【选定值】文本框中输入的值为各个复选框的标识文字，如图8-6所示。例如在上述表单中选择的两个复选框分别是“新书速递”和“精品系列”，这个表单提交后服务器接收到的信息如下所述。第一种方法发送给服务器的信息是：新书速递=1。第二种方法发送给服务器的信息是：喜欢=新书速递，精品系列。下面将介绍创建复选框的过程，其操作步骤如下。(1)在表单的合适位置插入光标，并输入复选框组的标识文字，例如“您经常关注本网上书店的哪些栏目？”。(2)将光标插入到合适的位置，然后单击【表单】选项卡中的按钮，并输入这个复选框的标识文字，如图8-6所示。(3)选中该复选框，在复选框的【属性】面板中为其设置名称和赋值，如图8-7所示。图8-6表单的复选框图8-7表单复选框的【属性】面板【属性】面板中各项参数意义如下所述。一个名字，也就是选中该复选框后向服务器发送信息时所用的变量名。向服务器发送的内容。按钮表示该复选框初始状态已被选中。选中【未选中】单选按钮表示该复选框初始状态为待选状态。在复选框【属性】面板设置的参数应按照与服务器端程序的约定。给表单添加列表框与下拉式列表框的方法基本相同，只需在创建空白列表后，在列表【属性】面板的【类型】中选择不同的单选项便可完成设置。选择【菜单】单选项，可创建下拉式列表框；选择【列表】单选项，可创建列表框。下面介绍创建表单的列表框的方法，其操作步骤如下。（1）在表单的合适位置上插入光标，然后输入下拉式列表框的标识文字，例如“您的职业：”。（2）单击【表单】选项卡中的按钮，此时表单的光标位置上显示一个很小的下拉式列表框。8.2.3创建表单的列表框（3）选中新建的下拉式列表框，打开下拉式列表框的【属性】面板，如图8-8所示。图8-8下拉式列表框的【属性】面板【属性】面板中各项参数的意义如下所述。/菜单】文本框中设置下拉式列表框的名称。在此文本框中输入下拉式列表框的名称为work。在【类型】选项组中设置下拉式列表框的类型为【菜单】。度】文本框被激活，在其中可设置该列表框可显示的行数。成一次选择多个选项。可以通过按Ctrl键，再单击选择不相邻的任意多个选项，也可以通过按Shift键来选中两次单击选项之间所有连续的选项。设置的列表项目文字。（4）在【属性】面板中单击【列表值】按钮，打开【列表值】对话框，如图8-9所示。（5）单击【项目标签】按钮的下方，在出现的文本框中输入“工人”。（6）按Tab键或单击【值】按钮，在出现的文本框中输入选项的赋值GR。（7）单击按钮，重复步骤（5）、（6），添加新的列表选项。图8-9【列表值】对话框（8）如果要删除某个选项，可以在【列表值】对话框中选中该项，然后单击按钮即可。（9）可用列表值对话框中按钮调整下拉式列表的选项次序。（10）单击【确定】按钮，此时列表项目显示在【属性】面板的【初始化时选定】列表窗口中。（11）按F12键，在浏览器中单击下拉式列表框的按钮，可以看到列表框的下拉菜单。网页中的表单必须添加【提交】按钮，才能将浏览者填写的信息上传到服务器。在DreamweaverMX中还设置了一个用于清除表单中填写数据的【重置】按钮。几乎所有网页中的表单都包含【提交】和【重置】按钮。在表单中创建【提交】和【重置】按钮的操作步骤如下：（1）在表单合适的位置上确定插入点，然后2次单击【表单】选项卡中的按钮。（2）在表单中就会生成2个按钮