the <lablel> tag

Sorry, I didn't find a better way to leave some comments on this tag. If  
this info shoud go elsewhere, please forward, or tell, where to submit.

Best regards - Mihail

I'm using the following code, to mimic Javascript, which allows me to hide  
extensive info of "unchecked" options, and shows only that of checked  
ones. And a user can click anywhere on the hr_small (always visible part),  
to activate it (very usefull for touch screens), and not only on the label  
itself.
And it works very well in browsers. But this code is invalid, as
--> The label element may contain at most one descendant input element,  
button element, select element, or textarea element.
So the <label> tag should be allowed to have more childs. Another way  
around would be to wrap the stuff inside the input element, but then the  
input element can't be activated by a click on it....
Maybe there is some other way around it, which I don't know.... If I don't  
wrap the label tag around the fieldset childs, they are just below the  
form element, and such type of usage becomes unavailable.... (they must  
activate the element, if checked!!!)

style:

input[type="radio"] {visibility:hidden; position:absolute; }
input:checked {background:#FFF;}
input:checked + fieldset {background:#FFF;}
input + fieldset + fieldset {display:none; background:#FFF; }
input:checked + fieldset + fieldset {display:block; background:#FFF; }


html:

<label for="hr_map">
    <input type="radio" name="hr_card" value="hr_map" id="hr_map">
    <fieldset class="hr_small">Map
        <p>This part is always visible</p>
     </fieldset>
     <fieldset class="hr_main">Map
        <p>This part is only visible if input is checked</p>
     </fieldset>
</label>

Received on Wednesday, 6 February 2013 19:05:01 UTC