You already use
<label> tags for your forms, right? This is the great little bit of HTML that allows you to click on a text label instead of directly on a form control to select. It always pisses me off when designers don’t put them in since it makes forms much easier to interact with.
So, you may have tried to wrap a
<label> around an image, like so:
Try clicking on the picture to select the radio box in IE or Safari: (works in Firefox, Opera, NOT in IE or Safari)
You were probably expecting it to behave like it does when you wrap it around just text. This works as expected in Firefox and Opera (producing an effect as if you had just clicked the radio button or checkbox) but doesn’t work in IE or Safari.
The solution to make everything within your
<label>, where radio3 is the same ID as the element you want to activate:
Now try clicking on the picture to select the radio box in IE or Safari: (works in all browsers)
This allows you to use images in your forms to click on to select a radio button, and works in Firefox, IE, Safari, Flock, Opera.
Feedback is welcome!