《网页设计与制作》.

Presentation on theme: "《网页设计与制作》."— Presentation transcript:

1 《网页设计与制作》

2 第6章 表单 6.1 6.2 6.3 实例导入：创建用户信息注册表 创建表单 插入表单对象

3 本章主要介绍了通过表单可以实现浏览器与服务器之间的信息交流，在WWW上表单被广泛用于各种信息的收集和反馈，如图所示。
【本章学习目的】 本章通过一个用户注册信息表的实例，重点介绍了表单的创建、表单对象的插入，通过本章的学习，读者应了解表单的用途，掌握插入表单和表单对象的方法，了解通过Dreamweaver内部行为验证用户输入信息的正确性。

4

5 6.1 实例导入：利用表单创建用户信息 　　注册表 表单是使网站实现交互功能的重要途径，通过表单可以收集站点访问者的信息。表单可以简单用做调查工具和收集客户登录信息，也可用于制作复杂的电子商务系统。 一般表单的工作流程如下： 访问者在浏览有表单的网页时，填写必须的信息，然后按下按钮提交； 这些信息是通过Internet传送到服务器上； 服务器上的表单处理应用程序（CGI），或脚本程序（ASP、PHP）对数据进行处理； 数据处理完毕后，服务器反馈处理信息。 从表单的工作流程来看，表单的开发分为两部分，一是具体在网页上制作的表单项目，这一部分称为前端，主要在Dreamweaver中制作，另一部分是编写处理表单信息的应用程序，这一部分称为后端，如：ASP、CGI、PHP、JSP等。本章内容主要讲解的是前端的设计，后台的开发将在网络程序开发中具体介绍。

6 【例6.1】利用表单创建用户信息注册表，如图所示。

7 在本实例主要涉及到以下知识点： 布局网页； 创建表单； 在表单中插入表单对象； 将表单信息提交到网络管理者的邮箱。

8 6.2 创建表单 表单相当于一个容器，它容纳的是承载数据的表单对象，例如：文本框、复选框等。因此一个完整的表单包括二部分：表单及表单对象，二者缺一不可。

9 6.2.1 表单网页的布局 在包含表单的网页，一般仍采用表格排版方式。其操作步骤如下：
步骤1　新建一个网页，添加页面背景，插入一个表单，出现一个红色虚线框。 步骤2　在表单中，插入表格，采用表格排版，在表格中，插入图像或动画、文本加以修饰，并用CSS样式美化网页。如图所示。 步骤3　最后在表格中插入表单对象。

10 6.2.2 创建表单 1. 插入表单 插入表单常用的方法有以下两种： 方法一：单击“插入”栏｜“表单”选项｜“表单”按钮。
方法二：选择“插入”菜单｜“表单”｜“表单”命令。 在网页中出现一个红色的虚线框。表单的作用是当访问者单击表单的“提交”按钮时，浏览器将表单对象所包含的数据发送到服务器，因此表单对象必须置于表单中。

11 2. 设置表单属性 单击“表单”外框，或单击“文档”窗口左下角的<Form>标签，选择表单。在“属性”面板中设置表单属性。

12 6.3 插入表单对象 表单面板共有14个表单域对象。

13 1. 文本字段和文本区域 （1）文本字段 文本字段是用来输入文本信息的。 单击“插入”栏｜“表单”选项｜“文本字段”按钮，或选择“插入”菜单｜“表单”｜“文本域”命令，弹出 “标签输助功能属性”的对话框，如图所示，输入标签文本，如用户名，单击“确定”按钮，即插入了一个文本字段。单击“文本字段”对象，将其选中，在“属性”面板中设置“文本字段”的属性。

14 （2）文本区域 文本区域同样也是用来输入文本信息的，当文本字段的类型选择为多行时，即是文本区域。其属性与文本字段相同。 单击“插入”栏｜“表单”选项｜“文本区域”按钮，或选择“插入”菜单｜“表单”｜“文本区域”命令，即插入“文本区域”对象。

15 2. 复选框 复选框是指从一组选项中选择多个选项。操作步骤如下： 单击“插入”栏｜“表单”选项｜“复选框”按钮，或选择“插入”菜单｜“表单”｜“复选框”命令，即插入“复选框”对象。 单击“复选框”对象，将其选中，在“属性”面板中设置“复选框”的属性，如图所示。

16 3. 单选按钮及单选按钮组 （1）单选按钮 “单选按钮”是指从一组选项中只能选择一个选项。其操作步骤如下： 单击“插入”栏｜“表单”选项｜“单选”按钮，或选择“插入”菜单｜“表单”｜“单选按钮”命令，即插入单选按钮。 单击“单选按钮”对象，将其选中，在“属性”面板中设置“单选按钮”的属性：“单选按钮”的名称、选定值、初始状态等，如图所示。

17 （2）单选按钮组 由于“单选按钮”通常是由多个组成一组来使用，因此Dreamweaver提供了“单选按钮组”的功能。 单击“插入”栏｜“表单”选项｜“单选按钮组”按钮，或选择“插入”菜单｜“表单”｜“单选按钮组”命令，弹出 “单选按钮组”对话框。

