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