Complex Forms in Web Browsers (Challenge for CSS Gurus)

As a web app developer (ie - not a graphical designer), I usually hang out in the PHP or other Sitepoint Forums. But I have a serious question about how one can layout a complex data entry form for a browser.

After over 2 weeks of research and experimentation, I finally came up with a solution. But it required a mixture of CSS and tables. The markup is truly hideous. Someone must know of a better way to do it.

 Here's a statement of the problem:[list=1]

[]Client is replacing their MS Access app with a SQL backend and web browser front end.
[
]The app is for internal company use.
[]There are 2-4 clerical staff that utilize this application to manage the data for their work. As such, they have the main data entry form open virtually 100% of the time and are expected to become very proficient in navigating the form. Hence, the form needs to present data in a dense yet easy to read form.
[
]All of the data needs to be presented together so that the user does not have to page to see each of the fieldsets.
[]Each record includes 41 data fields, presented as text inputs, drop-down lists, checkboxes and static display.
[
]There are 3 action buttons.
[]The data entry page must present these elements on a single page organized into appropriate fieldsets (and labels as well.)
[
]The page needs to fit in a browser window on a 1024x768 display.
[]The HTML is generated programmatically by PHP, so any solution needs to take this into account. (ie - using fixed or absolute position would seem to be impossible to me.)
[
]It needs to work in both IE and Firefox and be pretty consistent. The client standard is Firefox but the decision-maker prefers IE. :rolleyes:
[*]Although the customer did not specify how to handle different sized browser windows, a generic solution would allow graceful positioning of fieldsets without horizontal scrollbars.
[/list][indent](Note that my solution forces a balanced two column layout because they want users to be able to count on the relative position of the fieldsets. I can remove the “leftcolumn” and “rightcolumn” div’s to allow the fieldsets to float.)

[/indent]You can see my solution here: http://www.mtrad.com/Complex_Form.htm .

So is there anyone who can do better? Can it be done without tables? (Hey - that’s a challenge! :slight_smile: )

This is an example of a very important class of problems to solve. I’ll post a followup explaining this in more detail.

You could do it with floats.

http://css.maxdesign.com.au/floatutorial/index.htm
http://www.brunildo.org/test/#flo

http://www.csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
http://css-discuss.incutio.com/?page=ClearingSpace

No, I couldn’t. I tried for over two weeks to get all of the different arrangements to work in both IE and FF. Never could.

http://css.maxdesign.com.au/floatutorial/index.htm
http://www.brunildo.org/test/#flo

http://www.csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
http://css-discuss.incutio.com/?page=ClearingSpace
Nice tutorials. Some I’ve already been through, some are new (to me.)

However, I’m not sure how to glean the requisite techniques from them to “do it with floats”. Could you be a little more specific?

Hi there, this is a tough decision and really I would suggest using tables for this form as its quite complex, your desire to use CSS is admirable however I feel you will be creating many issues using CSS.

With the complexity I’d avoid all possible display errors as a form such as this if not displayed in a fix style will become a usability nightmare.

There are approaches with CSS whereby you use the label tag with each input field, drop down etc.

some CSS techniques include,

DL list
labels only

it’s going to be up to you to decide I think!

Can you provide a link to the tableless arrangements you made over two weeks ?

Personally - I hate form work… it looks like two weeks worth of work.

You could ask Paul or Bon - but I imagine they’d need to have lots of spare time to recreate that valid xhtml, css, tableless - I assume your trying for the whole 508, triple A compliant… plus x-browser/platform ?

It’s a big job - I feel for you…

Why can’t a table based solution be valid, use css, be 508 and cross browser / platform?

Seems like you are trying to make a lot of work out of something which can be achieved quite easily, yes you have to try new ways of working and increase your understanding of the issues and benefits. Unfortunately at some point you have to get it done to meet a dead line.

It can - but he’s asking for a tableless solution

Sorry, but that’s not practical. It took some work to make the cited example generic w/o references to the customer. Most of the table-less arrangements didn’t survive and I’m not sure that showing any one of the survivors would be worth the effort to genericize them.

Personally - I hate form work... it looks like two weeks worth of work.

Wow… My expectation is that it shouldn’t take that much work to create this kind of form. I was very frustrated that it took as much effort as it did.

You could ask Paul or Bon - but I imagine they’d need to have lots of spare time to recreate that valid xhtml, css, tableless - I assume your trying for the whole 508, triple A compliant… plus x-browser/platform ?

It's a big job - I feel for you...

Well, I don’t have any idea what “508” refers to :slight_smile: but my intention was to learn how to do it better. At a minimum, not take 2 weeks and have to embed such hideous html markups. And I always hear from the web designer fringe that “anything that you use tables for can be done better with CSS”.

Frankly, I don’t think it’s possible (well, practical) to create this form with CSS only.

So far, the only technique gleaned from the tutorials mentioned above that I haven’t already tried is how to truly clear floats. That might help but it amazes me how buggy the behavior of the web browsers are. I don’t think their implementation of CSS permits display of a complex form.

I assume that “acceptable” form implementation requires the appropriate use of FIELDSET & LABEL elements.

Hi there, this is a tough decision and really I would suggest using tables for this form as its quite complex, your desire to use CSS is admirable however I feel you will be creating many issues using CSS.

Actually, if you look at the HTML markup, you’ll see that I use a separate table for EACH and EVERY row in a FIELDSET. I don’t think anyone would argue that as proper usage.

some CSS techniques include,

DL list
labels only

Tried something similar to the techniques in the “DL List” article - it has clear issues between the browsers. Also has problems with flow in that sometimes the different types of input (or select) elements don’t lay up the same way.

Haven’t tried redefining <BR> with clear:both as suggested in the “labels only” article… I’m not sure that adding that behavior to <BR> is really good. I like some of the other techniques of doing the clears suggested in the other articles. But then, there’s more than one way to skin a cat. :wink:

Your replacing a tabled layout with a tableless layout (ignore the css thing - css refers to cascading style sheets, tableless refers to a layout without tables), nothings impossible for the right amount of money - no one will code it just to prove a point unless they have time available, and most (good) tableless/css coders (that I know) don’t.

Unless your lucky and someone does do it, perhaps stick with what works best for you :slight_smile:

Hi,

I haven’t had time to do this properly but it took about 15 mins to do the layout and about 40 mins to make it validate :frowning:

I haven’t taken the time to line everything up properly but as a general idea this can be done quite easily. The class names should be renamed to something more suitable and it could be tidied up quite a bit more but I haven’t got time today.

http://www.pmob.co.uk/temp/testform2.htm

Hope it gives you a few ideas anyway :slight_smile:

Hi

Having spent most of this afternoon struggling with a table-less layout for a form I was at the point of giving up. I have been getting some clues from Rachael Andew’s book The CSS Anthology - 101 Essential tips

There comes a time when you sometimes have to revert back to the tried and true methods as layout using CSS can be a nightmare that kills the margin on the project.

However, I thought I should drop by this forum and see if I could get some clues that might help me and prevent me from going back to using a table on this layout I have been bogged down on for the past couple of hrs.

I was truely blown away by Paul O’B’s example which is a lesson worth serious $$$. Many thanks Paul for the inspiration.

Cheers

Many thanks Paul for the inspiration.

You’re welcome :slight_smile: If I had spent a little more time on it I could have made it a bit neater and leaner but the ideas are still the same. As you say it does come down to what you are used to and it would have taken me ages in tables :wink:

Paul - Thanks for the try! Your version is very similar to one of my early tries using CSS. It looks fine in Firefox but doesn’t work in IE. The requirement is that the page looks (close to) the same in both IE and Firefox.

(BTW - I’ve found a gross set of lines in my version when viewed in IE on Win2k…)

I will use your version as a base and try to make it work in IE. Hopefully those tutorials at the top of this thread will help…

But I’m not convinced yet that this form is do-able in CSS.

It looks fine in Firefox but doesn’t work in IE.

Hmmm - I can’t see any problem with ie. It looks the same as firefox to me :slight_smile:

What problems are you seeing? As I said I only spent about 15 minutes on this and could have done a much neater job given more time :slight_smile:

I don’t see any inconsistency either.

Paul, did you have much trouble making this layout? Looks like you just have to replace the tables with semantical markup and then make 2 columns float:left and width:<(1024/2) so that they line up horizontally. :slight_smile:

Hi,

Paul, did you have much trouble making this layout

Not really - the hard part was taking out all the tables and validating all the form elements. The actual layout was done in less than 15 mins. The page I posted is full valid xhtml strict :slight_smile: And it looks better in Opera 8 than the original table version does :wink:

The only real difference in firefox is that I forgot firefox doesn’t have a vertical scrollbar which gives about 15px more horizontal space which is why ie drops the float at 1024 (or thereabouts). I just took out the scrollbar online to test and look at in browsercam and there are very minor differences that could be fixed easily.

