Use Form Labels to Expand Radio Buttons / Checkbox Click Area

Just working on a wizard for the chesterfield site allowing people to configure their sofas before a final price is presented.

As part of this I need to illustrate a set of options with associated radio buttons for choice. I wanted the user to be able to click the image and/or text descriptions in order to make the selection and thought this simple technique would prove beneficial for people considering javascript and lots of junk code as my solution is really elegant.

The solution is simple and requires no associated scripting…

Just wrap it all in a label tag i.e.

<label for=”foo”>

<img src=”foo.gif” alt=”alt text” />

Descriptive Text

<input type=”radio” name=”foo” value=”Item Value” />

</label>

Now anything you click inside the label will automatically activate the radio button.

I know it’s a simple technique however im sure it will help ease someones pain of interactive form design!