Assembling Forms and Applications - HTML5 with CSS3 - page 274

It's often best to leave the browsers to render form legends with most of their default styling intact, and
keep the CSS artistry to a minimum. If your design requires more stylistic power than the legend element
allows, you might opt for a heading instead, though the legend element is more semantically fitting and
improves your form's accessibility. Styling limitations might not be a good enough justification to forego
such an otherwise useful element.
Listing 8-23 shows a fieldset featuring a legend element, in this case acting as both a title to announce
the purpose of the controls and some instructional text to help the visitor figure out what to do.
Listing 8-23 . A set of form fields labeled by a legend element
<fieldset id="accessories">
<legend>Select additional accessories</legend>
<ul>
<li>
<label><input type="checkbox" name="grapgun"> Grapple gun</label>
</li>
<li>
<label><input type="checkbox" name="minilaser"> Mini laser cutter</label>
</li>
<li>
<label><input type="checkbox" name="smokepel"> Smoke pellets</label>
</li>
<li>
<label><input type="checkbox" name="xrayspecs"> Terahertz imaging goggles</label>
</li>
<li>
<label><input type="checkbox" name="microcam"> Micro-camera</label>
</li>
</ul>
</fieldset>
Figure 8-26 shows a legend as rendered by Firefox, and most other browsers will display it much like this
with their default styling. The legend is indented from the edge and centered vertically over the fieldset 's
top border, with a small gap of white space on each side. One interesting oddity is that older versions of
Internet Explorer for Windows inexplicably colored legend elements blue by default, but you can override
that color easily with CSS.
Figure 8-26 . The legend element as seen in Firefox for Windows with default styling. This rendering is fairly typical,
though you might see slight variations in some browsers.