How create good looking form without table

Posted on by

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

53 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

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

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

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

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

  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. Pingback: 51 Form Element Resources and Tutorials Using CSS And Javascript « HUE Designer

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

  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

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

  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.

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

  41. Pingback: 役立つこと間違いなし！フォーム用フリーテンプレート50+ | yugurido

  42. Nejlepší na tom je to, že volné zatočení získáš bez vkladu do casina!
    Bonus zpravidla získáte za otevření účtu v daném casinu, vložením peněz na svůj
    účet u online casina nebo vsazením skutečných peněz.
    Vklad přes SMS – pro použití tohoto způsobu musíte mít na svém účtu dostatek prostředků.

    Nově ale Via SMS nabízí i další možnosti pro ty, kteří potřebují půjčit vyšší částku nebo preferují větší volnost při způsobu splácení.
    Tato půjčka je cenově zajímavým řešením pro všechny, kdo nárazově potřebují vypůjčit jen několik tisíc na jen několik týdnů.
    Jednoduše – těch, kteří potřebují půjčit, je stále víc – a poskytovatelů je také hodně.

    V zájmu poskytování zákaznické podpory LGE využíváme smluvních
    zpracovatelů, kteří konají v souladu s legislativou na ochranu osobních
    údajů a kteří mohou nahlížet do záznamů za účelem poskytování služeb, které požadujete.
    Myslet bychom proto měli na budoucnost a v oblasti osobních financí být
    důslednější než obvykle. Nařízení, tedy zpracování osobních údajů je prováděno se souhlasem subjektu
    údajů, má subjekt údajů právo odvolat kdykoli souhlas,
    aniž je tím dotčena zákonnost zpracování založená na souhlasu uděleném před jeho odvoláním.

  43. May I simply say what a comfort to discover somebody who genuinely knows what they’re discussing on the web.
    You definitely understand how to bring an issue to light and make it important.
    A lot more people should read this and understand this side of your story.
    I was surprised you aren’t more popular since you most
    certainly have the gift.

  44. Hello! Do you know if they make any plugins to assist with
    Search Engine Optimization? I’m trying to get my blog to
    rank for some targeted keywords but I’m not seeing very good
    success. If you know of any please share. Thank you!

    Look into my page 바둑이게임

  45. Wow, superb blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your web site is great, let alone the content!

  46. Im Jahre des Herrn 2016 beschäftigte das Casino Austria über 1.500 Mitarbeiter, verfügte über fast 220 Spieltische und rund 2.100 Automaten. Bis zum
    Jahr 2024 sollen Experten zufolge die Umsätze um der halbe auf 3,3 Milliarden Euro zulegen. Schwindende Kundenzahlen und immer
    geringere Umsätze sind hierfür dann eine leider sehr unschöne Folge, mit
    denen sich die Casinos auseinandersetzen müssen. Einerseits werden die Online Casinos natürlich von den staatlichen Behörden, bei denen Sie gemeldet
    sind, reguliert. Dieses Konzept und seine Auswirkungen für Suchende werden Chakra um Chakra besprochen per exemplum macht Die Wahl aus
    Spielenden SPIELENDE. Dank der neuen Extra-Gewinnklasse 4 macht MiniLotto spielen hier jetzt noch etwas Spaß, weil man schon mit nur 2 richtigen MiniLotto Zahlen aufm Tippschein gewinnt.
    Weil das Glücksspiel fast so alt ist wie die Zivilisation –
    gezockt wurde bereits in der Antike nach dem Lustprinzip -, ist
    auch die Idee, den Staat am Umsatz zu beteiligen, nicht neu.
    Es gilt 18 Jahre alt sein, um unzerteilbar casino in Luxemburg zu spielen.
    Ja, Glücksspiel in Luxemburg ist legal.

  50. Hello aceinfowayindia.com

    USANA—High-Quality, Science-Based Nutrition and Skin Care

    Millions around the world trust its products such as USANA essentials vitamins.
    This innovative company serves ordinary health-conscious individuals to Olympians and professional athletes.
    Products come from a state-of-the-art FDA approved facility.
    Furthermore, each supplement is the product of the minds of the leading scientists in the world, and formulas developed in USANA’s laboratories.

    Browse Our Range Of Supplements To Help Build Your Immune System. Order Online For Express Delivery https://zeep.ly/byXG4

    Thanks, Zita Le
    If you no longer wish to hear from us, please reply to this email.

Leave a Reply

Your email address will not be published.