表格及表单元素

如何构建一个表格？（横行竖列）

<table> 表格
	<caption>表格标题</capation>
	<tr>  行
		<th>内容</th>  单元格（带有加粗效果）
		<td>内容</td>  单元格
	</tr>
</table>

一.表格的属性

名称	值	说明
width	数值	宽度
height	数值	高度
background-color	rgb(0,0,0) / 英文颜色 / 十六位进制数	背景颜色
background	URL图像地址	背景图片
border-collapse	collapse	合并相邻单元格边框
border-spacing	0px	单元格间距（必须加给table）

注：table中默认有一个tbody标签

二.行分组

<thead> </thead> 表头（只能包含一个）
<tbody> </tbody> 表体必须存在的标签（可包含多个）
<tfoot> </tfoot> 表尾（只能包含一个）

三.表格的相关属性

border =“表格的边框”
cellspacing=“单元格与单元格之间的间距”
cellpadding=“单元格与内容之间的空隙”

四.水平对齐方式（css）

属性名：text-align
属性值：left 左对齐 / center 居中 / right 右对齐

五.垂直对齐方式（css）

属性名： vertical-align
属性值: top 顶对齐/ middle 居中 / bottom 底对齐 / baseline（基线）

六.合并单元格属性

colsoan="所需要合并的单元格的列数"合并列
rowspan="所要合并的单元格的行数"合并行

表单

1. 收集用户数据
2. 组成：（1）表单域 form （2）表单控件 input （3）提示信息
3. 功能结构
   <form>表单控件</form>

属性	值	说明
name	字符串	表单的名字
method	get/post	数据传输方式
action	URL	传输地址

1. form必须有action属性，表示提交地址
2. 所有需要提交的数据，input必须有name属性
3. input按钮的文字，使用value属性表示
4. input必须放在form标签内才能提交
5. get 表示获取数据（用户可见），能提交大量数据
6. post表示提交数据（用户不可见），可以提交大量数据

常用的表单控件

1. 文本框

<input type="text" name="控件名称" value="值" size="控制显示宽度" maxlength="控件数据输入的最大长度" 
readonly="'readonly"(只读) placeholder="提示信息" disabled="disabled"(禁用) />

2. 密码框

<input type="password"  placeholder="密码"  />

3. 多行文本控件

<textarea name=" " id="" cols="字符宽度" rows="行数"></textarea>

4. 单选勾选控件

<input type="radio" name="" value="值"  checked="checked"/>
单元按钮里的name属性必须写，同一单选里的name属性值必须一样

5. 复选框

<input type="checkbox" name="like" value="" />
复选按钮里的name属性必须写，同一复选按钮里的name属性值必须一样
checked="checked" 表示默认被选中，可简写成checked
disabled 表示禁用
enabled 可用状态

6. 下拉框控件

<select name="" >
    <option name=" value="表单提交时被发送到服务器的值" selected="selected"(选中值)>选择内容</option>
</select>
分组：<optgroup label="分组名称"></optgroup>

7. 发送表单按钮

<input type="submit"  value="按钮内容"  />

8. 重置表单按钮

<input type="reset"  value="按钮内容"  />
<button>按钮</button>

9. 上传文件按钮

<input type="file"  value="按钮内容"  />

10. 图像域

<input type="image"  src="" alt="上传图片"  />

11. 隐藏文本框

<input type="hidden"  value="值"  />上传隐藏的值/字段

12. 提示信息标签（将提示信息及相应的表单控件关联）

<label for="user">提示信息</label>
<input type="text" id="user">

13.表单字段集

<fieldset></fieldset>对表单中的元素分组，可以嵌套
字段级标题<legend></legend>可插入一个标题，必须是<fieldset></fieldset>里的第一个元素