MetaChat - Web Advice From Form Designers Please:

MetaChat is an informal place for MeFites to touch base and post, discuss and chatter about topics that may not belong on MetaFilter. Questions? Check the FAQ. Please note: This is important.

19 February 2008

Web Advice From Form Designers Please: Web Pages need Web Forms, but how? Technical details inside. →[More:] I'm doing a bit of programming to get my VDF webapp skills (1) up, and am determined to do it correctly.

So, how do y'all do web forms. Do you use css and positioning for the labels and the entry boxes, or do you just bang everything into two column tables? Are there any advantages or disadvantages to the two methods? Which of the two methods allows for simpler css.

I realise this is one of those "religious war" issues, but I want to get a feel for what the current thinking is on this.

(1)VDF is the programming language I've ended up using at work. It's got its good points (easy access to the database, simple language, I know it inside out), but it's hamstrung by the fact that it's expensive, tied to Windows, IIS and ASP & it is used by approximately three people in the entire world.

post by: seanyboy at: 10:31 | 5 comments

I do any kind of forms by the merest skin of my teeths - and try to avoid them by closing my eyes and pretending they can't see me.

Danostuporstar has been really nice and helpful giving me advice for css stuff before, so if we don't have a Form Wizard among us, you might want to ask him to drop in on this thread.

posted by taz 19 February | 10:38

It depends on the length of the form, but we generally use tables. Semantically, it does make sense, as you're usually dealing with labels on the left and values on the right. From a practical standpoint, tables will usually render more consistently in more circumstances than their CSS equivalents, as most browsers jump through hoops to render each row of a table the same, such as stacking them neatly on mobile devices.

posted by eamondaly 19 February | 10:56

Ideally, CSS-only forms would be used for everything, but in practice with complex forms containing elements of different sizes, it rapidly becomes a nightmare.

In CSS-only forms, you have to worry about what happens when you look at the form on a small screen, or with a larger font, or with a different browser. Tables don't solve all these problems, but they tend to handle overflow and wrapping issues much better. But avoid nested tables if you possibly can, and make use of aids like the fieldset tag.

Tables necessitate more complex HTML, but generally require far simpler CSS. With CSS-only forms, you often find every exception (like putting two text-field inputs on one line, or adding a password-strength widget etc) requires specific changes to many different rules. On top of this, you often find state-specific behaviours (e.g. highlighting fields with validation errors after submitting) require modifications to several different rules, such as the input, the label and the container div/li. The CSS becomes a tangled spider's web of edge-case upon edge-case.

posted by matthewr 19 February | 11:04

I used tables for years, and I agree that they're semantically OK and easier to style, but I'm switching to CSS because the HTML size is dramatically smaller.

Some examples of CSS-based forms. For styling, 47+ Excellent Ajax CSS Forms

posted by kirkaracha 19 February | 13:21

Thanks to everyone for this.
Especially for the links kirkaracha. That's absolutely brilliant.

posted by seanyboy 19 February | 17:25

← I am no judge of my emotional health, but physically, || Any appliance-loving women left? →

HOME || REGISTER || LOGIN