HTML and CSS Reference
element to bind them together and establish their semantic relationship (we'll introduce the legend
Listing 8-22 . A simple form with its controls wrapped in a fieldset
<form method="post" action="/apps/subscribe.py">
<legend>Subscribe to our newsletter</legend>
<input type="email" name="email" id="email" required>
You can see how a browser displays this form in Figure 8-25. The browser draws the border automatically,
along with a bit of padding to create space between the border and its contents. You can adjust or remove
the border and padding with CSS.
Figure 8-25 . The form as it appears in Chrome for OS X
The fieldset element doesn't require any attributes.
There aren't any optional attributes for the fieldset element, only the usual global attributes.
The legend element provides a text title or caption for a set of form fields, hence it can appear only within
a fieldset element. When it does appear, it must be the first child of the fieldset , coming before any
other content or elements. It's a phrasing element that can only contain text and other phrasing elements,
but most browsers will position a legend so that it overlaps the fieldset 's top border (as shown in Figure
8-15), deviating from typical inline styling. Text in a legend element usually doesn't wrap to multiple lines
like ordinary text, so keep your legends short.
Unfortunately, the legend element is notoriously difficult to style consistently with CSS. Browsers simply
refuse to apply some CSS properties to legends, even those they'll willingly apply to almost any other
element. You can usually influence a legend's font family, size, weight, and color, but attempting to apply a
background image, border, margins or padding, or to reposition the legend via CSS will be next to
impossible in some common browsers, especially older versions.