If you are a self taught programmer, you might have learned the basic programming skills and jumped right in. It might be Coldfusion, PHP, or ASP. Whatever your flavor, there are some basic HTML functions that we sometimes forget or didn’t even know about. When coding a form, I never considered the use of the <label> tag. Thanks to Joe Danziger, I will now.
I was reading through some post’s on Joe’s Blog this morning and came across a short post regarding the <label> tag. Have you ever wondered why you can click on the word next to a radio button in certain forms and the button will select? Well, the <label> tag controls that function. As Joe puts it:
Why should we be forced to click a tiny little circle when we should be able to click the actual text for that choice?
True. It all comes down to useability. There are a ton of tiny tips and tricks whether it be in HTML, or your programming language of choice, that make for a better experience for the user. One tip on its own might not have much of an impact, but when you apply many usability tips during the same user experience, you visitor should browse away feeling like you have your act together.
All that you need to do is to include the ID element to your radio button form code.
<input type=“radio” name=“buttonName” id=“button1” />
For the text that is associated with the button, reference the ID in your <label>.
<label for=“button1”>Whatever the choice is for Button 1</label>
Here is a radio button group so that you can see them in use.
Here is the code for the above:
<input type=”radio” name=”buttonName” id=”button1″ /><label for=”button1″>Whatever the choice is for Button 1</label>
<input type=”radio” name=”buttonName” id=”button2″ /><label for=”button2″>Whatever the choice is for Button 2</label>