• Article Written 
  • on 24.06.2009
  •  at 05:38 AM
  •  by admin

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

Be Sociable, Share!
If you enjoyed this post, make sure you subscribe to my RSS feed!

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,

Untitled Document

41 Comments

  1. [...] Best Tips, Resources and Tutorials for making of Creative Forms using CSS Friday, July 3, 2009 12:04 Posted in category CSS, Development, Forms, Tutorials No Comments How To Create a Good Looking Form [...]

  2. You’re losing the semantic meaning of the labels though. To me, accessability and semantics come first.

  3. [...] to create a good looking form without a table [...]

  4. [...] to create a good looking form without a table [...]

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

  6. The main argument for still using tables today stems from bad habits, and complacency. What is often said is that using tables is easier, and that browsers don’t support it.

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

  8. 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 =-.

  9. Here’s what I do with every form.

    I create the HTML first and then use the following CSS:

    input,
    select{
    display : block;
    }
    label {
    float : left;
    width : 200px;
    }

    This really lays out the table nicely and from there I can add colour; and yes, no tables are necessary!
    .-= Andy Walpole´s last blog ..The internet 10 years ago this month – January 2000 =-.

  10. Great …it help me a lot…thanks

  11. This tut is absolutely fantastic!

    I was getting so tired of my boss asking me to make forms, getting stuck using tables so this will be a nice breath of fresh air in the designs :)
    .-= Murlu´s last blog ..How To Find Minimal Techno Tracks For DJing =-.

  12. [...] 2. Good Looking Form Without Table [...]

  13. 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?

  14. [...] Posted by huedesigner in CSS Techniques. Leave a Comment 1. How create good looking form without table [...]

  15. Its ok and nice, but it has sense if u tell how to make it work? (for rookie)

  16. [...] Visit Tutorial [...]

  17. Thanks for sharing. It is a very useful technique.

  18. where in the code do i direct the form to be emailed to my account?

  19. Thanks for the codes, I have tried them and indeed the form was beautiful. It’s a great tutorial for use beginners.
    .-= Sherwin´s last blog ..Welcome =-.

  20. Nice tuts.. I’ll use this trick on my guestbook
    .-= SamsonDelila´s last blog ..Axioo Pico DJJ WebCam Driver for Windows XP and Windows 7 =-.

  21. Good job and yes that’s much nearer forms by Facebook or Twitter than basic html ones :)

  22. Fantastic!
    Clean code and nice apparence!

  23. where do I input the email I want the fonts to be sent to and whats the code for it

  24. I find yr tutorial is very easy to understand , clear and without deressent.. TQ

  25. uhh, I’m lost as well, where the hell do I put my email?

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

  27. Thanks for this CSS code. I just used it on one of the projects I’m working on.
    .-= Helen Neely´s last blog ..Syma S107/S107G R/C Helicopter – Yellow =-.

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

  29. I am going use this in my web development exam.Thanks lot buddy.

  30. Thanks for the form. I really appreciate it.

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

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

  33. Looks like the CSS form template that comes in flux.

  34. I’d like a source code download

  35. Just checking to see if I got the point.

  36. Where can I find the settings for changing background color? And are there any at all?

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

  38. 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!

  39. 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 =-.

  40. Nice color combinations!!!

  41. [...] Create good looking form without table [...]

Submit a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge