关于label和input嵌套问题

81 阅读 0 评论 54 点赞

我是靠谱客的博主阳光小蝴蝶，最近开发中收集的这篇文章主要介绍关于label和input嵌套问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

label有一个辅助功能，那就是for属性绑定对应的值可以快速定位到对应的input。首先来看一下label的for绑定的值：

<label for="agree1">合同1</label>
<input type="checkbox" value="合同1" id="agree1">

以上效果是：点击“合同1”三个字，可以实现复选框的选中与取消，而不是特意点击到复选方框才能切换选中状态。

可以看出for绑定的值是input的id。
其实，如果dom元素的id名称不和js内置对象属性或全局变量有重名的情况下，该名称能从window原型链上进行查找的属性，Firefox、Chrome、IE 9-11都支持，没有形成标准，而且容易污染全局，造成各种冲突和错误，不推荐使用。

有时候表单项很多，如果都实现这种效果的话，定义一大堆id显然是不合理的。这时，可以用label包裹input标签来实现这种效果：

		<label >合同1
			<input type="checkbox" v-model="agree" value="合同1" id="agree1">
		</label>

点击文字就可以直接聚焦到复选框啦

以上就是阳光小蝴蝶为你收集整理的关于label和input嵌套问题的全部内容，希望文章能够帮你解决关于label和input嵌套问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。