p vs. ol or ul for form styling

Asked 2009-05-13T22:26:16.517

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.

Edit Report

2 Answers

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).

answered 2009-05-13T22:49:31.627

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.

answered 2009-05-14T02:02:40.493

p vs. ol or ul for form styling

2 Answers

Your Answer