CSS Tableless Form

Knowing CSS, you are able to create a form without using tables. A form that does not use tables for its layout is much more lightweight and easily.

Here’s how you would use the label tag and CSS to create a form with very little markup:

The HTML code:

<form action=”#”>
<fieldset>
<legend>This is my contact form</legend>
<p><label for=”name”> First Name</label> <input type=”text” id=”name” /></p>
<p><label for=”name”> Last Name</label> <input type=”text” id=”name” /></p>
<p><label for=”e-mail”>E-mail Address</label> <input type=”text” id=”e-mail” /><br /></p>
<p>
<label for=”comments”>Feedback:</label>
<textarea id=”comments” rows=”5″ cols=”18″></textarea>
</p>
<p class=”submit”><input type=”submit” value=”Submit” /></p>
</fieldset>
</form>

The CSS code is much more easier:

label
{
 width: 9em;
 float: left;
 text-align: left;
 margin-right: 0.5em;
 display: block;
 color: #990000;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}

.submit input
{
margin-left: 4.5em;
}
input
{
 color: #781351;
 background: #CCCCCC;
 border: 1px solid #781351;
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
fieldset
{
border: 1px solid #781351;
width: 20em
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
.textarea{
width: 250px;
height: 150px;
}

This is my contact form

First Name

Last Name

E-mail Address

Feedback: