A simple way to align a form with CSS without tables or spans

I was playing around a bit and came up with the below css/html to align labels to the left of form elements. I haven’t seen it done this way before. Usualy this will involve either tables or there’s ‘a whole lotta spans going on’.

The below is such a simple and elegant method that it’s almost to good to be true. To me it even makes semantic sense to have an element and its label grouped in a wrapping element ( the div).

So I thougt I’d share with the community. Tell me what you think, rip it apart. :smiley:

<!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">
<head>
<title>Form without tables</title>
<style type="text/css">
	/* essential */
	label {float: left; width: 6em; text-align: right;}
	input, textarea {text-align: left;}
	input.submit  {margin-left: 6em;}
	/* additionally give the button and the labels the same font to align the button better */
	label, input.submit {font: normal 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<form>
	<div>
		<label>Name:</label>
		<input type="text" size="25" />
	</div>
	<div>
		<label>Age:</label>
		<input type="text" size="25" />
	</div>
	<div>
		<label>Remarks:</label>
		<textarea rows="10" cols="23" /></textarea>
	</div>
	<div>
		<input type="submit" class="submit" name="submit" value="Easy like CSS" />
	</div>
</form>
</body>
</html>

Rik

Looks good :slight_smile:

I did almost exactly the same as you at http://www.zopester.com/cp.html

However, I wrapped the <label> and <input> elements in <span>s. To be honest I forget why now. It might have had something to do with IE5 support though. However, corroboration would be good from those who know better. I’d love to get rid of those crufty <span> elements. :slight_smile:

Nice code btw Rik!

Excellent way of laying out a form, like others I have used the suggestion on alistapart, but this is much cleaner. I have just been playing with the code a bit (mainly visual stuff)

<!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">
<head>
<title>Form without tables</title>
<style type="text/css">
	/* my added bits */
	html, body {
		margin: 0;
		padding: 0.25em;
		background: #fff;
	}
	
	form {
		border: 1px solid #999;
		padding: 0.25em;
		background: #EEE;

	}
	
	div {
		padding-bottom: 0.25em;
	}
	
	/* essential */
	label {
		float: left;
		width: 6em;
		text-align: right;
		padding-right: 0.5em;
	}
	
	input, textarea {
		text-align: left;
		width: 20em;
	}
	
	input.submit {
		margin-left: 6.5em;
		width: auto;
	}
	
	/* additionally give the button and the labels
	the same font to align the button better */
	
	label, input.submit {
		font: normal 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
</style>

</head>
<body>
<form>
        <div>
                <label>Name:</label>
                <input type="text" size="25" />
        </div>
        <div>
                <label>Age:</label>
                <input type="text" size="25" />
        </div>
        <div>
                <label>Remarks:</label>
                <textarea rows="10" cols="23" /></textarea>
        </div>
        <div>
                <input type="submit" class="submit" name="submit" value="Easy like CSS" />
        </div>
</form>
</body>
</html>

I have noticed with my additional code that if I make the browser window very small the background runs under the text fields, is there anyway of stopping this? I tried adding clear: both on some of the elements with little success.

But thanks again for the code excerpt (filed away for another day!)

Thanks for the comments, guys.

It was the alistapart article that started me experimenting as well. But I wanted to get rid of those <span> tags.

It works fine on my IE5.5Win btw, only difference being that the button is a bit more to the right.

As for the ‘visual stuff’, The idea was to show the ‘skeleton styles’ which then can be dressed up as you please of course. Btw, about the background problem, I think setting a ‘min-width’ or ‘width’ in em’s might do the trick, or maybe, i don’t know, do something with ‘overflow’.

Another thing I was thinking about was to use <fieldset> tags instead of <div>. But I’m not sure if that would be 100% kosher since a fieldset, as I understand it, is supposed to contain a collection of fields, not just one. Which do you guys think is better?

Rik

As its a group effort, add this too for IE and Opera:

input.submit  {margin-left: 6em; [color=green]text-align: center;[/color]}

Loose a div, gain a span:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form without tables</title>
<style type="text/css">

/* essential */
fieldset span { float: left; width: 6em; text-align: right; }
label { display: block; margin: 0; padding: 0;}
input, textarea { text-align: left; }
input.submit    { text-align: center; }

/* fonting fun */
body   { font-size: 80%; }
label, input.submit, legend, fieldset { font: normal 1em
       Verdana, Geneva, Arial, Helvetica, sans-serif; }

/* beautify */
legend { padding: 1em; }
label  { margin: 0.5em; }
fieldset { padding: 1em; }
fieldset div  { margin: 0.5em; padding-left: 6.5em; }
fieldset span { padding-right: 0.5em; }
</style>
</head>
<body>

<form action="">

<fieldset>
<legend>My Form</legend>

<label><span>Name:</span>
<input type="text" size="25" /></label>

<label><span>Age:</span>
<input type="text" size="25" /></label>

<label><span>Remarks:</span>
<textarea rows="10" cols="23"></textarea></label>

<label><span>Name:</span>
<input type="text" size="25" /></label>

<div><input type="submit" class="submit"
            name="submit" value="Easy like CSS" /></div>

</fieldset>

</form>

</body>
</html>

I like the span more than the div, I think that is the correct way to use a label anyway (you don’t need a “for” this way, correct?)

[edit]http://www.htmlhelp.com/reference/html40/forms/label.html

Yep, how to use a label.[/edit][edit]Edit 2: Now valid XHTML :slight_smile: [/edit][edit]Edit 3: Almost in IE6, mostly in Opera7 and Moz1.1 - beautification[/edit]

Douglas

Sorry, Douglas, but that doesn’t seem to make any difference at all. (IE5.5, Opera6.05 and Firebird0.6)

Rik

I tested that in Moz 1.1 (no change) in IE 6 (the text was on the left, now in center) and Opera 7 (same as IE).

Will take a look at Firebird. (as with Moz, no change as it was good to start with) (I am talking about the text alignment on the text on the button inside the button, not the position of the button itself.)

Douglas

I don’t know if this is any ‘better’ than above but you can lay out the form like this

<!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">
<head>
<title>Form without tables</title>
<style type="text/css">
	/* my added bits */
	html, body {
		margin: 0;
		padding: 0.25em;
		background: #fff;
	}
	
	form {
		border: 1px solid #999;
		padding: 0.25em;
		background: #EEE;

	}
	
	hr {
	clear: both;
	visibility: hidden;
	margin: 0;
	padding: 0;
}
	
	/* essential */
	label {
		float: left;
		width: 6em;
		text-align: right;
		padding-right: 0.5em;
	}
	
	input, textarea {
		text-align: left;
		width: 20em;
	}
	
	input.submit {
		margin-left: 6.5em;
		width: auto;
		text-align: center;
	}
	
	/* additionally give the button and the labels
	the same font to align the button better */
	
	label, input.submit {
		font: normal 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
</style>

</head>
<body>
<form>
                <label>Name:</label>
                <input type="text" size="25" />
        <hr />
                <label>Age:</label>
                <input type="text" size="25" />
        <hr />
                <label>Remarks:</label>
                <textarea rows="10" cols="23" /></textarea>
        <hr />
                <input type="submit" class="submit" name="submit" value="Easy like CSS" />
        <hr />
</form>
</body>
</html>

I’m just replacing the divs with <hr /> (less typing!) and then hiding the element. I would be interested in peoples comments, is this better/worse than using div’s?

I’d always use the “for” attribute, no matter what. By doing so you not only increase accessibility, but give users a clickable <label> element a la Windows.

For an eg, see http://www.zopester.com/cp.html

Never noticed that before, nice one. By the looks of things
it doesn’t matter that way whether the input is inside or
outside the label.

Fancy: In IE, if you have a check box associated with two
labels, nomatter which one you click, the checkbox will
allways change, and the last label will get the focus rectange
(but not the first one :slight_smile: )

As for using <hr /> s… well, why have anything atall??

[color=gray]<!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">
<head>
<title>Form without tables - Zoef, Zopester, Martin and DougBTX of Sitepointforums.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">[/color]

/* essential */
label {
	float: left;
	width: 6em;
}

input, textarea {
	display: block;
[color=gray]	/* width of the label or bigger */[/color]
	margin-left: 6.5em;
}
[color=gray]
/* additionally give the button and the labels
the same font to align the button better */

/* in IE: do not set font size to less than 1em! */[/color]

body { font-size: 80%; }
label, textarea, input {
	font: normal 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
[color=gray]
/* optional */

label {
	text-align: right;
	padding-top: 0.2em;
}

input, textarea {
	width: 20em;
	text-align: left;
	margin-bottom: 0.5em;
}

input.submit {
	[color=red]width: 10em;[/color]
	text-align: center;
}
</style>
</head>
<body>[/color]
<form>
   <label for="name">Name:</label>
   <input  id="name" type="text" size="25" />

   <label for="age">Age:</label>
   <input  id="age" type="text" size="25" />

   <label   for="remarks">Remarks:</label>
   <textarea id="remarks" rows="10" cols="23"></textarea>

   <input type="submit" class="submit" name="submit" value="Easy like CSS" />
</form>[color=gray]
</body>
</html>[/color]

Now that is slimline :slight_smile:

Tested in: Opera 7, Moz1.1, IE6.

Douglas :smiley:

Doug, just tried the code above in Mac: Safari 1, Camino and Netscape 7 - all fine, however IE5 mac the submit button now centers over the width of the browser due to the text-align: center; . This could be fixed with the comment hack for IE5 Mac but can it be done without???

Add this and tell me what happens:

input.submit { width: 10em; }

I don’t know if it is an error from the width: auto or from the display: block.

Douglas

Hi Doug,

working on a similar answer myself. I found this (ugly) fix and it doesn’t seem to effect Netscape 7/Camino/Safari on Mac - probably kills windows though…

input.submit {
text-align: center;
/* IE5 Mac fix - bet this screws other browsers! */
margin-left: 6.5em;
float: left;
width: 7em;
}

Do you really need the float: left?

Remove that, and it’s just the code above.

Fine in Opera, but you end up with an effective matgin-left: 13em in IE6 (2x6.5)

I would rather support IE/win than IE/mac…

Douglas

Stripped code back down to:-

input.submit {
width: auto;
}

The submit button now just ranges left to the edge of the browser window (also the correct size) and doesn’t change size/position. Normally I would put padding etc around the whole form anyway, which would move it in a bit under the labels - I can live with that!

Although I agree with you with regards supporting IE/win first, but almost all mac users are using IE/win 5 and as a Mac man at heart I like to keep them happy! - I just think that IE5 now is showings it age a bit now with regards to css support, RIP IE5 - long live Safari!

PS thanks for a great thread everyone!

The problem with dropping text-align: center is this:

Which I also would dislike more than a centered button :slight_smile:

Are you sure that just setting input.submit { width: 10em; text-align: center; } doesn’t work? From a quick internet search, people were having problems with width: auto and setting something specific fixed IE mac…

If not, oh well… Let the copy paster descide :slight_smile:

Douglas

this code produces this…

input.submit {
width: 10em;
text-align: center;
}