http://www.browsercam.com/public.aspx?proj_id=197684

I appreciate the effort and although a “much neater job” isn’t necessary, it is necessary to have everything fit into the layout. I found that there was always some positioning problem somewhere that could just not be worked out.

And, to be specific, the solution for this customer must work on win2k, FireFox and IE.
     
     Here are images of the two layouts:
     
     Table-based: [FireFox, [url="http://www.mtrad.com/Image_Complex_Form_table_ie_win2k.jpg"]IE on win2k, [url="http://www.mtrad.com/Image_Complex_Form_table_ie_winxp.jpg"]IE on winXP](http://www.mtrad.com/Image_Complex_Form_table_FireFox.jpg)
     CSS-based: [Firefox, [url="http://www.mtrad.com/Image_Complex_Form_css_ie_win2k.jpg"]IE on win2k, [url="http://www.mtrad.com/Image_Complex_Form_css_ie_winxp.jpg"]IE on winXP](http://www.mtrad.com/Image_Complex_Form_css_FireFox.jpg)

In looking at the IE versions, on one platform, it throws up horizontal scroll bars and on the other, it flows the “second” column below the first. Either is wrong.

Also, on ie on win2k, the layout of Region and System in the Store Info fieldset doesn’t line up correctly. Same for Credit Card and Network in the Purchase Info fieldset… But those don’t look to be the reason that we’re overflowing the window.

I wanted to throw up these images to answer your questions in a timely manner. :slight_smile: Now I’ll see if I can make things work out…

Hi,

Well the browsercam shots tell a different story on win 2k :wink: and look pretty good to me, while xp is more or less perfect apart from the scrollbar which I mentioned in my above post and could be fixed with a minor reduction in width :slight_smile:

http://www.browsercam.com/public.aspx?proj_id=197684

In fact I would say that my layout is better displayed than your table layouts and across a wider range of browsers :slight_smile:

Even the issues in your photos (which I can’t really comment on because you copied my files so I can’t be sure you copied everything correctly including the doctypes etc) look like simple width issues and could be solved in minutes with access to the specific platform you are testing on.

These forms are in fact a lot simpler than many I have coded and I don’t see any reason why (with a little bit more work :slight_smile: ) you couldn’t make them bulletproof. It just looks as though a little more breathing space is required to satisfy the various browsers as the widths are too close to the maximum space available and could be reduced by a few pixels here and there.

I certainly see no major problems and the browsercam photos support this and at present your table version is completely broken in win2k anyway lol :slight_smile:

Obviously this is easier for me because I do hundreds of css only layouts and sometimes it may be easier for others to use tables so i wouldn’t berate anyone for using a table in a complicated situation. But the question asked at the beginning was “could this be done in css” and surely the answer is yes :slight_smile:

I’m supposed to be working today so I haven’t got time to re-visit the layout but I’m sure you can make things work out for yourself :wink:

Hope the comments help anyway :slight_smile:

Paul, relax, this isn’t a competition. You’re the expert and I’m sure that your layouts are the best.

In fact, that’s why I posted here - to find an expert! What I’m trying to do is learn how it’s done using just CSS and not tables and have it come out right.

Well, I don’t have any previous experience with browsercam. It looks like a real useful tool. However, I can say definitively that it doesn’t reproduce what either myself or my client sees when using ie 6.0 on win2kpro.

Here is an image of your layout. Note that the Credit Card, Network, System, Distribution & Status input elements all roll down one line. It also looks like the Code select element is wider than in other browsers. (But I haven’t tried to confirm that yet.)

I’m surprised that the results of browsercam deviates from the real world. Is that common? Is there some way to get them to fix deviations? Doesn’t the fact that browsercam deviates limits its usefulness?

From playing with a copy of testform2.htm, it looks like most of the issues with the other browsers is just jiggling the sizes of various elements and their margins and padding. It’s possible that this is also the case of ie 6.0 on win2kpro, we’ll see.

The reason that I continue to be skeptical is that I’ve run into so many competing bugs in the various browsers. (And I really only care about ie 6.0 & firefox on win2kpro & winxp!) You hack around a bug in one browser and it causes a bug in another browser. Even if you keep hacking around all the bugs, you eventually run out of steam because there’s always one left… So, until I can create a form that doesn’t roll elements to the wrong place, I’ll continue to question if it’s possible.

But I’ll keep plugging away at it. :slight_smile: And I appreciate your help!