Hacker News Reader

Comment by mattmanser | Hacker News Reader

Is it common these days to nest inputs in labels? As a comparison, bootstrap doesn't, 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.

View on HN

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

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` ;)

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

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.

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

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.

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.

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

If you use the for attribute clicking on the label will focus the related input.

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.

> 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.

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

Only with checkboxes, not with other types of input which are shown in the article (e.g. text, tel, email).

So Bootstrap is internally as well as externally inconsistent?

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.

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).

The for attribute on labels work for checkboxes.

Reply on news.ycombinator.com