Example Navigation

Example 1: Checkboxes with no labeling

Best Practice Rating: Fail

Example Start

Select pizza toppings

Example End

HTML Source Code

<div class="label">Select pizza toppings</div>
<ul class="checkbox">
    <li><input type="checkbox"  value="pepperoni"/>Pepperoni</li>
    <li><input type="checkbox" value="sausage" />Sausage</li>
    <li><input type="checkbox" value="mushrooms"/>Mushrooms</li>
    <li><input type="checkbox" value="onions"/>Onions</li>
    <li><input type="checkbox" value="gpeppers"/>Green Peppers</li>
    <li><input type="checkbox" value="xcheese"/>Exrtra Cheese</li>
</ul>

CSS Source Code

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

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

ul.checkbox li input {
  margin-right: .25em;
}
  </style>