Fe-interview: [html] 第6天 label都有哪些作用？并举相应的例子说明

[haizhilin2013]

第6天 label都有哪些作用？并举相应的例子说明

[yxkhaha]

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

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

[haizhilin2013]

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

[hbl045]

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

[github-linong]

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

[tiyunchen]

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

[abin-jb]

<label>的作用

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

用法

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

注意事项

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

[MartinsYong]

前面那些同学已经说到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>

1. 结合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 的实例：摩斯密码键盘

1. 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>

[xcLtw]

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

[qhdxwdm]

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">

[blueRoach]

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

[giggleCYT]

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

[MrZ2019]

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

[buuug7]

作用

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

使用最多的场景

通常用来关联表单控件

例子

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