{"id":3137,"date":"2013-08-14T11:20:14","date_gmt":"2013-08-14T18:20:14","guid":{"rendered":"http:\/\/g-liu.com\/blog\/?p=3137"},"modified":"2013-11-21T15:45:39","modified_gmt":"2013-11-21T22:45:39","slug":"html-usability-tip-using-labels-for-radio-and-checkboxes","status":"publish","type":"post","link":"https:\/\/g-liu.com\/blog\/2013\/08\/html-usability-tip-using-labels-for-radio-and-checkboxes\/","title":{"rendered":"HTML Usability tip: Using labels for radio and checkboxes"},"content":{"rendered":"

In your HTML forms, you may have radio boxes or check boxes like so:<\/p>\n

Option 1
\n Option 2
\n Radio 1
\n Radio 2<\/form>\n

The source code may look like this:<\/p>\n

\r\n<form><input type="checkbox" \/> Option 1\r\n<input type="checkbox" \/> Option 2\r\n<input type="radio" name="radio" \/> Radio 1\r\n<input type="radio" name="radio" \/> Radio 2<\/form>\r\n<\/pre>\n
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.
\n
\nHowever, there is a very easy trick to making text next to boxes clickable. Use the HTML <label><\/code> tag, like so:<\/p>\n
\r\n<input type="checkbox" id="cbox1" \/>\r\n<label for="cbox1">Option 1<\/label><br>\r\n<input type="checkbox" id="cbox2" \/>\r\n<label for="cbox2">Option 2<\/label>\r\n<!-- ...and so on -->\r\n<\/pre>\n
The label for<\/code> attribute value corresponds with the id<\/code> for input. The result is something like this:<\/p>\n\n
When you click on the text, the corresponding box is selected. This makes your form much easier to use for your users.<\/p>\n
Prefer to have the text before the box? Simply place the <label> ... <\/label><\/code> before the input<\/code>.<\/p>\n
Is this really<\/i> necessary?<\/h1>\n
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.<\/p>\n
Thus, it’s more a matter of accessibility than necessity.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"HTML Usability tip: Using labels for radio and checkboxes http:\/\/wp.me\/p2Zt3y-OB","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[830,115],"tags":[],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Zt3y-OB","_links":{"self":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/3137"}],"collection":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/comments?post=3137"}],"version-history":[{"count":17,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/3137\/revisions"}],"predecessor-version":[{"id":3943,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/3137\/revisions\/3943"}],"wp:attachment":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/media?parent=3137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/categories?post=3137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/tags?post=3137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}