第8章表单的设计与操作课件.ppt

1、表单的设计与操作本章主要内容n了解表单的基本概念及作用了解表单的基本概念及作用n掌握表单及各种表单对象的创建掌握表单及各种表单对象的创建n熟悉各种表单对象相关属性的设置熟悉各种表单对象相关属性的设置n掌握并理解两种不同的表单的验证方式掌握并理解两种不同的表单的验证方式表单的基础知识表单的基础知识1.表单的组成表单的组成 任何一个表单都必须由两个重要部分组成：一是描述表单的HTML源代码（如描述文本框、标签、按钮等网页上的可见部分）；二是用于处理用户提交信息的脚本程序（如CGI、JSP、ASP、PHP等）。只有这两部分结合在一起，才能完成信息的收集、信息处理、信息反馈。只有这两部分结合在一起，才

2、能完成信息的收集、信息处理、信息反馈等功能。2.工作过程工作过程 当访问者在web浏览器中显示的表单中输入信息后单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息进行处理。用于正理表单数据的常用服务器技术包括：Macromedia ColdFusion、Microsfot Active Server Pages(ASP)和PHP。服务器进行响应时会将被请求信息发送回用户（或客户端），或基于该表单内容执行一些操作。表单的基础知识表单的基础知识3.表单对象表单对象 表单是一个对象，同时也是一个对象容器，即在一个表单中又可以插入很多类型的其他对象，如文本域对象用于输入文

3、字，按钮对象用于提交命令，文件域对象用于选择一个文件，更表框对象用于显示选项列表并进行选择等。在Dreamweaver 8中，支持以可视化的方式是时行表单和表单对象的创建，若希望完成表单的信息处理功能，还必须编写服务器端的脚本程序。插 入 表 单1.表单的基本组成表单的基本组成文档中的一个表单基本上由三个部分组成：nForm标签：其中包括将要处理该表单的脚本程序的URL地址以及数据传送到服务器的方式。n表单域：其中包括了各种具体的表单对象，如文本域、跳转菜单、文件选择域等n提交按钮：使用该按钮将数据送给服务器的某脚本程序2.创建表单创建表单原则上来说，在页面中插入任何表单对象之前，最好先创建一

4、个表单。方法如下：n在当前文档中将鼠标移到欲创建表单的位置n执行下列两种方式之一以插入表单：插 入 表 单执行菜单命令“插入/表单/表单”在“对象”面板的“表单”分类中选取“插入表单”图标注：若在当前文档中直接插入一个表单对象而不先创建表单，则Dreamweaver将显示一个提示对话框，以询问是否添加表单标签，单击“是”按钮则Dreamweaver将自动为该对象创建表单标签当表单创建完后，在当前文档窗口的光标处会出现 一个红色虚线边框，在框内就可以任意地插入各种表单对象。若看不到该框线，可检查“查看/可视化助理/不可见元素”选项是否已被选取在实际浏览网页时，红色虚线边是不可见的。插 入 表 单

5、3.表单属性表单属性表单属性参数如下所示：n表单名称：给表单惟一的名称来标识它，以便使用脚本语言如JavaScript或VBScript来引用该表单n动作：指定处理表单信息的脚本程序所在URL路径地址n方法n默认：该方法使用浏览器的信息值追加到URL后面发送给服务器。通常为GET方法。nGET：该方法将提交的信息追加到URL后面发送给服务器。注意：由于URL被限制为最多8912个字符，若传送数据太长，数据会被自动截短，因此信息量较多建议不要使用该方法nPOST：该方法将在HTTP请求中嵌入表单数据信息插 入 表 单MIME类型：该属性用来设置发送表单到服务器的媒体类型，只用当发送方法为POST

6、时才有效。其默认值为application/x_www-form-urlemoded；若要创建上传文件文本域则选择multipart/form-data目标_blank:保留当前窗口不变，在新的窗口中打开目标文档_parent:在当前文档窗口的父窗口中显示目标文档_self:在当前窗口内打开目标文档，替换当前窗口的内容_top:在当前窗口的主窗口内打开文档并替换所有内容插 入 表 单4.插入文本域插入文本域(1).概述概述 Dreamweaver提供了文本域对象来让用户输入信息，文本域共有三种类型：n单选文本域：用于输入一行文本，通常是单个词汇或者短句，如用户名等n多行文本域：输入多行文本，通

