在学习HTML——form表单中的label标签时的一点小体会
来源:互联网 发布:多线程编程面试 编辑:程序博客网 时间:2024/05/17 02:04
在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的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标签,实际的显示效果就是如下图,在单击慢跑时,它右侧的复选框被选中。
在当时,我主观形象的认为,绑定就是将这一行构成一个整体,点击这一行的哪个部分都视作在点击复选框。然而后来我认识到绑定不应该是这种显式的构造整体,所以我又写了下面这段代码:
这组代码实际的作用是相同的,在我的鼠标单击慢跑时,浏览器会自动的帮我把焦点相应的转到与慢跑的label标签for属性的值相同的id属性所在的input标签,实际的显示效果就是如下图,在单击慢跑时,它下方右侧的复选框被选中。这是因为,此时与慢跑的label标签for属性的值"jog"相同的id属性值"jog"所在的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属性值相同的必要,避免由于这点小的失误造成代码的错误。
作为作为刚刚走在前端这条路上的新手,虽然可能很多人都知道了label标签的正确用法,我还是决定下下来,作为自己学习路上的见证。
- 在学习HTML——form表单中的label标签时的一点小体会
- HTML:form表单中的label标签
- 【Html】form表单中的label标签
- form表单中的label标签
- form表单中的label标签
- form表单中的label标签
- form表单中的label标签
- HTML+CSS基础课程之form表单中的label标签
- 我学习android的一点小体会
- setText()的一点小体会
- myslq的一点小体会
- 5-9form表单中的label标签
- 有关学习oracle数据库的一点小体会
- HTML中的Label 在表单中的应用
- java异常的一点小体会
- 处理bug反馈的一点小体会
- 本人,人生的一点小体会
- 关于JS的一点小体会
- 搞不清FastCgi与PHP-fpm之间是个什么样的关系
- Mysql 查看使用命令行查看数据库和表,字段等信息
- md5密码加盐
- Eclipse快捷键 10个最有用的快捷键
- ios7 页面适配问题---1
- 在学习HTML——form表单中的label标签时的一点小体会
- 日常代码
- pid max导致fork: Cannot allocate memory 的分析及解决办法
- 有界面(Activity或其他View)的SDK项目混淆发布
- android studio Error:(1, 1) 错误: 非法字符: '\ufeff' 解决方案
- 丰田阿尔法(Alphard)原车屏升级效果
- 洛谷 P1541 乌龟棋
- List,Map和Set的区别
- Ubuntu系统下android开发环境配置