11.10: Grouping 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 \(\PageIndex{1}\): 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 \(\PageIndex{2}\): General formats for <fieldset> and <legend> tags.

A example group of fieldsets is shown in Figure \(\PageIndex{3}\).

Checkboxes:

Selection List:

Figure \(\PageIndex{3}\): 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>

Figure \(\PageIndex{4}\): 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>

Figure \(\PageIndex{5}\): 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>

Figure \(\PageIndex{6}\): Forms and CSS

First Name:

Last Name:

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.