form layouts for purists

[bradley317]

I'm looking into updating a few web forms, but have come unstuck on the layout. Normally, tables would be the answer, but that doesn't really work with the old semantic accuracy business.

I can use CSS to style the form elements, which looks ok, but can find no way of producing a structure where all of the input boxes etc line up nicely.

Anyone managed to get over this problem in the past? Examples or links to resources would be tip top.

[vgarcia]

http://alistapart.com/articles/practicalcss/

But a table isn't so bad for forms, especially when they get really complex.

[bradley317]

Good link that. It's a start.

Trouble is, I don't think the code they use for the form is particularly accurate. They don't label the input boxes as you should...

<label for="forename">Forename/label>
<input name="forename" type="text" id="forename" value="" size="20">

I've made the row and cell table style layouts like that with css in the past, but this doesn't seem to work because, in the case of forms, the labels are connected to the input boxes making the position of those boxes dependant on the label length.

Does that make sense?

[vgarcia]

Good link that. It's a start.

Trouble is, I don't think the code they use for the form is particularly accurate. They don't label the input boxes as you should...

Yeah, I agree with you there. Just use the CSS rules for labels that you would for the span.

<label for="forename">Forename/label>
<input name="forename" type="text" id="forename" value="" size="20">

I've made the row and cell table style layouts like that with css in the past, but this doesn't seem to work because, in the case of forms, the labels are connected to the input boxes making the position of those boxes dependant on the label length.

Does that make sense?

Do something like this:

div.row {
  clear: both;
  padding-top: 10px;
  }

div.row label {
  float: left;
  width: 100px;
  text-align: right;
  display: block;
  }

div.row span.formw {
  float: right;
  width: 335px;
  text-align: left;
  display: block;
  }

<form>
<div class="row">
<label for="firstname">First Name:</label>
<span class="formw">
<input type="text" name="firstname" id="firstname" />
</span>
</div>
</form>

(note that I added the "display: block;" in there, to wrap the text from labels to a new line if the content exceeds your width)

[rbutler]

I would agree with Vinnie. I did a similar exercise and found myself thinking this is not practical. But every solution calls for something.

[vgarcia]

I would agree with Vinnie. I did a similar exercise and found myself thinking this is not practical. But every solution calls for something.

Well, for a simple contact form it's not too difficult to do in CSS. However, when you get to the level of something like the homefinder on realtor.com you might want to take another look at the good ol' table. I go with tables when either complexity or browser compatibility calls for it; otherwise I'll stick to CSS on the simpler stuff .

[bradley317]

Nice one. I think I'm getting this now. I've worked out a way of producing a more complex layout, similar to the one vinnie highlighted...

CSS...

.row{
	clear:both;
	width: 100%;
}

.cellx{
	float: left;
}

HTML...

<div class="row">
<div class="cellx">
<label for="forename">Forename:</label>
<br />
<input blah blah blah />
</div>
<div class="cellx">
<label for="surname">Surname:</label>
<br />
<input blah blah blah />
</div>
</div>
<div class="row">
<label for="address1">Address 1:</label>
<br />
<input blah blah blah />
</div>

