Kyle M. Perkins

It's amazing how something so simple can go a long ways, especially when most people don't know about it.

I'm talking about labels. Specifically, the <label for=''> attribute.

Common sense says "If you have a radio button or a checkbox on an HTML form, give it a label so people know what it is for."

Experience says "Make sure that each item has an id and name so it's universally accepted."

Better experience says "Add the for attribute to the label so your visitors don't require a microscope to click in the teeny-tiny little circle/box."

I will admit that Matt Inman (The Oatmeal) said it best:


If you don't code, here's what it looks like (click the label - doesn't do anything):

Check Me

<label>Check Me</label> 
 
<input type='checkbox' name='ckbx'/>

Here's what the difference is (click the label, see the difference?):

Check Me

<label for='ck_box'>Check Me</label> 
 
<input type='checkbox' name='ckbx' id='ck_box'/>

I just wanted to get that out in the open.

In summary, if you hand-code forms (like me), use the for attribute in your labels. It makes everybody's lives easier.