关于label标签的研究

Posted 2020-09-02

一：功能介绍

　　定义：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。