skip to table of contents

Working With Forms

  • Forms, in one form or another (sorry, I couldn't help myself), are common to nearly every web site.
  • Forms let you log in, do a search, request information, write a letter to your congressman, or modify your web content or the site's database.
  • Forms and links are what make the web the interactive marvel it is.
  • Forms give web the developer a serious case of tired-head.

Little Control over Form Controls

All those various flavored inputs, drop-down select boxes, textareas and buttons are form controls. We usually just call them “widgets”. Then, there are the fieldsets, legends and labels.

Each widget and each of the other elements have specific functions in the form.

To confuse matters, all but the fieldset are inline elements, and a form element may not have an inline element as a child.

What's worse, at least for the graphic designer, is that these widgets allow us little control over their appearances, and what control there is, differs from browser to browser.

I won't get into this thorny issue. Roger Johansson has tested extensively and published his finding in his blog. See Styling form controls with CSS, revisited for the straight (updated) poop.

Laying Out the Form

Forms just seem to scream, "use a table". Often a form does look like positionally related data, but it's not. There are no positional relationships. The label can be above or below, to the left or the right of its control. Besides, the table separates the label from its control structurally.

For structural integrity, we must use semantically meaningful markup. That means labels tied to their controls. The simple form demo shows just how that's done.

Javascript and the Form

Table of Contents