label元素浅析

来源：互联网发布：视频合并软件绿色版编辑：程序博客网时间：2024/06/05 10:11

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元素，但又要实现表单元素的关联，那么你可能对会其他元素进行监听，当其他元素触发时，同时模拟触发表单元素的事件。

阅读全文

0 0