input[type=checkbox] - Labeling checkbox using title attribute

Description

  • Using the @title@ attribute to define @labels@ will work with assistive technologies but is not defined in the @HTML@ specifications

Example Start

Select pizza toppings
  • Pepperoni
  • Sausage
  • Mushrooms
  • Onions
  • Green Peppers
  • Extra Cheese

Example End

Roles

  • checkbox

Properties

HTML Source Code


<div class="label">Select pizza toppings</div>
<ul class="checkbox">
  <li><input type="checkbox"  value="pepperoni" title="Pepperoni"/>Pepperoni</li>
  <li><input type="checkbox" value="sausage"  title="Sausage"/>Sausage</li>
  <li><input type="checkbox" value="mushrooms" title="Mushrooms"/>Mushrooms</li>
  <li><input type="checkbox" value="onions" title="Onions"/>Onions</li>
  <li><input type="checkbox" value="gpeppers" title="Green Peppers"/>Green Peppers</li>
  <li><input type="checkbox" value="xcheese" title="Extra Cheese"/>Extra 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>