第3章 表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示。

3.1.2 表格的基本语法

在 HTML 中，常用表格主要通过5个标记来构成:<table>，<caption>，<th>，<tr>和<td>。

(1)table标记是成对标记，<table>表示表格开始，</table>表示表格结束。

(2)caption 标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用caption标记可以给表格添加标题，该标题应位于table 标记与t标记之间的位置。

(3)tr (Table Row)标记是成对标记，<tr>表示行开始，</tr>表示行结束。

(4)th (Table Heading 表头)标记是成对标记，<th>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元的内行说明。表头文字内容一般居中、加粗显示。

(5)td (Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束表头可以用 th标记定义，也可以用td 标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。
在一个表格中，可以插人多个tr标记，表示多行，一组<tr></tr>标记表示插入一行一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。

3.2 表格属性的设置

3.2.1 表格边框属性

边框属性	说明	边框属性	说明
borde	表示表格边框粗细	bordercolorlight	表示表格亮边框颜色
bordercolor	表示表格边框颜色	bordercolordark	表示表格暗边形颜色

3.2.2 表格的宽度和高度属性

width： 定义表格的宽度

height： 定义表格的长度

3.2.3 表格背景颜色与表格图像属性

bgcolor:设置背景颜色

background：设置背景的图像

3.2.4 表格边框样式属性

3.2.5 表格单元格间距、单元格边距属性

cellspacing：设置单元格之间的间距，单位可以是百分比或者像素，默认值为2px

cellpadding：设置单元格边距

3.2.6 表格水平对齐属性

对齐方式也是三种：居中（center）、左对齐（left）、右对齐（right）

用法：<table align="left">...</table>

3.2.7 设置表格的（tr）标记行的属性

属性值    说明    属性    说明
align    行内容水平对齐    bordercolor    行的边框颜色
valign    行内容垂直对齐    bordercolorlight    行的亮边框颜色
bgcolor    行的背景颜色    bordercolordark    行的暗边框颜色
语法：

<table align="center">

        <tr align="left" valign="top">

                <td>...</td>

        </tr>

....

3.2.8 设置单元格的属性

属性值	说明
height	单元格高度
bordercolor	单元格的边框颜色
background	单元格的背景图像
bgcolor	单元格的背景颜色
valign	单元格内容垂直对齐
align	单元格内容水平对齐
width	单元格宽度
colspan	单元格跨列
rowspan	单元格跨行
bordercolordark	单元格的暗边框颜色
bordercolorlight	单元格的亮边框颜色

3.2.9 表格单元格跨行、跨列属性

3.3 表格嵌套

3.4 表单

3.4.1 表单标记

表单form标记成对标记，以<form>开始f和<form>结束。

语法：

<form name=" " action="your-action-url" method="post">  
    <!-- 表单元素在这里 -->  
</form>

action: 表单提交的目标 URL。

method: 提交数据的方法，通常使用 GET 或 POST。

3.4.2 定义域和域标题

在 HTML 中，<fieldset> 和 <legend> 标签用于定义表单中的域（区域）和域标题。这些标签有助于组织和分组相关的表单元素，使表单更加清晰易读。

1. <fieldset> 标签
作用: 用于将一组相关的表单控件（如输入框、单选按钮等）进行分组。
特点: 被浏览器通常会渲染为一个边框，将包裹的内容分开。
2. <legend> 标签
作用: 用于为 <fieldset> 提供一个标题或描述。
特点: 通常显示在 <fieldset> 的顶部，作为该组控件的说明。

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

设置 input 标记的 type 属性值为 text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输入的数据只能单行显示，不能换行。
语法:
<input name= " " type= " text" maxlength=" " size=" " value=" " readonly/>

说明:单行文本输人框的主要属性有name，maxlength，size，value和readonly，其属性如表所示：

属性	取值	说明
name	name	定义 input 元素的名称
maxlenght	number	定义输入字符中的字符的最大长度
size	number_of_char	定义输入字段的宽度，其值小于或等于最大值
value	value	规定input元素的默认值
readonly	readonly	规定文本框中内容只读，不能修改和编辑

3.4.3.2 密码输入框

设置 input 标记的type 属性值为password，可以实现向表单中插入一个密码输入框。密码输人框中可以输人任意类型的数据，与单行文本输人框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输入的密码不被泄露。
语法:
<input name= " " type=" password" maxlength= " " size = " "/>
说明:密码输人框的主要属性有name，maxlenth和size，取值及说明与单行文本输入框相同。

3.4.3.3 复选框

设置input标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。

语法：

<inoput name="" type="checkbox" value="" checked/>

由于复选择框可以支持多选，每一个复选框都是不同的，一组复选框的所有name属性应该不同，value 属性值也应该不同。

3.4.3.4 单选按钮

设置input 标记的 type 属性值为radio,可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name=" " type = " radio" value=" " checked/>
说明:单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value 属性取值应该不同

3.4.3.5 图像按钮

设置input标记的属性值为image，可以实现向表单中插入一个图像按钮，用户可以利用图像按钮在网页上插入一张图像，通过src属性加载图像。

语法：

<input name="" type="image" src="" width="" height=""/>

3.4.3.6 提交按钮

设置input标记的属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。

语法：

<input name="" type="submit" value="提交"/>

3.4.3.7 重置按钮

设置input标记的属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户重写

语法：

<input name="" type="reset" value=""/>

3.4.3.8 普通按钮

设置input标记的属性值为button，可以实现向表单中插入一个普通按钮，普通按钮在网页设计中非常有用，如果不能通过表单按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。

语法：

<input name="" type="button" value="" οnclick=""/>

3.4.3.9 文件选择框

设置 imput 标记的type属性值为fle，可以实现向表单中插人一个文件选择框

语法:
<input name=" " type=" file" value=" "/>
说明:
name，定义input标记的名称。页面上会自动添加一个文本输入框和一个“浏览…按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输人框中。

3.4.3.10 隐藏框

设置 input 标记的type 属性值为 hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
语法:
<input name = " " type = " hidden" value= " "/>

3.4.4 多行文本输入框

textarea 标记可以向表单中插人多行文本输人框。多行文本输入框可以用来输人较多的文字信息，而且可以换行，并将这些信息提交到服务器。

语法：

<textarea name="" rows="" cols="" wrap=""/>初始内容信息</textarea>

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输人。下拉列表通常需要同时使用select和option 标记来在表单中插入下拉菜单和列表项。
语法:
<select name=" " size=" " multiple>
<option value="" selected>文字信息1</ option>
<option value="">文字信息2</option>

....
</select>
说明:select标记是成对标记，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name,size 和 multiple 等属性。option 标记有 value 和 selected 等属性。select标记与 option 标记必须配合使用。每一选项必须指定一个显示的文本和一个 value值，显示文本通常附在 option 标记后面。它们的属性、取值及说明如表 3-16 所示。

标记名称	属性	属性值	说明
select	name	name	定义select标记的名称
	size	number	规定下拉列表框中可见选项的数目
	multiple	multiple	规定可选择多个选项
option	value	value	规定列表项的值
	selected	selected	设置预选列表项

示例：