Layout Form without Tables with CSS Trick

How to design a form without using any table or nested div

Author admin on Aug 4, 2008

16 Comments

Rate it

(Rated 4 by 15 people)

9,063 Views

Creating a form with lots of field could be a tedious task as it involves playing with TR and TD in html table. Along with that it also increases the size and complexity of the html code of out page. e.g. Look at the below form:

Title
First Name
Last Name
Address

City
Zip

Could you imagine it to create without using table or nested div. Well if no then you can just by using easy CSS trick. here is the whole css + html code for doing this.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout Form without Tables</title>
    <style type="text/css">
    .formLayout
    {
        background-color: #f3f3f3;
        border: solid 1px #a1a1a1;
        padding: 10px;
        width: 300px;
    }
    
    .formLayout label, .formLayout input
    {
        display: block;
        width: 120px;
        float: left;
        margin-bottom: 10px;
    }
 
    .formLayout label
    {
        text-align: right;
        padding-right: 20px;
    }
 
    br
    {
        clear: left;
    }
    </style>
</head>
<body>
    <div class="formLayout">
        <label>Title</label>
        <select>
            <option>Mr.</option>
            <option>Dr.</option>
            <option>Ms.</option>
            <option>Mrs.</option>
        </select><br>
        <label>First Name</label>
        <input id="name" name="name"><br>
        <label>Last Name</label>
        <input id="Text1" name="name"><br>
        <label>Address</label>
        <input id="address1"><br>
        <label></label>
        <input id="address2"><br>
        <label>City</label>
        <select id="city">
            <option>New York</option>
            <option>Chicago</option>
            <option>etc.</option>
        </select><br>
        <label>Zip</label>
        <input id="zip"><br>
    </div>
</body>
</html>

CSS | Html | Javascript | jQuery | Utility

Discussion

	mcarter	On Aug 5, 2008 10:41 AM
'Simply' Beautiful! Very elegant solution. Thanks for sharing it.

	Hilyin	On Aug 5, 2008 03:38 PM
What about checkboxes and radio buttons? IE6 and Safari 3.1.1 misalign the select fields with the text boxes slightly with this code. Sorry for the parade raining!

	Henry	On Aug 5, 2008 09:56 PM
your label tag should use for="{id of the form element}".

	Ignatius	On Aug 5, 2008 11:23 PM
Layout form without... form tag? Ok, it's just an example, but 'div class="formLayout"' could be 'form'.

	Daily Coder	On Aug 5, 2008 11:39 PM
Ignatius, Yes it could be Form. In that case use: <form class="formLayout">...</form> Henry , you are right. That will good to add. I was just targeting the layout thing here that's why I didn't include that.

	dfguy	On Aug 6, 2008 05:35 AM
great and all if you have a simple form. throw in some radio buttons, checkboxes, nested fields and what have you, and you'll find your simple CSS layout code will become a garbled mess quickly.

	Daily Coder	On Aug 6, 2008 05:53 AM
dfguy, correct. This trick is for simple form only. For instance login box or basic registration form. This is not recommended for complex and nested form.

	Vladimir	On Aug 6, 2008 05:54 AM
I use the same principle in my CSS Framework for Forms: http://code.google.com/p/formy-css-framework/ ;)

	Daily Coder	On Aug 6, 2008 05:56 AM
Nice work Vladimir. I liked different layouts you have created.

	tiso	On Aug 6, 2008 01:02 PM
I use this method too, sometimes with left-aligned labels. Other method is use <li> for holding form lines.

	Carl J	On Aug 10, 2008 08:35 AM
Nice clean solution ... but I've seen this exact code somewhere else before ... http://www.quirksmode.org/css/forms.html Anyways, the only (very minor) issue I have with this approach is the use of the br tags. Personally I would do something like wrapping each row with a div tag.

	lebisol	On Feb 13, 2009 02:49 PM
Nice work, Don't forget that submit/reset buttons are also affected by your class ".formLayout input"

	tom	On Feb 17, 2009 03:30 AM
Put clear:left on the label and you can kick out those < br > tags too.

	matt	On Feb 28, 2009 11:56 AM
Very clean and simple. Thanks for sharing.

	rahul	On Mar 30, 2009 12:10 AM
Good !

	sivagurunathans	On Apr 28, 2009 09:08 PM
Nice work. Please share more with us.

	Name
	Email Address
	Web Site

Layout Form without Tables with CSS Trick

Discussion

Leave a Comment

Subscribe

Advertisement

Categories

Most Popular