使用没有任何关联表单元素的标签是否可以接受？答案

【问题标题】：Is using a label without any associated form element acceptable?使用没有任何关联表单元素的标签是否可以接受？
【发布时间】：2019-01-09 09:42:44
【问题描述】：

在我当前的项目中，我们永久禁用了表单控件。在这些情况下，表单元素将替换为服务器端的 span 元素。

创建这样的代码：

<label for="foo">Foo</label>
<span id="foo">Bar</span>

问题 1：label 元素没有任何关联的表单元素（input、select、textarea）是否可以接受？

问题 2：如果是，在这种情况下我们是否必须删除 for 属性（因为它引用了一个不是表单元素的元素）？

规范说：

可以指定for属性来指示与标题关联的表单控件。如果指定了属性，则属性的值必须是与标签元素在同一文档中的可标记表单关联元素的 ID。

https://www.w3.org/TR/2011/WD-html5-author-20110705/the-label-element.html

补充说明：在上面的引用中，可标记的表单相关元素到底是什么？

【问题讨论】：

HTML 规范没有强制将标签与控件关联起来，但 Web 内容可访问性指南 (WCAG) 2.0 可以。这在技术文档 H44 中有所描述：使用标签元素将文本标签与表单控件相关联，这也解释了隐式关联（通过嵌套，例如标签内的输入）不像通过 for 和 id 属性的显式关联那样被广泛支持： w3.org/TR/WCAG20-TECHS/H44.html
stackoverflow.com/a/33214122/4826740 是您正在寻找的。 TLDR 你正在做的事情会起作用，但可能没有遵循可访问性指南
你为什么要用 span 替换表单控件，而不是仅仅使用 disabled 属性？

标签： html

【解决方案1】：

问题 1：是的，您可以使用没有关联表单元素的标签。规范指出，标签可以与表单元素相关联，也可以在其自身中包含该元素，但没有指定两者都是必需的。

标签应用于需要措辞内容的地方。这意味着：

短语内容是文档的文本，以及包含在段落内级别标记该文本。

问题 2：是的，您需要删除“for”属性才能在技术上有效。来自规范：

如果指定了属性，则属性的值必须是与标签在同一文档中的可标记表单相关元素元素。

由于您没有可表单标记的元素，因此该值不能是它的 ID，因此不能指定。

为了解决您的问题：

根据规范，可标记的表单关联元素是：

可标记元素表示可以与标签元素关联的元素。
button input (if the type attribute is not in the hidden state) keygen meter output progress select textarea

【讨论】：

【解决方案2】：

正如规范本身所说

可以指定for属性来指示与标题关联的表单控件。如果指定了属性，则属性的值必须是与标签元素在同一文档中的可标记表单关联元素的 ID。

for 属性可以指定，这意味着它是完全可选的。

可标记的表单关联元素是指可以关联标签的任何表单元素。例如。标签元素对input type='submit/reset/button' 无效。

那为什么要使用 for 和标签

好处是更大的可点击区域。当您指定带有标签的 for 属性时，单击标签区域执行的操作与单击与标签关联的表单元素相同。

希望这能解决您的疑虑！

【讨论】：

【解决方案3】：

正如其中一个 cmets 引用的答案中所述，当不直接引用 <input> 元素时，应使用 <span> 标签代替 <label>。否则在语义上是不正确的。

正确：

<span>This is an image</span>
<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />

不正确

<label for="epic-image">This is an image</label>
<img src ="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />

【讨论】：