I’ve come across a lot of <label> tags in my employers HTML code and most of them seem like they’re just extra fluff. I’m assuming the majority of them were in some way or another styled, which is a good enough reason to use the tag. However, I have yet to see a <label> tag used with the “for” attribute, which is the real reason for even using the lable tag (IMO). Here’s a quick run down on the <label> tag.
Definition and Usage
- The <label> tag defines a label for an input element.
- The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.
- The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
<input type=”radio” name=”gender” id=”male” /><br />
<input type=”radio” name=”gender” id=”female” />
So the next time you use the label tag, go ahead and use the “for” attribute. It gives any app a nice usability bump, especially when working with radio buttons and checkboxes.