7、常是多个句子，如反馈意见、自我评价等n密码域：是一种特殊类型的文本域，当用户在密码域中输入内容时，输入的文本会被隐藏并自动替换为设定的密码字符（通常是项目符号和星号）注：用户浏览网页时，在密码域中输入的文本虽然隐藏并被自动替换，但当密码文本被发送到服务端时，传递的数据是可以被截取和识别的，所以这种传输方式并不是安全的，最好在数据数据被发送到服务器端之前对它进行加密处理。插 入 表 单(2).插入单行文本域插入单行文本域方法如下：n插入/表单/文本域n单击“插入”面板上“表单”分类中的“文本字段”图标参数设置如下：n文本域：为该文本域指定一个名称。一般为了能准确标识每一个对象，每个文本域都必须有

8、一个惟一的名称，并且命名表单对象时不能包含空格或特殊字符，可以使用字母数字字符和下划线的任意组合，最好选用该对象的英文名，或者拼音，做到“见名知义”n字符宽度：设置该文本域中最多可显示的字符数，其默认值为20注：虽然无法在该域中看到这些字符，但文本域对象可以识别它们，而且它们会被发送到服务器进行处理插 入 表 单最多字符数：设置单行文本域最多可输入的字符数注：若将“最多字符数”文本框保留为空白，则用户可以输入任意数量的文本，若文本超过最多字符宽度，文本将自动折行，若用户输入超过最大字符数则表单产生警告声类型：用于指定该文本域是单行文本域、多行文本域还是密码域，默认为单行文本域初始值：用于设置文

9、本域的默认文本，在首次载入表单时该文本域中将显示其值类：指定用于该文本域的CSS样式插 入 表 单(3).插入多行文本域插入多行文本域插入方法同上。参数设置如下：n行数：该属性只用于多行文本域。用于设置文本区域中显示的行数，默认值为2行n换行：该属性只用于多行文本域。用于设置当用户输入的信息超过文本域的宽度时应该如何处理，可以设置为以下几种方式之一：n关闭或默认：若用户不需要文本换行时选择该方式。当用户输入的内容超过文本区域的右边界时，文本将向左侧滚动。用户必须按Enter键才能将插入点移动到文本区域的下一行n虚拟：若在文本区域中要自动换行时选择该方式。当用户输入的内容超过文本区域的右边界，插

10、入一个虚拟换行域，文本自动换行到下一行。当提交数据时，换行并不会应用到数据中。插 入 表 单物理：在文本区域要自动换行时选择该方式。当用户输入的内容超过文本区域的右边界时，插入一个物理换行域，文本自动换到下一行。当提交数据进行处理时，换行也同时被提交类型：选择“多行”以设定文本域为多行文本域(4).插入密码域插入密码域 插入方法、属性参数设置均同上。注：一定要将“类型”属性设置为“密码”选项插 入 表 单5.插入按钮插入按钮(1).概述概述 按钮是表单中最重要的，同时也是最不可或缺的元素之一，因为按钮控制着表单的各种操作。可以使用按钮来提交用户输入的数据到服务器，或者重置表单，或者来执行已经在

11、脚本中定义的处理任务。(2).插入方法插入方法n插入/表单/按钮n单击“插入”面板上“表单”分类中的“按钮”图标(3).属性参数设置属性参数设置属性参数设置如下：n按钮名称：使用该属性为按钮指定一个惟一的名称，命名规则同文本域n值：使用该属性设置按钮上显示的文字插 入 表 单操作：用来确定单击该按钮时发生的操作，有三种选择：提交表单：当单击该按钮时将提交表单数据到服务器端进行处理，这也是默认的选项重置表单：当单击该按钮时将清除该表单的所有内容无：指定单击该按钮时要执行的自定义操作类：指定用于该标准按钮的CSS样式插 入 表 单6.插入复选框插入复选框(1).概述概述 Dreamweaver利用

12、“复选框”来实现多重选择，用户可以一个不选，也可以选择一个或多个，而且选择多个时彼此之间互不影响。每个复选框表单对象都是一个独立的对象，所以每个复选框对象都必须有一个惟一的名称。(2).插入复选框的方法插入复选框的方法方法如下：n插入/表单/复选框n单击“插入”面板上“表单”分类中的“复选框”图标插 入 表 单(3).属性参数设置属性参数设置 属性参数设置方法如下：n复选框名称：为指定的复选框设定一个名称，命名规则同文本哉，不能包含空格或特殊字符。每个复选框都必须有惟一名称，所以名称必须在该表单内惟一标识该复选框n选定值：设定该复选框被选中时发送给服务器的值n初始状态：用来设置当浏览器载入表单

13、时，该复选框是否被选中，有个可选值：已勾选、未选中n类：指定用于该复选框的CSS样式插 入 表 单7.插入单选按钮插入单选按钮(1).概述概述 单选按钮和复选框是比较类似的对象，但有本质上的区别。复选框可以有多个，并且选择时是任意的，彼此之间是互不影响。但单选按钮通常是以组的方式来工作的，同一个组中的所有单选按钮必须具有相同的名称，每一组单选按钮中只能选取一个，并且提供互相排斥的选择(2).插入方法插入方法方法如下：n插入/表单/单选按钮n单击“插入”面板上“表单”分类中的“单选按钮”图标插 入 表 单(3).属性参数设置属性参数设置属性参数设置如下：n单选按钮：为单选按钮设定一个名称，此名称

14、不能包含空格或特殊字符。若希望在某组内的多个单选按钮为互斥选项，必须共用同一名称n选定值：该属性是用来设置在该单选按钮被选中时发送给服务器或处理脚本程序的值n初始状态：用来设置当前浏览器中载入表单时，该单选按钮是否被选中，有两个可选的值：已勾选、未选中n类：指定用于该单选按钮的CSS样式插 入 表 单8.插入单选按钮组插入单选按钮组(1).概述概述 Dreamweaver提供了单选按钮组，它允许设计者一次性插入一组单选按钮，一组中的所有单选按钮自动拥有相同的名称，但包含不同的标签和值。(2).插入方法插入方法方法如下：n插入/表单/单选按钮n单击“插入”面板上“表单”分类中的“单选按钮组”图标

15、插 入 表 单(3).属性参数设置属性参数设置属性参数设置如下：n名称：为单选按钮组设定一个名称n标签和值：设定每一个单选按钮上所显示的标签和所代表的值n“添加”按钮：增加一个新的单选按钮n“移除”按钮：移除选定的单选按钮n“向上”按钮和“向下”按钮：对选定的按钮项进行向行和向后排序n布局，使用：选择Dreamweaver以哪种方式来对该单选按钮组进行布局排列n换行符：把每个单选按钮分行显示n表格：Dreamweaver 会自动创建一个单列多行的表格，并在表格的左侧逐行显示单选按钮，右侧逐行显示单选按钮的标签插 入 表 单9.插入列表插入列表/菜单菜单(1).概述概述 列表和菜单无论是展现出来

16、的样式还是设计过程都比较相似，但它们也存在重要区别：列表可以同时显示多项，且支持多选，但菜单因只显示一项，且不能进行多选(2).插入列表插入列表方法如下：n插入/表单/列表菜单n单击“插入”面板上“表单”分类中的“列表/菜单”图标属性参数设置如下：n列表/菜单：为选定的列表取一个惟 一的名称插 入 表 单类型菜单：表明对象是单击时下拉的菜单列表：表明该对象是显示一个有项目的可滚动列表高度：设定列表要显示的行数。当用户输入的数值小于列表中所包含的选项数时将自动添加滚动条，以方便用户进行选择允许多选：若该选项选中，表明允许用户在列表中一次性选取多个选项。用户可以按住Shift键进行连续选择，也可以

17、按住Ctrl键进行不连续选择类：指定用于该列表的CSS样式初始化选项：用来设置列表中默认选择的项列表值：用来设置该列表中的项目标签及值标签和值：设定每一个列表项所显示的标签和所代表的值“添加”和“移除”按钮：增加或移除一个列表项“向上”和“向下”按钮：对选定的列表项进行向前和向后排序插 入 表 单(3).插入菜单插入菜单 插入方法如下：n插入/表单/列表菜单n单击“插入”面板上“表单”分类中的“列表/菜单”属性参数设置同上。插 入 表 单10.插入文件域插入文件域(1).概述概述 Dreamweaver提供了文件域对象来使用户可以将整个文件传送服务器端，值得提醒的是需要具有服务器端脚本或能够处

