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加阻止事件冒泡;

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM