网页制作案例教程 清华大学出版社 第6章 交互式网页表单的设计与使用.ppt

（12）在第（10）步插入的表格的右侧前11行中，选择“插入”|“表单”面板，插入“文本框”，在第12行插入两个按钮，分别命名为“提交”和“取消”，效果如图6-5-7所示。 案例实施 （13）将光标放在最外侧表格第四行，点击“插入”|“图像”，弹出如图6-5-3所示的选择图像源文件对话框，选择images文件夹下的footer.gif。 案例实施 谢谢！ 网页制作案例教程 毋建军 郑宝昆 郭锐 编著 清华大学出版社 第6章 交互式网页表单的设计与使用 本章学习目标（知识要点） 网页表单入门 创建网页表单 网页表单验证 手工创建网页表单 本章学习导航 HTML提供了表单作为网站与访问者之间交流信息的主要工具。表单可以看作是网站的设计者从Web访问者那里收集信息的一种方法，它不仅可以收集访问者对 网站的意见，还可以做许多工作，例如，在访问者登记注册免费电子邮件时，可以用表单来收集一些个人的资料；在电子商务中，收集每个顾客的购物信息；在搜索 引擎中，把用户要查找的关键词递交到服务器等。本章主要介绍如何创建网页表单。 本章内容在全书知识结构中所处位置如图所示 基础篇 HTML篇 CSS篇 JavaScript篇 提高篇 网页设计与开发流程（AscentSys医药商务系统） 网页制作基础 HTML基础 网页基本元素设计 网页布局规划设计 交互式网页表单的设计与使用 利用模板和库创建网页 CSS样式表 使用CSS布局规划网页 JavaScript网页应用 Javascript概述 网页中常见Flash制作 Web服务器创建 网站发布、测试和维护 6.1网页表单入门 6.1.1网页表单简介 表单是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器中显示的表单中输入信息，然后单击【提交】按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端将处理结果返回给客户端。 图6-1-1处理表单流程图 6.1.2网页表单设计原则 保守性的搭建，并带有目的性的设计表单 每个表单都应该符合它要表达的形势或情框 用你所需 主动沟通 把表单划分成许多小的部分 使用有意义的，关联上下文的错误信息 当用户点击提交按钮时，应当有引导用户到达某个页面 6.2创建网页表单 （1）插入表单 向文档中插入表单的操作为： 1）定位光标在文档中要插入表单的位置。 2）执行以下操作之一： 单击菜单栏中“插入”|“表单”|“表单”命令。 在“插入”栏的“常用”类别中，单击“表单”按钮 3）向文档中插入了表单标签，添加表单标签后的文档会出现一个红色的虚线框，如图6-2-2所示。 图6-2-2 插入表单标签图 （2）表单属性 单击表单红色的框线或单击窗口左下角标签选择器中的form标签，就可以选中表单，并在属性检查器，如图6-2-3所示，中对其进行设置。 图6-2-3 表单属性图 （2）表单对象 ?表单对象指构成表单的元素。在“插入”栏的“表单”类别，如图6-2-4中，包含了构成表单的所有元素，也可以通过菜单“插入”|“表单”命令，选择子菜单中的表单对象。 图6-2-4 “插入”|“表单”对话框 1）文本域 接受任何类型的字母数字文本输入内容。文本可以单行或多行显示，也可以以密码域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观者看到这些文本 2）隐藏域 存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。 3）按钮 在单击时执行操作。您可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签。使用按钮可将表单数据提交到服务器，或者重置表单。您还可以指定其它已在脚本中定义的处理任务。例如，可能会使用按钮根据指定的值计算所选商品的总价。 4）复选框 允许在一组选项中选择多个选项。用户可以选择任意多个适用的选项。 5）单选按钮 代表互相排斥的选择。在某单选按钮组（由两个或多个共享同一名称的按钮组成）中选择一个按钮，就会取消选择该组中的所有其它按钮。 6）列表菜单 在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“列表”选项在一个菜单中显示选项值，用户只能从中选择单个选项。在下列情况下使用菜单：只有有限的空间但必须显示多个内容项，或者要控制返回给服务器的值。 7）跳转菜单 可导航的列表或弹出菜单，使用它们可以插入一个菜单，其中的每个选项都链接到某个文档或文件。 8）文件域 使用户可以浏览到其计算机上的某个文件并将该文件作为表单数据上传。 9）图