QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

ColdFusion Custom Tags for use with Uni-Form XHTML Forms

Posted on December 16, 2007 at 5:37 AM in ColdFusion, Uni-Form Tag Library

A few weeks ago I wrote about my joyous discovery of the Uni-Form markup, an XHTML Strict 1.0 valid markup for forms. At the time I had the thought of wrapping it up into a ColdFusion custom tag, but was way too busy with other items to even really look at it. Well, it just so happens that I've just gotten to the "time to write a bunch of forms for the admin interface" on a new project I'm working on, so off to write that tag I went.

(LOL @ "a tag" or "that tag". All told, it's ten (10) tags, although four of them could be eliminated if one really wanted to do so. But I use them over and over and over, and since that's the point of custom tags, I'm including them.)

We all know what a royal PITA it is to write a bunch of forms. All of that markup, over and over. Well, not anymore. Here's a brief example of what these tags do.

First, calling the tags...

1. <cfimport taglib="/cfMgmt/tags/forms/UniForm" prefix="uform" />
2. <uform:form action="myAction.cfm" method="post" id="myForm">
3. <uform:fieldset legend="Required Fields" class="inlineLabels">
4. <uform:field label="Email Address" name="emailAddress" isRequired="true" type="text" hint="Must be a valid email address." />
5. <uform:field label="Choose Password" name="password" isRequired="true" type="password" />
6. <uform:field label="Re-enter Password" name="password2" isRequired="true" type="password" />
7. </uform:fieldset>
8. </uform:form>

And here's the rendered markup...

1. <form action="myAction.cfm" method="post" enctype="multipart/form-data" id="myForm" class="uniForm">
2. <fieldset class="inlineLabels">
3. <legend>Required Fields</legend>
4. <div class="ctrlHolder">
5. <label for="emailAddress"><em>*</em> Email Address</label>
6. <input name="emailAddress" id="emailAddress" value="" size="35" maxlength="50" type="text" class="textInput" />
7. <p class="formHint">Must be a valid email address.</p>
8. </div>
9. <div class="ctrlHolder">
10. <label for="password"><em>*</em> Choose Password</label>
11. <input name="password" id="password" value="" size="35" maxlength="50" type="password" class="textInput" />
12. </div>
13. <div class="ctrlHolder">
14. <label for="password2"><em>*</em> Re-enter Password</label>
15. <input name="password2" id="password2" value="" size="35" maxlength="50" type="password" class="textInput" />
16. </div>
17. </fieldset>
18. <div class="buttonHolder">
19. <button type="submit" class="submitButton"> Submit </button>
20. <button type="submit" class="submitButton" name="cancel"> Cancel </button>
21. </div>
22. </form>

It's really difficult to make that look good in a blog post, but hopefully you can at least get a glimpse of how simple it is to use, and more importantly how many keystrokes you can save yourself. As I get the time, I'll try and post some more examples of how to use the tags.

The zip (download) contains all of the tags, which are heavily commented on their usage. The index.cfm file is the demo form that is used on the Uni-Form demo site, built with the help of the tags.

The tags are being released under the Apache License, Version 2. Please put them to good use. :)

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)

On 12/17/07 at 6:15 AM, Ben Nadel said:

This is cool stuff. When I first saw the Uni-Form example, I was pretty blown away. It is just so slick and lightweight. I am glad to see that you are making it even more accessible for people looking to make cleaner form markup.

On 12/17/07 at 8:42 AM, Tony Petruzzi said:

The thing I have against uni-form is the way they handle required fields. The right way is to have a class on both the label and input field that distinguishes required fields form non-required, I usually use a class name "required". Reason is so you can style required fields differently then non-required; just having em doesn't cut it and it's confusing.

Even with the way I describe, it isn't perfect. I would to see HTML5 have a require attribute for form fields. That would make it fool proof for screen readers.

On 12/18/07 at 12:15 PM, Sean Corfield said:

Have you looked at John Farrar's COOP project (on RIAforge)? It uses custom tags to provide very clean form layouts but also isolates form processing into a CFC "behind" the form.

On 4/8/08 at 12:54 PM, Dan Wilson said:

I've used this custom tag set on 2 projects now and they really help keep everything consistant. Adding new forms and refactoring old forms is a breeze...

DW

On 4/23/08 at 8:09 AM, Dan O'Keefe said:

I have looked at uni-form - kind of confused as to why he includes the jQuery library and states that uni-form uses jQuery. I do not see any examples of it on that site and there does not seem to be much going on as far as discussions in his forums. To those who have implemented uni-form, did you just add you typical jQuery form validation or does uni-form have some other hooks that I have missed.

Thanks

On 4/23/08 at 12:44 PM, Matt Quackenbush said:

@Dan - The Uni-Form system uses jQuery to handle the "row" highlighting. Some people have also added jQuery validation to it, but the examples as-is do not include validation.

[Add Comment]