For Attribute Used With Label Tags

There are times that I feel like I am on the cutting edge of development. Web 2.0 and AJAX trickery gives me that feeling all the time. Then there are times where I ask myself, “Why didn’t I know about this before?” That’s how I feel about the for attribute for the <label> tag.

I found this little gem a few weeks ago, and after my collegues stopped laughing at me, I was told that this was nothing new. The for attribute has been around for a while, and is a helpful bit of HTML.

Found inside of a <label>, and next to an <input>, the for attribute can provide an end user a little bit more functionality from your form.

<label for=”radioName”>Label name</label><input type=”radio” name=”radioName” />

where the for attribute is the same as the id attribute for the corresponding <input>

With the for attribute used, the user can either click on the radio button itself, or the much larger target, the label text.

Using the for attribute will also help those using speech browsers.

I like these small little bits, espcially in a form with a lot of radio buttons. Having a secondary place for your audience to click might not make the difference on your conversion, but it sure is a nice touch.

Leave a Reply