Which one do you prefer? At first sight I would prefer a definition list. Clean markup, nice when css is turned off (text browsers?), the input defines the term (dt), kinda :-). Lotsa hooks to apply styles to. What I also like is you can easily use DOM scripting with definition lists. If one required input is forgotten, you can easily use createElement and some appendChilds on the list. You can't do this with the latter. Also, what if you want multiple inputs (type="radio") for one dt? Well, just add an extra dd. Also the submit button doesn't need extra markup, but it can be a pain to add that button in the dd for the last dt. Well, I'll live with it.
I'll probably add something to this comparison in the near future. For now it's also nice to note the second example uses less code overall (in this case):
<table><tr><th><label for="input1">First input</label></th><td><input type="text" name="input1" id="input1"></td></tr><tr><th><label for="input2">Second input</label></th><td><input type="text" name="input2" id="input2"></td></tr><tr><th></th><td><input type="submit" name="submit" value="Submit"></td></tr></table> #form1 th { text-align: right; font-weight: normal; padding: 0 20px; width: 80px; }
<dl><dt><label for="input1">First input</label></dt><dd><input type="text" name="input1" id="input1"></dd><dt><label for="input2">Second input</label></dt><dd><input type="text" name="input2" id="input2"></dd><dd><input type="submit" name="submit" value="Submit"></dd></dl> #form2 dt { float: left; text-align: right; padding: 0 20px; width: 80px; } #form2 dd { margin-left: 120px; }
<label for="input1">First input</label><input type="text" name="input1" id="input1"><br><label for="input2">Second input</label><input type="text" name="input2" id="input2"><br><input type="submit" name="submit" value="Submit" class="submit"> #form3 label { float: left; padding: 0 20px; text-align: right; width: 80px; } #form3 br { clear: left; } #form3 input.submit { margin-left: 120px; }