Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 313
Bayard Randel Avatar asked May 13 '09 22:05

Bayard Randel


2 Answers

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.

like image 151
Zack The Human Avatar answered Oct 01 '22 19:10

Zack The Human


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.

like image 41
John Sheehan Avatar answered Oct 01 '22 17:10

John Sheehan