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控件了。