html label标签的作用是什么？html label标签的用法方法详解

256 阅读 0 评论 169 点赞

我是靠谱客的博主重要河马，最近开发中收集的这篇文章主要介绍html label标签的作用是什么？html label标签的用法方法详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本篇文章主要的介绍了敢于html label标签的介绍，还有html label标签的主要使用场景，最后还有关于html label标签的注释。现在让我们来看看这篇文章吧

首先我们来看看html label标签介绍：

label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。

label标签和特定表单控件关联之后，如果用户在label元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。

html label标签的主要使用场景：

label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域较大，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有用。

现在说说html label标签有什么用：

<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。实例带有两个输入字段和相关标记的简单 HTML 表单：

<form> 
<label for="male">两个人</label> 
<input type="radio" name="sex" id="male" />
<label for="female">一个人</label> 
<input type="radio" name="sex" id="female" />
</form>
登录后复制

这是一个单选框，就不用显示效果了。

最后，我们来看看关于html label标签的注释：

要将 LABEL 绑定到其它的控件，请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是，要提交表单，你必须为 LABEL 元素所绑定到的控件指定 NAME。

有两种方法给所指定的快捷键添加下划线。LABEL 元素的 rich text 支持可以在 ACCESSKEY 属性所指定的快捷键字符两侧加上 U 元素。如果你更愿意使用样式表(CSS)来应用样式，可以将该字符包含在 SPAN 中，并设置样式为“text-decoration: underline”。

如果用户单击 LABEL，则会先触发 LABEL 上的 onclick 事件，然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。

【小编推荐】

html code标签怎么换行？这篇文章让你彻底了解code短语的用处

html空格代码怎么写？html空格代码的表现方式总结

以上就是html label标签的作用是什么？html label标签的用法方法详解的详细内容，更多请关注靠谱客其它相关文章！