Best Practice for Label-Input layout in ASP.NET
What is the generally most accepted way of grouping labels and inputs? Cur开发者_JAVA百科rently I am placing each pair in a div, but previously I have also placed each pair in a <p>
. Are there better ways?
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")
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.
精彩评论