9.19. Fieldsets and Legends

Sometimes it is advantageous to visually group certain controls on your form. This is a standard practice for graphical user agents, as in the Mozilla Firebird Options dialog shown in Figure 9-6.

Figure 9-6. Figure 9-6

The fieldset tag (<fieldset>) is used as a container for form elements and results in a thin border being displayed around the contained elements. For example, the following code results in the output shown in Figure 9-7.

<fieldset>
<p>Gender: <br>
<input type="radio" name="gender" id="male" value="male"> Male <br>
<input type="radio" name="gender" id="female" value="female"> Female</p>
</fieldset>
Figure 9-7. Figure 9-7

The legend tag (<legend>) allows the surrounding fieldset box to be captioned. For example, the following code adds a "Gender" caption to the previous example. The output of this change is shown in Figure 9-8.

<fieldset>
<p><legend>Gender </legend>
<input type="radio" name="gender" id="male" value="male"> Male <br>
<input type="radio" name="gender" id="female" value="female"> Female</p>
</fieldset>
Figure 9-8. Figure 9-8

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.