label都有哪些作用

<label> 的作用

表示用户界面中某个元素的说明
增加命中区域 屏幕阅读器可以读出标签 使用辅助技术的用户更容易理解输入哪些数据

常用用法

单击关联标签激活input 需给input一个id属性 给label一个 for属性 设为同一个值

<input id="click">
<label for="click"></label>

注意

一个input 可以与多个label相关联
label本身并不与表单直接相关 他们只管通过与他们相关联的控件间接的与表单相关联
当点击或触碰 一个表单控件相关联的label时 关联的控件的click事件也会触发

具体用例

1.利用label模拟button 以解决不同浏览器原生button样式不同的问题

<input type="button" id="btn">
<label for="btn">Button</label>

<style>
input[type='button'] {
  display: none;
}

label {
  display: inline-block;
  padding: 10px 20px;
  background: #456;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 2px 4px 0 rgba(0,0,0,.3);
  border-radius: 2px;
}
</style>