There's no doubting that adding a Label to things like checkboxes and radio buttons is a godsend for usability.

With a Label

Here's a checkbox with a Label on the label. Click the text to the right of the check box and it toggles the field.

I'd like to receive the newsletter.

Nice and easy.

Without A Label

Here's a checkbox without a Label:

Harder to use, isn't it. There's no excuse not to use one!

Using Labels

As I've always understood it, the proper way of doing it is like this:

<input id="signup" value="yes" type="checkbox" name="signup"> <label for="signup">I'd like to receive the newsletter.</label>

Notice the Input element needs an ID and we need to pair this ID with the Label using the Label's "for" attribute. This is what has always put me off using Labels - they're a pain to implement - particularly when hand-coding lots of Inputs.

However, there's an easier way. You can do this:

<label><input value="yes" type="checkbox" name="signup"> I'd like to receive the newsletter.</label>

No need for any IDs!

This comes in handy when programmatically creating groups of checkboxes (or radio buttons) as you only need to wrap them in Label tags, rather than assigning each a unique ID, like so:

<p>
<label><input type="radio" value="Red" name="FaveColor" /> Red</label>
<br />
<label><input type="radio" value="Green" name="FaveColor" /> Green</label>
<br />
<label><input type="radio" value="Blue" name="FaveColor" /> Green</label>
</p>

Simples.