Pure CSS Form Layout?

27 Replies

1. Dougal Campbell adds this Comment:

   Personally, complex forms are the one place where I will still use tables for layout. If you need more than two columns of info, say for example if you are trying to replicate a printed form, tables are going to be easier and more reliable.

   Granted, I could have designed that particular form without tables, using positioned divs and floats, but it would have been a pain to debug. And the output of that form is a much more extreme example, because it is trying to replicate a printed form much more closely

   September 2nd, 2003 at 6:56 am

2. Adam Tow adds this Comment:

   I switched to using a table for a consulting project I’m working on. Though there’s a lot of CSS being used, the table forms the skeleton of the page.

   September 2nd, 2003 at 12:36 pm

3. Alex adds this Comment:

   Hmm. Well, at least it isn’t just me then.

   September 3rd, 2003 at 1:31 am

4. alexking.org: Blog adds this Pingback:

   […] A few weeks back I posted asking how people handled form layout with CSS. The answer I got was mostly, "I don’t." Dan has bee […]

   September 18th, 2003 at 12:17 am

5. Paul adds this Comment:

   I tend to think that a form is tabular data, so using a table is okay. It just happens to be tabular data which some items can be edited.

   November 28th, 2003 at 8:12 am

6. Alex adds this Comment:

   I generally think of a form as label: value data, not column/row data so in my mind a table isn’t really the right markup. However using a table makes the layout *WAY* easier and more consistently rendered.

   November 28th, 2003 at 10:10 am

7. Derek adds this Comment:

   Let me try this again:
   I tried this and it seems to work: I used a definition list inside my form. I gave the DL an id of “webform” and used contextual selectors to define style. I put the label tags in the DT tags and the inputs in the DD tags. I floated the DT’s left and set a static width. This lined things up well, then when viewed without stylesheets, each input was below the respective label and indented. But from a standards perspective, is this “technically” compliant? Any thoughts? Thanks!

   December 31st, 2003 at 6:53 am

8. Alex adds this Comment:

   Well, you should definitely be using the <fieldset> tag and <label> tags - I think I’m reading that you used <label> tags. This works just fine for a two column layout, but if you want to get more complicated (say a four column layout where the form elements are of varying heights) it gets quite a bit harder.

   Also, I’m not sure the <DT>/<DT>tags are necessary from a semantic perspective. The <label> tag is already defining the data relationship there.

   What you’ve done certainly sounds better than a table layout from an accessibility perspective though!

   December 31st, 2003 at 8:44 am

9. Patrick Roumanoff adds this Comment:

   I have same questions as you and I found some answers in http://www.alistapar[...]racticalcss/

   hope this helps !

   February 3rd, 2004 at 5:04 am

10. Alex adds this Comment:

    Those techniques work nicely for simple forms.

    February 3rd, 2004 at 8:51 am

11. lyu adds this Comment:

    http://www.alistapar[...]racticalcss/

    this article is completly stupid. It comes from dogmatic persons …

    CSS is not an answer for complex elements positionning (not only forms). ALL suggested answers to solve complex issues with CSS-only, involve ‘absolute width’ for some elements. It’s quite a ‘rigid’ solution, considering the diversity of browsers, screen resolutions, etc …
    Further more, it is utopic to think that content and presentation could be completly separated …
    It’s a good thing trying to separate content and presentation. It’s a stupid idea to say “you must separate content and presentation or you will die” …

    May 2nd, 2004 at 11:43 am

12. DK adds this Comment:

    http://realworldstyl[...]m/forms.html

    best one you’ll find. ALA has some great CSS articles though and is a great resource but the link above is solid in most browsers that i’ve found.

    May 10th, 2004 at 3:14 pm

13. Alex adds this Comment:

    I already know all that (and use it on forms on http://www.taskspro.com/ ) but it is really hard to do that with a complex flexible-width form.

    May 10th, 2004 at 3:18 pm

14. Anonymous adds this Comment:

    take a look at this one. we are using it for a new project. tested only for ie 6 though. it din’t work on firefox for sure.

    July 27th, 2004 at 8:49 pm

15. Alex adds this Comment:

    Ugh, what a mess. Everything is sitting on top of each other - YUCK!

    July 27th, 2004 at 10:27 pm

16. competo adds this Comment:

    try it again. i removed div { height: 0px;} which was a hack for ie. it works on ie 6 and firefox 0.9 now. it does need some touch on positioning for firefox 0.9.

    July 28th, 2004 at 10:07 pm

17. Alex adds this Comment:

    It definitely looks a lot better.

    July 28th, 2004 at 10:12 pm

18. Ophir adds this Comment:

    Does anyone have any insights regarding what’s suggested here: http://www.picment.c[...]unwithforms/ ?

    July 29th, 2004 at 6:06 am

19. Alex adds this Comment:

    It works great for simple forms, but not for complex forms.

    July 29th, 2004 at 10:07 am

20. Simon adds this Comment:

    You could also look at this website, the html looks very simple and clear:
    http://www.quirksmod[...]s/forms.html

    November 26th, 2004 at 4:27 am

21. Alex adds this Comment:

    Simon, please read the previous comments.

    November 26th, 2004 at 9:35 am

22. T.J. adds this Comment:

    Laying out forms with CSS is extremely hard, and I’ve yet to see anyone do a complex form in just CSS yet.

    I don’t think everything needs to be done with CSS. For some things, like forms, tables are just better and take much much less time.

    Taking 8-10 times longer to figure it out and complete the work just isn’t worth it.

    Not everyone needs to have their data ready to easily format from print to web to whatever.. For most web developers doing a site completely in CSS is just insane.

    And as for those that preach about adhering to standards.. Doing a standards based site will look vastly different depending on the browser used to view the content.

    Some of us just want our sites to look similar in any browser, whatever the code used, and spending 5x the normal development time just to make it in CSS is just completely unacceptable.

    December 24th, 2005 at 8:22 pm

23. Alex adds this Comment:

    Pure CSS for a normal site works great - take a look at taskspro.com and kingdesign.net.

    December 25th, 2005 at 8:04 am

24. T.J. adds this Comment:

    I’ve managed to learn enough from the contact form on your site to get my labels and input fields lining up ok for a simple form..

    Maybe I’ll see if I can just simplify the CMS forms in the new site to work with just CSS.

    Now if I can figure out why my main white content box no longer extends to the default height I gave it things will move forward ok..

    I found the following hack on another site, that seemed to work before, but after further work no longer seems to extend the height of the box to fit the left and right navs.. blegh.

    height: auto;
    min-height: 465 !important;

    December 27th, 2005 at 11:55 pm

25. T.J. adds this Comment:

    Oops.. please forgive my ignorance in the last 2 paragraphs of my last comment.

    I somehow must have changed and left of the ‘px’ from the “min-height: 465 …” line. D’oh.

    I really need to get my eyeballs checked.

    Your 2 site links were a great help though!

    December 28th, 2005 at 12:00 am

26. T.J. adds this Comment:

    This is the page I was working on that now works:
    http://dev.rocketry.[...]/contact.php

    December 28th, 2005 at 12:02 am

27. Paul Armstrong adds this Comment:

    Check out Awesome Form:

    Awesome Form

    May 9th, 2006 at 10:05 am

Add a Comment

Please note: Use of a non-personal web site or blog in the field below and/or comments that are off-topic, personal attacks, or support requests will likely be removed at my discretion.