haizlin
[html] 第6天 label都有哪些作用？并举相应的例子说明
- label通常用来关联一个表单控件
<label for="hobby">爱好</label>
<input id="hobby" type="checkbox" value="0">
规定 label 字段所属的一个或多个表单。 http://www.w3school.com.cn/tiy/t.asp?f=html5_label_form
<label>的作用
表示用户界面中某个元素的说明 增加命中区域，屏幕阅读器可以读出标签。使使用辅助技术的用户更容易理解输入 哪些数据
用法
单击关联标签激活input，需给input一个id属性，给label一个for属性，设为同一个值
注意事项
一个 input 可以与多个标签相关联。 标签本身并不与表单直接相关。它们只通过与它们相关联的控件间接地与表单相关联。 当点击或者触碰（tap）一个与表单控件相关联的
前面那些同学已经说到input与label互相关联的机制，这里我就说一下具体实例：
- 利用
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>
- 结合
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 的实例：摩斯密码键盘
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>
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">
label 标签为input元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用zhi户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
作用
label是用来对用户界面中某个元素的说明
使用最多的场景
通常用来关联表单控件
例子
<form>
<label for="username">username</label>
<input id="username" name="username" />
</form>
作用
<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> 元素也一样。
<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属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
label元素可以为鼠标用户改进可用性。如果在label元素内点击文本，就会触发此控件。
例子：
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
</form>
- for属性：规定label绑定到哪个表单元素
- form属性：规定label字段所属的一个或多个表单。
label的for属性与input的id绑定，如果点击label区域，会自动选中输入框。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
</form>
lable的作用 表示用户界面中某个元素的说明 增加命中区域，屏幕阅读器可以读出标签，使用辅助技术的用户更容易输入数据 lable与input标签进行关联
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">
