Labelling radio and checkbox elements

Question

What's the most appropriate, semantically correct way to label checkbox and radio elements? Obviously, giving each one a unique id attribute is an option and using that in id a <label for="">, but this seems like it would break the semantic grouping. Putting unenclosed text next to the input element just seems...wrong.

Edit: Additionally, how should one denote the label for a group of such elements? (i.e. not the description of each option, but the description of the whole group)

Answer 1

I mostly use Chris Coyiers HTML ipsum : http://html-ipsum.com/

always a good helper

Answer 2

Using <label for=""> is the correct way to do that. The grouping of radio buttons is done by denoting the group via the name attribute and individual elements via the id attribute. For example:

<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>

As for putting a label over the entire group, just put them in a container that has a text container above the stack of buttons (or checkboxes). Example:

<div>
  <h3>My Radio Button Group</h3>
  <input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
  <input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
  <input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
</div>