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.