WEB DESIGN GARAGE [Electronic resources] نسخه متنی

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

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.

[View full size image]

GEEKSPEAK

A fieldset is a group of logically related widgets.

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.

[View full size image]

TIP

The legend tag must immediately follow the opening fieldset tag.

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.

[View full size image]

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.

[View full size image]

FAQ

Can I create CSS styles for fieldsets?

Sure, but watch out. Remember that, in CSS, a child tag almost always inherits the styles of its parent. This is certainly one of those cases. All the child tags of the fieldset, including the legend, the widgets, and the text, inherit the fieldset's styles.

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 -->

WEB DESIGN GARAGE [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی