label标签加for与不加for属性的区别

wtt52800

 

label标签加for与不加for属性的区别

w3c的标准用法　　

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

　　<label for="female">Female</label>
　　<input type="radio" name="sex" id="female" />
</form>

 

 

还有一种用法：<label>包裹<input>标签

<form action="" class="box">
　　<label for="btn1">
　　　　<input type="radio" name="aa" id="btn1"/>
　　　　我是单选按钮1
　　</label>
　　<label for="btn2">
　　　　<input type="radio" name="aa" id="btn2"/>
　　　　我是单选按钮2
　　</label>
</form>

注：这种用法代码看起来比较规整，多个单选或者复选框时更能在视觉上体现代码的规整；

但是这种写法需要注意的问题是：for属性，

　1，加了for属性就必须要有值（值为内元素input的id），如果只是一个空的for属性，则label失效，无法关联到内部的input框的筛选

 注：这种写法label标签是不起作用的

 

　2，不加for标签，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

　　注：<label>包裹<input>标签，点击<label>，<label>响应两次，即<label>本身出发和<input>触发后冒泡到<label>。

　　解决方法：1把label的事件放到input上；2给input加阻止事件冒泡；