The label tag for form elements

A huge dev-related pet peeve of mine is when you’re filling out a form on a website and the radio buttons and checkboxes do not have the <label> tag implemented, so you can’t click on the text next to the radio buttons/checkboxes to select them.

The label tag is simple and pretty much effortless to implement. I’m surprised how many web developers I’ve talked to don’t know about it, and I’m even more surprised at how many high-profile websites have failed to implement it in their forms. It might be a silly thing to count as a pet peeve, but if you can make your users’ experience a little smoother with basically no additional effort, why not do it? Maybe even throw in a {cursor: pointer} for good measure. Five seconds of coding and you’ve enhanced your site’s UX.

Nowadays when I’m filling out forms on sites I intentionally click the text next to the radio buttons/checkboxes just to piss myself off and see if the label tag as been implemented, and I’d say it’s usually there somewhere around 50% of the time. Now that you know about it, why not add it to all your forms?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>