html中的label标签使用方法

php中世界最好的语言
发布: 2017-11-21 14:14:14
原创
9335 人浏览过

这次给大家介绍的是html中的label标签使用方法,我们都知道一个完整的表单是由表单标签

与其中包裹的各种表单控件组成的,那么LABEL标签就是一种常见的表单控件了。

先举个例子:

[html] view plain copy
<label for="email">E-mail:</label>  
<input type="text" id="email">
登录后复制

表单控件都是内联元素所以他俩会在一行显示。在网页中当我们点击E-mai字样或文本框时都会在文本框中出现光标,这个就是label标签的功能了。说白了label标签就是他所关联的表单控件的延伸,即鼠标点击了他,就会出现和点击他所关联的表单控件一样的效果。而这前提是label的for属性的属性值与想要关联的表单控件的id一样。

若不想用id和for关联还可用第二种方法。

[html] view plain copy
<label>E-mail:<input type="text"></label>
登录后复制

效果是和以前一样的。

当然其他表单控件也可以与label关联。比如下面的例子:

[html] view plain copy
<label for="a">a:</label> <input type="radio" id="a"><br>  
[html] view plain copy
<pre name="code" class="html" style="font-size: 14px;"><label for="b">b:</label> <input type="radio" id="b"><br>  
[html] view plain copy
<label for="c">c:</label> <input type="radio" id="c">
登录后复制

那你可能说,这label标签好想也没多大用嘛。

嗯,当然有用。除了增强用户体验外,还为行动不便人士上网提供了便利。比如说,视力障碍者是借助“网页朗读器”发出的声音来浏览网页的,若没有label标签的关联,上网者就在脑海中不能想象出那种对应性,不能很好理解网站表单所想表达的内容。再比如,肢体有缺陷的上网者对于鼠标的控制是很辛苦的,运用label后点击的目标变大了,有利于操作。

So,一个真正的好的页面既要能跨浏览器,还要能适配各种大小屏幕的设备,还应该对各类上网者(无论是老年人,还是有缺陷的人)提供便利。

html中的label标签使用方法就这么多,有需要的朋友可以保存一下,也请大家持续关注本站的其他更新

相关阅读:

HTML里的命名规则


怎样隐藏溢出DIV边框的内容


怎么用CSS修改鼠标样式

以上是html中的label标签使用方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板