Dreamweaver中表单制作(课堂PPT).ppt

,单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第,10,章 表 单,本章主要介绍,Dreamweaver MX,中表单的应用，包括如何制作表单，如何向表单中添加表单项以及对表单项的修饰，并与数据库结合就可以制作出动态效果的表单。,1,10.1,表单概述,表单是用来收集来自用户的信息，是网站站的管理者与浏览者之间沟通的桥梁。收集用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。表单有两个重要的组成部分：一是描述表单的,HTML,源代码；还有就是用于处理用户在表单域中输入的信息的服务器端应用程序或客户端脚本，如,CGI,、,ASP,等。通过表单收集到的用户反馈信息，通常是一些用分隔符（如逗号、分号等）分隔的文字资料。这些资料可以导入到数据库或电子表格中进行统计、分析，成为具有重要参考价值的信息。,10.2,创建表单,创建表单通常用两种方法：使用,“,插入,”,中的,“,表单,”,的菜单命令创建表单和使用,“,插入面板,”,中的,“,表单,”,按钮创建表单。,2,10.2.1,使用菜单命令插入表单,使用菜单命令插入表单的步骤如下：,（,1,）在文档窗口中选定插入点，将光标置于该位置。,（,2,）使用,“,插入,”,中的,“,表单,”,菜单命令插入表单，如右图所示。,（,3,）此时在文档窗口中将有红色边框线所定义的插入表单区域，如下图所示。,3,注意：,如果没有看到所创建的表单边框，单击,“,查看,”,中,“,可视化助理,”,“,不可见元素,”,命令将边框线显示出来。,（,4,）选中所创建的表单，打开,“,属性检查器,”,如图所示，在里面设置表单的属性：,“,表单名称,”,文本框：给表命名，这样方便用脚本语言对其进行控制。,“,动作,”,文本框：指定处理表单信息的服务器端应用程序。单击文件夹目标，找到应用程序，或直接输入应用程序路径。,“,方法,”,文本框：定义处理表单数据的方法，具体内容见步骤（,5,）。,（,5,）在,“,属性检查器,”,中，选择以下表单数据处理方法之一。,“,默认,”,下拉表：使用浏览器默认的方法（一般为,GET,）,“,GET,”,下拉表：把表单值添加给,URL,，并向服务器发送,GET,请求。因为,URL,被限定在,8192,个字符之内，所以不要对长表单使用,GET,方法。,“,POST,”,下拉表：在消息正文中发送表单值，并向服务器发送,POST,请求。,4,10.2.2,使用对象面板创建表单,使用对象面板创建表单的步骤是：,（,1,）在文档窗口中选定插入点，将光标置于此位置。,（,2,）单击,“,插入面板,”,中的,“,表单,”,标签，单击表单按钮，如图所示。,(3),其他设置同使用菜单命令插入表单。,10.3,向表单中插入对象,Dreamweaver MX,表,单包含标准对象，如文本域、按钮、图像域、复选框、单选钮、列表,/,菜单、文件域及隐藏域等。,10.3.1,插入表单对象的通用方法,（,1,）光标置于表单边界内部插入点，选择“插入”中的“表单对象”中选择一个对象，,例如,“,文件域,”,，如右图所示。,5,（,2,）光标置于表单边界内部插入点，单击“插入栏”中的“表单”标签上的表单对象,按钮，例如,“,文件字段,”,按钮如图所示。,（,3,）按住“插入栏”中的“表单”标签上的表单对象按钮拖入插入点，释放按钮。例,如,“,文件字段,”,按钮到位置后释放按钮。如图所示。,6,以上几种方法得到的效果如图所示。,除了表单按钮外，在标签,“,表单,”,中其他从左到右依次为文本字段、隐藏域、文本区域、复选框、单选按钮、单选组、列表,/,菜单、跳转、图像域、文件字段和按钮，其中一些常用功能分别是：,7,隐藏域：允许设计者存储应用程序在处理表单时所需要的信息。,文本字段和文本区域：接受任何类型的文本、字母和数字。文本字段为单行、密码保护，文本区域为多行。,复选框：在一组选项中选择多项。,单选按钮：在一组选项中一次只能选择一项。,列表,/,菜单：从提供一组选项中选择一项或多项。,跳转菜单：菜单上的每一项链接到一个文件，从中选择一项将跳转到被链接的网页。,图像域：可以用来替换提交按钮。,文件字段：允许读者在自己的硬盘上浏览文件，并作为表单数据上传。,按钮：单击时执行提交或重置表单之类的任务，可以输入自定义的按钮标签，或使用,Dreamweaver MX,的预定义标签。,8,各种表单对象的具体结构如右图所示：,9,10.4,设置表单属性,10.4.1,表单对象的属性设置,通过“属性面板”可以设置各表单的属性，其内容为：,1.,文本域的属性设置,(1),在“文挡窗口”的表单区域创建一个文本字段，例如在文字“姓名：”插入文本字段，如图所示。,10,（,2,）在,“,属性面板,”,中进行设置，例如将,“,文本域,”,命名为,“,name”,，将,“,字符宽度,”,、,“,最大字符数,”,、,“,类型,”,和,“,初始值,”,依次设置为,12,、,20,、单行和,“,输入姓名,”,，如图所示。,其中,“,文本域,”,即文本字段的名称；,“,字符宽度,”,为文本字段显示的宽度；,“,最大字符数,”,为允许使用者输入的最大的字符个数；,“,初始值,”,为表单首次被载入时显示在文本字段中的值。,(3),用鼠标左键单击表单域内任意处或按回车键，设置完成。,11,2,单选按钮的属性设置,(1),在,“,文档窗口,”,的表单区域插入单选钮表单对象，例如在文字,“,性别：,”,后，,“,男,”,、,“,女,”,前分别插入两个单选按钮，如左图所示。,(2),在,“,属性面板,”,中对单选按钮进行设置，例如将,“,男,”,前的单选按钮的,“,单选按钮,”,、,“,选定值,”,和,“,初始状态,”,依次设置为,“,sex”,、,“,male”,和,“,未选中,(,U,)”,，如右图所示，回车后完成设置。,12,其中,“,单选按钮,”,为单选按钮的名称，在同一组的单选按钮名称必须相同；,“,选定值,”,为该按钮被选时的取值；,“,初始状态,”,有,“,已勾选,(C),”,和,“,未选中,(U),”,两种，,“,已勾选,(C),”,表示在浏览时单选按钮的显示为勾选状态，,“,未选中,(U),”,表示的是状态。,3,复选框的属性设置,（,1,）在“文档窗口”的表单区域插入复选框表单。例如在文字“爱好：”后，“上网”等文字前分别插入如图所示的复选框。,13,(2)“,属性面板,”,中对单选按钮进行设置，例如将,“,上网,”,前的复选框的,“,复选框名称,”,、,“,选定值,”,和,“,初始状态,”,依次设定为,“,favor”,、,“,net”,和,“,未选中,(,U,)”,，如图所示。,“,复选框名称,”,是给复选框命名；,“,选定值,”,设置复选框被选择时的取值；,“,初始状态,”,为设置首次载入表单时复选框是已选还是未选，具体同,“,单选按钮,”,。,14,4,列表,/,菜单的属性设置,(1),在,“,文档窗口,”,的表单区域插入列表,/,菜单表单对象，例如在文字,“,年龄：,”,后插入列表,/,菜单，如左图所示。,（,2,）用,“,属性面板,”,对列表,/,菜单属性进行设置，例如将,“,列表,/,菜单,”,设置为,“,age”,，,“,类型,”,为,“,菜单,”,，如右图所示。,15,在,“,列表,/,菜单,”,为列表,/,菜单的名称，,“,类型,”,为,“,菜单,”,和,“,列表,”,可选，,“,列表值,”,为可选的列表值。,（,3,）设定,“,列表值,”,。单击,“,属性面板,”,中,“,列表值,”,按钮，出现,“,列表值,”,对话框，单击,“,+”,按钮依次添加,“,项目标签,”,和,“,值,”,，如图所示，单击确定完成设置。注意：值是各不相同的。,(4),设置,“,初始化时选定值,”,。如图所示设置为,“,21-25”,。完成设置。,16,5,文件域的属性设置,(1),在,“,文档窗口,”,中的表单区域插入文件域表单，例如在文字,“,上传玉照：,”,后添加文件域，如图所示。,（,2,）在,“,属性面板,”,中设置文件域属性，例如设置,“,文件域名称,”,为,“,picture”,，,“,字符宽度,”,为,“,20”,，,“,最多字符数,”,为,“,100”,，如图所示，回车完成设置,.,17,其中,“,文件域名称,”,为该文件域的名称；,“,字符宽度,”,为文件域所显示的最大字符数；,“,最多字符数,”,为允许使用者输入的最多的字符数。,6,图像域的属性设置,(1),在,“,文档窗口,”,中的表单区域插入图像域。例如在文件域表单后插入图像域，如图所示。,18,（,2,）在,“,属性面板,”,中设置图像域属性，例如，将,“,图像区域,”,命名为,“,basketball”,，,“,替代,”,为,“,上传图像,”,，,“,宽,”,和,“,高,”,设置为,80,效果如图所示，回车完成设置。,其中“图像区域”为图像域的名称；“宽”和“高”是图像的宽度值和高度值；“源文件”为图片的地址；“替代”为浏览时鼠标放置在图片上出现的替代文字,19,7,文本区域的属性设置,(1),在“文档窗口”中的表单区域插入文本区域。文本区域和文本字段都属于文本域，文本区域为多行的文本域，文本字段为单行的文本域。例如在文字“备注”后插入文本区域，如图所示。,20,(2),在,“,属性面板,”,设置文本区域的属性，例如，将,“,文本域,”,设置为,“,note,”,、,“,字符宽度,”,、,“,行数,”,、,“,类型,”,和,“,初始值,”,分别设置为,25,、,5,、多行和,“,请在此备注,”,，如图所示。,注意：其中“文本域”为文本域的名称；“行数”为使用者录入文字可显示的行数；“换行”用户一般使用“默认”；“类型”是显示时的形式；“初始值”在文本域显示时初始的内容。,21,8,按钮的属性设置,(1),在文档窗口的表单区域插入按钮对象。例如在文本区域后插入“修改”和“提交”两个按钮，如图所示。,22,(2),在,“,属性面板,”,设置按钮属性，例如将,“,修改,”,和,“,提交,”,两个按钮分别设置为如上图和下图所示。,其中,“,按钮名称,”,是给按钮命名。,Dreamweaver MX,有两个保留名称：提交和重置。提交指示表单提交单数据给处理程序或脚本；重置恢复所有表单域为它们各自的初值。,“,标签,”,为确定显示在按钮上的文本；,“,动作,”,为确定按钮被单击时发生什么动作。,“,提交表单,”,是自动设置按钮名为提交；,“,重置表单,”,是自动设置按钮为重置，,“,无,”,是不发生任何动作。,23,10.5,应用实例,使用本章所学内容，设计一个读书调查问卷。,（,1,）打开,Dreamweaver MX,，单击,“,插入,”,面板中的,“,表单,”,标签。选择,“,表单,”,按钮，如左图所示,（,2,）将表单中需要的表单元素依次插入，并设置属性，如右图所示。,24,（,3,）将该页保存为,“,biaodan.htm,”,，浏览该页，效果如图所示。,25,10.6,习题：,一填空题,1.,设置表单的属性时，“表单名称”文本框是,。,2,文本域中“字符宽度”是,而“最多字符数”是,。,3.Dreamweaver MX,中有两个保留的按钮名称是,。,二上机操作题,利用所学的表单知识制作一个留言板。,26,