6 ms·

Is it common these days to nest inputs in labels? As a comparison, bootstrap doesn't, http://getbootstrap.com/css/#forms http://getbootstrap.com/css/#forms. To

Is it common these days to nest inputs in labels? As a comparison, bootstrap doesn't, http://getbootstrap.com/css/#forms http://getbootstrap.com/css/#forms. To me that's conceptually as well as semantically broken, the two are separate things why is the input inside the label? He's saying make everything semantic, and then semantically breaking forms. Also if you have any inputs that don't have a label for whatever reason you either have to wrap them in them any way to get CSS to work or make sure you never rely on the input being nested in the label in your CSS. And having them apart also makes it easier to design responsively if you want a side-by-side design for desktop vs a stacked design for mobile. Saves having to add a for tag I guess. I guess a lot of that article is opinion though, so you're always going to get people objecting to one point or another, though a lot of it seems sensible advice.

progval 10y ago
Maybe it's to increase the area where a click transfers the focus to the <input>? Skype Web puts a whole <form> in a <label>, I guess it is for that reason
- realityking 10y ago
  If you use the for attribute clicking on the label will focus the related input.
  - mook 10y ago
    But that means there may be an area between the label and the input element (depending on margins and so forth) which is not clickable. Having the label separate makes sense if it's all in a table-like structure, though.
IgorPartola 10y ago
It has one distinct advantage: you don't have to generate the id and for attributes, which isn't always the most convenient.
- deleted 10y ago
  [deleted]
- wtetzner 10y ago
  There's another disadvantage to using for: the space between the label and the input isn't clickable. This matters more for touch screens, but I suspect most of the web is accessed at least sometimes through touch screens.
extra88 10y ago
I don't think the article is even advocating for nested vs. not-nested inputs with labels, the author just picked nested to use in the example. The point of the example was to have a <label>. There's no reason to go to war over nested vs. not-nested. The only exceptions to "each input must have a label" are inputs of type "hidden" and ones that make button controls so the value attribute effectively labels the control.
8ig8 10y ago
With checkboxes, nesting the input inside the label makes the label clickable. It provides a larger target for checking, unchecking. Edit, to add: To avoid nesting you can use the for attribute. More info on the following link addressing checkboxes and input nesting, in general: http://stackoverflow.com/a/6293626 http://stackoverflow.com/a/6293626
- adregan 10y ago
  The `for` attribute (`htmlFor` in jsx) will also allow the same kind of behavior: <label for="coolInput">Click me:</label> <input type="checkbox" id="coolInput" /> Edit: You edited while I was typing this out and added info about the `for` ;)
  - cptskippy 10y ago
    This certainly works but margins are still a dead-zone around inputs. Nesting the inputs can give you larger touch targets which is often preferable. http://codepen.io/anon/pen/qNzOYW http://codepen.io/anon/pen/qNzOYW
rkrkrkrk 10y ago
Boostrap does: http://getbootstrap.com/javascript/#buttons-checkbox-radio http://getbootstrap.com/javascript/#buttons-checkbox-radio
- blowski 10y ago
  Only with checkboxes, not with other types of input which are shown in the article (e.g. text, tel, email).
  - nilved 10y ago
    So Bootstrap is internally as well as externally inconsistent?
    - blowski 10y ago
      I would call it pragmatic, as it makes the CSS easier when you want to put a custom checkbox design. Either way, it doesn't seem to be doing them any harm.
    - cloverich 10y ago
      I'd thought that was the only way to get clicking on a checkbox label to trigger the checkbox click (unlike other inputs where you could simply use a for label).
      - talmand 10y ago
        The for attribute on labels work for checkboxes.
talmand 10y ago
Nesting inputs inside of the label is accepted practice. The w3c wiki site even provides an example. w3.org: The label element may contain at most one descendant input element, button element, select element, or textarea element. You just have to be a bit careful with it concerning screen readers. EDIT: besides, there are CSS reasons for wrapping the input with a label.
jordanlev 10y ago
> Is it common these days to nest inputs in labels? Been developing websites for almost 15 years now, and I recall this always being a common thing to do. > To me that's conceptually as well as semantically broken, the two are separate things why is the input inside the label? I agree that it's conceptually broken, but it is not semantically broken -- since the HTML5 spec and screen readers all recognize this as an equally valid way to define a label on an input. So they're both equally "correct", just a trade-off of ease-of-styling (for some designs) vs. saving a few bytes and mental overhead of assigning for/id attributes to them.

progval 10y ago

Maybe it's to increase the area where a click transfers the focus to the <input>? Skype Web puts a whole <form> in a <label>, I guess it is for that reason

realityking 10y ago
If you use the for attribute clicking on the label will focus the related input.
- mook 10y ago
  But that means there may be an area between the label and the input element (depending on margins and so forth) which is not clickable. Having the label separate makes sense if it's all in a table-like structure, though.

IgorPartola 10y ago

It has one distinct advantage: you don't have to generate the id and for attributes, which isn't always the most convenient.

deleted 10y ago
[deleted]
wtetzner 10y ago
There's another disadvantage to using for: the space between the label and the input isn't clickable. This matters more for touch screens, but I suspect most of the web is accessed at least sometimes through touch screens.

extra88 10y ago

I don't think the article is even advocating for nested vs. not-nested inputs with labels, the author just picked nested to use in the example. The point of the example was to have a <label>. There's no reason to go to war over nested vs. not-nested. The only exceptions to "each input must have a label" are inputs of type "hidden" and ones that make button controls so the value attribute effectively labels the control.

8ig8 10y ago

With checkboxes, nesting the input inside the label makes the label clickable. It provides a larger target for checking, unchecking. Edit, to add: To avoid nesting you can use the for attribute. More info on the following link addressing checkboxes and input nesting, in general: http://stackoverflow.com/a/6293626 http://stackoverflow.com/a/6293626

adregan 10y ago
The `for` attribute (`htmlFor` in jsx) will also allow the same kind of behavior: <label for="coolInput">Click me:</label> <input type="checkbox" id="coolInput" /> Edit: You edited while I was typing this out and added info about the `for` ;)
- cptskippy 10y ago
  This certainly works but margins are still a dead-zone around inputs. Nesting the inputs can give you larger touch targets which is often preferable. http://codepen.io/anon/pen/qNzOYW http://codepen.io/anon/pen/qNzOYW

rkrkrkrk 10y ago

Boostrap does: http://getbootstrap.com/javascript/#buttons-checkbox-radio http://getbootstrap.com/javascript/#buttons-checkbox-radio

blowski 10y ago
Only with checkboxes, not with other types of input which are shown in the article (e.g. text, tel, email).
- nilved 10y ago
  So Bootstrap is internally as well as externally inconsistent?
  - blowski 10y ago
    I would call it pragmatic, as it makes the CSS easier when you want to put a custom checkbox design. Either way, it doesn't seem to be doing them any harm.
  - cloverich 10y ago
    I'd thought that was the only way to get clicking on a checkbox label to trigger the checkbox click (unlike other inputs where you could simply use a for label).
    - talmand 10y ago
      The for attribute on labels work for checkboxes.

talmand 10y ago

Nesting inputs inside of the label is accepted practice. The w3c wiki site even provides an example. w3.org: The label element may contain at most one descendant input element, button element, select element, or textarea element. You just have to be a bit careful with it concerning screen readers. EDIT: besides, there are CSS reasons for wrapping the input with a label.

jordanlev 10y ago

> Is it common these days to nest inputs in labels? Been developing websites for almost 15 years now, and I recall this always being a common thing to do. > To me that's conceptually as well as semantically broken, the two are separate things why is the input inside the label? I agree that it's conceptually broken, but it is not semantically broken -- since the HTML5 spec and screen readers all recognize this as an equally valid way to define a label on an input. So they're both equally "correct", just a trade-off of ease-of-styling (for some designs) vs. saving a few bytes and mental overhead of assigning for/id attributes to them.