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...

<Prettier Accessible Forms – A List Apart;

-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