The BR tags align the inputs under the labels, which looks pretty nice (obviously vinnie's code could go in here).

By not specifying a width on the 'cellx' class, you can use as many of them as you like in each row (within reason) and then match everything up with the input box sizes.

I think this is fairly robust, and will take about the same amount of code as a table based version. What's more, semantically, it's clean as a whistle.

[vgarcia]

Nice one. I think I'm getting this now. I've worked out a way of producing a more complex layout, similar to the one vinnie highlighted...

CSS...

.row{
	clear:both;
	width: 100%;
}

.cellx{
	float: left;
}

HTML...

<div class="row">
<div class="cellx">
<label for="forename">Forename:</label>
<br />
<input blah blah blah />
</div>
<div class="cellx">
<label for="surname">Surname:</label>
<br />
<input blah blah blah />
</div>
</div>
<div class="row">
<label for="address1">Address 1:</label>
<br />
<input blah blah blah />
</div>

The BR tags align the inputs under the labels, which looks pretty nice (obviously vinnie's code could go in here).

You could also set your label to display: block; which would do the same thing .

By not specifying a width on the 'cellx' class, you can use as many of them as you like in each row (within reason) and then match everything up with the input box sizes.

Not setting a width on a float can lead to more problems.

[bradley317]

Not setting a width on a float can lead to more problems.

rats! such as...?

[rbutler]

I'm pretty sure w/out declaring widths on floats you get 100% width, which maybe isn't what you want.

I still say for a simple contact form or any form for that matter, table is still practical, but maybe I just like to disagree with Vinnie

[Version0-00e]

You don't want to go there, trust me

By default (IMHO) you should declare margin, padding and a width for each DIV you have just to keep things ticking over nicely

[vgarcia]

I still say for a simple contact form or any form for that matter, table is still practical, but maybe I just like to disagree with Vinnie

Well I'm not disagreeing with you on that. If you want to use a simple table for even small forms that's cool too. My personal preference is to keep simpler forms in a CSS fashion, but again that's just preference

[Bryce]

As we've seen, CSS based table-like layout is pretty darn easy really. So I personally think it is best to stick to CSS layout for your forms.

All it takes is a little fiddling and a few minutes of tweaking, and you will still be able to call yourself a semantics guru

[-Ox]

As we've seen, CSS based table-like layout is pretty darn easy really. So I personally think it is best to stick to CSS layout for your forms.

I'm an absolute fan on CSS layouts, all my newer websites validate in XHTML stric I wouldnt want it any other way, its just a superior way of coding, and the benefits are endless, however, as Vinnie said, some of those complex forms, are better off in a table. when you start getting into large out of wack forms with large numbers of fields and placements, its better off to use a table.

same thing goes for spitting out rows of results underneath eachother,would you then also use a bunch of divs, or try creating a small calendar with divs?

Use a table where but only where it is nessesarry, if tables werent meant to be, they would have been discontinued.

[maxor]

I think forms are tabular enough to use tables, and they also provide a bit more sematic meaning than a big mess of wrapper <div>s all over the place.

[bradley317]

Deja vu? Change the word 'form' for the word 'website' in some of those comments and we've gone back to the same old debate of tables vs css and when it's appropriate to use each approach.

If you're going to create semantically accurate pages, then surely you should go for it 100%. A form does not contain tablular data. Simple as that. There are plenty of examples where the use of tables make things more straightforward, but that's how we got into this mess in the first place.

Anyway... I thought not giving a div a width attribute makes it shrink to the width of the largest element within it. Is this not the case? Looks like I'm heading for another afternoons testing in obsolete browsers. Maybe tables is the way forward after all...

[Xireon]

Deja vu? Change the word 'form' for the word 'website' in some of those comments and we've gone back to the same old debate of tables vs css and when it's appropriate to use each approach.

If you're going to create semantically accurate pages, then surely you should go for it 100%. A form does not contain tablular data. Simple as that. There are plenty of examples where the use of tables make things more straightforward, but that's how we got into this mess in the first place.

<snip />

I agree that tables are not the correct way to do this, and this started the whole website-in-table issue.
On the other hand, most forms are not that complex to get the old table-in-table-in-table-etc. issue again.
I'm rooting for CSS, but if it can be done easier in a SIMPLE, preferrably non-nested table I have no objections...

[vgarcia]

Deja vu? Change the word 'form' for the word 'website' in some of those comments and we've gone back to the same old debate of tables vs css and when it's appropriate to use each approach.

Not exactly, but I'll take the bait

If you're going to create semantically accurate pages, then surely you should go for it 100%. A form does not contain tablular data. Simple as that. There are plenty of examples where the use of tables make things more straightforward, but that's how we got into this mess in the first place.

What's the difference between this:

<table summary="my stats">
<caption>My stats</caption>
<col width="200" />
<col width="200" />
<tbody>
<tr>
<td scope="row">First Name:</td>
<td>Vinnie</td>
</tr>
<tr>
<td scope="row">Height:</td>
<td>5 feet 10 inches</td>
</tr>
</tbody>
</table>

and this?

<table summary="stats">
<caption>My stats</caption>
<col width="200" />
<col width="200" />
<tbody>
<tr>
<td scope="row"><label for="fn">First Name:</label></td>
<td><input type="text" name="fn" id="fn" /></td>
</tr>
<tr>
<td scope="row"><label for="height">Height:</label></td>
<td><input type="text" name="height" id="height" /></td>
</tr>
</tbody>
</table>

One is filled out and the other allows for user input, that's what. Semantically it's pretty much the same thing though.

Anyway... I thought not giving a div a width attribute makes it shrink to the width of the largest element within it. Is this not the case?

Nope, that's table cells. Divs would normally stretch out to fill its container (100% width).

[bradley317]

In that example, there is no differance. But that's a pretty simple and could be styled with CSS alone.

Back to your original point, when the layout becomes more complicated, tables could be the way to go. I'm not sure I agree, because you'd struggle to get the clarity of markup similar to what you have above. For tables to work, as I understand them, the data within the table must relate to either the end column, or the top row. Which it does in your example, but with a few more columns that goes belly up...

<table summary="stats">
  <caption>
  My stats
  </caption>
  <col width="200" />
  <col width="200" />
  <tbody>
    <tr>
      <td scope="row"><label for="fn">First Name:</label></td>
      <td><input type="text" name="fn" id="fn" /></td>
      <td><label for="sn">Surname:</label></td>
      <td><input type="text" name="sn" id="sn" /></td>
    </tr>
    <tr>
      <td scope="row"><label for="height">Height:</label></td>
      <td><input type="text" name="height" id="height" /></td>
      <td><label for="height">Age:</label></td>
      <td><input type="text" name="age" id="age" /></td>
    </tr>
  </tbody>
</table>

Do you see what I mean? Is there a way of sorting this?

This is my initial problem in a nutshell. Tables aren't the answer (it seems), and css is too damn complicated. Whatever shall i do?

[vgarcia]

This is my initial problem in a nutshell. Tables aren't the answer (it seems), and css is too damn complicated. Whatever shall i do?

XForms perhaps? I know, it won't be in browser form for a very long time, but that's the direction the W3C wants everyone to head into...

[Bryce]

I'm still not convinced. If you can't lay out your 'complex' forms with CSS, then you're obviously not trying hard enough.

Have to wonder if using lots of spans is semantically correct though. Gotta give somewhere, I guess.

[vgarcia]

I'm still not convinced. If you can't lay out your 'complex' forms with CSS, then you're obviously not trying hard enough.

It's not about working harder, it's about working smarter. In my case, I usually try to simplify the form as much as possible before even starting on style or markup.

[Suzy]

What's smarter and what's harder?

HTML:
<fieldset>
<legend>My Stats</legend>
<label for="fn">First Name: <input type="text" name="fn" id="fn" /></label>
<label for="sn">Surname: <input type="text" name="sn" id="sn" /></label>
<label for="height">Height: <input type="text" name="height" id="height" /></label>
<label for="age">Age: <input type="text" name="age" id="age" /></label>
</fieldset>

This could be CSS'ed to look exactly like a table alignment and it's usability/flow is intact. I still think it's tools for the job so if it's a complicated form then this may not suit but the seeds (id's) are there..

[Simon Mackie]

But a table isn't so bad for forms, especially when they get really complex.

I agree, I would say that forms are essentially tabular.

See Rachel's Style Web Forms With CSS article for more on forms and CSS

[Red Squirrel]

I don't see the whole thing with avoiding use of tables, it seems to be a movement in the web design industry. But I find nothing wrong with tables, and they're much easier to work with.

So I would simply stick with tables. Using css classes for tables and the forms you can do wonders.