Search code examples
htmlcssformssemantics

p vs. ol or ul for form styling


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.


Solution

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