黑马程序员技术交流社区

标题: label标签加for与不加for属性的区别 [打印本页]

---

作者: 庭院深深深几许    时间: 2019-3-7 09:46
标题: 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框的筛选

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


　　注：这种写法label标签是不起作用的
　　2，不加for标签，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上


　　注：包裹标签，点击，响应两次，即本身出发和触发后冒泡到。
　　解决方法：1把label的事件放到input上;2给input加阻止事件冒泡;

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2