Input checkboxes wrapped inside <labels>

Question

I usually tend to wrap my checkboxes and radio button inside their respective labels and was wondering whether this is considered a good UX practice.

Pros/cons ?

One of my main reasons is that it helps with element alignment as we are mainly using only one element for positioning, whilst having checkboxes/radiobutton outside of the label, creates two elements that often go side by side, thus creating a problematic layout where they both must be wrapped inside a parent element to maintain block status with other form elements.

Answer 1

This may not be the best answer, but I don't think it's intrinsically good or bad. However, one pro of wrapping the form element in a label tag is that you can greatly expand the area of the clickable object via stylesheets.

It's worth noting that, for accessibility purposes, wrapping the element in a label tag isn't always enough. You should always give your elements an ID, and you should always use the for attribute in the label tag. Some screen readers won't link the label to the form element correctly without it.

Other than that, I think you can do it either way.

(I apologize if this answer was more technical in nature - but then, I'm a developer, not a designer.)

Answer 2

Here's the relevant section of the html5 reference:

http://www.w3.org/TR/html-markup/label.html

It says the following:

• The label element may contain at most one descendant input element, button element, select element, or textarea element.
• The for attribute of the label element must refer to a form control.

So you can wrap it around a single form element, and if you use the for attribute it has to refer to a form element, but you don't have to use the attribute and you don't have to wrap.

From a structural point of view, I prefer to think of the label as a separate element that is actually just the label. If you need something to contain both of them, I'd prefer to use a container div. That way, you can style labels in a general way without worrying about any form elements contained within them. Of course the basic form elements don't tend to inherit styling so the distinction is largely academic.