Multi-Column Forms Best Practice — OZONE Asylum, home of the Mad Scientists

CSS - DOM - XHTML - XML - XSL - XSLT

Multi-Column Forms Best Practice

This page's ID: 29376

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I work with an application that has a few hundred different complex forms. I often find myself in a situation requiring the following layout: [code] <form> <table> <tr> <th><label>Label 1</label></th> <td><input type="text"/></td> <th><label>Label 2</label></th> <td><input type="text"/></td> </tr> ... repeate another 20 times ... </table> </form>[/code] Above is pretty easy, and flows really well. But no matter how I try and look at it, the form data is not tabular. Another approache I have looked at would be to use spans and divs: [code] <style type="text/css"> label { display: block; float: left; width: 15% } span { display: block; float: left; width: 35%;} span input { width: 100%; } </style> <form> <div> <label>Label 1</label> <span><input type="text"/></span> <label>Label 2</label> <span><input type="text"/></span> </div> <div> ... repeate another 20 times ... </div> </form>[/code] Which works OK, but is almost worse looking markup than using a table, and it does not flow nearly as nicely, and suffers from the need to implement a number of different hacks if you are putting the form inside of a complex layout. And if you want to get a little funky with the styling you are really starting to look into some flakey markup. I guess I am looking for a silver bullet, which is most likely all browsers supporting the full CSS3 specs, which at this point is a pipe-dream. Does anyone have a solution to this problem that just works well? Dan [url=http://www.codetown.org]Code Town[/url] \| [url=http://www.zombiehead.org]Zombie Head[/url] \| [url=http//www.howmuchtp.com]How Much TP?[/url] [small](Edited by [url=http://www.ozoneasylum.com/user/191]WarMage[/url] on 07-26-2007 19:20)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu