第2章 表格、表单和框架
本章目标
■ 掌握表格标签的结构组成及使用
■ 掌握表格常用属性的设置
■ 了解表格的嵌套
■ 掌握表格的使用技巧
■ 掌握表单的基本结构组成
■ 掌握常用表单域的使用
■ 掌握常用表单按钮的使用
■ 掌握框架的结构组成及使用
学习导航
任务描述
【描述2.D.1】
创建员工通信表（包括部门、姓名等信息），演示<table>标签的使用。
【描述2.D.2】
基于任务描述2.D.1，为表格添加标题标签、表格主体标签和页脚标签等。
【描述2.D.3】
基于任务描述2.D.2，使用表格属性进行表格的美化。
【描述2.D.4】
创建用户注册页面，演示HTML表单的综合应用。
【描述2.D.5】
通过使用<frameset>和<frame>，实现复杂的HTML页面。
【描述2.D.6】
基于HTML框架技术，实现页面导航功能。
【描述2.D.7】
基于HTML框架技术，实现内联框架功能。
2.1 表格
表格是网页制作中使用最多的技术之一。表格可以清晰明了地展现数据之间的关系，使对比分析更容易理解。在很多情况下，也可以使用表格对网页进行排版布局，该布局方式将在第4章中详细讲述。本章讲述表格的基础知识。
2.1.1 表格结构
在HTML 中使用<table>标签来创建表格，<table>标签内包含了表名和表格本身内容的代码。表格是由特定数目的行和列组成的，其中行用标签<tr>表示，行由若干单元格构成。单元格是表格的基本单元，用标签<td>表示，<td>标签定义了一个列，嵌套于<tr>标签之中。多个单元格结合在一起构成了行，多个行结合在一起就构成了一个表格。表格的基本结构如下所示：
<table>
<tr>
<td>单元格内容</td>
<td>单元格内容</td>
<!-- 更多单元格 -->
</tr>
<!-- 更多行 -->
</table>
下述代码用于实现任务描述2.D.1，创建员工通信表（包括部门、姓名等信息），演示<table>标签的使用。
【描述2.D.1】TabIeEG1.htmI
<html>
<head>
<title>表格示例</title>
</head>
<body>
<table>
<tr>
<td>部门</td>
<td>姓名</td>
<td>联系电话</td>
<td>E-Mail</td>
</tr>
<tr>
<td>洗衣机</td>
<td>张三</td>
<td>1586666666</td>
<td>zhangs@haier.com</td>
</tr>
<tr>
<td>PSI</td>
<td>李四</td>
<td>1598888888</td>
<td>lis@haier.com</td>
</tr>
</table>
</body>
</html>
通过IE查看该HTML，结果如图2-1所示。
图2-1 简单表格
在图2-1中，表格结构非常简单，没有任何修饰，在后续的小节中将通过使用表格的其他标签和属性对表格进行渲染，使数据展示更加直观。
2.1.2 表格标签
HTML中有10个与表格相关的标签，各标签的含义及作用如下所示。
■ <tabIe>标签：定义一个表格。
■ <caption>标签：定义一个表格标题，必须紧随table标签之后，且每个表格只能包含一个标题，通常这个标题会居中显示于表格上部。
■ <th>标签：定义表格内的表头单元格。th元素内部的文本通常会呈现为粗体。
■ <tr>标签：在表格中定义一行。
■ <td>标签：定义表格中的一个单元格，包含在<tr>标签中。
■ <thead>标签：定义表格的表头。
■ <tbody>标签：定义一段表格主体（正文），使用<tbody>标签，可以将表格中的一行或几行合成一组，从而将表格分为几个单独的部分，一个<tbody>标签就是表格中的一个独立的部分，不能从一个<tbody>跨越到另一个<tbody>中。
■ <tfoot>标签：定义表格的页脚（脚注）。
■ <coI>标签：定义表格中针对一个或多个列的属性值。只能在表格或colgroup标签中使用此标签。
■ <coIgroup>标签：定义表格列的分组。通过此标签可以对列进行组合以便进行格式化，此标签只能用在<table>标签内部。
注意 使用thead、tfoot及tbody标签可以对表格中的行进行分组。如使表格拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
下述代码用于实现任务描述2.D.2，基于任务描述2.D.1，为表格添加标题标签、表格主体标签和页脚标签等。
【描述2.D.2】TabIeEG2.htmI
<html>
<head>
<title>表格示例</title>
</head>
<body>
<table>
<caption>员工信息表</caption>
<thead>
<th>部门</th>
<th>姓名</th>
<th>联系电话</th>
<th>E-Mail</th>
</thead>
<tbody>
<tr>
<td>洗衣机</td>
<td>张三</td>
<td>1586666666</td>
<td>zhangs@haier.com</td>
</tr>
<tr>
<td>PSI</td>
<td>李四</td>
<td>1598888888</td>
<td>lis@haier.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Compiled in 2009 by Mr. Zhang</td>
</tr>
</tfoot>
</table>
</body>
</html>
通过IE查看该HTML，结果如图2-2所示。
图2-2 添加了标题行和注脚的表格
2.1.3 表格属性设置
为了使表格的外观更加符合要求，还可以对表格的属性进行设置，比较常用的表格属性包括背景、宽高、对齐方式、单元格间距、文本与边框间距等，如表2-1所示。
表2-1 表格属性列表
下述代码用于实现任务描述2.D.3，基于任务描述2.D.2，使用表格属性美化表格。
【描述2.D.3】TabIeEG3.htmI
<html>
<head>
<title>表格示例</title>
</head>
<body>
<table border="1" height="15%" width="60%" cellspacing="0"
style="font-size:14px">
<caption>员工信息表</caption>
<thead bgcolor="#CCFFEE">
<th>部门</th>
<th>姓名</th>
<th>联系电话</th>
<th>E-Mail</th>
</thead>
<tbody bgcolor="#FFFAF0">
<tr>
<td>洗衣机</td>
<td>张三</td>
<td>1586666666</td>
<td>zhangs@haier.com</td>
</tr>
<tr>
<td>PSI</td>
<td>李四</td>
<td>1598888888</td>
<td>lis@haier.com</td>
</tr>
</tbody>
<tfoot bgcolor="#DCDCDC">
<tr>
<td colspan="4" align="right">Compiled in 2009 by Mr. Zhang</td>
</tr>
</tfoot>
</table>
</body>
</html>
在上述代码中，设置了表格中的文字、边框、高度、宽度等属性。通过IE查看该HTML，结果如图2-3所示。
图2-3 经过格式修饰后的表格
2.2 表单
HTML表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息，如用户注册、调查反馈等。一个表单主要由3部分组成，如下所示。
■ 表单标签：包含了处理表单数据所用服务器端程序的URL及数据提交到服务器的方法。
■ 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等表单输入控件。
■ 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的工作。
下述代码实现了在论坛上发表评论的功能。
【代码2-1】FormEG.htmI
<html>
<head><title>表单示例</title></head>
<body>
<form action="http://www.abc.com/html/comments.jsp" method="post">
请输入你的姓名：
<input type="text" name="name" id="name"> <br/>
邮箱地址：
<input type="text" name="email" id="email"> <br/>
评论：
<input type="textarea" name="comments" id="comments"> <br/>
<input type="submit" value="提交">
</form>
</body>
</html>
在上述代码中，通过<form>开始标签和</form>结束标签表示表单的范围，表单内包含两个文本输入框，分别用于让访问者输入名字和电子邮件地址，还包含一个文本域和一个提交按钮，分别用于发表评论和提交评论。此外，在表 单 标 签中action 的属 性 值 为“http://www.abc.com/html/comments.jsp”，表示表单数据提交的目的，该form的提交方式通过method属性指定，值为“post”。
通过IE 查看该HTML，结果如图2-4所示。
图2-4 简单表单演示
2.2.1 表单标签
表单标签（<form></form>）用于声明表单，定义采集数据的范围，同时包含了处理表单数据的应用程序及数据提交到服务器的方法。其语法如下：
<form action="url" method="get/post" enctype="mime" target="...">
......
</form>
其中：
■ action：指定处理表单中用户输入数据的URL（URL可为Servlet、JSP或ASP等服务器端程序），也可以将输入数据发送到指定的E-mail地址等。
■ method：指定向服务器传递数据的HTTP方法，主要有Get和Post两种方法，默认值是Get。Get方式是将表单控件的name/value信息经过编码之后，通过URL发送，可以在浏览器的地址栏中看到这些值。而采用Post方式传输信息则在地址栏中看不到表单的提交信息。需要注意的是当只为取得和显示少量数据时可以使用Get方法；一旦涉及数据的保存和更新，即大量的数据传输时则应当使用Post方法。
■ enctype：指定了数据发送时的编码类型，默认值是application/x-www-form-urlencoded，用于常规数据的编码。另一种编码类型是multipart/form-data，该类型将表单数据编码为一条消息，每一个表单控件的数据对应消息的一部分，以二进制的方式发送给服务器端。这种方法比较适合传递复杂的用户输入数据，如文件的上传操作。
■ target：用于指定在浏览器中的哪个frame中显示服务器的响应HTML，默认值是当前frame。现在大多数专业界面使用frame越来越少，所以此属性已很少使用。
■ onsubmit和onreset：指定提交和重置事件触发时运行的JavaScript。
■ accept和accept-charset：是在HTML 4.0新加入的属性，分别用来指定服务器程序接受的MIME类型和字符编码。
注意 一般情况下，target 属性的取值有如下情况。_blank：在一个新的浏览器窗口中调入指定的文档；_self：在当前框架中调入文档；_parent：把文档调入当前框架的直接父框架集中，这个值在当前框架没有父框架集时等价于_self；_top：把文档调入原来的最顶部的浏览器窗口中。
2.2.2 表单域
表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等。用于采集用户的输入或选择的数据，下面分别讲述各表单域。
1. 文本框
文本框是一种用来输入内容的表单对象，通常被用来填写简单的内容，如姓名、地址等。其语法格式如下：
<input type="text" name="..." size="..." maxlength="..." value="..." />
其中：
■ type="text"：定义单行文本输入框。
■ name：定义文本框的名称，一般需要保证名称是唯一的。
■ size：定义文本框的宽度，单位是单个字符宽度。
■ maxIength：定义最多输入的字符数。
■ vaIue：定义文本框的初始值。
2. 多行文本框
多行文本框（文本域）是一种用来输入较长内容的表单对象。其语法格式如下：
<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>
其中：
■ name：指定文本域的名称。
■ coIs：定义多行文本框的宽度，单位是单个字符宽度。
■ rows：定义多行文本框的高度，单位是单个字符宽度。
■ wrap：定义输入内容大于文本域宽度时显示的方式，可选值如下。
● 默认值是文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现。
● Off：用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须手动键入回车才能移到下一行。
3. 密码框
密码框是一种用于输入密码的特殊文本域。当访问者输入文字时，文字会被星号或其他符号代替，从而隐藏输入的真实文字。其语法格式如下：
<input type="password" name="..." size="..." maxlength="..." />
其中：
■ type="password"：定义密码框。
■ name：指定密码框的名称。
■ size：定义密码框的宽度，单位是单个字符宽度。
■ maxIength：定义最多输入的字符数。
注意 密码框并不能保证安全，仅仅是使得周围的人看不见输入的内容，在传输过程中还是以明文传输的，为了保证安全可以采用数据加密技术。
4. 隐藏域
隐藏域是用来收集或发送信息的不可见元素，网页的访问者无法看到隐藏域，但是当表单被提交时，隐藏域的内容同样会被提交。其语法格式如下：
<input type="hidden" name="..." value="..." />
其中：
■ type="hidden"：定义隐藏域。
■ name：同text的name属性。
■ vaIue：定义隐藏域的值。
5. 复选框
复选框允许在待选项中选中一个以上的选项。每个复选框都是一个独立的元素。其语法格式如下：
<input type="checkbox" name="..." value="..." />
其中：
■ type="checkbox"：定义复选框。
■ name：同text的name属性。
■ vaIue：定义复选框的值。
注意 通常情况下，对于一组复选框的name值推荐使用相同的值，这样提交表单后，在服务器端便于数据的处理。
6. 单选按钮
单选按钮只允许访问者在待选项中选择唯一的一项。该控件用于一组相互排斥的值，组中每个单选按钮控件的名字相同，用户一次只能选择一个选项。其语法格式如下：
<input type="radio" name="..." value="..." />
其中：
■ type="radio"：定义单选按钮。
■ name：同text的name属性，name相同的单选按钮为一组，一组内只能选中一项。
■ vaIue：定义单选按钮的值，在同一组中，单选按钮的值不能相同。
7. 文件上传框
文件上传框用于让用户上传自己的文件，文件上传框与其他文本域类似，但它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。其语法格式如下：
<input type="file" name="..." size="15" maxlength="100" />
其中：
■ type="fiIe"：定义文件上传框。
■ name：同text的name属性。
■ size：定义文件上传框的宽度，单位是单个字符宽度。
■ maxIength：定义最多输入的字符数。
注意 在使用文件域以前，需要确定服务器是否允许匿名上传文件。另外，表单标签中必须设置enctype="multipart/form-data"来确保文件被正确编码；表单的传送方式必须设置成post。
8. 下拉选择框
下拉选择框可以让浏览者快速、方便、正确地选择一些选项，同时可以节省页面空间，它通过<select>标签实现，该标签用于显示可供用户选择的下拉列表。每个选项由一个<option>标签表示，<select>标签至少包含一个<option>标签。其语法格式如下：
<select name="..." size="..." multiple>
<option value="..." selected>...</option>
...
</select>
其中：
■ name：同text的name属性。
■ size：定义下拉选择框的行数。
■ muItipIe：表示可以多选，如果不设置本属性，那么只能单选。
■ vaIue：定义选择项option的值。
■ seIected：表示本选项被选中。
2.2.3 表单按钮
在表单中，按钮的应用非常频繁，表单按钮主要分为3类：提交按钮、复位按钮和普通按钮。
1. 提交按钮
提交按钮用来将输入的表单信息提交到服务器。其语法格式如下：
<input type="submit" name="..." value="..." />
其中：
■ type="submit"：定义提交按钮。
■ name：定义提交按钮的名称。
■ vaIue：定义按钮的显示文字。
2. 复位按钮
复位按钮用来重置表单。其语法格式如下：
<input type="reset" name="..." value="..." />
其中：
■ type="reset"：定义复位按钮。
■ name：定义复位按钮的名称。
■ vaIue：定义按钮的显示文字。
注意 复位按钮并不是清空表单信息，只是还原成默认值，例如，表单中有文本框<input type="text" name="name" value="张三"/>，在该文本框中填入“李四”，当点击该复位按钮时，文本框中的“李四”清除，还原为“张三”。
3. 普通按钮
普通按钮通常用来响应JavaScript事件（如onclick），用来调用相应的JavaScript函数来实现各种功能。其语法格式如下：
<input type="button" name="..." value="..." onclick="..." />
属性解释如下所示。
■ type="button"：定义普通按钮。
■ name：定义按钮的名称。
■ vaIue：定义按钮的显示文字。
■ oncIick：通过指定脚本函数来定义按钮的行为。
2.2.4 综合示例
网页中表单的用途很广，下面是一些典型表单的应用：
■ 在用户注册某种服务时收集姓名、地址、电话号码、电子邮件和其他信息。
■ 收集购买某个商品的订单信息、收集关于调查问卷信息等。
下述代码用于实现任务描述2.D.4，通过创建用户注册页面，演示HTML表单的综合应用。
【描述2.D.4】register.htmI
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单控件</title>
<style type="text/css">
input{font-family:Verdana, Arial, Helvetica, sans-serif,"宋体";}
</style>
</head>
<body>
<form method="post" action="#">
<table style="font-size:12px">
<tr>
<td align="right">用户名:</td>
<td><input type="text" id="username" value="" size="20"/></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" id="password" value="" size="20"/></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input type="radio" id="sex" value="male" />男
<input type="radio" id="sex" value="female" />女
</td>
</tr>
<tr>
<td align="right">国家:</td>
<td>
<select name="country">
<option id="default" selected="selected">
-请选择您所在的国家-
</option>
<option id="China">中国</option>
<option id="America">美国</option>
<option id="Japan">日本</option>
<option id="France">法国</option>
<option id="England">英国</option>
</select>
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td>
<input type="checkbox" name="interest" value="music" />音乐
<input type="checkbox" name="interest" value="travel" />旅游
<input type="checkbox" name="interest" value="climbing" />登山
<input type="checkbox" name="interest" value="reading" />阅读
<input type="checkbox" name="interest" value="basketball"/>篮球
<input type="checkbox" name="interest" value="football" />足球
</td>
</tr>
<tr>
<td align="right">个人简介:</td>
<td>
<textarea name="comments" rows="3" cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
上述表单要求用户输入关于个人的基本信息并提交到服务器，该表单类似于在网站上注册用户时的表单。
通过IE查看该HTML，结果如图2-5所示。
图2-5 表单控件
2.3 框架
框架（Frame）就是浏览器窗口的一个区域，在这个区域中可以显示一个单独的文档（页面）而不影响另一个框架中的显示内容。
使用框架可以把浏览器窗口划分成多个区域，每个区域可以显示不同的网页。如果把这些框架看成一个整体，就称之为框架集（Frameset），框架集定义了浏览器窗口的一种布局结构。框架还可用于实现网页的导航，通过设置一个框架页为导航页，当点击该导航页中的某项功能时，对应的页面会在其他框架页中显示，不会破坏当前导航页的导航作用。
使用框架有以下两个优点：
■ 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，从而减少了数据的传输，加快了网页下载速度。
■ 方便制作导航栏。
当然，使用框架也有很多缺点，如因为会产生很多的页面，所以在管理上比较麻烦，不容易打印，浏览器的后退按钮不可用等。
2.3.1 框架的基本结构和语法
HTML 中使用框架集标签<frameset>来定义如何划分框架，通过设置<frameset>的“cols/rows”属性来确定<frameset>的列/行数以及所占窗口的比例。而每个引入的页面通过框架标签<frame>定义，<frame>的src属性用于设置所引用网页的路径。同时使用<noframes>标签定义浏览器不支持框架时显示的内容。框架的基本结构如下：
<html>
<head>
<title>标题</title>
</head>
<frameset cols[rows]="列或行的宽度占窗口比例或像素,..">
<frame src="引入网页的路径或地址" />
<frame src="引入网页的路径或地址" />
...
<noframes>
<body>内容</body>
</noframes>
</frameset>
</html>
<frameset>标签中的常用属性及作用如表2-2所示。
表2-2 frameset的常用属性
注意 cols 和rows 中值的个数对应要分割的<frame>的个数，即有几个值就有几个<frame>。
通过设置<frame>的属性可以设置窗口样式，该标签的常用属性及作用如表2-3所示。
表2-3 frame的常用属性
下述代码演示了框架的行划分。
【代码2-2】FrameEG.htmI
<html>
<head>
<title>框架制作</title>
</head>
<frameset rows ="75%,25%">
<frame src="BiaoTiEG.html"/>
<frame src="WenBenEG.html"/>
</frameset>
</html>
上述代码将网页行分为两个Frame，其中分别引入的网页是“BiaoTiEG.html”和“WenBenEG.html”，并且占浏览器的比例分别为75%和25%。
通过IE查看该HTML，结果如图2-6所示。
图2-6 框架演示
注意 <frame>的src 属性也可以设置为绝对路径，但建议使用相对路径，以防工程目录发生变化。
2.3.2 框架的使用
上节中介绍了框架最简单的用法，在实际应用中可通过框架各属性之间的搭配，使框架能够灵活分配。本节将通过几个示例来演示框架的使用。
1. 混合框架
可根据设计需要，混合使用<frameset>和<frame>标签设置区域相互独立的复杂页面。
下述代码用于实现任务描述2.D.5，通过使用<frameset>和<frame>，实现复杂的HTML页面。
【描述2.D.5】HunHeFrame.htmI
<html>
<head>
<title>混合框架</title>
</head>
<frameset cols ="20%,80%">
<frame src="HelloWorld.html">
<frameset rows="75%,25%">
<frame src="BiaoTiEG.html" />
<frame src="WenBenEG.html" />
</frameset>
</frameset>
</html>
上述代码将整个浏览器分为了左右两个Frame，左边部分显示的是HelloWorld.html页面，而右边部分又分为了上下两个Frame，分别显示BiaoTiEG.html和WenBenEG.html页面，通过IE查看该HTML，结果如图2-7所示。
图2-7 混合框架
2. 导航框架
导航框架（导航栏）是在网页框架的<frame>中加入name属性，表示该<frame>的名称，然后通过超链接来标识URL，并用target 指定<frame>的名称。当点击超链接时，所链接的网页就会显示在target对象所指定的<frame>中。
下述代码用于实现任务描述2.D.6，基于HTML框架技术，实现页面导航功能。
【描述2.D.6】NavFrameEG.htmI
<html>
<head>
<title>框架导航</title>
</head>
<frameset cols="120,＊">
<frame src="Left.html">
<frame src="Right.html" name="right">
</frameset>
</html>
在上述代码中，将NavFrameEG.html 分为了左右两个<frame>，其中左边框架导入了Left.html页面。
其中，Left.html页面代码如下。
【描述2.D.6】Left.htmI
<html>
<head>
<title>LEFT</title>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com" target="right">百度</a></li>
<li><a href="http://www.google.com" target="right">谷歌</a></li>
<li><a href="http://www.sina.com.cn" target="right">新浪</a></li>
</ul>
</body>
</html>
在上述代码中，在导航页Left.html中，创建了3个超链接，其target属性的值都是“right”。当点击其中某个链接时，对应的结果会在名称为“right”的<frame>中显示。例如，点击“百度”链接时，通过IE查看该HTML，结果如图2-8所示。
图2-8 导航框架演示
3. 内联框架
当要在单个HTML文件中显示其他网页时可以使用内联框架实现，内联框架的本质是在一个页面中嵌入一个框架窗口来显示另一个页面的内容。内联框架使用<iframe>标签来定义。
下述代码用于实现任务描述2.D.7，实现内联框架功能。
【描述2.D.7】NeiLianFrameEG.htmI
<html>
<head>
<title>内联框架</title>
</head>
<body>
<iframe src="http://www.baidu.com"
align="center" height="400px" width="800px"></iframe>
</body>
</html>
在上述代码中，在当前网页中显示了一个高度为400px，宽度为800px的子网页，引用的网页为“http://www.baidu.com”，通过IE查看该HTML，结果如图2-9所示。
图2-9 内联框架演示
注意 在实际应用中，框架的使用可给网页设计带来很大方便。读者可查看一些门户网站的HTML源代码，分析一下这些网站是如何使用框架的，对以后设计网页会有很大的帮助。
小结
通过对本章的学习，读者应该能够学会：
■ 表格是HTML的高级控件之一。表格可以清晰明了地展现数据之间的关系，便于对比分析。
■ HTML中与表格有关的10个标签是<table>、<caption>、<th>、<tr>、<td>、<thead>、<tbody>、<tfoot>、<col>、<colgroup>。
■ 表单由表单标签、表单域、表单按钮组成。
■ 创建表单最关键的是掌握3个要素，即表单控件、action属性和method属性。
■ 向服务器传递数据的HTTP方法，主要有Get和Post两种方法，默认值是Get。
■ 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等，用于采集用户输入或选择的数据。
■ 表单按钮主要分为3类：提交按钮、重置按钮和普通按钮。
■ 使用框架可以把浏览器窗口划分成多个相互独立的区域。
■ HTML框架既可以横向分割也可以纵向分割。
■ 使用框架技术可以方便地实现页面导航功能。
练习
1. ______、______和______标签用于定义表格、行和单元格。
A. tbody tr td
B. table row cell
C. table tr td
D. table th td
2. 能够使表格的单元格合并的属性是______。
A. cellspacing
B. cellpadding
C. rowspan
D. colspan
3. 表单的______属性用来定义提交数据的方法。
A. action
B. method
C. enctype
D. target
4. 文本框的______属性用来定义显示宽度。
A. width
B. maxlength
C. height
D. size
5. ______属性相同的多个单选按钮只能被选中一项。
A. id
B. name
C. value
D. type
6. 点击提交按钮时，______的数据会被提交到服务器。
A. 页面的所有表单
B. 页面的第一个表单
C. 提交按钮所在的表单
D. 默认不会提交数据
7. 使用框架集的______属性可以将页面分为左右两个框架。
A. rows
B. cols
C. framespacing
D. width
8. 请完成图2-10所示的表格。注意表头的字体为黑体，表格使用一个像素的边框。
图2-10 练习8示意图