Best Practice for Label-Input layout in ASP.NET

Question

What is the generally most accepted way of grouping labels and inputs? Currently I am placing each pair in a div, but previously I have also placed each pair in a <p> . Are there better ways?

Answer 1

That depends. I usually try not to group them at all, since it only creates more markup.

<div id="container">
   <label for="username">Username</label><input type="text" id="username">
   <label for="password">Password</label><input type="text" id="password">
</div>

Then to avoid everything ending up in one line, style the container and the label/inputs to fit.

#container {
   width: 350px;
}
#container label {
   width: 100px;
   margin-left: 5px;
   text-align: right;
}
#container input {
   width: 225px;
}

If this is not possible, then I'd recommend using <div> 's, as <p> 's are meant for text. ("paragraph")

Answer 2

You could use definition list and style them to display labels and input fields where you want them. It could be something like this:

<dl>
<dt><label for="name">Name</label></dt>
<dd><input type="text" name="name" id="name" /></dd>
</dl>

I like the pair's association that definiton list element offers.