Simple but effective: <label for=''>
Posted December 19th 2012 12:14 pm
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
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
Better experience says "Add the
I will admit that Matt Inman (The Oatmeal) said it best:
![The Oatmeal describes what [for] is for](http://s3.amazonaws.com/theoatmeal-img/comics/shopping_cart/5.jpg)
If you don't code, here's what it looks like (click the label - doesn't do anything):
Here's what the difference is (click the label, see the difference?):
I just wanted to get that out in the open.
In summary, if you hand-code forms (like me), use the
I'm talking about
label
s. 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:
![The Oatmeal describes what [for] is for](http://s3.amazonaws.com/theoatmeal-img/comics/shopping_cart/5.jpg)
If you don't code, here's what it looks like (click the label - doesn't do anything):
<label>Check Me</label> <input type='checkbox' name='ckbx'/>
Here's what the difference is (click the label, see the difference?):
<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 label
s. It makes everybody's lives easier.