ptg16476052350 LESSON 12: Designing Forms
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 fini sh 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 12.22 shows the result.Output ▼
The presentation of the fieldset in Figure 12.22 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 12.23 shows the
markup from Figure 12.22 with some the following styles applied:FIGURE 12.22
The fieldset and
legend elements
enable you to orga-
nize your forms.