I think using an explicit "for" attribute is cleaner than bundling the control inside the label tag, as you can transparently position the label without worrying about parental boundaries. Take the typical case of a container label:
<LABEL>
First Name
<INPUT type="text" name="firstname">
</LABEL>
The problem is that when you position/style the label in your CSS, you're also (by default) positioning the inner INPUT. This is easy enough to adjust in CSS but I prefer my elements to have "honest boundaries". To me it's slightly ugly to have a container element (<label> in this case) contain a sub-element (<input> in this case), but have the sub-element drift outside the boundaries of the parent.
So I prefer my labels and their corresponding inputs to be decoupled in the sense that neither contains the other. Another (slight) advantage to this approach is that you can cleanly assign multiple labels to the same input control, though I'm not sure when you'd want or need to do so.
http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1
I think using an explicit "for" attribute is cleaner than bundling the control inside the label tag, as you can transparently position the label without worrying about parental boundaries. Take the typical case of a container label:
The problem is that when you position/style the label in your CSS, you're also (by default) positioning the inner INPUT. This is easy enough to adjust in CSS but I prefer my elements to have "honest boundaries". To me it's slightly ugly to have a container element (<label> in this case) contain a sub-element (<input> in this case), but have the sub-element drift outside the boundaries of the parent.So I prefer my labels and their corresponding inputs to be decoupled in the sense that neither contains the other. Another (slight) advantage to this approach is that you can cleanly assign multiple labels to the same input control, though I'm not sure when you'd want or need to do so.