XHTML Tutorial
XHTML Tags Types
XHTML Documents
First Web Page
Page Content
List Structure
Color Styles
Span and Division
Style & Classes
Font Tags
Special Characters
Lists Style
Element Position
Text Links
Redirecting Pages
Traversing Folders
Table Borders
Table Colors
Table Groupings
Creating Framesets
Form Controls
Group Boxes
Form Submission

Free Tutorials
What is Internet
Internet Games
Learn TCP IP
Learn HTML
Learn CSS
Learn XML
Learn WML
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Learn ActiveX
Learn C++
Learn CGI_Perl
Learn Interdev
Learn Java
Learn JavaScript
Learn Vbscript
Learn VisualBasic
Learn VC++
Operating systems
Learn RedHat
Learn Unix
Learn Winnt
Group Boxes

Previous Next

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.

Choose one: First Button
Second Button
Third Button

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

  ...form fields...


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

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.

Choose one: First Button
Second Button
Third Button
Choose one: First Button
Second Button
Third Button
Choose one: First Button
Second Button
Third Button

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.

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

Previous Next

|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |

2013 Soft Lookup Corp. Privacy Statement