首页 > 代码库 > 关于label标签的研究
关于label标签的研究
一:功能介绍
定义:label 元素不会向用户呈现任何特殊效果。它为鼠标用户改进了可用性。总的来说<label>专为input元素服务,为其定义标记。
用法:<label> 标签的 for 属性与相关元素的 id 属性相同,用来指定是向与哪个元素绑定。
二:应用示例
例子如下:
用户名:<input type="text" name="userName" id="userName" />,像这个代码运行后,你只有点击input框的时候,才会出现焦点,点击前面的文字不会有任何的效果,但是给前面的文字部分加上label标签就不一样了。
label和表单控件绑定方式分两种:
1.为<label>标签下的for属性命名一个目标表单的id,这就是显式绑定。
<label for="userName">用户名:</label><input type="text" name="userName" id="userName" />运行代码我们发现这样再点击前名的用户名的时候,后面的input也会被触发焦点。
2.将表单控件作为label的内容,这样就是隐式绑定。此时不需要for属性,绑定的控件也不需要id属性。如下:
<label>用户名:<input type="text" name="userName" /></label>
这两种情况下,我们还可以给<label>加属性,如:
<label style="cursor:pointer">用户名(示意用户点击这里也可进行操作):<input type="text" name="userName" /></label>
可见用了label标签后,扩大了鼠标的用户的点击范围,所以在用户体验上加强了一步,除了input type=”text” 下可使用这种方法外,还有就是input type=" checkbox"\ input type=" radio"这种环境下会常用到。
在HTML里,每一种HTML标签都有自己的意义,在做页面的时候选择适合的标签,少使用DIV,Span这些无语义的标签,只有在无法确定使用什么标签才使用DIV。
关于label标签的研究