<label>标签for属性的使用

最新推荐文章于 2022-12-19 11:40:10 发布

weixin_33720078

最新推荐文章于 2022-12-19 11:40:10 发布

阅读量310

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/jaeger/1754075

本文介绍了HTML中Label标签的基本用途及其与Input标签之间的关联方式，包括如何通过for属性建立显式关联及通过标签包裹建立隐式关联，使得点击Label标签能够使对应的Input获得焦点。

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

<label>是我们经常是用到的标签，一般用在<input>标签之前，用来指示该输入框需要的信息。但<label>标签还有个for属性，可以关联<input>的id属性。那for属性究竟是用来干什么的呢，我们来看看下面的场景：

我们常常看到在有些网页上面，要往一个<input>里面输入内容，我们可以点击这个<input>让其获得焦点，也可以点击前面的<label>让<input>获得焦点。而for属性就是用来建立<label>和<input>之间这种关联关系的。

用for属性建立的关联称为显示关联，还可以让<label>标签包含<input>，建立隐式关联。

<html>
    <body>
        用for属性建立显式的关联：
        <label for="name">姓名:</label>
        <input type="text" id="name"/>
        <br/>
        让label包含input建立隐式的关联：
        <label>
            性别: <input type="text" id="gender" />
        </label>
    </body>
</html>

在上面点击“姓名”或者“性别”标签都可以让相应的<input>获得输入焦点。