Example Navigation

Example 4: Labeling radio buttons using reference

Best Practice Rating: Good

Example Start

Select pizza crust

Example End

HTML Source Code

<div class="radiogroup">
  <div class="label">Select pizza crust</div>
  <ul class="radio">
    <li><input type="radio" name="crust" id="crust1" value="deep"/><label for="crust1">Deep dish</label></li>
    <li><input type="radio" name="crust" id="crust2" value="thick"/><label for="crust2">Thick</label></li>
    <li><input type="radio" name="crust" id="crust3" value="hand"/><label for="crust3">Hand thrown</label></li>
    <li><input type="radio" name="crust" id="crust4" value="thin"/><label for="crust4">Thin</label></li>
  </ul>
</div>

CSS Source Code

  <style type="text/css">
div.radiogroup div.label {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  font-weight: bold;
}

ul.radio  {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  list-style: none;
}


  </style>