HTML and CSS Reference
In-Depth Information
element to bind them together and establish their semantic relationship (we'll introduce the
legend
element next).
Listing 8-22
. A simple form with its controls wrapped in a
fieldset
<form method="post" action="/apps/subscribe.py">
<fieldset>
<legend>Subscribe to our newsletter</legend>
<p>
<input type="email" name="email" id="email" required>
<button type="submit">Subscribe</button>
</p>
</fieldset>
</form>
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
Required Attributes
The
fieldset
element doesn't require any attributes.
Optional Attributes
There aren't any optional attributes for the
fieldset
element, only the usual global attributes.
legend
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.
