• label通常用来关联一个表单控件

<label for="hobby">爱好</label>
<input id="hobby" type="checkbox"  value="0">

@yxkhaha 还有别的用途，再想想，如果没想到就可以百度学习下，进一步了解。

文本显示，比div文本较优，不需理会宽高？

移动端呼起键盘？原理还是用来关联表单控件。不过用label比较好优化样式。

规定 label 字段所属的一个或多个表单。
http://www.w3school.com.cn/tiy/t.asp?f=html5_label_form

<label>的作用

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

用法

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

注意事项

一个 input 可以与多个标签相关联。
标签本身并不与表单直接相关。它们只通过与它们相关联的控件间接地与表单相关联。
当点击或者触碰（tap）一个与表单控件相关联的 时，关联的控件的 click 事件也会触发。

前面那些同学已经说到input与label互相关联的机制，这里我就说一下具体实例：

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>

2. 结合checkbox、radio表单元素实现纯CSS状态切换，这样的实例就太多了。比如控制CSS动画播放和停止。下面是一部分代码。详细实例地址

<input type="checkbox" id="controller">
<label class="icon" for="controller">
  <div class="play"></div>
  <div class="pause"></div>
</label>
<div class="animation"></div>

<style>
...
#controller:checked ~ .animation {
  animation-play-state: paused;
}
...
</style>

还有一个基于 radio 的实例：摩斯密码键盘

3. input的focus事件会触发锚点定位，我们可以利用label当触发器实现选项卡切换效果。下面代码选自张鑫旭《CSS世界》。实际效果链接

<div class="box">
  <div class="list"><input id="one" readonly>1</div>
  <div class="list"><input id="two" readonly>2</div>
  <div class="list"><input id="three" readonly>3</div>
  <div class="list"><input id="four" readonly>4</div>
</div>
<div class="link">
  <label class="click" for="one">1</label>
  <label class="click" for="two">2</label>
  <label class="click" for="three">3</label>
  <label class="click" for="four">4</label>
</div>

<style>
.box {
  width: 20em;
  height: 10em;
  border: 1px solid #ddd;
  overflow: hidden;
}
.list {
  height: 100%;
  background: #ddd;
  text-align: center;
  position: relative;
}
.list > input { 
  position: absolute; top:0; 
  height: 100%; width: 1px;
  border:0; padding: 0; margin: 0;
  clip: rect(0 0 0 0);
}
</style>

马克一下这个css计时器，有趣有趣

lable可以关联控件，可以和表单元素结合，使表单元素获得焦点。有两个属性，for和accesskey。
for 属性用来关联表单，accesskey属性设置快捷键。
for属性：
<label for="username">姓名</label><input id="username" type="text">

<input type="checkbox" id="a" value="haha" name="cn">
<label for="a" >haha </label>
<input type="checkbox" id="b" value="hehe" name="cm">
<label for="b" >hehe </label>

accesskey属性:
<label for="username" accesskey＝"N">姓名</label><input id="username" type="text">

关联input使其点击效果与点击input一致
1.改变input焦点
2.模拟button

label 标签为input元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用zhi户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label通常用来关联一个表单控件
爱好

作用

label是用来对用户界面中某个元素的说明

使用最多的场景

通常用来关联表单控件

例子

<form>
  <label for="username">username</label>
  <input id="username" name="username" />
</form>

label 可以和input元素绑定，用来把点击时的焦点集中于含有label的表单

关联表单控件
1.帮助获得焦点。
2.提供描述信息。
3.css实现远程遥控

lable通常会用来扩大选择点击的范围

作用

<label> 元素（标签）**表示用户界面中某个元素的说明

例子

简单的label

<label>Click me <input type="text"></label>

使用for属性

<label for="username">Click me</label>
<input type="text" id="username">

将一个 <label> 和一个 <input>元素相关联主要有这些优点：

• 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
• 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

其他使用事项：

• 关联标签的表单控件称为这个标签的已关联标签的控件。一个 input 可以与多个标签相关联
• 点击或者轻触（tap）与表单控件相关联的 <label> 也可以触发关联控件的 click 事件

若 <input>元素声明了 type="button" 和有效的 value 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。<button> 元素也一样。

作用一：用来关联一个表单控件
1.<label for="name">姓名:
2.<input type="text">

<label for='idName' >姓名</label>
<input type='text' id='idName' />

作用：
点击姓名，聚焦到输入框。

lable的作用:
关联表单控件，可以和表单元素结合，使表单元素获得焦点。
两个属性:for和accesskey
1.for

<label for="username">姓名</label>
<input id="username" type="text">

2.accesskey
功能:表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

<label for="inputBox" accesskey＝"N">姓名</Label>
<input id="inputBox" type="text">

注意:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

标签为input元素定义的标记。

label元素可以为鼠标用户改进可用性。如果在label元素内点击文本，就会触发此控件。

例子：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
</form>

• for属性：规定label绑定到哪个表单元素
• form属性：规定label字段所属的一个或多个表单。

1. 关联表单控件，增加命中区域
2. 屏幕阅读器可以读出标签。

label的for属性与input的id绑定，如果点击label区域，会自动选中输入框。

<form>
 <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
</form>

lable的作用
表示用户界面中某个元素的说明
增加命中区域，屏幕阅读器可以读出标签，使用辅助技术的用户更容易输入数据
lable与input标签进行关联

Button

lable可以关联控件，可以和表单元素结合，使表单元素获得焦点。有两个属性，for和accesskey。
for 属性用来关联表单，accesskey属性设置快捷键。
for属性：
<label for="username">姓名</label><input id="username" type="text">

<input type="checkbox" id="a" value="haha" name="cn">
<label for="a" >haha </label>
<input type="checkbox" id="b" value="hehe" name="cm">
<label for="b" >hehe </label>

accesskey属性:
<label for="username" accesskey＝"N">姓名</label><input id="username" type="text">