Even with generous padding, these fields are too small.But **hardly anyone has improved the most underrated interaction of them all**: selecting checkboxes and radio buttons. Have you ever tried to click on a checkbox or radio button—*and miss?* I know I have, and it sucks. It all boils down to the click area of checkboxes and radio buttons. As the smallest form element in our design arsenal, they're the necessary evils of the bunch. We need them, users understand them, but they're just so damned small! ###Bigger is Better Instead of relying on users to click on a teeny-tiny form field, make use of another HTML element—the
label—and wrap it around checkboxes and radio buttons.
By wrapping your radio buttons and checkboxes with the label element, the click area on this single form was increased by a factor of 5x. (Image credit: Rosenfield Media)You can learn a bit more about the
labelelement at the W3 Schools website. Suffice to say, labels can be very useful, but they're often misused (or not used at all in favor of the
spanelement). Here's how it's done:
<input type="checkbox" name="newsletter" value="" />
Include me in your next newsletter mailing.
labelelement. Not only does it mean you've got some great coding chops, but it makes the entire form experience for users that much better. The larger click area allows users to glide right through your form with ease (and less frustration). **And with that, your Web forms suck less.** Stay tuned—we have plenty of tips and pointers for sucking less at just about everything!
*Want more tips for labels and forms? I suggest looking into Luke W's book. Web Form Design is a great beginner's to intermediate's guide on every key aspect of Web form design. It's a great read that makes you think just a little bit more about how we interact with forms.*