Forms: Field LABEL's
Proper use of field labels make your forms a whole lot friendlier. Labeling makes the completion of the form easier by making the area of selection larger. It also improves the accessibility of your forms by properly associating a label with the form field.
Three new tags introduced in the HTML 4.0 code standards make field labeling possible: FIELDSET, LEGEND, and LABEL. Below you will find two basic implementations of these tags, based on a simple and complex need.
Single, Stand Alone, Field
This method could be used where a single element is used for a response. Note the additional use of the ID and FOR elements. These elements are applied to properly relate the INPUT with the LABEL.
| <label for="sample"><input type="checkbox" id="sample" name="sample" value="...">check box label.</label> |
(Note: The LABEL tag allows the box to be accessed via its label, giving a larger and friendlier target for selecting the field.)
Multiple Elements for One Field
This complex method is used when multiple elements relate to one response. The FIELDSET wraps all the input elements together and the LEGEND properly identifies that set of fields. The ID attribute can be use here as well if the field and label are not in juxtaposition for proper readability and functionality. However, in this example you should notice that the LABEL tag encloses the field and the label. This enclosure method allows the elimination of the ID attribute.
Syntax:
|
<fieldset> <legend>Title of this field set:</legend> <label for="set1"><input type="checkbox" id="set1" name="set" value="1">Label for first option.</label><br> <label for="set2"><input type="checkbox" id="set2" name="set" value="2">Label for second option.</label> </fieldset> |
(Note: If you are using one of the newer browsers you may notice a box drawn around the set of fields. This can be disabled or controlled with style sheet coding. To turn off the border simply add to the FIELDSET tag an attribute and value of: style="border:0px;")
Definitions
FIELDSET:
Groups together a set of related fields, clearly identifying them as having a relationship. Be sure that you are using FIELDSET properly. Proper nesting is important when you use this tag. Check IndexDot for support and requirements. You migh also check your page for compliance and nesting problems with W3C's Validator.
LEGEND:
A title or label for the set of related fields.
LABEL:
Used to directly associate content with a form field, generally making that field selectable from the content itself. The beginning and end tags for LABEL can be wrapped around the field itself, but this is not a requirement. LABEL can be independently located in the document provided the FOR and ID attributes are always defined.
FOR:
Identifies the target field for which this label is to be associated, all fields must be uniquely identified.
INPUT:
The field to receive the input.
ID:
The unique identifier for a particular field, this is not related to the field name.
