表单高级和表格高级？

1条回答我要回复

飘落的一丝回忆1159天前

关于表单 
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没有这个功能。