18、理文件提交的页面才可以使用文件域。文件域对象除了包含一个文本域之外，还包含一个“浏览”按钮。用户可以输入要上传的文件的路径，也可以使其“浏览”按钮定位并选择欲上传的文件注：若要在表单中使用文件域，表单的提交方式必须设为Post方式。此外还必须联系服务器管理员以确定是否允许使用匿名文件上传(2).插入方法插入方法方法如下：n插入/表单/文件域n单击“插入”面板上“表单”分类中的“文件域”图标插 入 表 单(3).属性参数设置属性参数设置具体参数设置如下：n文件域名称：为选定的文件域对象取一个惟一名称n字符宽度：设置该文件域文件框中最多可显示的字符数n最多字符数：设置文件域文件框中最多可输入的字符

19、数。若用户通过单击“浏览”按钮来定位和选择目标文件，则文件名和路径可超过指定的“最多字符数”的值，若用户手式输入文件名和路径，则输入字符数量受限于指定的值n类：指定用于该列表的CSS样式插 入 表 单11.插入图像域插入图像域(1).概述概述 使用图形按钮不仅可以用来执行常用的如提交按钮、重置表单等任务，也可以用来执行如播放声音、翻转图片等其他任务，要实现这些任务则还需要将某种行为附加到该图形按钮上。(2).插入方法插入方法方法如下：n插入/表单/图像域n单击“插入”面板上“表单”分类中的“图像域”图标插 入 表 单(3).属性参数设置属性参数设置n图像区域：为该图像按钮指定一个名称，同进自动

20、显示图像文件的大小n源文件：指定为该图像按钮使用的图像源文件，可以通过后面的“浏览文件”按钮进行再次选择n替代：用来设置对象的对齐属性，共有默认值、顶端、居中、底部、左对齐、右对齐六种对齐方式 n编辑图像：如单击该按钮将启动默认的图像编辑器并打开该图像文件进行编辑 n类：指定用于该图像按钮的CSS样式插 入 表 单12.插入隐藏域插入隐藏域(1).概述概述 隐藏域对于站点的访问者来说是不可见的，它们是放置在表单中用于收集或发送信息的不可见元素，但隐藏域对象中的数据会在表单被提交时一块传送到服务器端。当用户在表单中插入一个隐藏域对象时会自动添加一个标志符号。若用户已经插入了隐藏域去看不到该标志符

21、号，请检查菜单项“查看/可视化助理/不可见元素”是否已经被选中。(2).插入方法插入方法 方法如下：n插入/表单/隐藏域n单击“插入”面板上“表单”分类中的“隐藏域”图标插 入 表 单(3).属性参数设置属性参数设置属性参数设置如下：n隐藏区域：为隐藏对象设定一个惟一的对象n值：设定包含在隐藏域对象中并被提交传送到服务端的值，该值可以为任何数据类型插 入 表 单13.跳转菜单跳转菜单(1).概述概述 在网页制作中，利用跳转菜单使用户在有限的空间时行选择并重定向。从表现形式来说，跳转菜单很类似于列表，可以包含多个菜单项。在设计跳转菜单时，可以建立某菜单项到某一个URL地址的链接，该URL地址可以

22、是本Web站点中的某文档，也可以是其他web站点的某文档（在URL之前要加http:/前缀）；可以是电子邮件链接、图形文件链接以及其他任务浏览器可以打开的文档链接。当用户在浏览网页时，通过从跳转菜单列表中选择某一菜单项，将被自动重定向（或“跳转”）到指定的URL地址。(2).插入方法插入方法方法如下：n插入/菜单/跳转菜单n单击“插入”面板上“表单”分类中的“跳转菜单”图标插 入 表 单(3).属性参数设置属性参数设置属性参数设置如下：n“添加”和“移除”按钮：增加或移除选定的菜单项n“向上”和“向下”按钮：对选定的菜单进行向前和向后排序n文本：设定某菜单项的显示文本n选择时，转到URL：设定

