容易被忽略的label标签
原始作用
label标签是HTML原生的标签,其原始的作用参考这里
label 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
label 标签的 for 属性应当与相关元素的 id 属性相同
用户体验
label在提高用户体验的作用是非常大的,参考下面一段代码
<input type="radio" name="demo" value="1"/>选项1
<input type="radio" name="demo" value="2"/>选项2
<input type="radio" name="demo" value="3"/>选项3
<input type="radio" name="demo" value="4"/>选项4
<input type="radio" name="demo" value="5"/>选项5
渲染在浏览器的效果是,一排并列的单选,但是你一定要选到单选的圆圈上,才能把选项点上
假如我们把代码改成
<input type="radio" id="demo1" name="demo" value="1"/><label for="demo1">选项1</label>
<input type="radio" id="demo2" name="demo" value="2"/><label for="demo2">选项2</label>
<input type="radio" id="demo3" name="demo" value="3"/><label for="demo3">选项3</label>
<input type="radio" id="demo4" name="demo" value="4"/><label for="demo4">选项4</label>
<input type="radio" id="demo5" name="demo" value="5"/><label for="demo5">选项5</label>
则用户体验一下子提高了,因为当你点击文字的时候,对应的单选圆圈就勾上了。当然如果你觉得每个radio都要起个id太麻烦,还可以这样
<label><input type="radio" name="demo" value="1"/>选项1</label>
<label><input type="radio" name="demo" value="2"/>选项2</label>
<label><input type="radio" name="demo" value="3"/>选项3</label>
<label><input type="radio" name="demo" value="4"/>选项4</label>
<label><input type="radio" name="demo" value="5"/>选项5</label>
可以在少死很多脑细胞(因为要起id名!)的情况下达到相同的用户体验。
移动端
在移动设备上,由于传统的鼠标变成手指,点击的精确度差了很多,所以我们有必要提高input获得焦点的区域。这时候label的作用就非常大了,参考以下代码
.mobi-input{
display: block;
width: 300px;
height: 30px;
}
<label class="mobi-input">提示1<input type="text" name="demo"/></label>
调整.mobi-input的定义,我们可以较为自由地定义input获得焦点的盒子大小,从而达到上述目的。
兼容性
在三星的手机上,使用上述代码,除了input在获得焦点时会有很明显的outline外,还会把label的innerText变成input的placeholder(视觉上是这样的)。一开始看到这个问题,一般人会这样解决:
.mobi-input{
display: block;
width: 300px;
height: 30px;
}
.mobi-input input,.mobi-input input:focus{
outline:none;
}
<label class="mobi-input">提示1<input type="text" name="demo" placeholder=""/></label>
然后发现是不能解决的!
于是我在网上找一些现成的UI框架,然后用手机上,兼容性好的参考其源代码,终于找到一款UI:
http://joapp.com/live/samples/kitchensink/index.html
能解决这个问题,查看其代码,原来非常简单的一句contenteditable="true"就能解决了~~~~
.mobi-input{
display: block;
width: 300px;
height: 30px;
}
<label class="mobi-input">提示1<input type="text" name="demo" contenteditable="true"/></label>
然后就可以基于以上基础去封装个性化的移动设备UI控件了。
转:http://www.cnblogs.com/p2227/p/label_tag.html