表格表单
1 表格
- 表格标签
- 表格重要属性
- 表格的css属性
1.1 表格标签
(1)<table>:定义表格，表格的边界标签，必定包裹表格的其它元素标签。
(2)<tr>:定义表格的行。
(3)<th>:定义表格的表头，需要被<tr>包裹。
(4)<td>:定义表格的单元格，需要被<tr>包裹。
(5)<thead>:定义表格的页眉，表格分组标签，可将表格分割。
(6)<tbody>:定义表格的主体，表格分组标签，可将表格分割。
(7)<tfoot>:定义表格的页脚，表格分组标签，可将表格分割。如果使用thead,tfoot,tbody中的元素就必须使用全部元素，他们出现顺序是thead,tfoot,tbody，这样浏览器就可以在收到所有数据前呈现页脚了。
(8)<caption>:定义表格标题。
1.2 表格重要属性
- colspan=“value” 合并列
- rowspan=“value” 合并行
- align=“left/center/right” 水平对齐
- valign=“top/bottom/middle/baseline” 垂直对齐方式
- cellpadding=“value” 单元格边沿与其内容之间的空白
- cellspacing=“value” 单元格之间的空白
注意：这些属性中colspan and rowspan应写在单元格标签里，另外value是数值，不带单位。
1.3 表格的css属性
- caption-side:top/bottom/left/right;设置表格标题放置的位置。（left，right位置只有火狐识别，top，bottom IE7以上版本支持，IE7以下版本值识别top,不支持其它）
- border-spacing:value;单元格间距离。（该属性必须给table添加）
- border-collapse:separate(边框分开)/collapse(边框合并)
- empty-cells:show/hide;无内容单元格显示、隐藏。
- table-layout:auto/fixed;
说明：
自动表格布局:列的宽度是由列单元格中没有折行的最宽的内容设定的。缺点:较慢(需要在确定最终的布局前访问表格中的所有内容)
固定表格布局:加快运行的速度,允许浏克器更快的对表格进行布局。缺点:不太灵活
2 表单
- 表单作用：收集信息
- 表单组成：
- 表单域
- 表单控件
- 提示信息
2.1 表单域
语法：
<form [属性名称="值"]>
<form>常用属性：
- name=“value”;规定表单名称
- action=“value”;提交表单URL，可用于点击按钮实现跳转，value为跳转目标位置。
- method=“get/post”;提交方式，一般是post更安全。
- enctype=“value”;规定在发送表单数据之前进行编码。
- target="_black/_self/_parent/_top";何处打开表单URL。
H5新增属性：
- autocomplete=“on/off”;是否启动表单自动完成。
- novalidate=“novalidate”;不验证表单。
示例：
<form name="xxx" method="get" action="www.baidu.com" enctype="multipart/form-data">
</form>2.2 表单控件
- (1)文本框
<input type= “text” [value= “默认值”] />
- (2)密码框
<input type- “password” [placehdder= “密码”]/> - (3)提交按钮
<input type= “submit” value= “按钮内容” /> - (4)重置按钮
<input type= “reset” value= “按扭内容” /> - (5)单选框/单选按升
<input type= “radio” name= “xxx” [hecked= “cheded”]> - (6)按钮
<input type=“button” value= “按钮内容”> - (7)复选框
<input type= “checkbox” name= “xxx” [disabled=“disabled”] /> - (8)下拉菜单
<select name= “xxx” >
<option>菜单内容</select> - (9)多行文框
<textarea name=“xxx” cols=“字符宽度” rows= “行数”>
2.2 表单高级
- (1)表单字段集
<fieldset></fieldset>
功能：相当于一个方框，在字段集中可以包含文本和其它元素，该元素用于对表单中的元素进行分组并在文档中区别标出文本，fieldset元素可以嵌套. - (2)字段集标题
<legend></legend>
功能：legend元素可以在fieldset对象绘制的方框插入一个标题，legend元素必须是fieldset的第一个元素。字段集和标题效果如下：
(3)表单原素-
上传文件框（文件域）:<input type=“file” />
-
图像域：<input type=“image” width=“50” height=“50” border=“2” src=“上传图片”>
-
提示信息标签：<lable for=“绑定控件id名”></lable>
lable元素不会向用户呈现任何特殊效果，不过，它为鼠标用户改进了可用性，如果在label元素内点击文本，就会触发此控件，就是说，当用户选择该标签时，浏览器就会自动将交点转到和标签相关表单控件上。
-
3 表格表单示例
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格表单</title>
<style>
th,
td {
width: 60px;
height: 30px;
}
#td1 th {
background-color: aquamarine;
}
#td1 td {
background-color: antiquewhite;
}
#td2,
#td1 {
float: left;
}
#td3 td,
#td3 th {
border-bottom: solid 2px blue;
}
#td3 th {
border-top: solid black 2px;
}
fieldset {
border: 2px solid gainsboro;
}
</style>
</head>
<body>
<table id="td1" cellpadding="5" cellspacing="1" border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>学历</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>男</td>
<td>18</td>
<td>本科</td>
</tr>
<tr>
<td>Rose</td>
<td>女</td>
<td>18</td>
<td>大专</td>
</tr>
<tr>
<td>张辉</td>
<td>男</td>
<td>24</td>
<td>硕士</td>
</tr>
<tr>
<td>丽红</td>
<td>女</td>
<td>19</td>
<td>本科</td>
</tr>
</tbody>
<tfoot>
</tfoot>
<caption>普通表格</caption>
</table>
<!-- 合并 -->
<table id="td2" cellpadding="5" cellspacing="1" border="1">
<caption>合并表格</caption>
<tr>
<!-- 合并列后，该列紧接着应该少写相应的列数，否则会被挤到表格外 -->
<th colspan="2">姓名</th>
<th>年龄</th>
<th>学历</th>
</tr>
<tr>
<td rowspan="2">Tom</td>
<td>男</td>
<td>18</td>
<td>本科</td>
</tr>
<tr>
<!-- 合并行后，该行紧接着应少写相应数量的单元格 -->
<!-- <td>Rose</td> -->
<td>女</td>
<td>18</td>
<td>大专</td>
</tr>
<tr>
<td>张辉</td>
<td>男</td>
<td>24</td>
<td>硕士</td>
</tr>
<tr>
<td>丽红</td>
<td>女</td>
<td>19</td>
<td>本科</td>
</tr>
</table>
<table id="td3" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>学历</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>男</td>
<td>18</td>
<td>本科</td>
</tr>
<tr>
<td>Rose</td>
<td>女</td>
<td>18</td>
<td>大专</td>
</tr>
<tr>
<td>张辉</td>
<td>男</td>
<td>24</td>
<td>硕士</td>
</tr>
<tr>
<td>丽红</td>
<td>女</td>
<td>19</td>
<td>本科</td>
</tr>
</tbody>
<tfoot>
</tfoot>
<caption>单线表格</caption>
</table>
<hr>
<form name="f1" action="form.htm" method="POST">
<fieldset style="width: 400px;">
<legend><b>个人信息</b></legend>
<label for="xm">姓名*</label>
<input type="text" id="xm"><br>
<label for="dz">地址*</label>
<input type="text" id="dz"><br>出生*
<select id="day">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select>
<select id="month">
<option value="1">Jan</option>
<option value="1">Feb</option>
<option value="1">Nov</option>
<option value="1">Dec</option>
</select>
<select id="year">
<option value="1">1997</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
</select>
</fieldset>
<fieldset style="width: 400px;">
<legend><b>其他信息</b></legend>
<fieldset>
<legend>你喜欢这个表单吗？*</legend>
<!-- 单选框一组name必须一致 -->
<input type="radio" name="r1">喜欢
<input type="radio" name="r1">不喜欢
</fieldset>
<fieldset>
<legend>你喜欢什么运动？*</legend>
<!-- 复选框一组name必须一致,属性disabled表示不可选 -->
<input type="checkbox" name="c1" disabled>足球
<input type="checkbox" name="c1">篮球
<input type="checkbox" name="c1">乒乓球
</fieldset>
<fieldset>
<legend>请写下你的建议*</legend>
<textarea name="text" id="t" cols="30" rows="10"></textarea>
</fieldset>
</fieldset>
<input type="submit" value="提交个人信息">
</form>
</body>
</html>
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
