《应用表单和表单对象.ppt》由会员分享，可在线阅读，更多相关《应用表单和表单对象.ppt（20页珍藏版）》请在金锄头文库上搜索。
1、新课导入：新课导入： InternetInternet中的申请表、调查表、留言簿是如何制作中的申请表、调查表、留言簿是如何制作的呢？它是否具有交互性？的呢？它是否具有交互性？教学目标：教学目标： 熟练地插入各种表单对象，制作出简单的具有交互熟练地插入各种表单对象，制作出简单的具有交互功能的动态页面，培养大家的动手操作能力。功能的动态页面，培养大家的动手操作能力。情感目标：情感目标： 通过对表单的学习，提高学生对学习网页制作的兴通过对表单的学习，提高学生对学习网页制作的兴趣。趣。第第1212章章 应用表单和表单对象应用表单和表单对象教学内容：教学内容：1.1.应用表单应用表单2.2.应用表单对象
2、应用表单对象3.3.验证表单数据验证表单数据 4.4.初步的表单处理和简单的表单处理脚本程序初步的表单处理和简单的表单处理脚本程序编写编写5.5.创建动态表单对象创建动态表单对象教学重点：教学重点：创建表单和表单对象创建表单和表单对象教学难点：教学难点：编写简单的表单处理脚本程序编写简单的表单处理脚本程序教学方法：教学方法：任务驱动、引导教学。任务驱动、引导教学。12.1.1 12.1.1 认识表单认识表单 12.1 12.1 应用表单应用表单1 1、表单的概念：、表单的概念：表单是目前网页中很活跃的元素，表单是目前网页中很活跃的元素，通过表单可以与用户进行交互，并可以从客户那通过表单可以与用
3、户进行交互，并可以从客户那里获得信息。里获得信息。2 2、表单的作用、表单的作用 表单真正实现了网页的交互性表单真正实现了网页的交互性, ,可用来搜集浏览者的信可用来搜集浏览者的信息息, ,为用户提供信息反馈（调查表、留言簿、用户注册为用户提供信息反馈（调查表、留言簿、用户注册 、网上订购、网上订购 、用户登录等）、用户登录等） ；它是动态网页中不可缺；它是动态网页中不可缺少的一个重要元素。表单与在客户端显示运行的动画不少的一个重要元素。表单与在客户端显示运行的动画不同。同。3 3、表单的处理过程、表单的处理过程 表单处理的过程大致为：浏览者将信息输入表单，通过表单处理的过程大致为：浏览者将信
4、息输入表单，通过提交按钮将信息发送到服务器；服务器端脚本或应用程序提交按钮将信息发送到服务器；服务器端脚本或应用程序对信息进行处理后，将请求信息或基于该表单内容执行一对信息进行处理后，将请求信息或基于该表单内容执行一些操作来响应浏览者。些操作来响应浏览者。4 4、用于处理表单的常用服务器技术、用于处理表单的常用服务器技术 ASP (Active Server Pages )ASP (Active Server Pages )、 PHPPHP、 ColdFusion ColdFusion PagePage、 JSPJSP（Java Server PageJava Server Page）、）、C
5、GI(Common CGI(Common Gateway Interface) Gateway Interface) 等脚本处理程序。等脚本处理程序。 12.1.2 12.1.2 插入表单插入表单 单击单击“表单表单”插入栏中插入栏中的的“表单表单”按钮按钮 插入插入表单表单 n在页面中必须先插入表单，才能在表单中插入表单对在页面中必须先插入表单，才能在表单中插入表单对象。若不插入，象。若不插入，dwdw也会自动添加上表单。也会自动添加上表单。n将插入点置于文档中所需位置，用菜单法或按钮法均将插入点置于文档中所需位置，用菜单法或按钮法均可插入一个空表单。红色轮廓线指示表单。可插入一个空表单。红
6、色轮廓线指示表单。1.1.插入表单后，在属性面板中设置表单的名称和插入表单后，在属性面板中设置表单的名称和处理表单数据的方法等。处理表单数据的方法等。2.2.将表单数据传送到服务器所使用的方法将表单数据传送到服务器所使用的方法nPOSTPOST方法：方法：POST POST 在在 HTTP HTTP 请求中嵌入表单数据请求中嵌入表单数据, ,在消息在消息正文中发送表单值，并向服务器发送正文中发送表单值，并向服务器发送POST POST 请求。它比请求。它比GETGET方法更安全，但由方法更安全，但由POSTPOST方法发送的信息未经过加密，方法发送的信息未经过加密，易被黑客获取。易被黑客获取。
7、12.1.2 12.1.2 设置表单属性设置表单属性 nGETGET方法：方法：这是默认方法，将表单值添加给这是默认方法，将表单值添加给 URL,URL,并向并向服务器发送服务器发送GETGET请求。请求。注意：注意：不要使用不要使用 GET GET 方法发送长表单方法发送长表单. URL . URL 的长度限制的长度限制在在8,192 8,192 个字符以内。如果发送的数据量太长，个字符以内。如果发送的数据量太长，数据将被截断，从而导致意外的或失败的处理结数据将被截断，从而导致意外的或失败的处理结果。在发送机密用户名和密码、信用卡号或其他果。在发送机密用户名和密码、信用卡号或其他机密信息时，
8、不要使用机密信息时，不要使用 GET GET 方法。用方法。用 GET GET 方法方法传递信息不安全。传递信息不安全。在发送机密用户名和密码、信用卡号或其他机密在发送机密用户名和密码、信用卡号或其他机密信息时，不要使用信息时，不要使用 GET GET 方法。用方法。用 GET GET 方法传递方法传递信息不安全。信息不安全。n表单对象：表单对象：表单输入类型即表单对象，是允许用表单输入类型即表单对象，是允许用户输入数据的工具，它可以象其它对象一样在户输入数据的工具，它可以象其它对象一样在dwdw中中被插入。被插入。 DwDw 中提供的表单对象有文本区域、隐藏中提供的表单对象有文本区域、隐藏域
9、、单选按钮、单选按钮组、复选框、图像域、文域、单选按钮、单选按钮组、复选框、图像域、文件域、列表件域、列表/ /菜单、提交和重置按钮、标签等，这些菜单、提交和重置按钮、标签等，这些表单对象具有各自不同的功能表单对象具有各自不同的功能. .n一个完整的表单包含两个部分：一个完整的表单包含两个部分：一是在网页中一是在网页中进行描述的表单对象；二是应用程序，它可以是服进行描述的表单对象；二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进务器端的，也可以是客户端的，用于对客户信息进行分析处理。行分析处理。 12.2 12.2 应用表单对象应用表单对象12.2.1 12.2.1 文本字
10、段文本字段 文本字段：文本字段：是用来输入表单内容的表单对象。文本框是用来输入表单内容的表单对象。文本框是一个接受文本信息的空白框。在文本框中几乎可以容是一个接受文本信息的空白框。在文本框中几乎可以容纳任何类型的文本数据纳任何类型的文本数据, ,像姓名、地址、像姓名、地址、E-mailE-mail或稍长或稍长一些的个人介绍等字段。一些的个人介绍等字段。利用它可以使网页设计师不必利用它可以使网页设计师不必限制访问者提交的内容。限制访问者提交的内容。文本域的名称要唯一。文本域的名称要唯一。在网页中，常见的文本框有3种形式：单行文本域、多行文本域和密码文本域.单行文本域：单行文本域：单行文本框用来输
11、入比较简单的信息。单行文本框用来输入比较简单的信息。 多行文本域多行文本域 ：如果需要输入建议、需求等大段文字，使如果需要输入建议、需求等大段文字，使用单行文本框就显得力不从心了，这时通常使用带有滚动用单行文本框就显得力不从心了，这时通常使用带有滚动条的多行文本框。条的多行文本框。密码文本域：密码文本域：输入内容显示为项目符号或编号，以保护输入内容显示为项目符号或编号，以保护输入内容不被别人看到。输入内容不被别人看到。12.2.2 12.2.2 隐藏域隐藏域 隐隐藏藏域域用用来来存存储储非非用用户户输输入入信信息息。例例如如，当当用用户户登登录录某某些些页页面面时时需需输输入入用用户户名名和和
12、密密码码，登登录录成成功功后后，会会在在其其他他页页面面显显示示用用户户名名，此此时时即即可可使用隐藏域来显示用户名。使用隐藏域来显示用户名。 12.2.3 12.2.3 按钮按钮 对表单而言，按钮是不可缺少的元素，它能控制对表单而言，按钮是不可缺少的元素，它能控制表单的内容，如表单的内容，如“提交提交”或或“重设重设”。单击。单击“提提交交”按钮可将表单中的内容发送到服务器，单击按钮可将表单中的内容发送到服务器，单击“重设重设”按钮可清除表单中现有的内容。按钮可清除表单中现有的内容。 课堂练习课堂练习1 1 制作留言页面制作留言页面 本节通过制作一个包含表单、文本域和按钮的留言页本节通过制作
13、一个包含表单、文本域和按钮的留言页面，来练习和巩固一下常见表单对象在网页制作中的面，来练习和巩固一下常见表单对象在网页制作中的应用。应用。（效果如（效果如pegiunpegiun站点中的站点中的add-add-a.aspa.asp） 12.2.4 12.2.4 复选框复选框 常用来表示许多项可以同时选中的事物，比如个人爱常用来表示许多项可以同时选中的事物，比如个人爱好、所学科目和选购的产品种类等。好、所学科目和选购的产品种类等。其名称唯一，不能包含空格或特殊字符。单选按钮是其名称唯一，不能包含空格或特殊字符。单选按钮是以以“组组”为单位的，而复选框则是以为单位的，而复选框则是以“个个”为单位的
14、，为单位的，所以每一个复选框的名称都不应该相同。所以每一个复选框的名称都不应该相同。 “复选框复选框”的应用的应用 “复选框复选框”的属性面板的属性面板12.2.5 12.2.5 单选按钮和单选按钮组单选按钮和单选按钮组 单选按钮允许用户在多个选项中选择一个，不单选按钮允许用户在多个选项中选择一个，不能进行多项选择。能进行多项选择。有时候需要一次添加多个单选按钮，此时可用有时候需要一次添加多个单选按钮，此时可用单选按钮组来代替，单选按钮组相当于多个名单选按钮组来代替，单选按钮组相当于多个名称相同的单选按钮，除创建方法不同外，它们称相同的单选按钮，除创建方法不同外，它们之间没有任何区别。之间没有
15、任何区别。 单击单击“单选按单选按钮组钮组”按钮按钮 ，弹出弹出“单选按单选按钮组钮组”对话框对话框12.2.6 12.2.6 列表和菜单列表和菜单 除复选框和单选按钮外，在遇到需要制作选项除复选框和单选按钮外，在遇到需要制作选项时，还可以使用时，还可以使用“列表列表/ /菜单菜单”。在拥有较多。在拥有较多选项，且网页空间又比较有限的情况下，选项，且网页空间又比较有限的情况下，“列列表表/ /菜单菜单”将是最好的选择。将是最好的选择。 “列表列表/ /菜菜单单”对象的对象的属性面板属性面板12.2.7 12.2.7 图像域图像域 使用图像域可以用一些漂亮的图像按钮来代使用图像域可以用一些漂亮的
16、图像按钮来代替替DreamweaverDreamweaver自带的按钮，从而使网站更美自带的按钮，从而使网站更美观。观。单击单击“图像域图像域”按钮，弹出按钮，弹出“选择图像源选择图像源文件文件”对话框对话框选择要添加的图选择要添加的图像，然后单击像，然后单击“确定确定”按钮，添按钮，添加图像域加图像域图像域属图像域属性面板性面板12.2.8 12.2.8 文件域文件域 “文件域文件域”可以使浏览者选择本地计算机可以使浏览者选择本地计算机上的文件，并将其上传到服务器上。上的文件，并将其上传到服务器上。“文文件域件域”的外观与文本域类似，只是后面多的外观与文本域类似，只是后面多了一个了一个“浏览
17、浏览”按钮。浏览者可以单击该按钮。浏览者可以单击该按钮来选择要上传的文件，或者直接在文按钮来选择要上传的文件，或者直接在文本框中输入要上传文件的路径。本框中输入要上传文件的路径。 课堂练习课堂练习2 2 制作制作“商品订购商品订购”页面页面 至此，前面已介绍了所有表单对象，在实际制作网页至此，前面已介绍了所有表单对象，在实际制作网页时，这些表单对象很少单独使用，一个表单中通常会时，这些表单对象很少单独使用，一个表单中通常会包含各种类型的表单对象。本节我们来制作一个完整包含各种类型的表单对象。本节我们来制作一个完整的表单网页实例。的表单网页实例。 12.3 12.3 验证表单数据验证表单数据 使用使用DreamweaverDreamweaver中的行为可以添加用于检查中的行为可以添加用于检查指定文本域中内容的指定文本域中内容的JavaScriptJavaScript代码，以确保代码，以确保浏览者输入了符合要求的数据。浏览者输入了符合要求的数据。 添加添加行为行为打开打开“检查表单检查表单”对话框，设置各项对话框，设置各项后单击后单击“确定确定”按按钮即可添加行为钮即可添加行为
