Designing Forms - Web Publishing with HTML and CSS - page 334

Grouping Controls with fieldset and
legend
The fieldset element organizes form controls into groupings that appear in the web
browser. The legend element displays a caption for the fieldset . To create a fieldset
element, start with the opening fieldset tag, followed by the legend element.

Next, enter your form controls and finish things off with the closing fieldset tag:

Input ▼

<fieldset>
<legend> Oatmeal Varieties </legend>
<label><input type=“radio” name=“applecinnamon” /> Apple Cinnamon </label>
<label><input type=“radio” name=“nuttycrunch” /> Nutty Crunch
</label>
<label><input type=“radio” name=“brownsugar” /> Brown Sugar </label>
</fieldset>

Figure 11.17 shows the result.

. Output

FIGURE 11.17
The fieldset and
legend elements
enable you to
organize your
forms.

The presentation of the fieldset in Figure 11.17 is the default, but you can use CSS to
style fieldset elements in any way that you like. A fieldset is a standard block level
element, so you can turn off the borders using the style border: none and use them as
you would <div> tags to group inputs in your forms.

One thing to watch out for with the <legend> tag is that it's a little less flexible than the
<label> tag in terms of how you're allowed to style it. It's also not handled consistently
between browsers. If you want to apply a caption to a set of form fields, use <legend>
but be aware that complex styles may have surprising results. Figure 11.18 shows the
markup from Figure 11.17 with some the following styles applied: