《表单的设计与操作》PPT课件.ppt

表单的设计与操作,本章主要内容,了解表单的基本概念及作用 掌握表单及各种表单对象的创建 熟悉各种表单对象相关属性的设置 掌握并理解两种不同的表单的验证方式,表单的基础知识,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样式 初始化选项：用来设置列表中默认选择的项 列表值 ：用来设置该列表中的项目标签及值 标签和值：设定每一个列表项所显示的标签和所代表的值 “添加”和“移除”按钮：增加或移除一个列表项 “向上”和“向下”按钮：对选定的列表项进行向前和向后排序,插 入 表 单,(3).插入菜单 插入方法如下： 插入/表单/列表菜单 单击“插入”面板上“表单”分类中的“列表/菜单” 属性参数设置同上。,插 入 表 单,10.插入文件域 (1).概述 Dreamweaver提供了文件域对象来使用户可以将整个文件传送服务器端， 值得提醒的是需要具有服务器端脚本或能够处理文件提交的页面才可以使用 文件域。文件域对象除了包含一个文本域之外，还包含一个“浏览”按钮。用户 可以输入要上传的文件的路径，也可以使其“浏览”按钮定位并选择欲上传的文 件 注：若要在表单中使用文件域，表单的提交方式必须设为Post方式。此外还必 须联系服务器管理员以确定是否允许使用匿名文件上传 (2).插入方法 方法如下： 插入/表单/文件域 单击“插入”面板上“表单”分类中的“文件域”图标,插 入 表 单,(3).属性参数设置 具体参数设置如下： 文件域名称：为选定的文件域对象取一个惟一名称 字符宽度：设置该文件域文件框中最多可显示的字符数 最多字符数：设置文件域文件框中最多可输入的字符数。若用户通过单击 “浏览”按钮来定位和选择目标文件，则文件名和路径可超过指定的“最多字符 数”的值，若用户手式输入文件名和路径，则输入字符数量受限于指定的值 类：指定用于该列表的CSS样式,插 入 表 单,11.插入图像域 (1).概述 使用图形按钮不仅可以用来执行常用的如提交按钮、重置表单等任务，也 可以用来执行如播放声音、翻转图片等其他任务，要实现这些任务则还需要 将某种行为附加到该图形按钮上。 (2).插入方法 方法如下： 插入/表单/图像域 单击“插入”面板上“表单”分类中的“图像域”图标,插 入 表 单,(3).属性参数设置 图像区域：为该图像按钮指定一个名称，同进自动显示图像文件的大小 源文件：指定为该图像按钮使用的图像源文件，可以通过后面的“浏览文 件”按钮进行再次选择 替代：用来设置对象的对齐属性，共有默认值、顶端、居中、底部、左对 齐、右对齐六种对齐方式 编辑图像：如单击该按钮将启动默认的图像编辑器并打开该图像文件进行 编辑 类：指定用于该图像按钮的CSS样式,插 入 表 单,12.插入隐藏域 (1).概述 隐藏域对于站点的访问者来说是不可见的，它们是放置在表单中用于收集 或发送信息的不可见元素，但隐藏域对象中的数据会在表单被提交时一块传 送到服务器端。 当用户在表单中插入一个隐藏域对象时会自动添加一个标志符号。若用 户已经插入了隐藏域去看不到该标志符号，请检查菜单项“查看/可视化助理/ 不可见元素”是否已经被选中。 (2).插入方法 方法如下： 插入/表单/隐藏域 单击“插入”面板上“表单”分类中的“隐藏域”图标,插 入 表 单,(3). 属性参数设置 属性参数设置如下： 隐藏区域：为隐藏对象设定一个惟一的对象 值：设定包含在隐藏域对象中并被提交传送到服务端的值，该值可以为 任何数据类型,插 入 表 单,13.跳转菜单 (1).概述 在网页制作中，利用跳转菜单使用户在有限的空间时行选择并重定向。从 表现形式来说，跳转菜单很类似于列表，可以包含多个菜单项。在设计跳转 菜单时，可以建立某菜单项到某一个URL地址的链接，该URL地址可以是本 Web站点中的某文档，也可以是其他web站点的某文档（在URL之前要加 http:/前缀）；可以是电子邮件链接、图形文件链接以及其他任务浏览器可 以打开的文档链接。当用户在浏览网页时，通过从跳转菜单列表中选择某一 菜单项，将被自动重定向（或“跳转”）到指定的URL地址。 (2).插入方法 方法如下： 插入/菜单/跳转菜单 单击“插入”面板上“表单”分类中的“跳转菜单”图标,插 入 表 单,(3). 属性参数设置 属性参数设置如下： “添加”和“移除”按钮：增加或移除选定的菜单项 “向上”和“向下”按钮：对选定的菜单进行向前和向后排序 文本：设定某菜单项的显示文本 选择时，转到URL：设定用户选择该菜单项时，自动跳转到的URL地址，该 URL地址可以是本站点的相对地址，也可以是其他站点的绝对地址（在URL 之前要加http:/前缀） 打开URL于：设定目标文档的打开位置，若选择“主窗口”则在同一窗口中打 开文件；若选择“框架”则在所框架中打开文件 菜单名称：设定该菜单项的名称，建议给每一个菜单项都设一个唯一的名 称，以方便编程。 更改URL之后选择第一个项目：当跳转到指定的URL地址之后，仍然默认选 择第一个菜单项,插 入 表 单,打开URL于：设定目标文档的打开位置，若选择“主窗口”则在同一窗口中打 开文件；若选择“框架”则在所框架中打开文件 菜单名称：设定该菜单项的名称，建议给每一个菜单项都设一个唯一的名 称，以方便编程。 菜单之后插入前往按钮：在菜单列表后面自到插入一个“前往”按钮，在用 户浏览时，单击该按钮，就可以转到相应的URL地址。 更改URL之后选择第一个项目：当跳转到指定的URL地址之后，仍然默认选 择第一个菜单项,验 证 表 单,1.概述 在网页中，表单属于一种输入界面，它的功能主要在于收集用户输入的各种 信息并提交到服务器进行处理。在实际的操作过程中，由于用户输入数据时 粗心大意或其他原因，有可能会导致用户输入错误的数据 。这些错误的数据 可能是数据类型错误，也有可能是逻辑错误，根据常规的逻辑常识，我们都 知道这些是错误的。 若对用户输入的数据不进行判断和处理而直接提交到服务器，轻则在服务 器端保存错误的数据，重则会导致程序在执行时出现错误，甚至可能会导致 整个web应用程序的崩溃。 在Dreamweaver中，对表单进行验证分为两种：一种是客户端表单验证， 即在数据未提交到服务端之前，在客户端的浏览器中对表单进行验证，这通 常可以使用Javascript或VBScript等脚本语言来实现；另一种是服务器端表单 验证，即在数据提交到服务端之后，由服务器的应用程序对表单进行验证,验 证 表