HTML基础之label标签
来源:互联网 发布:软件开发工具有哪些 编辑:程序博客网 时间:2024/06/07 07:07
我们知道一个完整的表单是由表单标签<form></form>与其中包裹的各种表单控件组成的。label标签是一种常见的表单控件。它的作用是使用户在填写表单的项目时有更好的体验。比如说如下这个例子
<label for="email">E-mail:</label><input type="text" id="email">
显示效果如下:
表单控件都是内联元素所以他俩会在一行显示。在网页中当我们点击E-mai字样或文本框时都会在文本框中出现光标,这个就是label标签的功能了。说白了label标签就是他所关联的表单控件的延伸,即鼠标点击了他,就会出现和点击他所关联的表单控件一样的效果。而这前提是label的for属性的属性值与想要关联的表单控件的id一样。
若不想用id和for关联还可用第二种方法。
</pre><pre name="code" class="html"><label>E-mail:<input type="text"></label>效果是和以前一样的。
当然其他表单控件也可以与label关联。比如下面的例子:
<label for="a">a:</label> <input type="radio" id="a"><br>
<pre name="code" class="html" style="font-size: 14px;"><label for="b">b:</label> <input type="radio" id="b"><br>
<label for="c">c:</label> <input type="radio" id="c">
显示效果如下:
那你可能说,这label标签好想也没多大用嘛。
嗯,当然有用。除了增强用户体验外,还为行动不便人士上网提供了便利。比如说,视力障碍者是借助“网页朗读器”发出的声音来浏览网页的,若没有label标签的关联,上网者就在脑海中不能想象出那种对应性,不能很好理解网站表单所想表达的内容。再比如,肢体有缺陷的上网者对于鼠标的控制是很辛苦的,运用label后点击的目标变大了,有利于操作。
So,一个真正的好的页面既要能跨浏览器,还要能适配各种大小屏幕的设备,还应该对各类上网者(无论是老年人,还是有缺陷的人)提供便利。
1 0
- HTML基础之label标签
- html 之<label>标签
- HTML+CSS基础课程之form表单中的label标签
- HTML之Label标签的for属性
- html中的label标签
- HTML label 标签
- HTML <label> 标签
- HTML Label标签
- HTML的label标签
- HTML <label> 标签
- html <label>标签
- HTML中的<label>标签
- html-label标签
- HTML中label标签
- html标签label元素
- HTML label标签介绍
- HTML-label标签
- Html中的label标签
- jersey的过滤器
- 第13章上机
- canvas 2
- VC++ 使用MSComm控件检测串口是否存在的方法
- 建造者模式(java版)
- HTML基础之label标签
- 安卓开发的基本常识
- ionic——npm安装不成功问题
- 使用JCreator进行servlet程序的开发
- C# ORM—Entity Framework 之Code first(代码优先)(二)
- C#入门经典第6版学习 五
- 博客选题
- Liblinphone 3.9.1中文--Modules--Making an audio conference.
- jersey的测试