Meshaal Meshaal - 4 years ago 81
HTML Question

Can a label be placed separately from the form element it controls?

CSS Tricks documents something called, 'the checkbox hack,' in which elements are styled according to whether a checkbox is checked or not. This functionality is played with by styling the

<label>
element in order to make it appear as a link or a button, toggling the style of document elements when it is clicked.

In the demo provided, the checkbox is placed immediately following the label which describes it, and this is the configuration I normally see labels in—either immediately preceding, immediately following, or encapsulating the form element it controls.

However, in my specific use case scenario, I need the state of the checkbox to style multiple elements across multiple DOM nodes. As CSS has no parent selector, and the state of the checkbox is germane to the style of all the elements it controls, I believe it necessary to use relative CSS selectors such as
~
or
+
to style the elements. This necessitates placing the checkbox outside of the DOM node containing its label:



/* 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>





While this works (in Chrome, IE, Waterfox, and Vivaldi, at least), my question is about validity. Is it acceptable to place a
<label>
for a form element far away from that element itself, even outside the same DOM node? Are there any usability issues that might arise as a result of doing so?

Answer Source

Is it acceptable to place a <label> for a form element far away from that element itself, even outside the same DOM node?

Your HTML validates as valid HTML5 according to this HTML validator.

According to the specification, it appears to be valid as long as the label element's for attribute value is the ID of a labelable element in the same document.

From section 4.10.4 in 4.10 Forms:

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element's labeled control.

The label element in your example is explicitly associated with an input element in the same document, and the HTML validates, therefore it is acceptable. There is also an example provided in this specification where the label element and the respective input element appear outside of the same DOM node.

In addition, it's also acceptable to associate more than one label element with the same input element if they are attached with the for attribute. From the specification:

More than one label may be associated with the same control by creating multiple references via the for attribute.

It's probably also worth mentioning that a <label> element can only contain the following phrasing content, and it cannot contain descendant <label> elements.


Are there any usability issues that might arise as a result of doing so?

I have seen issues on mobile devices where the label element doesn't check/activate the corresponding input element with touch events unless user-select: none is added to the label element.

Aside from that, I am not that I'm aware of any other issues.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download