Complex layouts for data input forms

Why not include with your message a link to the kind of form you're
talking about, so we have a better idea of what you need?

It's pretty simple to do stuff with tables. The easiest form is just
one that marches down the screen, one field per line. Remember, there
is no restriction on screen height for web forms.

This is what a one-field form with tables looks like:

<table>
<tr>
<td>Label</td>
<td><%= text_field(:table_name, :field_name) %></td>
</tr>
</table>

For more fields, just repeat the <tr> ... </tr> pattern as many times
as you want.

Where it gets tricky is if you want to have more than one field on a
line. That can create messy table structures.

As the other respondant said, under no circumstances would I recommend
CSS positioning for something that naturally falls into a table. CSS
positioning is extremely difficult to get working properly. However,
you may want to style table cells with CSS, which is easy. Just say

<style type = 'text/css'>

td {
  color: black;
  background-color: #ffffcc;
  border: black solid 1px;
  padding: 3px;
}

</style>

<table class = 'myform'>
<tr> (example as I've given earlier) </tr>
</table>

You can, of course, substitute whatever you like for the style.

Complex table layouts tend to be easier to design than they are to
read. Note that you can have as many table cells in a rows as you want
(and as can fix on the screen). So you could say:

<table>
<tr>
<td>Name:</td>
<td><%= text_field :people, :first %> <%= text_field :people, :last
%></td>

<td>Sex</td>
<td>(radio buttons for male/female)</td>
(etc)

if you wanted the next line to be the whole width of the table, you
would say

<tr>
<td colspan = 4>This is the whoel width of the line</td>
</td>
</tr>

Remember that you don't want to reproduce the paper form as it looks on
paper. That will confuse people used to how web forms work. For
instance, I would strongly recommend that you stick to one field per
line, except for fields like first/last name and city/state/zip that
are traditionally grouped together. An example like what I have above,
with the sex to the right, is likely to confuse people because they
will be moving down the fields and are likely to miss the age entirely.

You may want to read Jakob Neilsen on web usability at
http://www.useit.com/ before designing your form. It has a lot of
information on making web sites and forms easier to use, and a lot of
research about how users really see things.

Hope that helps.

D

I am in a similar position. I am building an intranet app and so have
control over my choice of browser (Firefox).

For initial development, I have used tables and this seems to be the
most common and quickest way to get a consistent layout working. But
in Erb terms, it can get messy, getting the tags right. I havnt tried
it yet, but I suspect the best approach would be to create the main
table layout and then build the cells with helper functions or partial
renders.

I am playing around with CSS and floated divs too. I have a display
that lists fields in divs of about 5 fields each field being followed
by a br tag. One div holds the field names, and the next div the field
values. The field names div is slightly shaded so that the values
stand out. Put borders and padding in appropriate places, and you can
get quite a nice effect. (Set each div to float left). The nice thing
about this approach is that the columns stretch to hold the content. I
havnt completely solved what to do when the divs are too wide for the
window. It would be ok for the right hand divs to float down the page
as long as the name and value divs stay together. If I achieve a good
solution for this I will post it.

I have also discovered that Firefox has implemented the CSS3 columns
proposal, and am planning to play with that. It seems to me that it
would be fairly easy to list the fields in a column similar to the way
scaffold does it, and then using a two column div,
Firefox would automatically balance the fields between the two
columns.

I have stumbled upon this post because I am looking around to see if
anyone has created an auto-form generator, that would build a form
using css and absolute positioning. I would have thought such a thing
is possible and could nicely integrate into rails. If anyone knows of
such a thing it would be nice to know. If I cant find anything out
there, I am going to have a go at creating something myself.

The tedious part of building forms is dealing with field sizes, names
and positions etc. to get a precise layout.
Surely if you start with a fixed size wrapper, and build up a list of
field names, values and sizes etc. (some fo this could come from the
model, and some could be held in a properties hash.) it should be
possible to create a drag and drop editor to allow the user to create a
form interactively. And then end up with teh Erb code and stylesheet
that can be dropped into the app. Surely someone has already done this
???

Here is a good article on A List Apart if you are interested in not using tables for form layout...

<http://www.alistapart.com/articles/prettyaccessibleforms/>

-Sean

tonypm wrote:

The problem with this article as with others I've seen on the web is
that they produce forms that are pretty, but utterly simplistic. For
one thing, they only show how to a linear top down flow of labels and
inputs elements. In effect there's only a single column, even if it
contains a label on the left and an input element on the right.

Forms like that are entirely appropriate for a large fraction of
applications where most users encounter those forms only occasionally
or just one time. Now contrast these with in-house applications where
people deal with the same forms multiple times a day and where these
forms may contain a large amount of data. Put everything in a single
column and have users scroll down and up again all the time? Not a good
idea. Putting everything in two or three columns appears more sensible.

Using a table that's actually pretty easy. Everything is nicely aligned
horizontally and vertically. The form behaves well when the window is
resized. Anyone show me how the same can be robustly and intuitively
achieved with CSS and I'll be a convert. For the time being I stick to
my impression that CSS mostly caters to designers of beautiful web
pages and ignores the needs of (web) application designers.

Yes, I do my best to be a good boy and use CSS wherever I can, but my
abilities and CSS's offerrings are limited. Even more limited is my
willingness to go through an inordinate amount of CSS gymnastics to
achieve a result that's easy and intuitive with tables.
</rant>

Michael

I think it’s ok at this time to use tables for multi-column forms, but about everything else can be easily done using CSS. Using CSS has several advantages: smaller HTML files (compare a tablebased layout to a cssbased layout, on large pages you can get between 20-70% less characters), much more readable HTML code, both in Rails’ views and in the actual output, snappier javascript on some browsers (mainly Internet Exploder), …

Layouts that are totally tablebased are actually a lot less intuitive than a sematic layout if you’re handcoding your layouts.

Best regards

Peter De Berdt

Yes, I agree, but for me forms are a big part of layout.

Michael

As for me, I just try to keep my tables as clean as possible (because the ratio tag<->content with tables is quite large) and am eagerly awaiting all browsers to implement the CSS3 multicolumn features :slight_smile:

Best regards

Peter De Berdt