您的位置：首页 > Web前端 > CSS

CSS中tabIndex、label、fieldset标签学习

2014-09-23 15:29 477 查看

1、tabIndex 属性可设置或返回单选按钮的 tab 键控制次序。

语法

radioObject.tabIndex=number

在填写表单的时候（注册登录或其它），有很多用户都是不通过鼠标，而直接按Tab键跳到下一个文本框的，等到所有的东东都填好，然后是提交，这是一个非常好和方便的功能。

如果不想某个表单项被获取焦点，可以tabindex=-x，让tabindex的值为负，这样的话Tab就会直接跳过。

下面用一个简单的表单做例：

<form name="testform" method="post" action="">
<input type="text" name="t1" tabindex="1" />
<input type="text" name="t2" tabindex="2" />
<input type="text" name="t3" tabindex="3" />
<input type="submit" name="t4" value="SendInfo" tabindex="-1" />
</form>

使用Tab键，获取焦点的顺序就是通过tabindex的值大小来排序的。上面的例子依次获得焦点的是t1, t2, t3, 到t4的时候，由于TabIndex的值为-1，所以t4不会获得焦点，而是直接跳到下一个获取焦点的元素上。Tab焦点根据值由小到大被获得。

2、label 标签为input 元素定义标注（标记）

属性：

for：规定 label 绑定到哪个表单元素。

用法：<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text"> //点击姓名，鼠标的焦点会自动跳到input对话框里

forname：规定 label 字段所属的一个或多个表单。（自己基本没怎么看到过这个东东）

3、fieldset 元素可将表单内的相关元素分组。

<legend> 标签为 fieldset 元素定义标题。

个人认为，该标签作用是修饰页面，当前页面比较混乱时，适当的添加legend来将页面划分开来，看起来比较不错。

示例：

<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航