表单的设计与操作

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,表单的设计与操作,本章主要内容,了解表单的基本概念及作用,掌握表单及各种表单对象的创建,熟悉各种表单对象相关属性的设置,掌握并理解两种不同的表单的验证方式,表单的基础知识,1.,表单的组成,任何一个表单都必须由两个重要部分组成：一是描述表单的HTML源代码,（如描述文本框、标签、按钮等网页上的可见部分）；二是用于处理用户提,交信息的脚本程序（如CGI、JSP、ASP、PHP等）。只有这两部分结合在一起,，才能完成信息的收集、信息处理、信息反馈,。只有这两部分结合在一起,，才能完成信息的收集、信息处理、信息反馈等功能。,2.,工作过程,当访问者在web浏览器中显示的表单中输入信息后单击提交按钮时，这些信,息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息进行处理。,用于正理表单数据的常用服务器技术包括：Macromedia ColdFusion、,Microsfot Active Server Pages(ASP)和PHP。服务器进行响应时会将被请求信,息发送回用户（或客户端），或基于该表单内容执行一些操作。,表单的基础知识,3.,表单对象,表单是一个对象，同时也是一个对象容器，即在一个表单中又可以插入很,多类型的其他对象，如文本域对象用于输入文字，按钮对象用于提交命令，,文件域对象用于选择一个文件，更表框对象用于显示选项列表并进行选择等。,在Dreamweaver 8中，支持以可视化的方式是时行表单和表单对象的创建,，若希望完成表单的信息处理功能，还必须编写服务器端的脚本程序。,插 入 表 单,1.,表单的基本组成,文档中的一个表单基本上由三个部分组成：,Form标签：其中包括将要处理该表单的脚本程序的URL地址以及数据传送,到服务器的方式。,表单域：其中包括了各种具体的表单对象，如文本域、跳转菜单、文件选,择域等,提交按钮：使用该按钮将数据送给服务器的某脚本程序,2.,创建表单,原则上来说，在页面中插入任何表单对象之前，最好先创建一个表单。,方法如下：,在当前文档中将鼠标移到欲创建表单的位置,执行下列两种方式之一以插入表单：,插 入 表 单,执行菜单命令“插入,/,表单,/,表单”,在“对象”面板的“表单”分类中选取“插入表单”图标,注：,若在当前文档中直接插入一个表单对象而不先创建表单，则,Dreamweaver,将显示一个提示对话框，以询问是否添加表单标签，单击“是”按钮则,Dreamweaver,将自动为该对象创建表单标签,当表单创建完后，在当前文档窗口的光标处会出现 一个红色虚线边框，,在框内就可以任意地插入各种表单对象。若看不到该框线，可检查“查看,/,可,视化助理,/,不可见元素”选项是否已被选取,在实际浏览网页时，红色虚线边是不可见的。,插 入 表 单,3.,表单属性,表单属性参数如下所示：,表单名称：给表单惟一的名称来标识它，以便使用脚本语言如JavaScript,或VBScript来引用该表单,动作：指定处理表单信息的脚本程序所在URL路径地址,方法,默认：该方法使用浏览器的信息值追加到URL后面发送给服务器。通常为,GET方法。,GET：该方法将提交的信息追加到URL后面发送给服务器。注意：由于,URL被限制为最多8912个字符，若传送数据太长，数据会被自动截短，因此,信息量较多建议不要使用该方法,POST：该方法将在HTTP请求中嵌入表单数据信息,插 入 表 单,MIME,类型：该属性用来设置发送表单到服务器的媒体类型，只用当发送方,法为,POST,时才有效。其默认值为,application/x_www-form-urlemoded,；若要,创建上传文件文本域则选择,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,样式,初始化选项：用来设置列表中默认选择的项,列表值：用来设置该列表中的项目标签及值,标签和值：设定每一个列表项所显示的标签和所代表的值,“添加”和“移除”按钮：增加或移除一个列表项,“向上”和“向下”按钮：对选定的列表项进行