While HTML-izing forms web developers/designers usually prefer to go with 'table' structure and if the client insists for 'div' structure we have no another option than creating a 'sea of div' tags with float:left and float:right attributes.
Recently I spend some time looking for a better way of HTML-izing form and it was a relief for me to come up with the markup and css below -
<style type="text/css">
.signup ul{
padding: 20px;
margin: 6px 0 0 0;
}
.signup ul li{
padding: 4px 0;
}
.signup ul li label{
display: inline-block;
text-align: right;
}
.signup ul li input{
width: 204px;
}
.signupCont ul li img{
vertical-align: middle;
}
</style>
<div class="signup">
<ul>
<li>
<label>Full Name:</label>
<input type="text" tabindex="1" id="Text1" />
</li>
<li>
<label>Last Name:</label>
<input type="text" tabindex="2" id="Text2" />
</li>
</ul>
</div>
Recently I spend some time looking for a better way of HTML-izing form and it was a relief for me to come up with the markup and css below -
<style type="text/css">
.signup ul{
padding: 20px;
margin: 6px 0 0 0;
}
.signup ul li{
padding: 4px 0;
}
.signup ul li label{
display: inline-block;
text-align: right;
}
.signup ul li input{
width: 204px;
}
.signupCont ul li img{
vertical-align: middle;
}
</style>
<div class="signup">
<ul>
<li>
<label>Full Name:</label>
<input type="text" tabindex="1" id="Text1" />
</li>
<li>
<label>Last Name:</label>
<input type="text" tabindex="2" id="Text2" />
</li>
</ul>
</div>
No comments:
Post a Comment