在学习HTML——form表单中的label标签时的一点小体会

在我啃了一遍书本之后，开始了在慕课看视频的过程，从最开始的HTML+CSS的基础课程看起，在第5-9小节讲到了form表单的label标签，

         首先看一下慕课的讲解：

        label 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 label标签相关连的表单控件上）。然后她提到了一个特别注意：

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

 

        再来看一下W3CSchool对于label标签的定义和用法：

 

         <label> 标签为 input 元素定义标注（标记）。

         label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

         <label> 标签的 for 属性应当与相关元素的 id 属性相同。

          同样的，W3CSchool对于label标签的用法中也提到了<label> 标签的 for 属性应当与相关元素的 id 属性相同。那么这一要求到底是起到什么作用的呢，在慕课的讲解中并没有一个直观的解释，但是在W3CScho中给了一个解释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

在这里引起我注意的就是绑定这个词。以慕课上的的代码为例子

你对什么运动感兴趣：<br />
  <label for="jog">慢跑</label>
  <input type="checkbox" name="jog" id="jog" /><br />
  <label for="climb">登山</label>
  <input type="checkbox" name="climb" id="climb" /><br />
  <label for="basketball">篮球</label>
  <input type="checkbox" name="basketball" id="basketball" />

 

          这组代码实际的作用是，在我的鼠标单击慢跑时，浏览器会自动的帮我把焦点相应的转到与慢跑的label标签for属性的值相同的id属性所在的input标签，实际的显示效果就是如下图，在单击慢跑时，它右侧的复选框被选中。

在当时，我主观形象的认为，绑定就是将这一行构成一个整体，点击这一行的哪个部分都视作在点击复选框。然而后来我认识到绑定不应该是这种显式的构造整体，所以我又写了下面这段代码：

 

你对什么运动感兴趣：<br />
  <label for="jog">慢跑</label>
  <input type="checkbox" name="jog" id="climb" /><br />
  <label for="climb">登山</label>
  <input type="checkbox" name="climb" id="jog" /><br />
  <label for="basketball">篮球</label>
  <input type="checkbox" name="basketball" id="basketball" />

          这组代码实际的作用是相同的，在我的鼠标单击慢跑时，浏览器会自动的帮我把焦点相应的转到与慢跑的label标签for属性的值相同的id属性所在的input标签，实际的显示效果就是如下图，在单击慢跑时，它下方右侧的复选框被选中。这是因为，此时与慢跑的label标签for属性的值"jog"相同的id属性值"jog"所在的input标签是位于第二行的。

 

         通过这两组代码的对比，应该可以比较明显的看出绑定这个事件的具体表现。

 

        虽然label这个标签的使用是非常简单的，但也希望有人能够通过我的这篇博文，充分认识到for属性的值与id属性值相同的必要，避免由于这点小的失误造成代码的错误。

        作为作为刚刚走在前端这条路上的新手，虽然可能很多人都知道了label标签的正确用法，我还是决定下下来，作为自己学习路上的见证。