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	The SPAN is not necessary either. You can easily handle multiple inputs using CSS to move the inputs away and position the label in the top left part of a group of inputs:[small][code]<?xml version='1.0' encoding='iso-8859-1'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' > <head> <title>te \| Mathieu 'P01' HENRI \| 20070726</title> <style type='text/css'> form { background:pink; padding:1em; margin:1em; } fieldset { position:relative; background:orange; padding:1.5em 0 0 33%; margin:1em 0; border:0; } fieldset legend { display:block; font-weight:bold; background:red; position:absolute; left:0; right:0; top:0; width:100%; height:1.5em; padding:0; } fieldset label { position:relative; } br { clear:both; } fieldset label { position:absolute; left:0; right:70%; display:block; background:yellow; } </style> </head> <body> <form action=''> <fieldset> <legend>part 1</legend> <label for='input1'>input1's label</label> <textarea id='input1'> ata tetete dgsd! </textarea> <br/> <label for='input3'>input3's label</label> <input id='input3' type='text' /> <input id='input4' type='text' /> <input id='input5' type='text' /> </fieldset> <fieldset> <legend>part 2</legend> <label for='input6'>input6's label</label> <input id='input6' type='text' /> <input id='input7' type='text' /> <input id='input8' type='text' /> <input id='input9' type='checkbox' /> <br/> <label for='input10'>input10's label</label> <input id='input10' type='radio' /> <input id='input10' type='radio' /> <input id='input10' type='radio' /> <input id='input10' type='radio' /> <br/> <label for='input11'>select11's label</label> <select id='input11' height='3'> <option>opt 1<option> <option>opt 2<option> <option>opt 3<option> <option>opt 4<option> <option>opt 5<option> </select> </fieldset> </form> </body> </html>[/code][/small]HTH [url=http://www.p01.org/][sigrotate][img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_love.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_love_small.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_charly.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_dk.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_reason.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_galaxy.gif[/img]\|[img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_neon88x31.gif[/img][/sigrotate][/url] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu