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

Question

CSS欺骗文件名为'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>

  

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

  

  与label元素在同一文档中的可标记表单相关元素的ID。文档中的第一个这样的元素   ID与匹配的属性值是标记的   控制此标签元素。

另请注意

  

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

Answer 2

  

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

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

根据specification，只要label元素的for属性值是labelable element中的section 4.10.4的ID，它就会生效。同一份文件。

来自4.10 Forms中的labelable element：

  

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

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

此外，如果使用input属性附加多个label元素与相同的input元素，也可以将其关联起来。来自label：

  

通过for属性创建多个引用，可以将多个the following phrasing content与同一控件相关联。

可能还值得一提的是，for元素只能包含，而不能包含后代<label>元素。

  

这样做是否会产生任何可用性问题？

我在移动设备上看到了<label>元素没有检查/激活带有触摸事件的相应label元素的问题，除非input添加到user-select: none元素。

除此之外，我并不是因为我意识到任何其他问题。