Forms With Style

Fieldsets, Legends, and Labels

A more practical approach to styling form is to focus on usability. Here is a demo of a modern looking form that uses fieldsets, legends, and labels.

From the w3c HTML 4.01 forms specification:

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form 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. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

Here is an example of how to use a label element implicitly: 

<label><input type="checkbox" /></label>

Internet Explorer (both mac and windows) does not support implicit use of LABEL; it is necessary to supply a for attribute. 

<label for="cb1"><input id='cb1'type="checkbox" /></label>

 

Tags

Archived Scripts

*AnimTree
*Tabs
*GlideMenus
*DragLib