Web based School
| Group Boxes |
 |
 |
You can visually group together a set of controls on your form by placing a group box around them. A group box displays a labeled border around the set of controls.
The <fieldset> Tag
A group box is placed around a set of form fields with the <fieldset> tag. The box is labeled with <legend> tag. The general formats for these two tags are shown below:
|
<fieldset ...> <legend ...> align="left|center|right" </legend> ...form fields... </fieldset> |
Example coding for the fieldset of radio buttons at the top of this page is shown below. You should note that the <fieldset> tag expands the box to the width of the page unless it is otherwise constrained. Therefore, you probably need to place your grouped fields inside table cells or other container tags to control their placement and appearance.
<table style="width:30%"><tr><td>
<fieldset>
<legend><b>Choose one:</b></legend>
<input type="radio" name="Radio">First Button<br/>
<input type="radio" name="Radio">Second Button<br/>
<input type="radio" name="Radio">Third Button<br/>
</fieldset>
</td></tr></table>
<fieldset>
<legend><b>Choose one:</b></legend>
<input type="radio" name="Radio">First Button<br/>
<input type="radio" name="Radio">Second Button<br/>
<input type="radio" name="Radio">Third Button<br/>
</fieldset>
</td></tr></table>
The legend can be styled with a style sheet; it can also be aligned to the left, center, or right of its box with the align attribute. The following fieldset shows these alignments.
Tab Order
Users often move through the fields on a form with the tab key. The order in which the fields are accessed is given, by default, by the physical order of coding on the XHTML form. Normally, this is the sequence in which you want users to fill in your forms -- from top to bottom, left to right.
You can, however, alter this tab order by using the tabindex attribute within any control on your form. In the following form the text fields have been indexed in reverse order. That is, you tab through the fields from bottom to top. Click in the first field then use the tab key to proceed through the other fields to view this tab order.
Each field on a form is assign a tab order using tabindex to assign a sequence number. You normally set the tabindex values to 1, 2, 3,...etc. from the first to last fields. A value of 0 causes the field to retain its physical tab order; a negative value removes the field from the tab order completely.
The following listing shows the code for the text fields that you tabbed through above:
<table style="width:30%"><tr><td>
<fieldset>
<legend>Reversed Tab Order:</legend>
<input type="text" name="Fifth" tabindex="5"><br/>
<input type="text" name="Fourth" tabindex="4"><br/>
<input type="text" name="Third" tabindex="3"><br/>
<input type="text" name="Second" tabindex="2"><br/>
<input type="text" name="First" tabindex="1"><br/>
</fieldset>
</td></tr></table>
<fieldset>
<legend>Reversed Tab Order:</legend>
<input type="text" name="Fifth" tabindex="5"><br/>
<input type="text" name="Fourth" tabindex="4"><br/>
<input type="text" name="Third" tabindex="3"><br/>
<input type="text" name="Second" tabindex="2"><br/>
<input type="text" name="First" tabindex="1"><br/>
</fieldset>
</td></tr></table>
|
|
Popular Tutorials
-
MS Access
1109
-
C++
1222
-
HTML
584
-
JavaScript
616
-
Vbscript
873
-
Oracle
473
-
VC++
875
-
SQL
2959
-
XML
514
-
Java
814
-
Perl
455
-
Linux
451