18 4. 列表／菜单 “列表”和“菜单”可以在有限的空间内为用户提供更多的选项。“列表”在滚动条中显示选项值，并可允许用户在列表中选择多个选项。“菜单”在下拉式菜单中显示选项值，只允许用户选择一个选项。操作步骤如下： 单击“插入”栏｜“表单”选项｜“列表／菜单”按钮，或选择“插入”菜单｜“表单”｜“列表／菜单”命令，即插入“列表或菜单”。 单击“列表／菜单”，将其选中，在“属性”面板中设置“列表／菜单”的属性，如图所示。

19 5、跳转菜单 “跳转菜单”与“菜单／列表”对象有所不同，菜单的每一个列表项目都链接到一个URL地址。一般常用于友情链接。 单击“插入”栏｜“表单”选项｜“跳转菜单”按钮，或选择“插入”菜单｜“表单”｜“跳转菜单”命令，弹出“插入跳转菜单”的对话框，如图所示。

20 6. 文件域 “文件域”的作用是用户在表单中选择文件，然后将选中的文件内容发送到服务器。例如：用户在撰写电子邮件时，采用文件域的方式，附加文件作为附件传送。 单击“插入栏”｜“表单”选项｜“文件域”按钮，或选择“插入”菜单｜“表单”｜“文件域”命令。单击“文件域”对象，将其选中，在“属性”面板中设置“文本域”的属性：文本域的名称、字符宽度、最多字符数等，如图所示。

21 7. 隐藏域 “隐藏域”通常用来在表单之间传递数据，一般只用于脚本编程。单击“插入栏”｜“表单”选项｜“隐藏域”按钮，或选择“插入”菜单｜“表单”选项｜“隐藏域”命令。 8. 按钮 “按钮”的作用是控制表单操作。使用表单按钮将输入表单的数据提交到应用程序，或者重置该表单，也可以用来执行脚本指定的自定义功能。 单击“插入”栏｜“表单”选项｜“按钮”按钮，或选择“插入”菜单｜“表单”｜“按钮”命令，即插入“按钮”。单击“按钮”，将其选中，在“属性”面板中设置按钮的属性，如图所示。

22 9. 图像域 “图像域”实质上是以图像形式显示的提交按钮，它的功能等同于提交按钮。 单击“插入”栏｜“表单”选项｜“图像域”按钮，或选择“插入”菜单｜“表单”｜“图像域”命令，即插入“图像域”。单击图像域，将其选中，在“属性”面板中设置图像域的属性，如图所示。

23 6.3.3 会员注册表实例制作过程 本小节讲解【例6.1】创建用户信息注册表的制作过程，插入一个表单，再插入表单对象，而浏览者在浏览本网页时，填写表单信息，然后将信息提交到网络管理员的电子邮件地址中。网络管理员通过电子邮件来收集网站浏览者的信息。

24 验证表单 利用Dreamweaver中“检查表单”的内部行为，检查浏览者填写表单对象的内容是否符合事先设定的要求。一般使用OnSubmit事件将检查表单的行为附加到表单上，当用户单击“提交”按钮时，同时对多个表单对象进行检查。 分析上一小节表单实例，为了防止浏览者不填某些信息或乱填信息，这里设置登录名、电子邮件地址必须填写，年龄必须是数字且数字范围为1-99，电子邮件必须是电子邮件的格式，针对这些要求，其操作步骤如下： 步骤1　选择“窗口”菜单｜“行为”命令，打开“行为”面板。 步骤2　单击“文档”窗口左下角的<form>标签，选中整个表单，在“行为”面板中，单击“添加行为”按钮，在弹出菜单中选择“检查表单”命令，打开“检查表单”对话框，进行相关参数的设置。

25 本章小结 本章通过会员注册信息表的实例讲解，重点介绍了以下几点： 插入表单及表单属性的设置。 在表单域中，插入表单对象并设置表单对象属性。
将表单提交到管理员电子邮箱中进行处理。

26 本章练习题 1. 选择题 （1）表单中的按钮对象分为（ ）。 A．提交、重置 B．提交、普通 C．提交、重置、普通 D．提交、图像、普通
（1）表单中的按钮对象分为（ ）。 A．提交、重置 B．提交、普通 C．提交、重置、普通 D．提交、图像、普通 （2）单选按钮组中的多个单选按钮名称应（ ）。 A．相同 B．不同 C．任意 D．以上都可以 （3）文本域的类型有几种（ ）。 A．2种 B．3种 C．4种 D．5种 2.简答题 什么是表单？简述表单的基本工作原理。 表单对象包括哪些？ 如何验证表单？

27 上 机 实 训 1. 背景知识 本章所学的插入表单、表单对象以及Dreamweaver内部行为的检验表单等知识，再结合前面所学的网页编辑、页面排版的知识，制作反馈表单。 2. 实训准备工作 　　 实训素材及网页样图，发送到学生的主机中，以供学生参考使用。 3. 实训要求 创建一个空白表单。插入表格，利用表格排版网页，并插入图片及应用CSS样式美化网页。 插入表单对象，并通过“属性”面板设置其属性。 最后利用Dreamweaver内部行为验证表单。 反馈表单效果图如图6.26所示。 4. 课时安排：2课时