Get updates and news:
Want to get Lullabot article, videocast, and podcast announcements delivered right to your in-box? Let us know your email address (we won't share it) and we'll let you know when anything exciting happens.

Better Form Display

Swapnonil Mukherjee attempts to come up with a mathematical formula explaining why forms are easier to read with the labels right aligned (in the left column) next to form fields. I haven't actually worked through the math, but it seems obvious to me from looking at the form.

Now, how do we get Drupal to display a form like that?

(via Ajaxian)

Comments

The better question...

The better question to ask is this:
"Now, how do we prevent Drupal from displaying forms that are this uniform and where their appearance does not match the input"

IMHO, it's rather typical for human factors research to loose sight of interaction aesthetics, not realising the form is flawed in the first place.

Ever figure it out?

I actually found this while searching Google for this same question. I'm trying to make my horribly messy CCK forms neater and easier to use and am finding very little to help. :(

Michelle

CSS and a bit JavaScript

Tried to implement that math things thru some CSS and a bit of JS at least to focus cursor in the form. It goes fine at my site. You only need to keep your custom styling separate for easy editing. The problem comes when you have to deal with IE6, though. Unfortunately, my site is down now after the second crash on my server so I can't give you any live sample. We are on the process of migrating into a real one now.

Love, light n laughter
Gaus Surahman

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <h2> <h3>
  • Lines and paragraphs break automatically.
  • Use <!--pagebreak--> to create page breaks.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options