CSS中tabIndex、label、fieldset标签学习

本文链接：https://blog.csdn.net/laixiaobailing/article/details/39499197

本文介绍了表单中tabIndex属性的作用及用法，通过设置该属性可改变表单元素的Tab键导航顺序。此外还介绍了label标签如何绑定input元素，并使用fieldset与legend元素对表单进行分组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>