qForms v2.0 - Skinning Example

Posted by Dan on Jul 20, 2005 @ 9:31 PM

From time to time I've seen people complain about how boring and unflexible HTML forms are in terms of looks. Some of the designers I've talked to really hate the default button elements, especially when it comes to the radio and checkbox elements.

I was doing some surfing last week and came across some example code on Eric Dolecki's blog which he labelled CSS Radio Buttons. Essentially he was using some JavaScript to hide the default input elements and replace them with images. The code was pretty neat, but a little cumbersome and involves having to add a lot of hooks. So, I spent a couple of hours over the weekend and through together a very rudimentary "Skins" plug-in for qForms.

I've only tested the code in Firefox and IE at the moment, but it seems to work pretty well. In order to see the full effect, your browser will have to support the insertBefore() method. Essentially what the code does is parses through the field elements in a form looking for the type of element you're skinning (currently only checkboxes and radio elements are support.) It'll then hide the element by setting the display property to "none". It'll then insert an image into the DOM right before the input element which has event's attached to the onclick event which will replicate the input element's functionality.

Make sure to check out the demo and make sure to leave comments.

qForms v2.0 - Skinning Example

Categories: HTML/ColdFusion, qForms, JavaScript

9 Comments

  • Dan,

    Love it, love it, love it!

    This is a great addition to the (aleady excellent) qForms.

    Cheers

    David

    p.s. Did I mention that I love it?!
  • Looks really great! Just wanted to confirm that it seems to be working in Opera (8.1) as well.
  • looks very good in firefox.
    are you going to continue? custom textbox & textareas?
  • I love it, i've been a huge fan of qForms for a couple years now, and have turned countless developers on to it.

    I'm seeing all of the demos, and can't wait to get my hands on v2.0. When can we expect to see it available for download?
  • Dan,

    Looks awesome! Can I make one tiny suggestion though? Don't use squares for radio buttons or circles for checkboxes. In doing so, you confuse one of the best, most consistent design idioms we have.

    Patrick
  • I agree with Patrick. You should not attempt to change a recognizable user interface action.

    Other than that, the replacement concept looks very nice! Good job!

    M!ke
  • Glad you guys like what you're seeing! I'll try to address everyone in one post. ;)

    Paul,
    Not sure about text fields. Technically, those are pretty easy to replace the styles via CSS (just set the borders to zero and then set a background image for really fancy looking forms.) However, to do something with dynamics graphic borders that can stretch to any text field is a bit tricky. Probably could be done though.

    Gene,
    If you want to stay up-to-date on the qForms progress, the code has been posted to http://qforms.tigris.org/. From there you can monitor progress, download builds. I'm still working on getting some more developers together to try to speed up the release. It may seem odd I'm working on "extensions" before wrapping up the core API, but I'm doing that on purpose to see how I need to model the API so that creating add-ons or easy and so that they won't clash with each other.

    Patrick,
    Good point! My design skills are pretty weak, so I just borrowed the ones from Eric's site (with his permission.) Adding custom images to use is pretty straightforwarded. Hopefully the community will come up w/a nice collection of elements that can be used.
  • Looks good... nice work!
  • The only complaints I've got are that labels don't work like they're supposed to and you can't use the keyboard to alter your selections.

    I'm sure I'll think of other things, but that's it for now. ;)

Add Comment

Leave this field empty