Please use <label> for checkboxes! Apr14 '06
Please, please, please use <label> for your web forms, especially for checkboxes. It is so frustrating to have to point exactly, precisely on that tiny little checkbox. It’s way too much strain on the eyes and mouse-hand.
I see this more and more, with web services - I just cringe every time I have to find that exact tiny little spot on the screen.
You don’t know how many times I miss the checkbox completely - it’s almost like a game of darts. It takes me at least three mouse clicks to actually check the box. This is, of course, when I’m browsing in a hurry, but who doesn’t browse in a hurry?
It’s very simple. Just include a frickin’ id attribute in your checkbox code, and a <label> element surrounding the display name:
<label for="checkbox">Please check this box:</label> <input type="checkbox" id="checkbox" />
Example. Try clicking anywhere on the words "Please check this box:" below:
See. Much wider target area.
Hmph. There is my Friday evening rant.
Categories: Rants 
, Web Development
Add Feedback (view all)
Leave feedback
is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago.
Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.
Stats
2 unique visits since August 2008