Chapter 72. Working with Fieldsets
| A fieldset is a group of logically related widgets. The members of a fieldset don't have to be the same type of widget. In fact, each widget can be different. As long as the widgets appear next to each other in the HTML listing, you can group them together as a fieldset, as in Figure 72.1. Figure 72.1. This form has two logical divisions or fieldsets.
Listing 72.1. View Source for Figure 72.1.<form> <table cellpadding="10"> <tr valign="top"> <td width="50%"> <p><strong>Choose your newsletters:</strong></p> <!-- First fieldset begins --> <fieldset> <table> <tr> <td> <input name="news" type="checkbox" value="yes"> News </td> </tr> <tr> <td> <input name="sports" type="checkbox" value="yes"> Sports </td> </tr> <tr> <td> <input name="weather" type="checkbox" value="yes"> Weather </td> </tr> <tr> <td> <input name="ent" type="checkbox" value="yes"> Entertainment </td> </tr> <tr> <td> <input name="ed" type="checkbox" value="yes"> Editorial </td> </tr> <tr> <td> <input name="arts" type="checkbox" value="yes"> Arts </td> </tr> <tr> <td> <input name="style" type="checkbox" value="yes"> Style </td> </tr> </table> </fieldset> <!-- First fieldset ends --> </td> <td width="50%"> <p><strong>Pick the days to receive them:</strong></p> <!-- Second fieldset begins --> <fieldset> <table> <tr> <td> <input name="sun" type="checkbox" value="yes"> Sunday </td> </tr> <tr> <td> <input name="mon" type="checkbox" value="yes"> Monday </td> </tr> <tr> <td> <input name="tues" type="checkbox" value="yes"> Tuesday </td> </tr> <tr> <td> <input name="wed" type="checkbox" value="yes"> Wednesday </td> </tr> <tr> <td> <input name="thurs" type="checkbox" value="yes"> Thursday </td> </tr> <tr> <td> <input name="fri" type="checkbox" value="yes"> Friday </td> </tr> <tr> <td> <input name="sat" type="checkbox" value="yes"> Saturday </td> </tr> </table> </fieldset> <!-- Second fieldset ends --> </td> </tr> </table> </form> As you can see, the browser draws a thin, rectangular border around the widgets in the fieldset. You can even embed a short string of text into the border with the legend tag, as Figure 72.2 shows. Listing 72.2. View Source for Figure 72.2.<form> <!-- Layout table begins --> <p><strong>Choose your newsletters:</strong></p> <fieldset> <legend>Newsletters</legend> <!-- Widgets go here --> </fieldset> <!-- More layout table --> <p><strong>Pick the days to receive them:</strong></p> <fieldset> <legend>Days</legend> <!-- More widgets --> </fieldset> <!-- Layout table ends --> </form> Figure 72.2. Use the legend tag to embed a short string of text within the rectangular border.
By default, the text color of the legend is blue in Internet Explorer and black in Netscape. Blue is an unfortunate color choice here, since it's also the standard color of unvisited hyperlinks. A blue legend can trick your visitors into clicking, even without the telltale underline. Fortunately, CSS lets you redefine the legend tag to display whatever color you like: <style type="text/css"> legend { color: #000000; } </style> Why not make the legend bold while you're at it: <style type="text/css"> legend { color: #000000; font-weight: bold; } </style> See the results of this style in Figure 72.3. Figure 72.3. Use CSS to modify the appearance of your fieldset's legends. You can also use CSS to modify the appearance of the border around the fieldset. The border-color, border-style, and border-width attributes perform nicely in this regard. Use the color attribute in your style rule to change the color of the text inside the fieldset, and use the background-color attribute to create a colored region behind the fieldset, as in Figure 72.4. Figure 72.4. You can create a style rule for the fieldset tag, too.
Listing 72.3. View Source for Figure 72.4. <head> <style type="text/css"> fieldset { border-style: dashed; border-width: 4px; border-color: #FF0000; color: #FF0000; background-color: #FFCCCC; } </style> </head> <!-- Body content goes here --> |
