表单高级和表格高级

关于表单
1、表单字段集

<fieldset></fieldset>

功能相当于一个方框，在字段集中可以包含文本和其他元素。
该元素用于对其它的元素进行分组，。
fieldset 元素可以嵌套，在内部可以设置多个fieldset 对象。

2、字段集标题

<legend></legend>

功能：legend元素可以在fieldset对象绘制的方框内插入一个标题，legend元素必须是fieldset内的第一个元素。

3、表单元素
（1）上传文件框

<input type="file" />

(2)图像域（图片按钮）

<input type="image" alt="" src="图片路径" />

4、提示信息标签

<lable for="绑定控件的id名" ></lable>

lable用来定义标签，为页面上的其它元素指定提示信息。要将lable元素绑定到其它的元素上，将lable元素的for属性设置成元素ID名相同。

eg：
<lable for="male">男</lable>
<input type="radio" name="sex" id="male" />

HTML5新增表单元素
1、datalist(下拉列表)
提供一个事先定义好的列表，通过id名与input进行关联，当在input内输入时就会有自动完成功能，用户就会看到一个下拉列表。

<input list="words" />
<datalist id="words">
    <option value="文字"/>
</datalist>

2、output
表示不同类型的的输出比如脚本的输出。（表单里面有应用）

新增的input属性

1、email:用来输入email地址，内容不是email地址格式时，则不允许提交，不检查email是否存在。
具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址。

2、url:专门用来输入URL地址的文本框，如果不是URL格式的则不允许提交。

3、number和ranger
number有max min step 属性，step是间隔。设了这些属性之后。不符合此规则，则不允许提交
range:数字滚动条，与number类似也有max min step ，它没有一个明显的数值表示当前值，但可以使用output输出当前值。

4、datetime 和 datetime-local
datetime类型用来输入UTC（国际）日期和时间的文本框。
datetime-local 用来输入本地的日期和时间，（兼容性好）

5、month和week
month类型是月份选择器，它的值为 年-月。
week类型是周选择器，它的值为 年-周。

6、search
用来输入搜索关键词的文本框，单击按钮将清空输入框内的内容。

7、color
提供了一个颜色选取器，值为16进制符号#ff0000；（只有opera Blackberry 支持。）

8、output
定义不同类型的输出计算结果的输出，或脚本输出，必须从属于表单，必须将它放在表单内部，或对它添加form属性。

9、自动验证
（1）required
可以应用在大多数输入元素上，如果元素内容为空，不允许提交，并且显示提示文字。
（2）p a t t e r n
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定的样式。

<input type="text" parttern="[0-9][A-Z]{3}" placeholder="输入一个数和三个大写字母"/>

placeholder:文本框处于未输入状态时文本框显示的提示文字。

10、autocomeplace：规定输入字段是否应该显示自动完成功能，属性值为off/on
当用户在字段开始键入时，会显示填写过的值。
用的时候要给<input>或者<form>加上name=“ ” 属性。

11、autofocus：给文本框选择框或者按钮控件加上该属性，打开该页面时，该控件会自动获取鼠标的焦点。一个页面只有一个。

12、multiple
可以输入一个或者多个值，每个值之间用 ， 逗号分开，如果获取其中的值 用<input type="email" multiple /> 还可以用于file。

关于表格

关于表格的css属性

1、单元格间距（加在table上）

border-spacing:数值加单位;

单元格与单元格之间的距离

2、合并相邻单元格边框

border-collapse:collapse;(边框合并)
border-collapse:separate;(边框分开，默认的)

3、没有内容的单元格显示或隐藏。

empty-cells:show(显示)
empty-cells:hide;(隐藏)

4、表格布局算法（让宽度不自动）

table-layout:auto(自动，默认值)
table-layout:fixed(固定宽度，不随内容多少而改变单元格的宽度。)

5、表格标题

<caption>标题内容</caption>

位置：caption-side : top/right/bottom/left
left和right只有火狐能识别。

<th>行标题</th>

th为表格的行标题，放在tr里面。

<tr>
    <th>标题</th>
</tr>

4、添加分组线

rules="grounps" (位于行组和列组之间的线条)（谷歌里面不能正常显示，有兼容问题）
rules="rows"(位于行之间的线条)
rules="cols"(位于列之间的线条)
rules="all"（位于行和列之间的线条）
rules="none"(没有线条)

5、table数据行分组

<theader></theader>(表头)
<tbody></tbody>（表体）
<tfoot></tfoot>（表尾）

一个table中可包含多个thead tbody tfoot

6、数据列分组（两种）
(1)

<colgroup span="数值加单位" ></colgroup>

(2)

<col span="数值加单位" />(兼容性不好)

注意：虽然col和colground具有相同的功能，但是我们只能使用colgroup元素来决定表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。