Form content layout with CSS

Avoid using tables to line up fields?

[Purple Martin]

I've always wanted a neat CSS way of lining up fields in a form so that the fields are all vertically aligned with each other, instead of using a table to do it. (In my mind, a form is not tabular data.)

This is the traditional way, using a table:

<form> 
  <table> 
    <tr> 
      <td><label>text</label><td> 
      <td><input><td> 
    </tr> 
    <tr> 
      <td><label>text</label></td> 
      <td><input><td> 
    </tr> 
  </table> 
</form>

For a moment I thought that I could do it with CSS by making the label slightly wider than half the page to force a line-wrap:

label{
width: 51%;
text-align: right;
padding-right: 15px;
}
-------
<form>
<label>text</label>
<input>
<label>text</label>
<input>
</form>

But only IE will apply width to the label element (this behaviour is incorrect). Other browsers don't because it's an in-line element (this behaviour is correct).

So, is there a way to do it in CSS?

[grahamstewart]

Firstly, you should use a full doctype on your document so that IE behaves the same as the other browsers.

You could add display:block to the label, then you cam legally set its width. You would also have to add float:left to get it on the same line as the input.

However, I have to say that I think tables are the way to go with forms, especially complex multi-field forms. Don't get me wrong - I am a purist and very much against using tables for layout.

However a form could definitely be considered tabular data. They certainly pass my test (i.e. Question: Could I assign each column a title that would make sense to the user? Answer: Yes, forms could be 'Field Name' and 'Value').

Just because the contents of the 'Value' column are editable does not mean that they cannot be considered tabular.

[Stratus42]

Hi..

yeah.. you can do it.. I get some fairly pretty results with this:

<style>
#moose label{float:left; display:block; color:#333; font: bold 12px arial;}
#moose input {border: 1px solid #666; display:block; margin:0px 0 10px 130px;}
form#moose {border:1px dotted #333; padding:10px 0 0 10px;}
</style>

<form id="moose">
<label>text for field 1</label>
<input type="text" size="70">
<label>text for field 2</label>
<input type="text" size="70">
<label>text for field 3</label>
<input type="text" size="70">
</form>

I think the advantage of this is that you can change the margin on the input boxes (and other stuff) easily.

I think the disadvantage is that if the text for one of the middle labels, say - text for field 2 - is longer - it will cause strange things to happen with the input fields and the floating -

If this were in a table, you could keep adding label text to your heart's content - and it would just force everything else out of the way.

Also - if you increase the text size - the css way will cause strange things to happen to your field and lable positioning - nothing unexpected happens with the tabled layout.

I agree with Graham, I think forms are allowed to be in tables.

:-)

[Purple Martin]

Firstly: yes I use a full strict doctype.

I like the idea of making the elements block and floating the labels - in theory it sounds like a good one. What I found in practise was that in Mozilla the label text goes behind the inputs if there's a lot of it (in IE the inputs got moved down a line and kept their alignment, which looked good). I also found that if I want to right-align the label text I have to give the label a width (which was the original point!) and that makes ugly things happen with the floats.

So I'm going to use a table: you've convinced me that forms can be considered tabular (although I still feel like I'm only using the table for presentation, which in my mind should be something done with CSS).