Clever Geek Handbook

Best Practice for Hosting Labels-Input in ASP.NET

What is the most common way to group labels and inputs? Currently I put every pair in a div, but previously I also put every pair in <p>

. Are there any better ways?

+2


source to share


2 answers


It depends. I usually try not to group them at all as 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 ending up on the same line, tweak the container and label / inputs to match.



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

If this is not possible, I recommend using <div>

's as they <p>

are meant for text. ("Item")

+4


source


You can use a list of definitions and style them to display labels and input fields where you need 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 pairwise association that the definiton list item provides.

+2


source






More articles:


All Articles