Using Custom Tags to Render HTML Elements

I'm a big fan of using custom tags to render form fields. This isn't a particularly new idea, as Grails, Ruby on Rails, CFWheels, and Mach-II (to name a few) all have similar features. However, each has their own slightly different syntax for how the tags are called. Depending on the language/framework, you could use <g:textField />, <%= text_field %>, text_field(), textField(), or <form:input />.

So which would I choose? Personally I prefer keeping the tags as tags, so text_field() and textField() are out. And since we're using ColdFusion, we'll need to throw out the Rails syntax too. That leaves us with <g:textField /> and <form:input />. I don't know about you, but I like to write as little code as possible. So if given the choice, I would probably combine the two and use <g:input />.

While the g prefix works well for Grails, it doesn't really apply to ColdFusion. So naturally I tried using a cf prefix.

<cfimport prefix="cf" taglib="tags/" />

<cf:input type="text" name="firstName" value="Tony" />

ColdFusion didn't like this very much. Here's the ever-so-friendly error message: A tag starting with 'CF' has been detected. This tag is not supported by this version of ColdFusion. Please verify your typo and try again. Unknown tag: cfmodule.

So I decided to look up the valid naming rules for the cfimport tag. While doing so, I stumbled upon this gem: If you import a CFML custom tag directory and specify an empty value, "", for this attribute, you can call the custom tags without using a prefix. Intrigued, I tested it out.

<cfimport prefix="" taglib="tags/" />

<input type="text" name="firstName" value="Tony" />

Sure enough, ColdFusion sent the call to /tags/input.cfm, which looks like this:

<cfoutput>
<cfif thisTag.executionMode eq "start">
 <cfset html = [] />
 <cfset html.add("input") />
 <cfloop collection="#attributes#" item="attribute">
  <cfset html.add('#lcase(attribute)#="#attributes[attribute]#"') />
 </cfloop>
<cfelse>
 <#arrayToList(html, " ")# />
</cfif>
</cfoutput>

I'll admit this isn't the most intuitive solution, since it appears as if you're rendering a normal HTML element. However, if used correctly, this could be extremely powerful. For starters, you could automatically wrap all dynamic values in htmlEditFormat(). You could also set the "id" attribute to the "name" attribute if it wasn't specified, set a default "title" attribute, wrap all the fields with an appropriate label, or even add in your own custom attributes. Better yet, you could create your own "HTML" elements with their own custom behavior. Take the following hypothetical form for example:

<form controller="users" action="update" bind="user">
 <hidden name="id" />
 <input name="firstName" />
 <input name="lastName" />
 <email name="email" />
 <date name="birthDate" />
 <phone name="phoneNumber" />
 <address name="homeAddress" />
 <radio name="gender" options="Male,Female" />
 <checkbox name="subscribeToNewsletter" />
 <submit label="Update Account" />
</form>

Yeah it might take some time getting used to, but I think the power might outweigh the initial learning curve in the long run.