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

Question

CSS Tricks 记录了一种称为“复选框黑客”的内容，其中根据复选框是否被选中来设置元素的样式。通过设置元素的样式来实现此功能，<label>使其显示为链接或按钮，并在单击时切换文档元素的样式。

\n\n

在提供的演示中，复选框紧跟在描述它的标签后面，这是我通常在 \xe2\x80\x94 中看到的标签的配置，标签要么紧接在其之前，紧接其后，要么封装其控制的表单元素。

\n\n

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

\n\n

\r\n

\r\n

/* Checkbox Hack */\r\n\r\ninput[type=checkbox] {\r\n  position: absolute;\r\n  top: -9999px;\r\n  left: -9999px;\r\n}\r\nlabel {\r\n  cursor: pointer;\r\n}\r\n/* Default State */\r\n\r\ndiv {\r\n  background: green;\r\n  width: 400px;\r\n  height: 100px;\r\n  line-height: 100px;\r\n  color: white;\r\n  text-align: center;\r\n}\r\n/* Toggled State */\r\n\r\ninput[type=checkbox]:checked ~ div label {\r\n  color: red;\r\n}\r\ninput[type=checkbox]:checked ~ div div {\r\n  background-color: red;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n

Answer 1

<label>将表单元素的 a 放置在远离该元素本身的地方（甚至在同一个 DOM 节点之外）是否可以接受？

根据此 HTML 验证器，您的 HTML 被验证为有效的 HTML5 。

根据规范，只要label元素的属性值是同一文档中可标记元素for的 ID，它似乎就有效。

来自4.10 表格第4.10.4 节：

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

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

此外，如果多个元素附加有该属性，则将多个label元素与同一input元素相关联也是可以接受的for。从规格来看：

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

可能还值得一提的是，<label>元素只能包含以下短语内容，并且不能包含后代<label>元素。

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

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

除此之外，我不知道还有其他问题。