(Functional) Pretty Forms

August 12th, 2005
previous     next

Forms have been a rough spot when it comes to style. There’s just only so much you can do; the browsers just don’t allow the kind of styling I’d like. The issue is often discussed, and a nice demonstration of the problem can be found over at Roger Johansson’s site.

There have also been a few solutions attempted. Until I really started working on this, the best solution I was able to find was at badboy media. But there were problems with that solution, so I went about finding my own way.

My end goal was to make my forms look like this:

final product

There were a couple of other requirements I had (that were not necessarily met in other solutions):

  • Needs to be non-intrusive. I just want to include a javascript file, css file, and maybe an onLoad event. The rest should take care of itself.
  • Must respect preselected elements. For example if, when a page loads, a checkbox is automatically selected, it needs to stay selected. This was critical, I plan on using this for a large application
  • Must also trigger events! For example, if my select box has an onChange event, that event must get triggered when I choose an item.
  • Must allow me to size my form fields however I like. Many other solutions use a single image to replace a form. That doesn’t cut it. I need this to work on all my form fields, regardless of size.

In other words, I should be able to drop this thing on any page in just a few lines, and it should deliver great looking forms without interrupting any existing functionality.

So how’d it go?

>> Have a look < <

It was that 3rd requirement above that proved tricky.
The sample page has a few events on a couple of different elements. When triggered, there should be a bit of text a the bottom saying so. The one caveat here is that the checkboxes ignore the onClick event. It will respond to onChange though. Also, I only bothered with onClick and onChange, but it would be very easy to add other events as well.

So want to use/tinker with this? Here is a zip file that contains everything.

To put the effect on your own page simply include the following in your html:<script type="text/javascript" src="[your path here]/prettyForms.js”></script>and<link rel="stylesheet" href="[your path here]/prettyForms.css” type=”text/css” media=”screen” />
Then include this event in your onload:<body onload="prettyForms()">

Depending on how your page is built this might muck up your layout. All of the form elements will now be floated to the left:float:left;
I always float my form fields like this so it’s not a problem, but I could see how this might cause a little bit of tweaking on your page.

Also, the layout is affected by the doctype. I generally use strict whenever possible, so put this at the top of your page too:< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">and make sure your html validates and your css validates.

So that’s that. Let me know what you think. I’d especially like to know how it goes on various browsers/platforms. I have tested on IE6 and Firefox on the PC, and Firefox and Safari on the Mac. The borders aren’t quite right on Safari, I’ll get that fixed and post an update.

There are a number of things I’m still working on:

  • Keyboard navigation: Using tab works reasonably well, but falls apart a bit on the select element.
  • Although it’s a little-used element, I need to put something together for the mulitple select element for completeness.
  • I gotta clean up the javascript… it’s not all that tidy, and uses only basic IE/mozilla recognition. I need to get this up to a more complete level. But as it is, it works.
  • Here’s a big one: I need to find a way to handle the “next level” events. For example, say checkbox one causes checkbox two to become checked. The first box’s event will fire, checking box 2, but it won’t look like it. The problem is that altering a form element with javascript does not fire that element’s events. Tricky. I’m still working on this one.

Comments? Let's hear 'em:

Leave a Reply

name (required)

email (will not be published) (required)

website

comment