Forms .. Whats your opinion

Just redoing a whole heap of forms for one of our sites, and got me thinking…

Form layout.

Labels specifically…

1. Above input elements

2. To the left of input elements

3. Inside input elements.

Whats your opinion.

From what I’ve read, from a UX perspective, labels above text elements is optimal, as it keeps the eye traveling in a uniform direction down the page, rather than zig-zagging back and forth (as you would with labels to the left).

Though with HTML5 placeholder text, I’ve started to put them inside the inputs more and more (using a JS fallback for browsers that don’t support it).

That being said, I think it really depends on the form. For longer forms (say, an options panel for example), I find that labels to the left helps keeps things more organized and makes it far easier to locate an individual item, which can be more important than flow in some cases.

Hope that helps

Chris

Cheers Chris, exactly the kind of answer i was after, we have huge forms, some with 30 plus elements, i opted for left alignment. Will post screenpic later.

Label inside the input elements is the most funky/annoying thing in forms. Don’t do that!

wickedpixel said
Label inside the input elements is the most funky/annoying thing in forms. Don’t do that!

Seriously ?

I like them, but left aligned labels are my preference.

List of web form best practices (User Experience Stack Exchange)

I disagree with WickedPixel…

sevenspark yep good stuff there.

Also, this may be off topic, but is this a form inside a CMS of some sort such as Wordpress or are we just talking about HTML forms in general?

I don’t like the inside ones because if it’s a long form and you are reviewing at the end it will look like a mess because you don’t know what is what – you have to remember. + Sometimes are buggy + sometimes they trick users in thinking those inputs are already filled.

Html forms. Good point WP

wickedpixel said
I don’t like the inside ones because if it’s a long form and you are reviewing at the end it will look like a mess because you don’t know what is what – you have to remember. + Sometimes are buggy + sometimes they trick users in thinking those inputs are already filled.

I guess you have a point… Another alternative would be to use ‘tipsy’ tooltip. That’s becoming popular practice nowadays.