label标签的for属性

说来羞煞人:我一直没搞懂label与一个span标签有什么不同,貌似显示方式及作用都一样的。刚才发现,其实label标签最大的不同就在于他的for属性。

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

比如

  1. <input type=“text” name=“” id=“text” /><label for=“text”>一个label,配文本框</label><br/>  

  2. <input id=“User3” type=“radio” name=“gender” value=“3”>  

  3. <span for=“User3”>一个span</span>  

  4. <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本身关联起来,那你也可以这样:

  1. <label><input type=“checkbox” name=“aksd” id=“aksd” /> 几个字</label>  

就是用label把input包起来。这样的效果与input后紧跟加for的label效果相同:点击文字即可选中复选框

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

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

但推荐input与label分离的模式,因为这样更灵活,你可以把input与label各自放在八竿子打不着的地方,但依然彼此关联——多么忠贞而催人泪下的爱情啊!

发表评论

电子邮件地址不会被公开。