表单高级和表格高级

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

猜你喜欢

转载自blog.csdn.net/D321xiaoding/article/details/81610260