Topic: Multi-Column Forms Best Practice Pages that link to <a href="https://ozoneasylum.com/backlink?for=29376" title="Pages that link to Topic: Multi-Column Forms Best Practice" rel="nofollow" >Topic: Multi-Column Forms Best Practice\
 
Author Thread
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

 IP logged posted posted 07-26-2007 19:20 Edit Quote

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>



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>



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
Code Town | Zombie Head | How Much TP?

(Edited by WarMage on 07-26-2007 19:20)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-26-2007 19:34 Edit Quote

you don't need the SPAN. And instead of using DIVs in the FORM, use FIELDSET.
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 07-26-2007 20:54 Edit Quote
code:
<label>Label 1 <input></label>


...in an li, if you like.
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

 IP logged posted posted 07-26-2007 22:11 Edit Quote

I like the fieldset idea. That makes things better but I do need to <span> element as I might have a complex widget such as

code:
<span><input type="text"/><input type="button" value="..."/></span>


or

code:
<span><input type="text" id="month"/><input type="text" id="day"/><input type="text" id="year"/></span>



Using your ideas I have something such as

code:
<style type="text/css">
		label {
			display: block;
			width: 50%;
			float: left;
		}
	</style>
  <form>
		<fieldset>
			<label>Label 1 <input type="text"/><input type="text"/><input type="text"/></label>
			<label>Label 2 <input type="text"/></label>
		</fieldset>
		<fieldset>
			<label>Another Label 3 <input type="text"/></label>
			<label>Another Label 4 <input type="text"/><input type="button" value="..."/></label>
		</fieldset>
	</form>



Which gives me a two column look, but I think I am going to need to throw a <span> in there around the label text to get it to be a standard size, unless there is some selector that allows a style to be applied to the first text attribute child, but I have not heard of that in CSS2.

Adding spans I get

code:
<style type="text/css">
		label {
			display: block;
			width: 50%;
			float: left;
		}
		label span {
			display: block;
			width: 25%;
			float: left;
		}
	</style>
  <form>
		<fieldset>
			<label>
				<span>Label 1</span> 
				<input type="text"/>
				<input type="text"/>
				<input type="text"/>
			</label>
			<label>
				<span>Label 2</span> 
				<input type="text"/>
			</label>
		</fieldset>
		<fieldset>
			<label>
				<span>Another Label 3</span>
				<input type="text"/>
			</label>
			<label>
				<span>Another Label 4</span> 
				<input type="text"/>
				<input type="button" value="..."/>
			</label>
		</fieldset>
	</form>



This has the problem of some ugly line wrapping when the inputs take up more than 37.5% of the page. I do not want to work with pixel widths, and if I want to setup a 1st element float, second element margin situation I am going to have to apply spans around the input elements which puts me back into the original ugly markup area. And I am still not too keen on the spans around the label text as it is.

Dan
Code Town | Zombie Head | How Much TP?
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 07-26-2007 22:30 Edit Quote

1) A <label> wrapped with a <th> is redundant

2) Why are your <input>'s inside of your label tags??

3) Your example does not explain any reason you would need the <span> still...

What you should have instead of

code:
<form>
		<fieldset>
			<label>Label 1 <input type="text"/><input type="text"/><input type="text"/></label>
			<label>Label 2 <input type="text"/></label>
		</fieldset>
		<fieldset>
			<label>Another Label 3 <input type="text"/></label>
			<label>Another Label 4 <input type="text"/><input type="button" value="..."/></label>
		</fieldset>
	</form>



is something like:

code:
<form>
		<fieldset>
		    <legend>Heading 1</legend>
		    
			<label for="input1">Label 1</label><input id="input1" type="text"/>
			<label for="input2">Label 2</label><input id="input2" type="text"/>
			<label for="input3">Label 3</label><input id="input3" type="text"/>
			
			<label for="input4">Label 4</label><input id="input4" type="text"/>
		</fieldset>
		
		<fieldset>
			<legend>Heading 2</legend>

			<label for="input5">Another Label 5</label><input id="input5 type="text"/>
			<label for="input6">Another Label 6</label><input id="input6 type="text"/>
			<input type="button" value="..."/>
		</fieldset>
	</form>


Style as needed...

You seem to be using the <label> tag instead of the <legend> and skipping the function of the <label> itself.
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-26-2007 23:25 Edit Quote

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:

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>

HTH
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-26-2007 23:32 Edit Quote

The page above behaves nicely in Opera and Safari, and is ok in IE6, but strangely the labels are misplaced in Firefox. *sigh*

Anyway, you get the idea. Feel free to fiddle with it.


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu