label标签的for属性

10 篇文章 0 订阅
label标签通常是写在表单(form)内的,他与一个普通的span最大的不同,就是可以和表单元素配对,比如文本框,单选框,复选框。而配对的方法,就是通过label的for属性。

比如

<input type="text" name="" id="text" /><label for="text">一个label,配文本框</label><br/>  

<input id="User3" type="radio" name="gender" value="3">

<span for="User3">一个span</span>

<label for="User3">label配radio</label>
测试以上代码,你会发现点击“配文本框”的label时,它前面的input:text标签获得焦点了(可输入)!而点击“配radio”时,它前面的单选框radio就被选中了;但点击“一个span”时,单选框不会有什么反应,虽然它们离得更近。

这些只是因为label的for属性。它为label指定了一个目标,一般是一个form表单内元素的ID,这样就可以把这个label与该ID元素关联起来,当点击label时,就可以让该ID也获得焦点!

代码中我也给span加上了for,但没有作用。这就是span与label的区别了。

如果你不想给label加for,但又想把input元素后面的文字和input本身关联起来,那你也可以这样:

<label><input type="checkbox" name="aksd" id="aksd" /> 几个字</label>
就是用label把input包起来。这样的效果与input后紧跟加for的label效果相同:点击文字即可选中复选框。

同样,把代码中的label换成span就不行了。

注意:label包input的方法,在IE6下无效!

来自于:http://www.cnblogs.com/lixlib/archive/2011/10/19/label-for.html
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值