Buliding website with tableless design helps website to keep  web 2.0 standard. In this article I am not talking about  web 2.0 I am here to make the form completely tableless design that’s with CSS Form.
Now we donot need to keep input box into the table field.

XHTML

<form action=”form.php” method=”post”>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for=”first_name”>First Name:</label>
<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”” />
</div>
<div>
<label for=”last_name”>Last Name:</label>
<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”” />
</div>
<div>
<label for=”postal”>Zip/Postal Code:</label>
<input type=”text” name=”postal” id=”postal” size=”10″ value=”” />
</div>
</fieldset>
</form>

CSS

form div
{
clear:left;
display:block;
width:400px;
zoom:1;
margin:5px 0 0 0;
padding:1px 3px;
}

form div label
{
display:block;
float:left;
width:130px;
padding:3px 5px;
margin: 0 0 5px 0;
text-align:right;
}

Advertisements