views:

665

answers:

6

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

<fieldset>
    <ul>
        <li>
            <label for="txtName">Name</label>
            <input type="text" id="txtName" />
        </li>
    </ul>
</fieldset>

However, often I see markup that uses the <p> tag instead, like so:

<fieldset>
    <p>
        <label for="txtName">Name</label>
        <input type="text" id="txtName" />
    </p>
</fieldset>

Which of these is more semantically correct? Are there any pros or cons to the different methods, other than the <p> style being more succinct?

Edit: Clearly opening a can of worms here - more options, gah! :) Does the W3C have a recommendation here?

Amusingly the W3C recommendation seems to be the least elegant solution:

<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>

A pity there isn't stronger guidance around the best convention for marking up form elements.

+4  A: 

Don't forget Definition List:

<fieldset>
    <dl>
        <dt><label for="txtName">Name</label></dt>
        <dd><input type="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.

John Sheehan
I"m a big fan of using the dl's
jonezy
+12  A: 

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>
  <div class="field">
    <label for="txtName">Name</label>
    <input type="text" id="txtName" />
  </div>
  <div class="field">
    <label for="txtTitle">Title</label>
    <input type="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.

Zack Mulgrew
Good example. I would only change the name of the class to something less presentation-oriented. I would find something that describes better what it is (a field) instead of what it does (divides fields). Does that make sense?
John Sheehan
Yes; good point. "field" is actually a good name, too, since it's in a fieldset.
Zack Mulgrew
Evidently there are multiple ways to approach this, all with their own merits. I'll mark Zack's response as the accepted answer given that it seems to have the most support, but I think we can fairly consider the other suggestions to also be correct.
Bayard Randel
+6  A: 

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 <input type="text" id="txtName"/></label>
    <label>Location <input type="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).

Ben Blank
+1 I have used this technique in the past. The only drawback is that it becomes difficult to line up the inputs when they are wrapped in the label. You can always wrap the label text in a span, though, and go from there...
Zack Mulgrew
I've had good luck setting `display: block` on both the <label> and <input> and floating the latter. Often needs different margins on IE vs. everything else, but that's easily handled with conditional comments.
Ben Blank
+2  A: 

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.

Zhaph - Ben Duguid
+1 Good references
MiseryIndex
+4  A: 

I tend to use ordered lists

<fieldset>
<ol>
 <li>
  <label for="txtNameFirst">Name</label>
  <input type="text" id="txtNameFirst" />
 </li>
 <li>
  <label for="txtNameLast">Name</label>
  <input type="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><label for="txtNameFirst">Name</label></dt>
        <dd><input type="text" id="txtNameFirst" /></dd>
    </dl>
    <dl>
        <dt><label for="txtNameLast">Name</label></dt>
        <dd><input type="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)

Andy Ford
A good argument for the list like nature of forms, supporting the use of ordered lists.
Bayard Randel
A: 

I tended to use one <div> per <label> and <input> combo, until I got a new job where the norm was an unordered list. I have a coworker who swears by tables (one column for labels, one for fields) claiming that it's just tabular data with edit capabilities.

At this point I believe inputs as an unordered list is the best semantic fit, but as you note there are many opinions on the subject.

Adam Backstrom