How create good looking form without table

This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. You can use all CSS/HTML elements to design your custom form for your web projects:

form-17

Step 1: Create basic HTML structure

[code lang="htmlstrict"]
 

Contact Form :

[/code]

Step:2 Create CSS Code

[code lang="css"]
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}

div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1 { 
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712; 
}

div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}

div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
[/code]

finaly we are done. We have created a good looking form without table. View Example

41 thoughts on “How create good looking form without table

  1. Pingback: Best Tips, Resources and Tutorials for making of Creative Forms using CSS | guidesigner.net

  2. Pingback: 20 Creative Web Forms For Design Inspiration | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver

  3. Pingback: 20 Creative Web Forms For Design Inspiration : tops-post.com

  4. Praveen Dewangan

    This is really awesome example for creating table less structure using div basis.

    I am delighted, i m in fact looking for this sample from long back.

    Thanks Buddy

  5. Steven

    This is a wonderfully concise tutorial, given the topic. I do have to agree, though, that your labeling structure loses something in accessibility.

    Why not wrap the tag in the or a rather than the other way around? And, since you already have IDs associated with your inputs, why not use the <label for=""> attribute?

    You wouldn’t even have to change your CSS significantly, just swap the styles for your styles.

  6. Dan

    Nice little form.

    I, too agree that semantics have taken a hit here but the result is good. I think a good follow up would be to show how to improve the form with some simple CSS3 styling like box shadows, rather than relying on the harsh borders to acheive the inset effect.
    .-= Dan´s last blog ..Movie Recommendations: January β€˜10 Part I =-.

  7. Pingback: 25 splendidi tutorial per creare form usando CSS e Javascript | Voci dal Web

  8. William

    This is really nice and I have it styled for my site, but how do I get this to actually work? I know I will probably need some kind of php file.

    Anyone? Please advise?

  9. Pingback: 51 Form Element Resources and Tutorials Using CSS And Javascript « HUE Designer

  10. Pingback: 15 Essential Tutorials to Spice Up your Web Forms | Creative Repository

  11. Tuttu

    i was searching from a long time a form but all were for only finally i got your web and your source is very easy to apply, i am waiting for more useful posts

  12. DusteD

    Perfect example of why tables are justified..
    You can’t really convince yourself that mess is easier to read, or more maintainable than a good old table..

  13. adrian

    Hi,
    I am using your style sheet to construct a form.
    I am having a problem where I have two controls within the same label. The first control always gets the focus.
    Do you know how to overcome this?
    Thanks.

  14. puma

    how do i change the background of this form to white. I tried changing the body tag background to white but it won’t work.

  15. jasbir

    itz a very nice tutorial .. i want to know you not used tag . then how your text and textbox going in next line..

  16. Jordan

    Great tutorial. I really hate tables and the website I am overhauling uses nothing but tables for the layout. I always find it tedious to make a table for every single thing you need to line up. This tutorial really helped me do this and in the process truly understand the position attribute.

    Thanks a lot!

  17. nulledscripts

    Hello my family member! I wish to say that this article is amazing, nice written and include almost all significant infos. I would like to peer extra posts like this .
    .-= nulledscripts´s last 1 ..1 =-.

  18. Pingback: 役立぀こと間違いγͺし!フォーム用フγƒͺγƒΌγƒ†γƒ³γƒ—γƒ¬γƒΌγƒˆ50+ | yugurido

Leave a Reply

Your email address will not be published. Required fields are marked *