为什么要使用<label>标签？

Question

从呈现的角度来看，如果我在 <label> 标签之间写文本，则与未使用该标签时外观相同。

那么，为什么我们还要使用这个标签呢？

- Simplicity

---

请参见：https://dev59.com/hHE95IYBdhLWcg3wkeof - D'Arcy Rittich

HTML 不是关于呈现的。 - punkrockbuddyholly

Answer 1

HTML不是关于呈现的。它是一种描述数据的方式。如果您有表示输入标签的文本，那么将其包装在label标签中，不是为了呈现，而是因为那就是它的作用。没有label标签，该文本几乎没有意义。通过label标签及其for属性（或不使用）,您正在提供意义和结构，并形成您的标记之间的关系，这可以更好地被计算机/解析器/浏览器/人所理解。

* 如果您在输入周围包装标签，则不一定需要for属性：

<label>My input
  <input type="text" id="my-input" />
</label>

- punkrockbuddyholly

Answer 2

Input Label

label元素的for属性对应于input元素的id属性。如果您单击标签，它会将焦点放在输入框上。

示例：

输入标签

<input type="checkbox" id="agree" /> 
<label for="agree">I agree with the Terms and Conditions</label>

点击查看演示。

如果您点击文本，将会勾选该复选框。

- Peter Olson

---

请注意，这是为了提高可访问性，特别是对于使用屏幕阅读器的用户。 - user142019

你的回答比那些解释这个简单问题的所有答案都好得多。可悲的是，即使在编程世界中，像结构、有意义这样的词语在人们面前也比那些实际上有意义的词语更加重要。 - xpioneer

Answer 3

当您点击标签时，焦点会转移到相关的输入框。对于复选框来说非常方便，因为很难点击小矩形。

- Mārtiņš Briedis

Answer 4

HTML中的<label>标签有一个特殊的功能：它允许你提供一个for属性，将标签与输入字段或其他控件链接起来，当用户点击标签时，就像他点击了控件一样。

例如：

<label for='mycontrol'>Label text</label> <input type='checkbox' name='mycontrol' id='mycontrol' value='1'>

这意味着当用户点击“标签文本”时，复选框将被切换。

这对于可访问性、一般的可用性非常有用，并且还允许一些技巧，比如制作一个看起来不像复选框但在幕后包含一个复选框的切换控件。

除了for属性以外，元素基本上与任何其他HTML元素相同。

如果您不使用for属性，出于语义原因仍然可以使用元素，这是正确的。

- Spudley

Answer 5

HTML标签旨在向各种用户传达特殊含义。以下是label标签的用途：

1. 对于运动障碍者（也适用于一般鼠标用户） 正确使用label标签可以被点击以访问相关的表单控件。例如，用户可以点击更易点击的label而不是特别点击复选框来切换复选框。

2. 对于视觉受限用户 视觉受限用户使用屏幕阅读器，当聚焦到表单控件时，会读出相关的label标签。它帮助用户知道原本对他们不可见的标签。

在此阅读有关标签的更多信息

- Kushagra Gour

Answer 6

如果您不使用标签，则必须点击精确的小圆形空间才能选择选项。但是，如果您使用标签，则只需在文本（或小圆形空白区域）上任意点击即可选择选项。

注意： 标签只将与其相关联的文本绑定到小圆形空白区域。就这样。

- Himanshu Kumar

Answer 7

从 HTML标签 可知：

“对于用户而言， label 元素不会特别渲染出来。然而，它确实为使用鼠标的用户提供了可用性改进，因为如果用户单击 label 元素中的文本，则可以切换控件。

label 标签的 for 属性应等于相关元素的 id 属性，以将它们绑定在一起。”

- Ben van Gompel

Answer 8

从展示的角度来看，没有什么作用。Lable标签用于为元素定义标签。从语义的角度来看，它不应该用于定义文本。

- archil