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

网页作案制例教程毋

建军 宝郑昆郭 锐编著

清

大华学出版社

第

章6交互式网页 表的设计单使用与

章本学习目（标识知点）

要 

网

表页单入 门创建网页单表网 表单验页证 工创手建页表网单

本章学习导

航



THLM供了表提作单为网与访问者之间站交 流息的信主工具。要单表以看作可是站的网计设 者W从e访问b者那里集收信息一种方的，法它 不仅以收可访集问者 对站的意网见还可以做，许多 作，例如工在访，问者登记注免费册子 邮件时电可以，用表来单收一集些人的个资料 ；电子商务在中，集收每顾个的客物信息购； 在搜 索擎中，引用把要查户找的键词递交关到服 器务等。本章要介绍主何如创建页表网单。本 内章容全在知识书构结所中处位置图如所

示

站发网、布测和试护维提高篇 ebW务器服创建网 页中常见Flash作制J avScairtp网应页用 aJvacSrpi篇 taJascrivtp概述使用C S布局规划网S页C SS篇CS 样S表 式利用模和板库创网页 交互建网页式单的设表计与用 网页布使局规设计 H划MTL 篇页基本网素元设 计HMTL础基

网设页与开发计程（ A流censStsy医药商系务）统基础

篇网页作基制础

.16页网单入门

表

6.1.1网

表单页介简

表是实单网现互动页元素的，与客端和户 服器务脚本进行结合端使，用可实以现动互 。表单支持客性端-服务户关系器中的户端客。 访当者问We在浏览器中b示的显表中单 输入信，息后然单击【交】提按钮，这些信时 将息发送到服被务，服务器器端本或应用脚 序对程些这息信行处理进，后服最器务端将 理结果处返回给户客端

。

图6--1处理1表流程单图



61.2网.表单页设计则

原

   



守性的保搭建并带，目有的性的计设单表 个表每单都该应合符要它表的达形势情或 框用所需 你动主沟通 表单把分划成许小多部分 的使有用义意的关联上，文下错的误信 当用户点息提交按击钮时应当，有导用引户到达某个 页面

6.

2建创网表单页

（

1）插表单入



向

档文插中表单入操的作：为 1定位）标在光档文中要插入表的单置。位 ）2执行下操作以一：

之 



击单菜单中“栏入插”|“表”|“表单”命令。 单在插入“”栏“的用”常类中别单，“击表单 按钮



”3向文）中档插入表了标单，添签加表单标签 后的文档会出一个红色现的线虚框如图， 6--2所示2。

图6

-2- 2插入单表签标

图



（）表2属单性

单击表单红

的色框或单线击口窗左下角标 选择器签的中f标签r就可，以中表选单 并，在性属查检器，图如-2-36示所中对，其 行进置设

图。-62- 3表单属图

性



（2

表）对象



单

表单象指构成对单的元素。表“在插入”栏 的表单“”别类如图6-2-4，中，含包 了成表构的单有元所素，可以通也过菜单“插 ”|“表入”命单令选，择菜单中的表单子 象对。

图

62-- 4插“”|入表单”“话框

对

1

文）本

域

受接任何类型的母字字文数本输内入。容 文可以单本或多行显示行也可，以以密码域的方 显式示在，这情种下况输，文入本将被 替换星号或项目符为号，避以旁观免看到者 这些本文





）隐2藏  存储域户输用入的信息如，姓、电名邮子地址件偏 爱或的看方查，并在该用户式下访次问此站时点用 使些数这。据 3按钮） 单在击时执操行作您可以为。钮按添自定加义称 或名签标或，者用预使义的“定交提”或“重”置标签。使 按用钮可表单将据提交数到服器务，或者重 表单置。您可还以指定它已其在脚中定本的义理 任处。务如，可能会使例用钮根据按指的值计定所算选商 的品价。总



4）复框

选

允在一组选许项选择中多选个。项用可以户 选任意多个择用适的选项。代 互相表排的斥选。在某择单按选组钮（ 两由或多个个享共同一称名的按组成）钮选 择一中按钮个，会取消就选该择组中的所其 有它钮。

按

5

单）按钮选





6）列

表单 菜 一个滚动在表中显示选项列值用，可以户该从动滚列 中表选多个择项。“选表列”选在项个菜一单中 示显项选值用户，只从中选能择单个项。选下在 情列况使下用单菜只有有限的空：但间须必示显个多 容内项，者要或制返控回服给器务的值。7 ）跳转菜单  可导的列表航或弹出菜，使单用们可以它入插一 菜个单其中，的个选每项链都接某个到档或文件文。





8文件） 域 使用可以户览浏其计到算上机的个文件并将某文该 作为件单数表上传据。9 图像）  使域可您在以单中插入一个表图。像使用图像域生 成可图化按形钮，如“提例交”或“置重按钮”。如果使用 像来执图任行而务是提交数据不，则要需将 某种为行附加表到对单象。

6

.3页表网单证验







（

）选择“1开始”｜所“有序程｜“Ad”be oreaDmewaverC 5S”启，A动obe dDreawmevea CrS。5（2） 选“文件择｜”“新建菜单”，打项“开建文新档 对”话框选，“空白择页”“HT｜M”｜L“”无， 单击“创建按”钮新，一建网个。页（3 在）打开的白空文中档选，择文“”｜“件存”保菜单 项，将件保文存在根录目下文件，为名6..3hmt。l（4 ）择选插“”|“入单表面”的“表单”，在板面页中 插入个表单。一



（5

）建创个一包含至一少文本个及域个一“交提”按 钮 的HMTL表

单，分选择别插“入”“表单|面”板 “的文域本和”按“”钮插入到，面页中，当确要验 证保的每个本域文有唯一名称具按，类钮型择“选提交 按”。如图6钮--13所示。

6图-3-1表 中单入插本文和提交域钮按



（6

）在行“为”板中，面击加号 (单) +钮按会弹出“，添行 为加”下的拉菜单如图6，3-2-所示，后然列表从选中“检查表择单”行 。

为6图--3 “2加行为添”的拉下菜单



7）在如图6-3（-所3的示话对框中置设个文本域每 验的规证，则然单击后“定”确

。

图-6-33 检“查表单” 对话

框

6.

项目4例

学习案目标通 实例掌过握页网单及表表单元其素插的入属、的性定等设作。操

案

描述

使例用表及单表其单元，素D在raemweave rS5C中制作的用注册页面户

案

例点要

表元素的单局方布。式

例案实

（施1）择“开始选｜“所”有程序｜“Adobe ”rDaemwaeevr S5C，启” Ad动bo Deeraweamvr CeS，5建一新点站，将imgesa素文材件复制夹本到 点文站夹中。 件（2选）“择文”件｜“建新菜”项，单打开新建文档“”对话，框择 选空“白”页｜HT“L”M｜无“”，单击创建”“钮按，建新一网页。 个（3）在开打空白文档中，的择选“件文”“｜保存菜单”项将，文保存件在根目 下，文件录为6.5名ht.m。 l（4在页面6.5.）htlm的档文辑区的【标编】题文本框，将标里题名为命“用户 册注”

。例实案 施5（）选择插入”““常用||“表格”，插入”行4列1的表格如图，-562-所示。

案例

实施

（

6）入插格后，表在属面性板变表格改宽度”“属性为7值06像素， 齐对式为方居中对齐 。7）（中第一选，然后点行击“插”入“|图”，弹出如图6-像5- 3所示选择图像源的件对话框文，择选magis文e件夹的to下pg.f。i

案例实施

8（）第在二行内照按第5）（操步作插入一个行61，边列框1像为的素格表 将，背景其颜色设置为蓝，并在色个每元单内格输入相应文的字，调整个 单每元的宽度格以应文字的宽度适如图6-，5-5示所

案例。实施

（9）将标放光第在内，三选择“入”插“|单表”选卡项插，一入个单表。 （1）在上0述入的表单插内，按第5照操步作插一入12行个列的表格2。（11）选中第 （0）1插步入的表格各行，的属在面板性中行将设高定2为5像素，表格 侧左部对齐方分式定设右为对齐，度为4宽%0，后然表在格左 侧输入应的相字文如，6-5图6所-示

。

例实施



案（1

2在）（10第）插步的入表的格侧右1前行1，选择“中入”|插“表单”面 板插，入“文本”框在，12行第入插两按个钮分，别名为命“提交 ”和取“消”效果，图如6--5所7示。

案例实施



（31）将标光放在

最外侧格表四第，点行击插入”|“图“像”弹出，如 图6-5-所示的选择3像源文图件对框话选择，migesa文夹件下的fotoreg.i f。

谢

！谢