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.