Is the label wrapped radio / flag compatible?
I noticed that if you put a radio button or checkbox in the label, the whole thing becomes interactive, even without the for / id pair (in fact, it looks like this will ignore it because I messed it up!)
Example:
<label><input type="checkbox"> some text</label>
Then "some text" can be clicked to check the box. I've tested it in FF, Chrome and Opera and IE8, does anyone know if it works in older browsers like IE6?
source to share
Yes, this is intended behavior.
http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9
To associate a label with another control implicitly, the control must be inside the content of the LABEL element. In this case, the LABEL can only contain one control. The label itself can be positioned before or after the corresponding control.
It looks like it doesn't actually work in IE6 (haven't tried other versions). If you already have something like jQuery loading in your page, you can easily find a workable solution:
if ($.browser.msie) {
$('label:has(:input):not([for])').each(function() {
var $t = $(this)
, $in = $t.find(':input')
;
if (!$in.attr('id')) {
// use this, or make a proper GUID...
$in.attr('id', 'input_' + (Math.random() * 1000000));
}
$t.attr('for', $in.attr('id'));
});
}
source to share