label标签的for属性

 

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

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

比如

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

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

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

1. <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各自放在八竿子打不着的地方，但依然彼此关联——多么忠贞而催人泪下的爱情啊！

本文链接: http://www.jo2.org/archives/224.htm.转载请保留.