label中for属性的应用

最新推荐文章于 2025-03-04 06:00:00 发布

roscoe054

最新推荐文章于 2025-03-04 06:00:00 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css label 标签表单

本文链接：https://blog.youkuaiyun.com/roscoe054/article/details/38927881

CSS 专栏收录该内容

1 篇文章

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">我们在使用type为radio的input元素时候，经常使它们与其对应的表单元素绑定。以前我经常使用的方式是在一个label标签里包含input及其说明文字，这样就可以实现绑定了。</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">今天我在网上查阅资料发现了一种更好的实现方式：</span>

<form>
   	<label for="dog">狗</label>
    	<input type="radio" name="animal" id="dog" />
    	<label for="cat">猫</label>
    	<input type="radio" name="animal" id="cat" />
</form>

这样也同样可以实现，同时这样有一个好处，解释文字和input标签不一定连在一起，而是可以在任意位置，只要for和id对应的值相同即可。

<form>
   	<label for="cat">猫</label>
    	<input type="radio" name="animal" id="dog" />
    	<br />
    	<label for="dog">狗</label>
    	<input type="radio" name="animal" id="cat" />
</form>

这样的话点击猫的文字，仍然是id为cat的input标签被选中。