David said:
Then you format the label in the usual way for HTML documents - you put it
after the checkbox.
<input type="checkbox" name="animal" value="Dog" id="chkAnimalDog">
<label for="chkAnimalDog">Dog</label> <br>
<input type="checkbox" name="animal" value="Cat" id="chkAnimalCat">
<label for="chkAnimalCat">Cat</label>
True, but this raises an interesting question. Which side is better?
Aesthetically,
[x] an option
[x] another option
looks nice. Everything lined up. But, for a one-dimensional output medium,
such as a screen reader, it makes more sense to have the labels *before*
the input:
an option [x]
another option [x]
However, it may be possible to have your cake and eat it too. Untested:
<div class="checkboxwrapper">
<label for="foo">Foo</label>
<input type="checkbox" name="foo" id="foo">
</div>
<div class="checkboxwrapper">
<label for="bar">Bar</label>
<input type="checkbox" name="bar" id="bar">
</div>
.checkboxwrapper {
position: relative;
}
.checkboxwrapper label {
padding-left: 24px;
}
.checkboxwrapper input {
position: absolute;
top: 0; left: 0;
}
As a side note, for those using labels with an implicit "for", e.g.
<label>Foo <input name="foo"></label>
You may quite like this CSS:
label {
border: 1px dotted white;
}
label:hover {
color: black;
background: #ff9;
border: 1px dotted black;
}