Thursday, 21 June 2007

The wonderful 'Label' tag (for creating clickable labels)

The HTML Label tag for creating clickable label:
There's actually a
<form name="input" action="">
    <input type="checkbox" name="sex" id="male" />
    <label for="male">Male</label>
    <input type="checkbox" name="sex" id="female" />
    <label for="female">Female</label>
</form>

Demo:



So now if you click on the label "Male" it will check the check box with the id="male". Similarly if you click on the label "Female", it will check the check box with the id="female".

Limitation:
However the tag is not supported in Netscape 4. The following links are pages that I have come across that shows an alternative of how labels can still be made clickable by performing some magic with Javascript:

http://www.askdavetaylor.com/make_text_adjacent_to_checkbox_clickable.html
http://www.inquiry.com/techtips/dhtml_pro/10min/10min0101/10min0101.asp


Also a good, simple explanation of the label tag in here;
http://www.robertnyman.com/2005/12/09/label-the-secret-element/

No comments:

Post a Comment