为什么使用<标签>？答案

【问题标题】：Why use <label>?为什么使用<标签>？
【发布时间】：2011-11-29 23:49:28
【问题描述】：

从演示的角度来看，如果我在 <label> 标记之间写了一个文本，它看起来和我没有写的一样。

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

【问题讨论】：

见：stackoverflow.com/questions/2257606/…
HTML不是关于演示的。

标签： html

【解决方案1】：

HTML 不是关于演示的。这是一种描述数据的方式。如果您有一些代表输入标签的文本，则将其包装在标签标签中不是为了展示，而是因为它就是这样。没有标签标签，该文本几乎毫无意义。使用标签标签及其for 属性（或不*），您可以提供含义和结构，并在您的标记之间形成一种关系，计算机/解析器/浏览器/人可以更好地理解。

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

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

【讨论】：

【解决方案2】：

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

例子：

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

See this in action.

如果您单击文本，它会选中该框。

【讨论】：

请注意，这是为了提高可访问性，尤其是对于屏幕阅读器用户。
你的答案比解释这个简单问题的所有答案要好得多。可悲的是，即使在编程世界中，像结构这样的词，有意义的词在人们面前确实比实际上有意义的词更重要。

【解决方案3】：

当您单击标签时，焦点转到相关输入。当难以点击小矩形时，复选框非常方便。

【讨论】：

【解决方案4】：

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

例如：

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

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

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

但除了 for 的这一特性之外，<label> 元素与任何其他 HTML 元素基本相同。

如果您不打算使用for 属性，出于语义原因，使用<label> 元素可能仍然是正确的。

【讨论】：

【解决方案5】：

HTML 标签旨在向不同类别的用户传达特殊含义。以下是 label 的用途：

适用于运动障碍者（也适用于普通鼠标用户） 正确使用label标签可以点击访问关联的表单控件。例如。用户可以点击更容易点击的label 并切换复选框，而不是特别点击复选框。
适用于有视觉障碍的用户 有视觉障碍的用户使用屏幕阅读器来读取关联的label 标记，只要表单控件获得焦点。它可以帮助用户了解他们原本看不到的标签。