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

1、 网页制作案例教程 毋建军 郑宝昆 郭锐 编著 清华大学出版社第6章 交互式网页表单的设计与使用本章学习目标（知识要点）n网页表单入门n创建网页表单n网页表单验证n手工创建网页表单本章学习导航nHTML提供了表单作为网站与访问者之间交流信息的主要工具。表单可以看作是网站的设计者从Web访问者那里收集信息的一种方法，它不仅可以收集访问者对 网站的意见，还可以做许多工作，例如，在访问者登记注册免费电子邮件时，可以用表单来收集一些个人的资料；在电子商务中，收集每个顾客的购物信息；在搜索 引擎中，把用户要查找的关键词递交到服务器等。本章主要介绍如何创建网页表单。n本章内容在全书知识结构中所处位置如图所

2、示 基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护6.1网页表单入门n6.1.1网页表单简介n表单是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器中显示的表单中输入信息，然后单击【提交】按钮时，这些信息将被发

3、送到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端将处理结果返回给客户端。图6-1-1处理表单流程图n6.1.2网页表单设计原则n保守性的搭建，并带有目的性的设计表单n每个表单都应该符合它要表达的形势或情框n用你所需n主动沟通n把表单划分成许多小的部分n使用有意义的，关联上下文的错误信息n当用户点击提交按钮时，应当有引导用户到达某个页面6.2创建网页表单n（1）插入表单 n向文档中插入表单的操作为：n1）定位光标在文档中要插入表单的位置。n2）执行以下操作之一：n单击菜单栏中“插入”|“表单”|“表单”命令。n在“插入”栏的“常用”类别中，单击“表单”按钮n3）向文档中插入了表

4、单标签，添加表单标签后的文档会出现一个红色的虚线框，如图6-2-2所示。图6-2-2 插入表单标签图n（2）表单属性 n单击表单红色的框线或单击窗口左下角标签选择器中的标签，就可以选中表单，并在属性检查器，如图6-2-3所示，中对其进行设置。图6-2-3 表单属性图n（2）表单对象n 表单对象指构成表单的元素。在“插入”栏的“表单”类别，如图6-2-4中，包含了构成表单的所有元素，也可以通过菜单“插入”|“表单”命令，选择子菜单中的表单对象。图6-2-4 “插入”|“表单”对话框n1）文本域 n接受任何类型的字母数字文本输入内容。文本可以单行或多行显示，也可以以密码域的方式显示，在这种情况下，

5、输入文本将被替换为星号或项目符号，以避免旁观者看到这些文本n2）隐藏域 n存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。 n3）按钮 n在单击时执行操作。您可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签。使用按钮可将表单数据提交到服务器，或者重置表单。您还可以指定其它已在脚本中定义的处理任务。例如，可能会使用按钮根据指定的值计算所选商品的总价。 n4）复选框 n允许在一组选项中选择多个选项。用户可以选择任意多个适用的选项。n5）单选按钮 n代表互相排斥的选择。在某单选按钮组（由两个或多个共享同一名称的按钮组成）中选择一

6、个按钮，就会取消选择该组中的所有其它按钮。n6）列表菜单 n在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“列表”选项在一个菜单中显示选项值，用户只能从中选择单个选项。在下列情况下使用菜单：只有有限的空间但必须显示多个内容项，或者要控制返回给服务器的值。n7）跳转菜单 n可导航的列表或弹出菜单，使用它们可以插入一个菜单，其中的每个选项都链接到某个文档或文件。n8）文件域 n使用户可以浏览到其计算机上的某个文件并将该文件作为表单数据上传。 n9）图像域 n使您可以在表单中插入一个图像。使用图像域可生成图形化按钮，例如“提交”或“重置”按钮。如果使用图像来执行任务而不是提交数据，

7、则需要将某种行为附加到表单对象。6.3网页表单验证n（1）选择“开始”“所有程序”“Adobe Dreamweaver CS5”，启动Adobe Dreamweaver CS5。n（2）选择“文件”“新建”菜单项，打开“新建文档”对话框，选择“空白页”“HTML”“无”，单击“创建”按钮，新建一个网页。n（3）在打开的空白文档中，选择“文件”“保存”菜单项，将文件保存在根目录下，文件名为6.3.html。n（4）选择“插入”|“表单”面板的“表单”，在页面中插入一个表单。n（5）创建一个包含至少一个文本域及一个“提交”按钮的 HTML 表单，分别选择“插入”|“表单”面板的“文本域”和“按钮”

8、，插入到页面当中，确保要验证的每个文本域具有唯一名称，按钮类型选择“提交”按钮。如图6-3-1所示。图6-3-1 表单中插入文本域和提交按钮n（6）在“行为”面板中，单击加号 (+) 按钮，会弹出“添加行为”的下拉菜单，如图6-3-2所示，然后从列表中选择“检查表单”行为。图6-3-2 “添加行为”的下拉菜单n（7）在如图6-3-3所示的对话框中设置每个文本域的验证规则，然后单击“确定”。 图6-3-3 “检查表单” 对话框6.4项目案例项目案例学习目标学习目标 案例描述案例描述 通过实例掌握网页表单及其表单元素的插入、属性的设定等操作。使用表单及其表单元素，在Dreamweaver CS5中

9、制作的用户注册页面案例要点案例要点 表单元素的布局方式。案例实施案例实施 （1）选择“开始”“所有程序”“Adobe Dreamweaver CS5”，启动Adobe Dreamweaver CS5，新建一站点，将images素材文件夹复制到本站点文件夹中。（2）选择“文件”“新建”菜单项，打开“新建文档”对话框，选择“空白页”“HTML”“无”，单击“创建”按钮，新建一个网页。（3）在打开的空白文档中，选择“文件”“保存”菜单项，将文件保存在根目录下，文件名为6.5.html。（4）在页面6.5.html的文档编辑区的【标题】文本框里，将标题命名为“用户注册”。案例实施案例实施 （5）选择“

10、插入”|“常用”|“表格”，插入4行1列的表格，如图6-5-2所示。案例实施案例实施 （6）插入表格后，在属性面板改变表格“宽度”属性值为760像素，对齐方式为居中对齐。（7）选中第一行，然后点击“插入”|“图像”，弹出如图6-5-3所示的选择图像源文件对话框，选择images文件夹下的top.gif。 案例实施案例实施 （8）在第二行内按照第（5）步操作插入一个1行6列，边框为1像素的表格，将其背景颜色设置为蓝色，并在每个单元格内输入相应的文字，调整每个单元格的宽度以适应文字的宽度，如图6-5-5所示。（9）将光标放在第三内，选择“插入”|“表单”选项卡，插入一个表单。（10）在上述插入的表单内，按照第5步操作插入一个12行2列的表格。（11）选中第（10）步插入的表格的各行，在属性面板中将行高设定为25像素，表格左侧部分对齐方式设定为右对齐，宽度为40%，然后在表格左侧输入相应的文字，如图6-5-6所示。案例实施案例实施 n（12）在第（10）步插入的表格的右侧前