Laying Out Forms with CSS

How do you do this?

[Nick_W]

Hi all,

I remember someone posting a neat example of how to layout a form as 2 columns like this:

Text ::form field::

Text ::form field::

- the forum fields should all line up nicely of course. I can't find the thread, anyone care to demonstrate?

I usually do mine like this:

Text:
::form field::

I quite like it but would like to try it the other way...

Thanks

Nick

[SuzyUK]

I'd use the <label> tag

<div><label>Text Label</label><input type="text" size="20"></div>

make the div display:block, give the label a width and text-align: right, and a right margin

then at any time the label can be made into display: block to change back to your other method

Suzy

[Birdman]

Hey Nick,

This is how I do it. I'm not sure if the div.clear is needed or not.

The XHTML1 [w3.org] -

<div class="clear">
<div class="l">Your Name:</div>
<div class="r"><input type="text" name="name" /></div>
</div><br />

<div class="clear">
<div class="l">Email Address:</div>
<div class="r"><input type="text" name="email" /></div>
</div><br />

The CSS [w3.org] -

div.l{float: left; width: 40%; text-align: right;}
div.r{float: right; width: 60%; text-align: left;}
.r input{width: 200px;}
div.clear{clear: both; height: 10px; font-size: 18px;}

[grahamstewart]

Incidentally, Suzy is right, you should really use the <label> tag but you need to set its 'for' attribute to the id of the input, like this..

<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname" maxlength="30">

That way you are one step closer to an accessible site. :)

GrahamS

[grahamstewart]

Also check out the article at AListApart [alistapart.com] on practical CSS layouts. It has a nice section about forms.

[grahamstewart]

Actually... looking again at that AListApart code, I don't think he needs all those spans. Surely a simpler solution would be...

 <form action="post" style="width:450px">
 <div class="row">
  <label for="name">Name:</label>
  <input id="name" class="formw" type="text" size="25">
 </div>
 <div class="row">
  <label for="age">Age:</label>
  <input id="age" class="formw" type="text" size="25">
 </div>
 <div class="row">
  <label for="shoesize">Shoe size:</label>
  <input id="shoesize" class="formw" type="text" size="25">
 </div>
 <div class="row">
  <label for="comments">Comments:</label>
  <textarea id="comments" class="formw" cols="25" rows="8">
  Go ahead - write something...
  </textarea>
 </div>
 <div style="clear:both;">
 &nbsp;
 </div>
 </form>

and then style the form directly with..

div.row {
 clear: both;
 padding-top: 10px;
 }
div.row label {
 float: left;
 width: 100px;
 text-align: right;
 }
div.row .formw {
 float: right;
 width: 335px;
 text-align: left;
 } 

Maybe there was a good reason for those spans tho (browser inconsistencies?). Anyone know?

[DrDoc]

I'd put the whole form inside a DIV with fixed with, make sure all the input fields have the same width, and simply use text-align:right in the div.

Looks neat, and you have everything in a straight line.

[andreasfriedrich]

Were you looking for this thread?

Form layout question [webmasterworld.com]

Andreas

[securecat]

[HTML]
<form action="#">
<fieldset accesskey="F"><legend>true up the edges of the cells</legend>
<dl>
<dt><label for="fname">Name</label></dt>
<dd><input type="text" name="fname" id="fname" value=""></dd>
</dl>
<dl>
<dt><label for="faddr">Address</label></dt>
<dd><input type="text" name="faddr" id="faddr" value=""></dd>
</dl>
<dl>
<dt><label for="ftel">Telephone</label></dt>
<dd><input type="text" name="ftel" id="ftel" value=""></dd>
</dl>
<dl>
<dt><label for="fcomment">Comment</label></dt>
<dd><textarea name="fcomment" id="fcomment"></textarea></dd>
</dl>
</fieldset>
</form>

[CSS]
fieldset {
border:none;
display:table;
}
legend {
display:table-caption;
}
dl {
display:table-row;
}
dt, dd {
display:table-cell;
}

Making only appearance a table layout, after giving a suitable markup does not break specification. It can be said rather that it is right.

Strictly browsers such as Mozilla, display the above codes as an intention.