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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With