第8章表单的设计与操作

表单的设计与操作本章主要内容了解表单的基本概念及作用掌握表单及各种表单对象的创建熟悉各种表单对象相关属性的设置掌握并理解两种不同的表单的验证方式表单的基础知识1.表单的组成任何一个表单都必须由两个重要部分组成：一是描述表单的HTML源代码（如描述文本框、标签、按钮等网页上的可见部分）；二是用于处理用户提交信息的脚本程序（如CGI、JSP、ASP、PHP等）。只有这两部分结合在一起，才能完成信息的收集、信息处理、信息反馈。只有这两部分结合在一起，才能完成信息的收集、信息处理、信息反馈等功能。2.工作过程当访问者在web浏览器中显示的表单中输入信息后单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息进行处理。用于正理表单数据的常用服务器技术包括：MacromediaColdFusion、MicrosfotActiveServerPages(ASP)和PHP。服务器进行响应时会将被请求信息发送回用户（或客户端），或基于该表单内容执行一些操作。表单的基础知识3.表单对象表单是一个对象，同时也是一个对象容器，即在一个表单中又可以插入很多类型的其他对象，如文本域对象用于输入文字，按钮对象用于提交命令，文件域对象用于选择一个文件，更表框对象用于显示选项列表并进行选择等。在Dreamweaver8中，支持以可视化的方式是时行表单和表单对象的创建，若希望完成表单的信息处理功能，还必须编写服务器端的脚本程序。插入表单1.表单的基本组成文档中的一个表单基本上由三个部分组成：Form标签：其中包括将要处理该表单的脚本程序的URL地址以及数据传送到服务器的方式。表单域：其中包括了各种具体的表单对象，如文本域、跳转菜单、文件选择域等提交按钮：使用该按钮将数据送给服务器的某脚本程序2.创建表单原则上来说，在页面中插入任何表单对象之前，最好先创建一个表单。方法如下：在当前文档中将鼠标移到欲创建表单的位置执行下列两种方式之一以插入表单：插入表单•执行菜单命令“插入/表单/表单”•在“对象”面板的“表单”分类中选取“插入表单”图标注：•若在当前文档中直接插入一个表单对象而不先创建表单，则Dreamweaver将显示一个提示对话框，以询问是否添加表单标签，单击“是”按钮则Dreamweaver将自动为该对象创建表单标签•当表单创建完后，在当前文档窗口的光标处会出现一个红色虚线边框，在框内就可以任意地插入各种表单对象。若看不到该框线，可检查“查看/可视化助理/不可见元素”选项是否已被选取•在实际浏览网页时，红色虚线边是不可见的。插入表单3.表单属性表单属性参数如下所示：表单名称：给表单惟一的名称来标识它，以便使用脚本语言如JavaScript或VBScript来引用该表单动作：指定处理表单信息的脚本程序所在URL路径地址方法•默认：该方法使用浏览器的信息值追加到URL后面发送给服务器。通常为GET方法。•GET：该方法将提交的信息追加到URL后面发送给服务器。注意：由于URL被限制为最多8912个字符，若传送数据太长，数据会被自动截短，因此信息量较多建议不要使用该方法•POST：该方法将在HTTP请求中嵌入表单数据信息插入表单MIME类型：该属性用来设置发送表单到服务器的媒体类型，只用当发送方法为POST时才有效。其默认值为application/x_；若要创建上传文件文本域则选择multipart/form-data目标•_blank:保留当前窗口不变，在新的窗口中打开目标文档•_parent:在当前文档窗口的父窗口中显示目标文档•_self:在当前窗口内打开目标文档，替换当前窗口的内容•_top:在当前窗口的主窗口内打开文档并替换所有内容插入表单4.插入文本域(1).概述Dreamweaver提供了文本域对象来让用户输入信息，文本域共有三种类型：单选文本域：用于输入一行文本，通常是单个词汇或者短句，如用户名等多行文本域：输入多行文本，通常是多个句子，如反馈意见、自我评价等密码域：是一种特殊类型的文本域，当用户在密码域中输入内容时，输入的文本会被隐藏并自动替换为设定的密码字符（通常是项目符号和星号）注：用户浏览网页时，在密码域中输入的文本虽然隐藏并被自动替换，但当密码文本被发送到服务端时，传递的数据是可以被截取和识别的，所以这种传输方式并不是安全的，最好在数据数据被发送到服务器端之前对它进行加密处理。插入表单(2).插入单行文本域方法如下：插入/表单/文本域单击“插入”面板上“表单”分类中的“文本字段”图标参数设置如下：文本域：为该文本域指定一个名称。一般为了能准确标识每一个对象，每个文本域都必须有一个惟一的名称，并且命名表单对象时不能包含空格或特殊字符，可以使用字母数字字符和下划线的任意组合，最好选用该对象的英文名，或者拼音，做到“见名知义”字符宽度：设置该文本域中最多可显示的字符数，其默认值为20注：虽然无法在该域中看到这些字符，但文本域对象可以识别它们，而且它们会被发送到服务器进行处理插入表单最多字符数：设置单行文本域最多可输入的字符数注：若将“最多字符数”文本框保留为空白，则用户可以输入任意数量的文本，若文本超过最多字符宽度，文本将自动折行，若用户输入超过最大字符数则表单产生警告声类型：用于指定该文本域是单行文本域、多行文本域还是密码域，默认为单行文本域初始值：用于设置文本域的默认文本，在首次载入表单时该文本域中将显示其值类：指定用于该文本域的CSS样式插入表单(3).插入多行文本域插入方法同上。参数设置如下：行数：该属性只用于多行文本域。用于设置文本区域中显示的行数，默认值为2行换行：该属性只用于多行文本域。用于设置当用户输入的信息超过文本域的宽度时应该如何处理，可以设置为以下几种方式之一：•关闭或默认：若用户不需要文本换行时选择该方式。当用户输入的内容超过文本区域的右边界时，文本将向左侧滚动。用户必须按Enter键才能将插入点移动到文本区域的下一行•虚拟：若在文本区域中要自动换行时选择该方式。当用户输入的内容超过文本区域的右边界，插入一个虚拟换行域，文本自动换行到下一行。当提交数据时，换行并不会应用到数据中。插入表单•物理：在文本区域要自动换行时选择该方式。当用户输入的内容超过文本区域的右边界时，插入一个物理换行域，文本自动换到下一行。当提交数据进行处理时，换行也同时被提交类型：选择“多行”以设定文本域为多行文本域(4).插入密码域插入方法、属性参数设置均同上。注：一定要将“类型”属性设置为“密码”选项插入表单5.插入按钮(1).概述按钮是表单中最重要的，同时也是最不可或缺的元素之一，因为按钮控制着表单的各种操作。可以使用按钮来提交用户输入的数据到服务器，或者重置表单，或者来执行已经在脚本中定义的处理任务。(2).插入方法插入/表单/按钮单击“插入”面板上“表单”分类中的“按钮”图标(3).属性参数设置属性参数设置如下：按钮名称：使用该属性为按钮指定一个惟一的名称，命名规则同文本域值：使用该属性设置按钮上显示的文字插入表单操作：用来确定单击该按钮时发生的操作，有三种选择：•提交表单：当单击该按钮时将提交表单数据到服务器端进行处理，这也是默认的选项•重置表单：当单击该按钮时将清除该表单的所有内容•无：指定单击该按钮时要执行的自定义操作类：指定用于该标准按钮的CSS样式插入表单6.插入复选框(1).概述Dreamweaver利用“复选框”来实现多重选择，用户可以一个不选，也可以选择一个或多个，而且选择多个时彼此之间互不影响。每个复选框表单对象都是一个独立的对象，所以每个复选框对象都必须有一个惟一的名称。(2).插入复选框的方法方法如下：插入/表单/复选框单击“插入”面板上“表单”分类中的“复选框”图标插入表单(3).属性参数设置属性参数设置方法如下：复选框名称：为指定的复选框设定一个名称，命名规则同文本哉，不能包含空格或特殊字符。每个复选框都必须有惟一名称，所以名称必须在该表单内惟一标识该复选框选定值：设定该复选框被选中时发送给服务器的值初始状态：用来设置当浏览器载入表单时，该复选框是否被选中，有个可‘选值：已勾选、未选中类：指定用于该复选框的CSS样式插入表单7.插入单选按钮(1).概述单选按钮和复选框是比较类似的对象，但有本质上的区别。复选框可以有多个，并且选择时是任意的，彼此之间是互不影响。但单选按钮通常是以组的方式来工作的，同一个组中的所有单选按钮必须具有相同的名称，每一组单选按钮中只能选取一个，并且提供互相排斥的选择(2).插入方法方法如下：插入/表单/单选按钮单击“插入”面板上“表单”分类中的“单选按钮”图标插入表单(3).属性参数设置属性参数设置如下：单选按钮：为单选按钮设定一个名称，此名称不能包含空格或特殊字符。若希望在某组内的多个单选按钮为互斥选项，必须共用同一名称选定值：该属性是用来设置在该单选按钮被选中时发送给服务器或处理脚本程序的值初始状态：用来设置当前浏览器中载入表单时，该单选按钮是否被选中，有两个可选的值：已勾选、未选中类：指定用于该单选按钮的CSS样式插入表单8.插入单选按钮组(1).概述Dreamweaver提供了单选按钮组，它允许设计者一次性插入一组单选按钮，一组中的所有单选按钮自动拥有相同的名称，但包含不同的标签和值。(2).插入方法方法如下：插入/表单/单选按钮单击“插入”面板上“表单”分类中的“单选按钮组”图标插入表单(3).属性参数设置属性参数设置如下：名称：为单选按钮组设定一个名称标签和值：设定每一个单选按钮上所显示的标签和所代表的值“添加”按钮：增加一个新的单选按钮“移除”按钮：移除选定的单选按钮“向上”按钮和“向下”按钮：对选定的按钮项进行向行和向后排序布局，使用：选择Dreamweaver以哪种方式来对该单选按钮组进行布局排列•换行符：把每个单选按钮分行显示•表格：Dreamweaver会自动创建一个单列多行的表格，并在表格的左侧逐行显示单选按钮，右侧逐行显示单选按钮的标签插入表单9.插入列表/菜单(1).概述列表和菜单无论是展现出来的样式还是设计过程都比较相似，但它们也存在重要区别：列表可以同时显示多项，且支持多选，但菜单因只显示一项，且不能进行多选(2).插入列表方法如下：插入/表单/列表菜单单击“插入”面板上“表单”分类中的“列表/菜单”图标属性参数设置如下：列表/菜单：为选定的列表取一个惟一的名称插入表单类型•菜单：表明对象是单击时下拉的菜单•列表：表明该对象是显示一个有项目的可滚动列表高度：设定列表要显示的行数。当用户输入的数值小于列表中所包含的选项数时将自动添加滚动条，以方便用户进行选择允许多选：若该选项选中，表明允许用户在列表中一次性选取多个选项。用户可以按住Shift键进行连续选择，也可以按住Ctrl键进行不连续选择类：指定用于该列表的CSS样式初始化选项：用来设置列表中默认选择的项列表值：用来设置该列表中的项目标签及值•标签和值：设定每一个列表项所显示的标签和所代表的值•“添加”和“移除”按钮：增加或移除一个列表项•“向上”和“向下”按钮：对选定的列表项进行向前和向后排序插入表单(3).插入菜单插入方法如下：插入/表单/列表菜单单击“插入”面板上“表单”分类中的“列表/菜单”属性参数设置同上。插入表单10.插入文件域(1).概述Dreamweaver提供了文件域对象来使用户可以将整个文件传送服务器端，值得提醒的是需要具有服务器端脚本或能够处理文件提交的页面才可以使用文件域。文件域对象除了包含一个文本域之外，还包含一个“浏览”按钮。用户可以输入要上传的文件的路径，也可以使其“浏览”按钮定位并选择欲上传的文件注：若要在表单中使用文件域，表单的提交方式必须设为Post方式。此外还必须联系服务器管理员以确定是否允许使用匿名文件上传(2).插入方法方法如下：插入/表单/文件域单击“插入