《网页设计与制作》教案-第16讲 表单和Spry表单项目

第16讲布局技术-模板、库二

1.1教学目标：

◆知识目标

1.熟练掌握如何在表单网页中插入表单域。

2.检查表单行为的运用。

3.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry

验证选择组件。

4.使用Spry框架组件制作具有验证功能的表单。

◆技能目标

1.掌握快速制作表单页面的方法。

2.能够创建不同形式的表单页面来满足用户间的交互。

◆品质目标

培养学生认真细致、踏实进取的精神

1.2教学重点：

1.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry

验证选择组件。

2.使用Spry框架组件制作具有验证功能的表单。

1.3 教学难点

1.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry

验证选择组件。

2.使用Spry框架组件制作具有验证功能的表单。

1.4教学方法：讲练结合，任务驱动、分子任务操练

1.5课时安排：2课时

1.6教学对象分析：

这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：

一、激趣导入，揭示课题

对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统

一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。

二、使用表单

页面不但要向用户提供信息，而且要与之进行交流。在页面中，表单充当了信息接收者的角色。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮向服务器提交这些信息。

0.1表单概述

使用表单可以制作简单的交互式页面，收集来自用户的信息，是网站管理者与浏览者之间沟通的桥梁。收集、分析用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。有了表单，网站不仅是“信息提供者”，同时也是“信息收集者”。表单常用于

制作调查表、订单、用户注册表和搜索界面等。

一个完整的表单有两个重要组成部分：一是页面中进行描述的HTML代码；二是服务器端的应用程序或客户端脚本，如CGI、ASP，C等，用于分析处理用户在表单中输入的信息。通过表单收集到的用户反馈信息，通常是一些用分隔符（如逗号、分号等）分隔的文字资料。这些资料可以导入到数据库或电子表格中进行统计、分析，成为具有重要参考价值的信息。

使用Dreamweaver可以创建表单，可以给表单中添加对象，还可以通过使用行为来验证用户输入信息的正确性。用户可以透过表单的界面，把信息传给后端服务器处理，处理的结果可以存放在后端数据库或再传回给前端用户。不过，必须使用文本编辑器自行编写脚本或应用程序以处理表单数据。

浏览器处理表单的过程一般是这样的：用户在表单中输入数据，然后提交表单，浏览器根据表单体中的设置处理用户输入的数据。若表单指定通过服务器端的脚本程序进行处理，则该程序处理完毕后将结果反馈给浏览器（即用户看到的反馈结果）；若表单指定通过客户端的脚本程序处理，则处理完毕后也会将结果反馈给用户。

两种表单数据处理方法各有个有优缺点。服务器端方式的主要优点是能全方位地处理用户输入的数据，但占用服务器的资源；客户端方式的优点的不占用服务器资源，反馈速度快，但只能对用户输入的数据进行有限的处理。ASP、Per、PHP、JSP、C、VBScript 等是常用的服务器端脚本程序编写语言，而JavaScript、VBScript（可在客户端运行）等是常用的客户端脚本程序编写语言。服务器端脚本程序的运行一定要在服务器环境下，而客户端脚本程序运行只需浏览器环境即可。

0.2 认识表单对象

表单是用来接收用户输入信息的区域，用户要输入的信息由多个项目组成，这些项目是由表单域分别接收的。可以通过执行“插入/表单”或使用插入面板的“表单”对象组加入表单体和表单元素，如图3-73所示。

图3-73 表单对象面板

1．表单体

表单体在文档中定义一个表单区域，表单对象都是插入在这个表单区域中的。插入表单之前应先定义表单体，否则Dreamweaver会提示是否添加表单标签。创建表单体后，会在文档中出现一个红色的虚线框，如图3-74所示。

图3-74 在文档中插入表单体

2．文本框

文本框可用来接受任何类型的字母、数字文本输入内容。文本框非常通用，大多数信息都可以以文本框的形式输入。文本可以以单行或多行显示，也可以以密码域的方式显示，在

这种情况下，输入文本将被替换为星号或项目符号。如图3-75所示。

图3-75 文本框

3．隐藏字段

用于保存某些在页面中需要连续传递的信息。存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。

4．单选按钮

代表互相排斥的选择。在某单选按钮组（由两个或多个共享同一名称的按钮组成）中选择一个按钮，就会取消选择该组中的所有其它按钮。如图3-76所示。

图3-76 单选按钮

5．复选框

在复选框中，用户可以同时选择任意多个适用的选项。复选框可以单独使用，也可成组使用。复选框如图3-77所示。

图3-77 复选框

6．列表框/菜单

可生成下拉列表框，如图3-78所示。用户可在其中弹出的列表中任选一个值。也可与跳转菜单合用生成菜单列表框。

图3-78 下拉列表框

7．单选按钮组

一次可以选择一组（多个）单选项

8．多行文本框

多行文本框的作用与单行文本框作用相同，用来接受任何类型的字母、数字和文本输入内容。但是可以任意输入多行文本，一般用于需要输入比较多的字符内容。窗体右边和下方往往带有滚动条。如图3-79所示。

图3-79 多行文本框