label 标签及其 for 属性

easy

<label> 标签为 input 元素定义标注(标记)。比如：

<form>
  <label >Male</label>
  <input type="radio" name="sex" id="male" />

这段代码的效果为：

这里的 input 元素是一个单选按钮，而 <label> 标签就是为这个元素做了一个标记，其名为 Male 。

可以运行上面的这个代码，你会看到，你将鼠标停留在 Male 区域，并点击一下，这个按钮并不会被选择。但是你如果为 <label> 标签添加一个 for 属性并绑定到该 input 元素的 id 属性值上，那么当你那么做时，按钮就会被选择，代码如下：

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />

上面，for 属性值和 input 元素的 id 属性值是一样的，也就是说 for 这个属性绑定到 input 这个标签的 id 上。

再来比较另外一个例子：

<label for="Groad">我们的网址:</label>
<input type="text" name="domain" id="Groad" />

上面的这段代码的显示效果如下：

我使用了双核浏览器( Chrome 和 IE 内核)来测试它。当用 chrome 内核来浏览这个页面时，不会看到任何差别。但是换到 IE 时，就可以看到有细微的区别了：
当我们点击“我们的网址”这个标签时，你会看到文本框里有一个光标在闪动；如果你去掉 for 这个属性时，当你再点击“我们的网址”这个标签时，你不会看到有光标在文本框里闪动。