I see this pattern in documentation:
<input type="checkbox" id="foo" /><label for="foo">Foo!</label>
But the problem is that it leaves a dead zone between the checkbox and its label where you can click on the label and you can click on the box but there’s a little gap between the two where clicks don’t do anything and it’s kind of annoying.
Obviously this gets worse if there’s any whitespace between the input and label tags.
To fix the problem I tried this:
<label for="foo"><input type="checkbox" id="foo" />Foo!</label>
This “works for me” in that it eliminates that dead spot between box and text and is much easier to interact with. But is it legal and idiomatic HTML?
0
According to HTML Standard, the answer is yes and yes.
… The caption can be associated with a specific form control, known as the label element’s labeled control, either using the
forattribute, or by putting the form control inside the label element itself.
Also, you might not need to provide the for attribute of the label if the labeled element (the input) is the child of that label element.
If the
forattribute is not specified, but the label element has a
labelable element descendant, then the first such descendant in tree
order is the label element’s labeled control.
The link I provided presents a lot more examples and information that you might be interested in: https://html.spec.whatwg.org/multipage/forms.html#the-label-element
Yes, this is valid.
and also by this way you don’t need to use an id attribute.
<label><input type="checkbox" name="foo" />Foo!</label>
For info:
you do not need to useidfor form’s elements.
They are form’s child elements
example:
const myForm = document.forms['my-form'];
myForm.inDate.valueAsDate = new Date(); // intialize the date element
myForm.addEventListener('submit', e =>
{
e.preventDefault(); // disable submit for this sample code
console.clear();
console.log( 'foo =', myForm.foo.checked );
console.log( 'inDate =', myForm.inDate.valueAsDate );
});label {
display : block;
margin : .5em;
}<form name="my-form" >
<label><input type="checkbox" name="foo" />Foo!</label>
<label>Date : <input type="date" name="inDate" /></label>
<button type="submit"> send info </button>
</form>
In fact, I have seen my teammates do that many times before, and it works well. But in my opinion, you can remove the gap by styling the input and label using CSS instead. Try wrap the input and label with a form-group div, display it as a flexbox, set the gap to 0, and add spacing between the input and label using padding instead of margin
(Here the code I copied from the documentation link above, added a class name form-group)
.form-group {
display: flex;
gap: 0;
padding: 5px 10px;
}
.form-group input {
margin: 0;
}
.form-group label {
padding-left: 10px;
}<fieldset>
<legend>Choose your monster's features:</legend>
<div class="form-group">
<input type="checkbox" id="scales" name="scales" checked />
<label for="scales">Scales</label>
</div>
<div class="form-group">
<input type="checkbox" id="horns" name="horns" />
<label for="horns">Horns</label>
</div>
</fieldset>