HTML基础：label标签的for属性

HTML基础：label标签的for属性

1.基本用法：

将一个 <label> 和一个 <input> 元素相关联

可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，

让用户更容易激活这个元素。将一个 <label> 和一个 <input> 元素匹配在一起，

你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和  <input> 的 id 一样。

另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在

2.示例：

2.1第一种就是隐式关联，只要把关联的元素放到label里面即可

<label>Click me <input type="text"></label>

只要点击click me那个区域也能激活input框的input的focus事件

2.2 第二种就是使用 for 属性，关联inpt上的id

<label for="username">Click me</label>
<input type="text" id="username">

也能做到相同的效果

3.总结

  	其实label跟span 这些行内元素没什么区别，设置样式什么都一样，不过最常见的就是form表单中跟input
 标签配合，获得更好的用户体验和更语义化的编程习惯