HTML中的表格和表单

1、表格

1.1创建表格

1.2 表格属性

1.3 表头单元格和表格标题

2、表单

2.1 input控件

2.2 label标签

2.3 textarea控件（文本域）

2.4 下拉菜单

2.5 表单域

1、表格

表格是较为常见的一种标签，但不是用来布局，常见处理、显示表格数据。

（1）表格提供了HTML中定义表格数据的方法

（2）表格由行中的单元格组成

（3）表格中没有列元素，列的个数取决于行的单元格个数

1.1创建表格

在HTML中，要想创建表格，就需要使用相关表格标签，创建表格的基本语法如下：

<table><tr><td>单元格内的文字</td>...</tr>...
</table>

table标签为创建表格的外围框架（可在table标签里类同图像进行width border alter定义），tr标签为行标签，td为单元格。例：

<table width="500" border="2"><tr><td>姓名</td><td>性别</td><td>电话</td></tr><tr><td>小王</td><td>女</td><td>110</td></tr><tr><td>小明</td><td>男</td><td>120</td></tr>
</table>

1.2 表格属性

通过在table标签中添加属性名来更改表格属性，如在上例中

<table width="500" border="2" title="表格" align="center" cellspacing="10" cellpadding="10">

一般情况下 border cellspacing cellpadding 三参为0，如下效果：

对tr加align则对行对齐，对td加align可对单元格对齐（使用CSS更加便捷）

1.3 表头单元格和表格标题

（1）表头单元格标签使用th取代td，则会使单元格内内容自动居中加粗，如，对上例中表格的第一行进行修改

<table width="500" border="2" title="表格" align="center" cellspacing="0" cellpadding="0"><tr><th>姓名</th><th>性别</th><th>电话</th></tr><tr align="center"><th>小王</th><td>女</td><td>110</td></tr><tr align="center"><th>小明</th><td>男</td><td>120</td></tr>
</table>

效果为

（2）使用caption标签来定义表格标题，放入table标签中且紧挨table下方，只存在表格中，如：

<table width="500" border="2" title="表格" align="center" cellspacing="0" cellpadding="0"><caption>个人信息表</caption>

（3）表格的划分：表格可用thead和tbody将表格划分为头部和主体两部分，无功用仅为划分，如

<table border="1" align="center" width="550" cellpadding="0" cellspacing="0"><caption>小说排行榜</caption><thead><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></thead><tbody><td>1</td><td>鬼吹灯</td><td><img src="bd.png" width="50"></td><td>321</td><td>112</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tbody></table>

1.4 合并单元格

跨行合并：rowspan 跨列合并：colspan

合并单元格为自上而下，自左而右，合并几个单元格则给予rowspan或colspan参数为几，并将原有的要被合并的单元格标签去除。如下，为合并第三行的第二第三个单元格，即跨列合并：（删除的单元格个数=合并个数-1）

<table align="center" width="400" height="200" border="1"><caption>合并单元格</caption><tr align="center"><td>123</td><td>abc</td><td>def</td><td>opq</td></tr><tr align="center"><td>123</td><td>abc</td><td>def</td><td>opq</td></tr><tr align="center"><td>123</td><td>abc</td><td colspan="2">def</td></tr></table>

同样，为了合并第四列的三个单元格，合并数为3，需要删除2个单元格，即（2,4）（3，4）所对应单元格，如下

 <table align="center" width="400" height="200" border="1"><caption>合并单元格</caption><tr align="center"><td>123</td><td>abc</td><td>def</td><td rowspan="3">opq</td></tr><tr align="center"><td>123</td><td>abc</td><td>def</td></tr><tr align="center"><td>123</td><td>abc</td><td>def</td></tr></table>

2、表单

网页中，需要跟用户交互，收集用户资料，此时需要表单。

HTML中，一个完整的表单通常由表单控件（也称表单元素）（即表单中出现的如输入框按键之类的小方框）、提示信息和表单域（表单整体区域）3个部分构成。

2.1 input控件

<input />标签为单标签，type属性为其最基本属性，其取值有多种，用于指定不同的控件类型。除了type属性外，<input />标签还可以定义很多其它的属性，其常用属性如下

（1）type确定了输入框是那种内容，如text值为普通文本输入，而password为不可见的密码输入，如下为每行两个单元格所构建的表格：（maxlength可通过赋值确定输入框最多字符数）

 <table align="center" border="0" width="400" cellpadding="0" cellspacing="0"><caption><h4>青春不常在，抓紧谈恋爱</h4></caption><tr><td>所在地区</td><td><input type="text" value="福州"></td></tr><tr><td>用户名</td><td><input type="text" value="andy"></td></tr><tr><td>密码</td><td><input type="password"></td></tr></table>

（2）当存在选项选择时可令type值为radio(单选)或checkbox(多选)，需要注意的是选项必须给input附加name，即相同的一组需要给他们命名相同的名字。如，在上例中，添加性别和喜欢选项

checked="checked"可设置默认被选定状态

<tr><td>性别</td><td>男<input type="radio" name="sex">女<input type="radio" name="sex"></td>
</tr>
<tr><td>喜欢的类型</td><td>温柔<input type="checkbox" name="love">体贴<input type="checkbox" name="love">阳光<input type="checkbox" name="love">国庆<input type="checkbox" name="love"></td>
</tr>

（3）给type赋值button，即可创建一个按钮，其中value为button中所要显示的值。

将type赋值为submit或reset可创建提交或重置按钮。

将type赋值为image且在后面通过src赋予图像地址则构建一个图像的按钮。如下，为创建按钮

<tr><td></td><td><input type="button" value="注册"><input type="submit" value="提交"><input type="reset" value="重置"><input type="image" src="bd.png" width="50"></td>
</tr>

（4）type赋值为file可用来提交文件，如

<tr><td>上传头像</td><td><input type="file"></td>
</tr>

单元格距离可通过tr设置width和height来控制

2.2 label标签

label标签为input元素定义标注，可通过点击设定文字直接进入输入框，如

<body><label>用户名<input type="text"></label><label>用户名<input type="text"></label><label>用户名<input type="text"></label>
</body>

点击任意一个用户名即可进入对应着的输入框。

通过label标签中的for给予一个id值，可实现类似锚点定位的功能，如

<body><label for="pwd">请输入密码</label><div><input type="password" id="pwd"></div>
</body>

点击请输入密码即可进入密码输入框。

2.3 textarea控件（文本域）

text文本框只能写一行，textarea可输入多行文本

<textarea cols="每行中的字符数" rows="显示的行数"文本内容
</textarea>

其中宽和高由css控制，一般cols和rows，如

<tr><td></td><td><textarea name="" id="" cols="30" rows="10">给我留言吧</textarea></td>
</tr>

2.4 下拉菜单

使用select控件定义下拉菜单的基本语法如下：

<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select>

select中至少应包含一对<option></option>

若想要表述默认选中，则在option后面添加selected="selected"。如

<tr><td>籍贯</td><td><select name="" id=""><option value="">籍贯</option><option value="" selected="selected">山西</option><option value="">湖南</option></select></td>
</tr>

2.5 表单域

对于大的网页，可能含有多个表单，这时如果不划分表单域进行提交或者重置会导致意外的结果。创建表单域方式如下：

<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>

添加form后，即可使用submit和reset进行提交和重置。

（1）action在表单接受到信息后，将信息传递给服务器进行处理，action用于指定接受处理表单数据的服务器程序的URL地址。（php），如

<body><form action="demo.php">账户&nbsp;&nbsp;&nbsp;<input type="text"><br>密码&nbsp;&nbsp;&nbsp;<input type="password"><br><input type="submit" value="登录"><input type="reset" value="重置"></form>
</body>

（2）method用于设置表单数据的提交方式，其取值为get或post

当表单设置为get并提交后，如图

<body><form action="" method="get">账户&nbsp;&nbsp;&nbsp;<input type="text" name="account"><br>密码&nbsp;&nbsp;&nbsp;<input type="password" name="password"><br><input type="submit" value="登录"><input type="reset" value="重置"></form>
</body>

可见通过get方式点击提交会将表单内容显示在地址框中，降低了安全性。而用post提交则无此现象。