P Vs. Ol Or Ul For Form Styling

Typically I style forms with the unordered list tag e.g.

• Name &l

Solution 1:

In my opinion a group of form controls is neither a list item or a paragraph. When I mark up forms, I separate my groups of label/input by wrapping them in <div>s. If you're trying to mark up a division between form controls, then don't be afraid of using a <div>.

<fieldset><divclass="field"><labelfor="txtName">Name</label><inputtype="text"id="txtName" /></div><divclass="field"><labelfor="txtTitle">Title</label><inputtype="text"id="txtTitle" /></div></fieldset>

From your given examples, <p> probably degrades "better" because you won't see bullets next to your items if CSS was unavailable, and the groups of controls would probably be spaced out fairly well.

Solution 2:

Don't forget Definition List:

<fieldset><dl><dt><labelfor="txtName">Name</label></dt><dd><inputtype="text"id="txtName" /></dd></dl></fieldset>

There's no real right answer. Pick the markup that makes the most sense to you. To me, forms aren't an unordered list. Definition list is closer in my mind.

Solution 3:

Generally, forms fields are neither paragraphs nor list items, semantically speaking. If you require your form fields to be grouped together, <div>s with classes are likely most appropriate, but if you're just looking for a container around the <label>/<input> pair, consider the alternate method for associating a label with a field:

<fieldset><label>Name <inputtype="text"id="txtName"/></label><label>Location <inputtype="text"id="txtLocation"/></label></fieldset>

You can then style or manipulate them together without an artificial wrapper (and without ever having to worry about for= again).

Solution 4:

I tend to use ordered lists

<fieldset><ol><li><labelfor="txtNameFirst">Name</label><inputtype="text"id="txtNameFirst" /></li><li><labelfor="txtNameLast">Name</label><inputtype="text"id="txtNameLast" /></li></ol></fieldset>

My semantic reasoning for using ordered lists is that a good deal of forms in print are actually numbered and are therefore an ordered list of form inputs.

Semantically, I think a definition list holds water as well, and it does have the added benefit of supplying a wrapper for every label/input pairing as well as each individual label and input which can give you a lot of design control (if you can live with the slight heavy-handedness of wrapping a DL around each label/input pair)

<fieldset><dl><dt><labelfor="txtNameFirst">Name</label></dt><dd><inputtype="text"id="txtNameFirst" /></dd></dl><dl><dt><labelfor="txtNameLast">Name</label></dt><dd><inputtype="text"id="txtNameLast" /></dd></dl></fieldset>

If ordered/unordered/definition lists just aren't your thing, then I'd go with divs. Their only implied semantics are "a division" so they are fine for the job.

I have a hard time justifying the use of paragraph (p) elements to wrap label/input pairs as the implied semantics of the p element just don't apply in my opinion. (also, it's nice to keep the p element available for use inside the form for explanatory text if needed)

Solution 5:

The key things that the W3C lay out for forms is that the Form is set up in a way that the labels and form elements can be easily grouped programatically:

1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

In particular HTML Technique 44: Using label elements and HTML Technique 71: Providing a description.

The advantage you get from wrapping each label and input in a list item is that the user with a screen reader may well get some indication at the begining that the list has x items in it, which might be useful.

Generally though our designers are with Zack - our form rows are wrapped in a div, with a class of "formrow" or similar.