网页制作清华大学出版社第6章_交互式网页表单的设计与使用
合集下载
《网页交互设计基础与实例教程》 基础入门篇 第 6 章 表单
是单行文本域、多行文本域或密码域。 • ● 隐藏域：存储用户输入的信息，如姓名、电子邮件地址或购买意
向，然后在该用户下次访问此站点时使用这些数据。 • ● 文本区域：创建一个多行文本域，可以指定可输入的文本行数。 • ● 复选框：在表单中插入复选框。复选框允许在一组选项中选择多
项，用户可以选择任意多个适用的选项。 • ● 复选框组：在表单中插入多个复选框，并可以进行分别设置。
第 6 章 表单
• 6.1 表单概述 • 6.2 创建表单 • 6.3 添加文本域
返回
6.1 表单概述
• 表单是一个由文本和表单域组成的集合，它的使用完全实现了站点管 理员与访问者之间的信息交换。使用传统的电子邮件方式与站点管理 员进行信息交互时，访问者提供的信息不可能具有统一的格式，对于 站点管理员而言，这些信息是很难整理的。在网页中使用表单功能后，
地址等。 • ● 多行文本域：被用于填写较长的内容。该文本域的行数和字数都
可由浏览者自己定义。 • ● 密码域：它是一种特殊的文本域。当输入文本时，文本会被星号
或其他符号代替。 • 在网页中创建表单之后，就可以在其中添加表单对象。站点的访问者
正是通过表单对象中的数据与站点实现互动的。向表单中添加表单对 象的操作步骤如下： • （1）在表单中输入文本“访问者信息反馈”，并调整文本的大小和 位置。
单中添加表单对象后，才能发挥表单的作用。 • 创建一个表单后，文档中会出现红色的虚线框。如果看不到该虚线框，
可以选择“查看”|“可视化助理”|“不可见元素”命令。 • 将插入点置于表单的内部时，“属性”面板如图6-2所示。
返回
6.3 添加文本域
• 文本域是用来输入信息的表单对象。文本域的形式有3种： • ● 单行文本域：通常被用来填写单个字符或者简短的回答，如姓名、
向，然后在该用户下次访问此站点时使用这些数据。 • ● 文本区域：创建一个多行文本域，可以指定可输入的文本行数。 • ● 复选框：在表单中插入复选框。复选框允许在一组选项中选择多
项，用户可以选择任意多个适用的选项。 • ● 复选框组：在表单中插入多个复选框，并可以进行分别设置。
第 6 章 表单
• 6.1 表单概述 • 6.2 创建表单 • 6.3 添加文本域
返回
6.1 表单概述
• 表单是一个由文本和表单域组成的集合，它的使用完全实现了站点管 理员与访问者之间的信息交换。使用传统的电子邮件方式与站点管理 员进行信息交互时，访问者提供的信息不可能具有统一的格式，对于 站点管理员而言，这些信息是很难整理的。在网页中使用表单功能后，
地址等。 • ● 多行文本域：被用于填写较长的内容。该文本域的行数和字数都
可由浏览者自己定义。 • ● 密码域：它是一种特殊的文本域。当输入文本时，文本会被星号
或其他符号代替。 • 在网页中创建表单之后，就可以在其中添加表单对象。站点的访问者
正是通过表单对象中的数据与站点实现互动的。向表单中添加表单对 象的操作步骤如下： • （1）在表单中输入文本“访问者信息反馈”，并调整文本的大小和 位置。
单中添加表单对象后，才能发挥表单的作用。 • 创建一个表单后，文档中会出现红色的虚线框。如果看不到该虚线框，
可以选择“查看”|“可视化助理”|“不可见元素”命令。 • 将插入点置于表单的内部时，“属性”面板如图6-2所示。
返回
6.3 添加文本域
• 文本域是用来输入信息的表单对象。文本域的形式有3种： • ● 单行文本域：通常被用来填写单个字符或者简短的回答，如姓名、
网页制作案例教程清华大学出版社第6章交互式网页表单的设计与使用PPT课件
5）单选按钮
代表互相排斥的选择。在某单选按钮组（由 两个或多个共享同一名称的按钮组成）中选 择一个按钮，就会取消选择该组中的所有其 它按钮。
6）列表菜单
在一个滚动列表中显示选项值，用户可以从该滚动 列表中选择多个选项。“列表”选项在一个菜单中 显示选项值，用户只能从中选择单个选项。在下列 情况下使用菜单：只有有限的空间但必须显示多个 内容项，或者要控制返回给服务器的值。
（1）插入表单
向文档中插入表单的操作为： 1）定位光标在文档中要插入表单的位置。 2）执行以下操作之一：
单击菜单栏中“插入”|“表单”|“表单”命令。 在“插入”栏的“常用”类别中，单击“表单”
按钮
3）向文档中插入了表单标签，添加表单标 签后的文档会出现一个红色的虚线框，如图 6-2-2所示。
本章内容在全书知识结构中所处位置如图所示
提高篇 JavaScript篇 CSS篇
HTML篇 基础篇
网站发布、测试和维护 Web服务器创建 网页中常见Flash制作 JavaScript网页应用 Javascript概述 使用CSS布局规划网页 CSS样式表 利用模板和库创建网页 交互式网页表单的设计与使用 网页布局规划设计 网页基本元素设计 HTML基础 网页设计与开发流程（ AscentSys医药商务系统） 网页制作基础
图6-2-4 “插入”|“表单”对话框
1）文本域
接受任何类型的字母数字文本输入内容。文 本可以单行或多行显示，也可以以密码域的 方式显示，在这种情况下，输入文本将被替 换为星号或项目符号，以避免旁观者看到这 些文本
2）隐藏域
存储用户输入的信息，如姓名、电子邮件地址或偏 爱的查看方式，并在该用户下次访问此站点时使用 这些数据。
图6-1-1处理表单流程图
代表互相排斥的选择。在某单选按钮组（由 两个或多个共享同一名称的按钮组成）中选 择一个按钮，就会取消选择该组中的所有其 它按钮。
6）列表菜单
在一个滚动列表中显示选项值，用户可以从该滚动 列表中选择多个选项。“列表”选项在一个菜单中 显示选项值，用户只能从中选择单个选项。在下列 情况下使用菜单：只有有限的空间但必须显示多个 内容项，或者要控制返回给服务器的值。
（1）插入表单
向文档中插入表单的操作为： 1）定位光标在文档中要插入表单的位置。 2）执行以下操作之一：
单击菜单栏中“插入”|“表单”|“表单”命令。 在“插入”栏的“常用”类别中，单击“表单”
按钮
3）向文档中插入了表单标签，添加表单标 签后的文档会出现一个红色的虚线框，如图 6-2-2所示。
本章内容在全书知识结构中所处位置如图所示
提高篇 JavaScript篇 CSS篇
HTML篇 基础篇
网站发布、测试和维护 Web服务器创建 网页中常见Flash制作 JavaScript网页应用 Javascript概述 使用CSS布局规划网页 CSS样式表 利用模板和库创建网页 交互式网页表单的设计与使用 网页布局规划设计 网页基本元素设计 HTML基础 网页设计与开发流程（ AscentSys医药商务系统） 网页制作基础
图6-2-4 “插入”|“表单”对话框
1）文本域
接受任何类型的字母数字文本输入内容。文 本可以单行或多行显示，也可以以密码域的 方式显示，在这种情况下，输入文本将被替 换为星号或项目符号，以避免旁观者看到这 些文本
2）隐藏域
存储用户输入的信息，如姓名、电子邮件地址或偏 爱的查看方式，并在该用户下次访问此站点时使用 这些数据。
图6-1-1处理表单流程图
《网页设计与制作》第六章
6.2 通过邮件接收表单
表单中的信息输入完毕以后需要将信息提供给 服务器端的相关人员，用户可以通过表单域属性 面板中的“动作”属性指定通过电子邮件接收表 单数据。 在属性面板的“动作”文本框中输入 mailto:***@***.***,也就是在mailto后面加上邮 件地址。在浏览者提交表单后，会弹出窗口询问 是否继续以电子邮件形式提交，单击“确定”按 钮，浏览器会自动打开Outlook或Outlook Express， 将表单中的数据整理为E-mail内容发送到设定的 信箱中去。
《网页设计与制作》
第六章 交互式表单制作源自讲解提纲• 6.1 创建表单 • 6.2 通过邮件接收表单
• 6.3 制作跳转菜单
6.1 创建表单
使用表单，可以帮助Internet服务器从用户 那里收集信息，它由两部分组成：前台显示页面 和后台处理程序。前台显示页面用于显示表单的 内容，主要包括文本域、单选按钮、复选框、菜 单和提交按钮等。后台处理程序用于处理用户提 交的表单数据。 在 Dreamweaver 中，表单输入类型称为表 单对象。可以通过选择“插入”菜单“表单”子 菜单来插入表单对象，或者通过 “插入”工具栏 的“表单”子工具栏来插入表单对象。
3.插入单选按钮 要求浏览者只能从一组选项中选择一个选项 时，使用单选按钮。单选按钮通常成组地使用，在 同一组中的每个单选按钮的名称必须一致，这样整 个单选组才能有效。 要插入单选按钮，将光标定位后，单击“表 单”工具栏上的“单选按钮”按钮，即可插入一个 单选按钮。
4.插入复选框 复选框允许在一组选项中选择多项，用户可 以选择任意多个适用的选项。 要插入复选框，将光标定位后，单击“表单” 工具栏上的“复选框”按钮，即可插入一个复选 框。 5.插入文件域 文件域使用户可以浏览到其硬盘上的文件， 并将这些文件作为表单数据上传， 要插入文件域，将光标定位后，单击“表单” 工具栏上的“文件域”按钮，即可插入一个文件 域。
网页设计与制作第6章 表单的使用
❖ 一系列的选项。其中每个选项都是超级链接，选中 每一个选项都将打开一个链接。
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
网页制作教学设计
网页制作教学设计（经典版）编制人：__________________审核人：__________________审批人：__________________编制单位：__________________编制时间：____年____月____日序言下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。
文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢!并且，本店铺为大家提供各种类型的经典范文，如工作总结、实习报告、职业规划、职场语录、规章制度、自我介绍、心得体会、教学资料、作文大全、其他范文等等，想了解不同范文格式和写法，敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!Moreover, our store provides various types of classic sample essays, such as work summaries, internship reports, career plans, workplace quotes, rules and regulations, self introductions, insights, teaching materials, complete essays, and other sample essays. If you want to learn about different sample formats and writing methods, please pay attention!网页制作教学设计网页制作教学设计（通用5篇）作为一名老师，时常要开展教学设计的准备工作，教学设计是实现教学目标的计划性和决策性活动。
网页设计与制作第6章 表单的使用PPT课件
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
6.3.2 插入单选按钮
当用户单击单选按钮组中的某个按钮时，其他按钮就会被 取消选中状态。单选按钮使用起来很方便，但适用的范围有限。 只有预知所有答案的各种可能项，且只有一项被选中时，才能 使用单选按钮 . 【单选按钮】：输入单选按钮的名字，同一组中的单选按钮必 须用同一个名字。 【选定值】：设置选中的单选按钮的值。当用户提交这个表单 时，这个值将会被发送至服务器的应用程序中，同一组中的每 个单选按钮必须设置不同的值。 【初始状态】：设置该单选按钮在第一次载入时的状态，有 【已勾选】与【未选中】两个选项。在一组单选按钮中，只能 将一个单选按钮设置为选中状态。
第6章 表单的使用
第6章 表单的使用
学习目标： 通过这章的学习，可以应用表单收集来自
用户的信息，包括网上调查、网上订单和建 立搜索界面等等。主要内容包括表单和表单 对象概念、创建表单和添加表单对象。
第6章 表单的使用
简单地说，表单就是用户可以在网页中填写信息的 表格，其作用是接收访问者信息并将提交给Web服务器 上特定的程序进行处理。表单是收集访问者反馈信息的 有效方式，是网站与浏览者实现互动的重要手段。在网 络中应用非常广泛。目前大多数的网站，尤其是专业型 的网站，都需要与访问者进行动态的交流。要实现与访 问者的交互，表单是必不可少的板块。例如，在线申请、 在线购物和在线调查问卷等。表单架设了网站和访问者 之间进行沟通的桥梁。这些过程就是需要填写一系列表 单，并将其发送到网站的后台服务器，交由服务器的脚 本或应用程序来处理。
《制作交互网页》
《制作交互网页》一、教学目标：l 、知识与技能（1）了解交互式网页的概念、表单的功能和作用，以及表单在网页设计中的。
（2）掌握表单的的功能及使用方法，能够设置表单组件的属性。
2、过程与方法：（1）能够灵活运用表单设计具有交互功能的网页3、情感态度与价值观：（1）通过学习与创作，使学生感受表单在网页中的作用，体验网页的交互功能。
二、教学重点与难点：1、教学重点：（1）了解表单的交互功能，掌握表单各组件的使用方法（2）学会设计简单的具有交互功能的网页。
2、教学难点：（1）表单中分组框的作用及属性设置。
（2）表单组件中按钮名称与分组关系三、教学过程：1、创设情境、导入新课（1）、教师将网上具有表单功能的问页股示给学生，让学参与网上调查或申请注册等体验交互功能--导入新课。
设计意图：激发学生的学习兴趣2、任务驱动、自主学习（1）教师讲解简单表单的制作出示任务一：完成简单价个人信息的表单制作．（2）、教师巡视并及时指出学生操作过程中的问题，学生完成任务一，并根据教师的提示修改自己网页中存在的问题．（3）教师反馈任务一中比较普遍的问题学生认真思考教师的提问，积极回答问题。
设计意图：由于学生第一次接触表单以采用教师讲解的方式，目的是让学生掌握表单元件的插入方法。
（4）教师出示任务二：完成知识问答表单及按钮属性的设置。
教师让个别学生进行演示给优秀学生一个展示自我的空间．设计意图：表单的插入并不难，关键是如例正确地应用，因此此处可以给学生一个自我创作空间，让学生了解表单元件的运用不是唯一的，了解表单的提交方式。
3、展示作品、课堂小结（1）教师展示优秀表单网页，总结本课知识，引导学坐进行回顾设计意图：总结本课知识，巩固所学。
展示优秀作品，鼓励学生。
四、教学反思：l、本节内容是在学生已经基本掌握静态网页设计方法的基础上，进一步了解网页的交互功能及其简单设计方法。
教师引导学生理解网页的交互功能及实现方法，在教师指导下，学生表单组件的功能及属性设置。
网页设计——交互式表单的制作
返回 7
10-1-2 插入单选按钮
在网页中插入单击按钮的操作步骤如下 ： （1）选择要插入选项按钮的位置，然后移动鼠标到表单 标签选择 单选按钮。
8
10-1-2 插入单选按钮
（2）插入单选按钮后，在属性面板的“单选按钮”栏输 入字段名称sex，然后在“选定值”栏输入先生。
9
10-1-2 插入单选按钮
为确认浏览者的身份及所属的权限，可以利用登入用 户功能，判断浏览者为会员还是管理者，以及拥有的权限 等级。
选择“服务 器
行为”面板
选择“登录用户”
36
10-3-1 登录用户
（2）出现“登录用户”对话框后，选择判别的来源表单 及字段，然后选择数据库中相对应的数据表及字段名称。
选择判别的 来源表单及 字段
小姐的选项按钮，也可利用步骤（1）到步骤（2）的 方法插入，将按钮名称设置为sex；选定值输入为小姐。
10
10-1-2 插入单选按钮
在属性面板的初始化状态设置中，可以设置单选按钮 默认的选定状态，也即已选定或不选定。
返回 11
10-1-3 插入复选框
在网页中插入复选框的操作步骤如下： （1）选择要插入复选框的位置，接着移动鼠标到表单标 签选择复选框按钮，然后在属性面板的复选框名称栏输 入字段名称Interest。
返回 58
10-4-3 限制直接读取页面
为避免他人以随机方式在浏览器的地址栏输入相关字 符串，直接进入页面，可以将修改会员数据的页面 （modify.asp）设置限制直接读取页面的功能 。 （1）在服务器行为面板选择按钮，出现菜单后，选择 “用户身份验证”，然后选择“限制对页的访问”。
59
10-4-3 限制直接读取页面
（3）出现“选择图像源文件”对话框后，选择想要链接 的网页文件，然后单击“确定”按钮。
10-1-2 插入单选按钮
在网页中插入单击按钮的操作步骤如下 ： （1）选择要插入选项按钮的位置，然后移动鼠标到表单 标签选择 单选按钮。
8
10-1-2 插入单选按钮
（2）插入单选按钮后，在属性面板的“单选按钮”栏输 入字段名称sex，然后在“选定值”栏输入先生。
9
10-1-2 插入单选按钮
为确认浏览者的身份及所属的权限，可以利用登入用 户功能，判断浏览者为会员还是管理者，以及拥有的权限 等级。
选择“服务 器
行为”面板
选择“登录用户”
36
10-3-1 登录用户
（2）出现“登录用户”对话框后，选择判别的来源表单 及字段，然后选择数据库中相对应的数据表及字段名称。
选择判别的 来源表单及 字段
小姐的选项按钮，也可利用步骤（1）到步骤（2）的 方法插入，将按钮名称设置为sex；选定值输入为小姐。
10
10-1-2 插入单选按钮
在属性面板的初始化状态设置中，可以设置单选按钮 默认的选定状态，也即已选定或不选定。
返回 11
10-1-3 插入复选框
在网页中插入复选框的操作步骤如下： （1）选择要插入复选框的位置，接着移动鼠标到表单标 签选择复选框按钮，然后在属性面板的复选框名称栏输 入字段名称Interest。
返回 58
10-4-3 限制直接读取页面
为避免他人以随机方式在浏览器的地址栏输入相关字 符串，直接进入页面，可以将修改会员数据的页面 （modify.asp）设置限制直接读取页面的功能 。 （1）在服务器行为面板选择按钮，出现菜单后，选择 “用户身份验证”，然后选择“限制对页的访问”。
59
10-4-3 限制直接读取页面
（3）出现“选择图像源文件”对话框后，选择想要链接 的网页文件，然后单击“确定”按钮。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8）文件域 使用户可以浏览到其计算机上的某个文件并将该文 件作为表单数据上传。 9）图像域 使您可以在表单中插入一个图像。使用图像域可生 成图形化按钮，例如“提交”或“重置”按钮。如 果使用图像来执行任务而不是提交数据，则需要将 某种行为附加到表单对象。
6.3网页表单验证
（1）选择“开始”｜“所有程序”｜“Adobe Dreamweaver CS5”，启动Adobe Dreamweaver CS5。 （2）选择“文件”｜“新建”菜单项，打开“新建文 档”对话框，选择“空白页”｜“HTML”｜“无”， 单击“创建”按钮，新建一个网页。 （3）在打开的空白文档中，选择“文件”｜“保存” 菜单项，将文件保存在根目录下，文件名为6.3.html。 （4）选择“插入”|“表单”面板的“表单”，在页面 中插入一个表单。
网站发布、测试和维护 提高篇 Web服务器创建 网页中常见Flash制作 JavaScript网页应用 JavaScript篇 Javascript概述 使用CSS布局规划网页 CSS篇 CSS样式表 利用模板和库创建网页 交互式网页表单的设计与使用 网页布局规划设计 HTML篇 网页基本元素设计 HTML基础
案例实施
（12）在第（10）步插入的表格的右侧前11行中，选择“插入”|“表单 ”面板，插入“文本框”，在第12行插入两个按钮，分别命名为“提交 ”和“取消”，效果如图6-5-7所示。
案例实施
（13）将光标放在最外侧表格第四行，点击“插入”|“图像”，弹出如 图6-5-3所示的选择图像源文件对话框，选择images文件夹下的footer.gif 。
案例实施
（8）在第二行内按照第（5）步操作插入一个1行6列，边框为1像素的表格， 将其背景颜色设置为蓝色，并在每个单元格内输入相应的文字，调整每个 单元格的宽度以适应文字的宽度，如图6-5-5所示。
案例实施
（9）将光标放在第三内，选择“插入”|“表单”选项卡，插入一个表单。 （10）在上述插入的表单内，按照第5步操作插入一个12行2列的表格。 （11）选中第（10）步插入的表格的各行，在属性面板中将行高设定为25 像素，表格左侧部分对齐方式设定为右对齐，宽度为40%，然后在表格左侧 输入相应的文字，如图6-5-6所示。
（1）插入表单
向文档中插入表单的操作为： 1）定位光标在文档中要插入表单的位置。 2）执行以下操作之一：
单击菜单栏中“插入”|“表单”|“表单”命令。 在“插入”栏的“常用”类别中，单击“表单” 按钮
3）向文档中插入了表单标签，添加表单标 签后的文档会出现一个红色的虚线框，如图 6-2-2所示。
图6-3-2 “添加行为”的下拉菜单
（7）在如图6-3-3所示的对话框中设置每个文本域的 验证规则，然后单击“确定”。
图6-3-3 “检查表单” 对话框
6.4项目案例
学习目标 通过实例掌握网页表单及其表单元素的插入、属性的设定等操作。
案例描述
使用表单及其表单元素，在Dreamweaver CS5中制作的用户注册页面
案例实施 （5）选择“插入”|“常用”|“表格”，插入4行1列的表格，如图6-5-2 所示。
案例实施
（6）插入表格后，在属性面板改变表格“宽度”属性值为760 像素，对齐方式为居中对齐。 （7）选中第一行，然后点击“插入”|“图像”，弹出如图6-5-3 所示的选择图像源文件对话框，选择images文件夹下的top.gif。
（5）创建一个包含至少一个文本域及一个“提交”按 钮的 HTML 表单，分别选择“插入”|“表单”面板的 “文本域”和“按钮”，插入到页面当中，确保要验 证的每个文本域具有唯一名称，按钮类型选择“提交 ”按钮。如图6-3-1所示。
图6-3-1 表单中插入文本域和提交按钮
（6）在“行为”面板中，单击加号 (+) 按钮，会弹出“添加行 为”的下拉菜单，如图6-3-2所示，然后从列表中选择“检查表单 ”行为。
图6-1-1处理表单流程图
6.1.2网页表单设计原则
保守性的搭建，并带有目的性的设计表单 每个表单都应该符合它要表达的形势或情框 用你所需 主动沟通 把表单划分成许多小的部分 使用有意义的，关联上下文的错误信息 当用户点击提交按钮时，应当有引导用户到 达某个页面
6.2创建网页表单
网页制作案例教程
毋建军 郑宝昆 郭锐 编著
清华大学出版社
第6章 交互式网页表单的设计与使用
本章学习目标（知识要点）
网页表单入门 创建网页表单 网页表单验证 手工创建网页表单
本章学习导航
HTML提供了表单作为网站与访问者之间交流 信息的主要工具。表单可以看作是网站的设计 者从Web访问者那里收集信息的一种方法，它 不仅可以收集访问者对 网站的意见，还可以做 许多工作，例如，在访问者登记注册免费电子 邮件时，可以用表单来收集一些个人的资料； 在电子商务中，收集每个顾客的购物信息；在 搜索 引擎中，把用户要查找的关键词递交到服 务器等。本章主要介绍如何创建网页表单。 本章内容在全书知识结构中所处位置如图所示
图6-2-2 插入表单标签图
（2）表单属性
单击表单红色的框线或单击窗口左下角标签 选择器中的<form>标签，就可以选中表单 ，并在属性检查器，如图6-2-3所示，中对 其进行设置。
图6-2-3 表单属性图
（2）表单对象
表单对象指构成表单的元素。在“插入” 栏的“表单”类别，如图6-2-4中，包含了 构成表单的所有元素，也可以通过菜单“插 入”|“表单”命令，选择子菜单中的表单 对象。
图6-2-4 “插入”|“表单”对话框
1）文本域
接受任何类型的字母数字文本输入内容。文 本可以单行或多行显示，也可以以密码域的 方式显示，在这种情况下，输入文本将被替 换为星号或项目符号，以避免旁观者看到这 些文本
2）隐藏域 存储用户输入的信息，如姓名、电子邮件地址或偏 爱的查看方式，并在该用户下次访问此站点时使用 这些数据。 3）按钮 在单击时执行操作。您可以为按钮添加自定义名称 或标签，或者使用预定义的“提交”或“重置”标 签。使用按钮可将表单数据提交到服务器，或者重 置表单。您还可以指定其它已在脚本中定义的处理 任务。例如，可能会使用按钮根据指定的值计算所 选商品的总价。
谢谢！
网页设计与开发流程（ AscentSys医药商务系统）
基础篇
网页制作基础
ቤተ መጻሕፍቲ ባይዱ
6.1网页表单入门
6.1.1网页表单简介
表单是实现网页互动的元素，与客户端和服 务器端脚本进行结合使用，可以实现互动性 。表单支持客户端-服务器关系中的客户端 。当访问者在Web浏览器中显示的表单中输 入信息，然后单击【提交】按钮时，这些信 息将被发送到服务器，服务器端脚本或应用 程序对这些信息进行处理，最后服务器端将 处理结果返回给客户端。
案例要点
表单元素的布局方式。
案例实施
（1）选择“开始”｜“所有程序”｜“Adobe Dreamweaver CS5”，启动 Adobe Dreamweaver CS5，新建一站点，将images素材文件夹复制到本站 点文件夹中。 （2）选择“文件”｜“新建”菜单项，打开“新建文档”对话框，选择 “空白页”｜“HTML”｜“无”，单击“创建”按钮，新建一个网页。 （3）在打开的空白文档中，选择“文件”｜“保存”菜单项，将文件保存 在根目录下，文件名为6.5.html。 （4）在页面6.5.html的文档编辑区的【标题】文本框里，将标题命名为 “用户注册”。
4）复选框
允许在一组选项中选择多个选项。用户可以 选择任意多个适用的选项。 代表互相排斥的选择。在某单选按钮组（由 两个或多个共享同一名称的按钮组成）中选 择一个按钮，就会取消选择该组中的所有其 它按钮。
5）单选按钮
6）列表菜单 在一个滚动列表中显示选项值，用户可以从该滚动 列表中选择多个选项。“列表”选项在一个菜单中 显示选项值，用户只能从中选择单个选项。在下列 情况下使用菜单：只有有限的空间但必须显示多个 内容项，或者要控制返回给服务器的值。 7）跳转菜单 可导航的列表或弹出菜单，使用它们可以插入一个 菜单，其中的每个选项都链接到某个文档或文件。