23、用户选择该菜单项时，自动跳转到的URL地址，该URL地址可以是本站点的相对地址，也可以是其他站点的绝对地址（在URL之前要加http:/前缀）n打开URL于：设定目标文档的打开位置，若选择“主窗口”则在同一窗口中打开文件；若选择“框架”则在所框架中打开文件n菜单名称：设定该菜单项的名称，建议给每一个菜单项都设一个唯一的名称，以方便编程。n更改URL之后选择第一个项目：当跳转到指定的URL地址之后，仍然默认选择第一个菜单项插 入 表 单打开URL于：设定目标文档的打开位置，若选择“主窗口”则在同一窗口中打开文件；若选择“框架”则在所框架中打开文件菜单名称：设定该菜单项的名称，建议给每一个菜单项都

24、设一个唯一的名称，以方便编程。菜单之后插入前往按钮：在菜单列表后面自到插入一个“前往”按钮，在用户浏览时，单击该按钮，就可以转到相应的URL地址。更改URL之后选择第一个项目：当跳转到指定的URL地址之后，仍然默认选择第一个菜单项验验 证证 表表 单单1.概述概述 在网页中，表单属于一种输入界面，它的功能主要在于收集用户输入的各种信息并提交到服务器进行处理。在实际的操作过程中，由于用户输入数据时粗心大意或其他原因，有可能会导致用户输入错误的数据。这些错误的数据可能是数据类型错误，也有可能是逻辑错误，根据常规的逻辑常识，我们都知道这些是错误的。若对用户输入的数据不进行判断和处理而直接提交到服务器

25、，轻则在服务器端保存错误的数据，重则会导致程序在执行时出现错误，甚至可能会导致整个web应用程序的崩溃。在Dreamweaver中，对表单进行验证分为两种：一种是客户端表单验证，即在数据未提交到服务端之前，在客户端的浏览器中对表单进行验证，这通常可以使用Javascript或VBScript等脚本语言来实现；另一种是服务器端表单验证，即在数据提交到服务端之后，由服务器的应用程序对表单进行验证验验 证证 表表 单单 在Dreamweaverk，实现客户端表单验证又有两种不同的方式：一种是Dreamweaver中自带的验证表单行为来验证；另一种是自编JavaScript等脚本语言来验证。2.Dre

26、amweaver自带行为验证自带行为验证(1).概述概述 利用Dreamweaver自带的“检查表单”行为可以很方便地为表单中的各元素设置有效性规则，它会自动检查指定文本域的内容以确保用户输入正确的数据类型。可以使用OnBlur事件将此动作附加到表单单个文本域，在用户填写表单时就可以验证文本域的正确性；也可以使用OnSubmit事件将其附加到表单，在用户单击“提交”按钮同时一次验证多个文本域 验验 证证 表表 单单(2).验证表单的方法验证表单的方法表单添加“检查表单”行为的方法如下：n设计好表单，添加的需要的各种对象，其中一定要有文本域对象或文本区域对象，否则将不能应用“检查表单”行为n若要

27、在用户填写表单时验证单个文本域，则选择文本域；若要在用户提交表单时同时验证多个文本域，则点击文档窗口左下角标签选择器中标签以选择整个表单n单击“行为”面板中的“添加行为”按钮，并从弹出菜单中选择“检查表单”，此时会弹出“检查表单”对话框n在“命名的栏位”中选择要进行验证的文本域，若该文本域必须包含某种数据，则选择“必需”选项验验 证证 表表 单单从下面的“可接受”选项中选择一个选项：数字：检查该域是否只包含数字电子邮件地址：检查该域是否包含一个“”符号数字从：检查该文本域是否包含特定范围内的数字3.借助借助JavaScript脚本验证脚本验证 利用Dreamweaver自带的“检查表单”行为来进行表单验证是非常简单的，但其功能也是有限的，其实“检查表单”行为所调用的动作实际是封装在Dreamweaver中预定义好的各种JavaScript函数。若在实际的页面设计过程中，想要实现更为复杂或精确的验证，可以自己编写JavaScript脚本来实现。