CSS form design without tables

In this tutorial, I am going to show you how to simulate a table-like interface for designing a form using css. Since tables are not involved, we will require the label element for each and every field in our form.

Preview
This is what we will be doing.


here goes the css code:

body {
font-family: Arial, Verdana, sans-serif;
}

form p {
clear: both;
}

fieldset {
width: 350px;
border: 1px solid #ccc;
}

legend {
font-weight: bold;
font-size:1.2em;
}

label {
font-weight: bold;
width: 120px;
float: left;
}

input[type=text] {
width: 200px;
}

textarea {
width: 200px;
height: 100px;
}

input[type=submit], input[type=reset] {
font-size: 18px;
}

HTML (the form itself)
We are using the html p tag only for the css clear property. This is necessary for the css float property to work properly.

<form id="myform">
<fieldset>
<legend>Sample form</legend>

<p>
<label for="text1">Text input</label>
<input type="text" name="text1" value="text field">
</p>

<p>
<label for="text2">Text input 2</label>
<input type="text" name="text2" value="another text field">
</p>

<p>
<label for="text3">Textarea</label>
<textarea name="text3" rows="5" cols="20"></textarea>
</p>

<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>

</fieldset>
</form>