Layout Form without Tables with CSS Trick

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:








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>

37 comment(S)


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'.

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.

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/ ;)

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"

sponsored

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.

zeeshan ktk on Dec 13, 2010 08:43 AM

please make a usefull profile to down load the css form easy

Atishay jain on Jan 5, 2011 01:59 AM

thanks for this i also want to know how can i built a form that also contains radio button and check boxes.

seo on Jan 5, 2011 02:31 AM

why did u add 3 classes in css. AS only the first one is working.

seo on Apr 3, 2011 12:45 PM

seo, try to use this exact piece of code, without the other 2 classes, and try to see the difference. It will be very easy!

Aajiz on May 11, 2011 12:31 PM

Its nice layout. I want for my ad listing domain any body help me regard this plz

StudyGuide on Sep 12, 2011 09:39 AM

Hmm Nice Layout ...Its very useful for me for my site... Thanks for sharing dude...

chrisa on Sep 22, 2011 02:06 PM

Thanks for sharing this - nice and clean layout and very useful.

Helen Neely on Sep 26, 2011 07:37 AM

This is one great form tutorial -simple and to the point. Great stuff.

-Helen

sreedevi on Nov 16, 2011 12:04 AM

Thanks a lot

TBossAZ on Nov 16, 2011 10:37 AM

Excellent tutorial, it was very simple to understand and it worked perfectly for me. Thank you very much!

mitu on Jan 4, 2012 07:28 AM

this style sheet is not working in case of ASP.NET. I don't understand where is the problem? it shows as following -
<label><select>(this row shows properly)
but 2nd, 3rd & 4th row shows as below, this is the problem
<label>
<textbox>
<label>
<textbox>
<label>
<textbox>
5th row containd city name shows properly like 1st row.
please response.....

anand ranga on Feb 13, 2012 05:57 AM

nice job...

Steve Teale on Jun 10, 2012 11:49 AM

The CSS for br should be prefixed by .formLayout. I Used your code - fine for the form bits, but other parts of my page broke because you had made <br> unconditionally clear floats.

mohan on Jul 3, 2012 01:30 AM

coooool layout

sri on Jul 26, 2012 08:22 AM

how to add label to the right. pls expalin

dodz on Aug 4, 2012 06:02 PM

very simple but helpful to start creating entry form.
great job...!!!

idi on Aug 25, 2012 02:25 AM

nice and clean!

Roy Mercadian on Dec 6, 2012 12:34 PM

very useful. Thanks.

sravan on May 12, 2013 06:33 PM

it very nice

senthil on Jul 24, 2013 12:25 AM

Useful

Dave Schinkel on Dec 16, 2013 11:56 PM

Good stuff, clean, simple. Thanks for your contribution. Used it today, looks great.

Leave a comment