I’m a fan of using the Definition List element. For those of you that are unfamiliar with it, a Definition List is just that, a list of terms and their definitions.
The syntax is as follows:
1: <dl>
2: <dt>Term</dt>
3: <dd>Data</dd>
4: </dl>
This construct is semantically correct for form label and input elements, as illustrated below:
1: <fieldset>
2: <legend>Customer Registration</legend>
3: <dl>
4: <dt><label for="txtFname">First Name</label></dt>
5: <dd><input type="text" name="txtFname" id="txtFname" />
6:
7: <dt><label for="txtLname">Last Name</label></dt>
8: <dd><input type="text" name="txtLname" id="txtLname" />
9:
10: ...
11:
12: </dl>
13: </fieldset>
Some would argue the use of the Definition List element, in which case I’d recommend using an ordered list (or unordered list, if your list items could be displayed in any order). Woork illustrates this example.
Once that’s done you can style and layout your forms via CSS (clean separation of design from semantically correct content).
