Sly 0

I develop a web application with a liquid/relative layout. I'm trying to find the optimal and most elegant way of displaying data entry forms in that context.

Here are my requirements:

  • The design must work on IE7, IE8, Firefox 3, Chrome and Safari 4.

  • The form shall be displayed as two columns. The field captions should be on the left column and the input controls should be on the right column.

  • The form should be aligned to the left side of the page; not centered.

  • When resizing the browser to a very wide width (maximized on a widescreen monitor), the form width shall not stretch in a way where captions and input controls would become unnecessarily wide. For instance, the caption column should never be wider than 200px. And the control input column should not be wider than 400px.

  • When resizing the browser to a very narrow width (300px). The form should not overflow over on the right side and should still be usable. In such an edge case, the layout of the form will not be pleasing but it will work.

  • It should not be necessary to specify the width of each individual input controls. Text fields should be as wide as possible (without exceeding the max size of the input control column). In some specific cases; specifying a max-width or min-width for an input control is acceptable.

I would like guidelines and advises on how to do that, such as:

  • Should I use a table to layout my form; with one row per caption/control pair? If not, how should I do that?

  • What are good strategies to make the form somewhat fluid but not the point where it would be excessive and unnecessary?

  • Do you have links to existing sites or to web designs (free or paid) layouts that support those requirements?

  • What is the best way of managing input control widths? It is reasonable to think that I will get good results without resorting to input controls with fixed widths?

I'm open to all ideas and suggestions. If you think some of the requirement are not reasonable or are not a good ideas, I'm open to comment on that too.

Thank you

  • I think that your question is too broad. Should split it into it's component parts as much as you can. Tchalvak about 8 years ago
  • I understand your point and I agree that the question is broad. But on the other hand, I don't have a specific technical question; I'm really looking at guidance and at an overall strategy to address the high level requirement. Sly about 8 years ago

1 answer

0
points
This was chosen as the best answer

In general terms you need to use width: auto or width: 50%, max-width and min-width and float your labels and form controls in floated 100% wide fieldsets in a max, min, width: 100% form. Use a list perhaps to structure your label and input pairings

make the min-width of the form controls and labels and form the same and on narrow browsers at that width, form labels and form controls will stack.

It really is a big question, but the CSS wouldn't be complex and older versions of Internet Explorer can be persuaded to do min&max widths with this: http://www.doxdesk.com/software/js/minmax.html or similar.

This article might be of interest:

http://articles.sitepoint.com/article/fancy-form-design-css

and the book it seems to have spawned:

http://www.sitepoint.com/books/forms1/

Answered about 8 years ago by Tony Crockford
  • @Tony: Thank you very, very much. This is exactly what I needed. Sly about 8 years ago