Grouped Radio Buttons

Groups of radio buttons are used as possible answers to a certain question, and as such they are always related to each other. Hence they are always grouped, while the <fieldset>‘s <legend> contains the question and each control’s <label> contains an answer.

Working Example

Gender

Explanation

This is also reflected by the fact that each radio button’s name attribute is identical.

Code

<form>
  <fieldset>
    <legend>Gender</legend>
    <div class="control">
      <input id="gender_male" name="gender" type="radio" /><label for="gender_male">Male</label>
    </div>
    <div class="control">
      <input id="gender_female" name="gender" type="radio" /><label for="gender_female">Female</label>
    </div>
  </fieldset>
</form>
.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

input + label {
  width: auto;
}
NIL