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

2018/03/06 16:04
阅读数 11

在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的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 属性的值。

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

[html]  view plain  copy
 
  1. 你对什么运动感兴趣:<br />  
  2.   <label for="jog">慢跑</label>  
  3.   <input type="checkbox" name="jog" id="jog" /><br />  
  4.   <label for="climb">登山</label>  
  5.   <input type="checkbox" name="climb" id="climb" /><br />  
  6.   <label for="basketball">篮球</label>  
  7.   <input type="checkbox" name="basketball" id="basketball" />  

 

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

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

 

[html]  view plain  copy
 
  1. 你对什么运动感兴趣:<br />  
  2.   <label for="jog">慢跑</label>  
  3.   <input type="checkbox" name="jog" id="climb" /><br />  
  4.   <label for="climb">登山</label>  
  5.   <input type="checkbox" name="climb" id="jog" /><br />  
  6.   <label for="basketball">篮球</label>  
  7.   <input type="checkbox" name="basketball" id="basketball" />  

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

 

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

 

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

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部