Html Question posted in
Some basic documentation can be found here.

Html – Can (should) a label span the input it labels?

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?

Tags:

5

Answers


  1. 0

    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:

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    Yes, the second one is valid and may have been used directly with no problem.

    This way is more often used for labels. It is preferred for its ability to keep together both the label and the input elements, sometimes even providing an impression of organization within the code. Example:

    <label for="foo"><input type="checkbox" id="foo" />Foo!</label>

    Both are legal and functional, but the second one tends to be the go-to for many developers!

    Login or Signup to reply.
  4. 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 for attribute, 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 for attribute 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

    Login or Signup to reply.
  5. 0

    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 use id for 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search