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