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

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

 posted posted 07-26-2007 19:20

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

 posted posted 07-26-2007 19:34

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

 posted posted 07-26-2007 20:54
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

 posted posted 07-26-2007 22:11

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

 posted posted 07-26-2007 22:30

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

 posted posted 07-26-2007 23:25

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

 posted posted 07-26-2007 23:32

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