Usability Tip of the Day: Label your Form Elements, Dammit.Posted by Dylan Beattie on 08 November 2008 • permalink
I see high-profile, expensive, shiny, corporate websites all the time that don’t label their form inputs. It’s easy. It’s accessible. And – in the case of checkboxes and radio buttons, where the form inputs themselves are about this big :, it’s massively helpful, because in almost every modern browser, you can click the label instead of having to click the actual form element. It’s staggering that so-called professional web developers don’t label their form elements properly. Here’s how you do it:
<input type=”radio” id=”beerRadioButton” name=”beverage” value=”beer” /> <label for=”beerRadioButton”>Beer</label> <input type=”radio” id=”wineRadioButton” name=”beverage” value=”wine” /> <label for=”wineRadioButton”>Wine</label>
(In ASP.NET WebForms, if you set the AssociatedControlId of an <asp:Label /> control, it’ll render an HTML label element with the correct for=”” attribute; if you omit the AssociatedControlId attribute, it won’t even render as a label...)
Here's a form example without the labels wired up properly:And here's the same radio buttons, with the labels wired up properly. See how in the this example, clicking the labels will select their associated radio-buttons, but in the previous form, you have to actually click the radio-button itself? Just do it, OK? It helps people using screen readers. It helps mobile browsers. And it helps people downloading Lego instructions after a couple of beers. Trust me.