Group Boxes, Tab Order, and Labels
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.
Figure 10-39. Using a group box around a form control.
The <fieldset> and <legend> Tags
A box is placed around a form control with the <fieldset> tag. The box is labeled
with text coded in an enclosed <legend> tag. A fieldset is an in-line HTML element;
therefore, it must be enclosed inside a block-level tag. The general formats for the two tags are shown
below.
<fieldset>
<legend>text</legend>
...form control
</fieldset>
Figure 10-40. General formats for <fieldset> and <legend> tags.
A example group of fieldsets is shown in Figure 10-41.
Figure 10-41. Example fieldsets.
Code for these fieldsets is shown below. Since a fieldset expands to fill the width of its container,
it is usually necessary to assign it a fixed width to control its placement and appearance. Note that
the example fieldsets are assigned a width of 180 pixels to keep them from each stretching across the
width of their enclosing division, permitting them to display side by side; also, they are vertically
aligned at the top of their container division. A style sheet is applied to both the <fieldset> and
<legend> tags to effect their styling.
<style>
fieldset {width:180px; vertical-align:top}
legend {font-family:verdana; font-size:9pt; font-weight:bold; color:royalblue}
</style>
<div> <-- Block level container for fieldsets -->
<fieldset>
<legend>Radio Buttons:</legend>
<input name="Radio" type="radio" />First Button<br />
<input name="Radio" type="radio" />Second Button<br />
<input name="Radio" type="radio" />Third Button<br />
</fieldset>
<fieldset>
<legend>Checkboxes:</legend>
<input name="Box1" type="checkbox"/> First Checkbox<br />
<input name="Box2" type="checkbox"/>Second Checkbox<br />
<input name="Box3" type="checkbox"/> Third Checkbox<br />
<input name="Box4" type="checkbox"/>Fourth Checkbox<br />
<input name="Box5" type="checkbox"/> Fifth Checkbox<br />
</fieldset>
<fieldset>
<legend>Selection List:</legend>
<select size="5">
<option>First Option</option>
<option>Second Option</option>
<option>Third Option</option>
<option>Fourth Option</option>
<option>Fifth Option</option>
<option>Sixth Option</option>
<option>Seventh Option</option>
</select>
</fieldset>
</div>
Listing 10-21. Code to group and label form controls.
The <label> Tag
Some form controls automatically have labels associated with them (buttons) while most do not
(text boxes, checkboxes, radio buttons, text areas, and menus). The <label> tag is used
to define a label for HTML form controls that do not have implicit labels. If you click the text within
the label element, it toggles the control.
The "for" attribute associates a label with another control explicitly: the value of the for attribute
must be the same as the value of the "id" attribute of the associated control element.
The code below demonstrates the use of the <label> tag:
<form action="ThisPage.htm">
<p>Please enter the following information:</p>
<table>
<tr>
<td>Name: </td>
<td><label for="TheName">Enter Name</label><input id="TheName" type="text"></td>
</tr>
<tr>
<td>Password: </td>
<td><label for="TheName">Enter Password</label><input id="ThePassword" type="password"></td>
</tr>
</table>
</form>
Listing 10-23. Code to demonstrate use of the <label> tag.
The text between the opening and closing <label> tag becomes the label for the control.
If the <label> tag is coded to the left of the control, the label appears on the left.
On the other hand, if the <label> tag is coded to the right of the control, the
label appears on the right.
The label tag is important for form page accessibility. It is helpful to visually challenged
individuals who are using assistive technology software. The software is able to match up the
label with the form control. all form controls are required to have an associated label.
Form Control Layout using CSS
In previous sections of this tutorial, tables were used to control the layout of form control elements.
An alternative is to use CSS to format and display form controls. The advantage to using CSS is that
it requires less code - elimnation of table tags and the line break tag. The code below demonstrates
how to layout form controls using CSS.
<style>
form#myForm {width:400px}
label {width: 120px; float:left; text-align:right;
margin-top: 10px; padding-right:10px}
input {margin-top: 10px;}
div#mySubmit {margin-top:10px;padding-bottom:10px}
</style>
-----------------------------------------------
<div>
<form>
<div>
<label for="FName">First Name:</label>
<input type="text" id="FName"/>
</div>
<div>
<label for="LName">Last Name:</label>
<input type="text" id="LName"/>
</div>
<div id="mySubmit">
<input type="submit" value="Submit Form"/>
</div>
</form>
</div>
Using the CSS method, <div> elements are used to organize form elements. Each
<label> and <input> control pair are coded within there own
division container. The entire form area is given a width of 400px using the "myForm" id selector.
Label element selectors are key to aligning the text - this selector is configured to float on the
left with the text aligned to the right. The float causes the input controls to wrap around the right
side of the labels. The input controls are also configured with a top margin. The submit button is
styled using the "mySubmit" id selector. Left margin and bottom padding are applied to the submit button.