label元素浅析

最新推荐文章于 2023-09-20 22:15:31 发布

sinat_32290679

最新推荐文章于 2023-09-20 22:15:31 发布

阅读量1.4k

点赞数 2

分类专栏： html 文章标签：标签

本文链接：https://blog.csdn.net/sinat_32290679/article/details/77816484

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.相信很多人都使用过label标签，那么label标签到底是起到了什么作用呢？下面就来聊聊label标签的作用。

要知道一个标签的作用是啥，最好的办法是看官方文档。

下面是官方文档对label标签的解释

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.

翻译过来就是，label元素就是用户界面的标题，这个标题可以与一个指定的表单控制联系在一起，其方式有两种，一种是用label元素的for属性来指定，另一种是将表单放在label元素里面。

the attribute’s value must be the ID of a labelable element in the same tree as the label element

for属性一般用的是要控制的表单的id。
也就是说，将label和表单元素联系在一起，下面看例子

<html>
<head>
 <style type="text/css">
   div{
     background:red;
     width:40px;
     height:40px;
     }
  </style>
</head>
<body>
<label>
     <div >点我</div>
     <input type="radio" name="sex" id="male" />
</label>
<script type="text/javascript">
       var input=document.getElementById('male');
       var div=document.getElementsByTagName("div")[0];
           input.onclick=function(){
                console.log("click input male")
           };
           div.onclick=function(){
               console.log("click div")
            };
  </script>
 </body>

上面代码中，通过将div和表单元素放在同一个label里面来实现两者的关联，同时为两者分别增加了点击事件。

当点击红色div时，其输入的结果如下所示：
这里写图片描述

同时input元素也变成选中状态
这里写图片描述

如果将label元素改为div元素则没用这种效果

<html>
<head>
 <style type="text/css">
   div>div{
     background:red;
     width:40px;
     height:40px;
     }
  </style>
</head>
<body>
<div>
     <div >点我</div>
     <input type="radio" name="sex" id="male" />
</divl>
<script type="text/javascript">
       var input=document.getElementById('male');
       var div=document.getElementsByTagName("div")[0].childNodes[2];
           input.onclick=function(){
                console.log("click input male")
           };
           div.onclick=function(){
               console.log("click div")
            };
  </script>
 </body>

点击红色div结果如下：
这里写图片描述

这里写图片描述

可见此时红色div没有和input关联在一起。

当然还有第二种方法，就是设置label的for属性

<html>
<head>
 <style type="text/css">
   div{
     background:red;
     width:40px;
     height:40px;
     }
  </style>
</head>
<body>
<label for="male"><div>点我</div></label>
<input type="radio" name="sex" id="male" />
<script type="text/javascript">
       var input=document.getElementById('male');
       var div=document.getElementsByTagName("div")[0];
           input.onclick=function(){
                console.log("click input male")
           };
           div.onclick=function(){
               console.log("click div")
            };
  </script>
 </body>

结果是一样的，且可以不用将表单元素放在label标签内部。

label元素的好处

可以增加表单元素的可响应区域范围。
点击表单元素外周围的区域即可以触发表单元素的事件
同时避免了用javascript实现元素之间的关联。
想想如果没有label元素，但又要实现表单元素的关联，那么你可能对会其他元素进行监听，当其他元素触发时，同时模拟触发表单元素的事件。

sinat_32290679

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
label元素浅析

1.相信很多人都使用过label标签，那么label标签到底是起到了什么作用呢？下面就来聊聊label标签的作用。要知道一个标签的作用是啥，最好的办法是看官方文档。下面是官方文档对label标签的解释The label element represents a caption in a user interface. The caption can be associated with a spec
复制链接

扫一扫