20060822 Tuesday August 22, 2006

Label placement in web forms From Swapnonil Mukherjee:

Matteo Penzo has published an excellent article about the placement and alignment of labels in data entry forms. His research, though much more scientific and thorough, confirms what I had said earlier, about the importance of right aligning form labels.

Screenshot of User Profile In AppFuse 1.9.2, we added support for the CSS Framework and Wufoo-style forms. The new form layout appears to satisfy many of Matteo's suggestions. The only things we aren't doing are: 1) we're using bold labels instead of plain text and 2) we're using labels for drop-downs, instead of making the first element the label. I suppose the bold labels isn't much of an issue b/c we're not using heavy input borders. As for labels and <select> elements, I think the way we're doing things is good enough. If it works for Wufoo, it works for us! Posted in The Web at Aug 22 2006, 12:43:01 PM MDT 7 Comments

Comments:

Matt, Good stuff - I love the AppFuse labels! Did you use the WebWork UI tags and just customize the freemarker templates? If so, perhaps we should get that theme in to WebWork/Struts? If not, perhaps we should build that theme? :)

Posted by Patrick Lightbody on August 22, 2006 at 02:30 PM MDT #

> Did you use the WebWork UI tags and just customize the freemarker templates?

Yeah, I customized the css_xhtml theme's FreeMarker templates. I'd be more than happy to contribute my changes, or contribute them to a new theme. It should be noted that you'll need AppFuse's forms.css to make things look right.

Posted by Matt Raible on August 22, 2006 at 02:55 PM MDT #

Matt, We'd definitely love to see them in Struts 2.0 - feel free to email me them, or I'll just add them at some point in the future.

Posted by Patrick Lightbody on August 22, 2006 at 02:56 PM MDT #

Why are the labels in the bottom address section *below* the input fields? Seems a bit strange to do the opposite there?

Posted by Wim Deblauwe on August 23, 2006 at 12:41 AM MDT #

The address section looks like it does because that's Wufoo's Form Builder does it. Click here to see a screenshot of their form builder and address field.

Posted by Matt Raible on August 23, 2006 at 09:52 AM MDT #

Really good advice! On a different note, there are a few country missing from the appfuse registration list! e.g., Bangladesh, Pakistan, Nepal, Maldives, Fiji, Cambodia, etc. Iran and Syria is absent but Libya is present (Oh I forgot, Libya is no longer blacklisted by the US!).

Posted by Roshan Shrestha on August 25, 2006 at 07:54 AM MDT #

The countries are read from the locales in the JDK. Some locales span countries, hence the reason for the missing countries. We should fix that, but it would be hard to do all the translations for the different languages. You can checkout the code for this tag library in CVS.

Posted by Matt Raible on August 25, 2006 at 09:24 AM MDT #

Post a Comment:
  • HTML Syntax: Allowed
Click me to subscribe
Matt Raible is the Lead UI Architect at LinkedIn. The opinions on this site are mine, not my employers.
« November 2008
SunMonTueWedThuFriSat
      
1
2
3
6
7
8
9
10
11
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
      
Today

Recent Entries

Tag Cloud