Wednesday, August 18, 2010

The best markup(HTML) for web forms

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;


<div class="signup">

<label>Full Name:</label>
<input type="text" tabindex="1" id="Text1" />
<label>Last Name:</label>
<input type="text" tabindex="2" id="Text2" />