In your HTML forms, you may have radio boxes or check boxes like so:

Option 1
Option 2
Radio 1
Radio 2

The source code may look like this:

<form><input type="checkbox" /> Option 1
<input type="checkbox" /> Option 2
<input type="radio" name="radio" /> Radio 1
<input type="radio" name="radio" /> Radio 2</form>

This is fine, but the clicking area for the check boxes and radio boxes is restricted to the boxes themselves. What if the user wanted to click the text and have the corresponding radio/check boxes selected? In the above example, that’s not possible.

However, there is a very easy trick to making text next to boxes clickable. Use the HTML <label> tag, like so:

<input type="checkbox" id="cbox1" />
<label for="cbox1">Option 1</label><br>
<input type="checkbox" id="cbox2" />
<label for="cbox2">Option 2</label>
<!-- ...and so on -->

The label for attribute value corresponds with the id for input. The result is something like this:



When you click on the text, the corresponding box is selected. This makes your form much easier to use for your users.

Prefer to have the text before the box? Simply place the <label> ... </label> before the input.

Is this really necessary?

Strictly speaking, no, this is not necessary. Your HTML will still pass validation without labels and the page will look fine. However, your users may be annoyed of having to click tiny little checkboxes when they could just click the text next to the checkbox. Adding labels increases the area on which they can click, and can make filling out a form faster.

Thus, it’s more a matter of accessibility than necessity.

Published by Geoffrey Liu

A software engineer by trade and a classical musician at heart. Currently a software engineer at Groupon getting into iOS mobile development. Recently graduated from the University of Washington, with a degree in Computer Science and a minor in Music. Web development has been my passion for many years. I am also greatly interested in UI/UX design, teaching, cooking, biking, and collecting posters.

2 thoughts on “HTML Usability tip: Using labels for radio and checkboxes

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.