可以将标签与其控制的表单元素分开放置吗？

Question

CSS Tricks 记录了一个叫做'the checkbox hack,' 的东西，其中元素的样式根据复选框是否被选中。通过设置 <label> 元素的样式来使用此功能，以使其显示为链接或按钮，并在单击时切换文档元素的样式。

在提供的demo 中，复选框紧跟在描述它的标签之后，这是我通常在其中看到标签的配置 - 紧随其后，紧随其后或封装它控制的表单元素。

但是，在我的特定用例场景中，我需要复选框的状态来设置跨多个 DOM 节点的多个元素的样式。由于 CSS 没有父选择器，并且复选框的状态与其控制的所有元素的样式密切相关，我认为有必要使用相关的 CSS 选择器，例如 ~ 或 + 来设置元素的样式。这需要将复选框放置在包含其标签的 DOM 节点之外：

/* Checkbox Hack */

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
label {
  cursor: pointer;
}
/* Default State */

div {
  background: green;
  width: 400px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
}
/* Toggled State */

input[type=checkbox]:checked ~ div label {
  color: red;
}
input[type=checkbox]:checked ~ div div {
  background-color: red;
}

<input type="checkbox" id="toggle-1">
<div>
  <label for="toggle-1">Toggle!</label>
</div>
<div>
  <div>A second element</div>
</div>

虽然这有效（至少在 Chrome、IE、Waterfox 和 Vivaldi 中），但我的问题是关于 有效性。是否可以为远离该元素本身的表单元素放置 <label>，即使在同一个 DOM 节点之外？这样做是否会导致任何可用性问题？

Answer 1

我的问题是关于有效性的。是否可以放置<label> 对于远离该元素本身的表单元素，即使在 同一个 DOM 节点？

是的。

是否会因为这样做而出现任何可用性问题 所以呢？

没有。

见<label>

允许的父元素任何接受短语内容的元素。

---

为
与标签元素在同一文档中的可标记表单相关元素的 ID。文档中的第一个此类元素 与 for 属性的值匹配的 ID 是标记的 此标签元素的控件。

请注意

form HTML5
标签元素关联的表单元素（其表单所有者）。如果指定，属性的值必须 是同一文档中 <form> 元素的 ID。这个属性 使您可以将标签元素放置在文档中的任何位置，而不是 就像它们的表单元素的后代一样。

Answer 2

是否可以为远离该元素本身的表单元素放置 <label>，即使在同一个 DOM 节点之外？

根据this HTML validator，您的 HTML 被验证为有效的 HTML5。

根据specification，只要label 元素的for 属性值是同一文档中labelable element 的ID，它似乎就有效。

来自section 4.10.4 中的4.10 Forms：

可以指定for 属性来指示与标题关联的表单控件。如果指定了该属性，则该属性的值必须是与label 元素在同一文档中的labelable element 的ID。如果指定了属性并且 Document 中有一个元素的 ID 等于 for 属性的值，并且第一个这样的元素是 labelable element，那么该元素就是 label 元素的标记控件。

您示例中的label 元素与同一文档中的input 元素显式关联，并且HTML 验证，因此它是可以接受的。 this specification 中还提供了一个示例，其中 label 元素和各自的 input 元素出现在同一个 DOM 节点之外。

此外，如果使用for 属性附加多个label 元素与相同的input 元素，它们也是可以接受的。来自the specification：

通过for 属性创建多个引用，可以将多个label 与同一个控件关联。

可能还值得一提的是<label> 元素只能包含the following phrasing content，并且它不能包含后代<label> 元素。

---

这样做是否会导致任何可用性问题？

我在移动设备上看到了label 元素不会通过触摸事件检查/激活对应的input 元素的问题，除非将user-select: none 添加到label 元素中。

除此之外，我不知道其他任何问题。