I’ve been doing a lot of reading about pure CSS layouts and semantic documents. I like everything about it except how hard it is to make the darn thing look right across browsers/browser versions.
In particular, I’ve had trouble finding a good way to replace tables for doing form layout (for example, the edit form in tasks or the entry form in photos). Anyone know of a good tutorial I should look at?
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
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.
Hmm. Well, at least it isn’t just me then. 🙂
[…] 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 […]
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.
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.
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!
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! 🙂
I have same questions as you and I found some answers in http://www.alistapar[...]racticalcss/
hope this helps !
Those techniques work nicely for simple forms.
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” …
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.
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.
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.
Ugh, what a mess. Everything is sitting on top of each other – YUCK!
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.
It definitely looks a lot better.
Does anyone have any insights regarding what’s suggested here: http://www.picment.c[...]unwithforms/ ?
It works great for simple forms, but not for complex forms.
You could also look at this website, the html looks very simple and clear:
http://www.quirksmod[...]s/forms.html
Simon, please read the previous comments.
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.
Pure CSS for a normal site works great – take a look at taskspro.com and kingdesign.net.
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;
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!
This is the page I was working on that now works:
http://dev.rocketry.[...]/contact.php
Check out Awesome Form:
Awesome Form
For complex forms, I’m sticking with tables. See the link below for a link to a tableless form. With respect to the author, I would MUCH RATHER use tables then relying heavily on javascript to fix the bugs across browsers that he suggests. But that’s just me.
http://www.alistapar[...]essibleforms