While this is covered in the docs, it can be a bit surprising. When working with ColdFusion 8 Ajax-based containers (cfdiv, cflayoutarea, cfpod, and cfwindow), any form inside the area will be posted to the area itself. What that means is - the entire page won't reload, just the container. However - this is only true for cfform, not form. Consider this code example:
<cfoutput>loaded #timeFormat(now(), "long")#</cfoutput>
<p>
<hr>
<p>
<cflayout type="tab">
<cflayoutarea title="Tab 1">
<form>
<input type="text" name="name">
<input type="submit" name="submit">
</form>
<cfdump var="#form#">
</cflayoutarea>
<cflayoutarea title="Tab 2">
<cfform>
<cfinput type="text" name="name">
<cfinput type="submit" name="submit">
</cfform>
<cfdump var="#form#">
</cflayoutarea>
</cflayout>
I have a simple page with a time stamp on top. Then I have 2 tabs. The first tab has a FORM based form, and the second tab has a CFFORM based form. If you post the first tab, the entire page reloads. If you post the second form, the content of the second form is replaced.
And here is where things get freaky. Notice I didn't do an action for the cfform. That means the action is the same as the current page. The current page defines tabs. So guess what I get inside? Yep, tabs within tabs. Consider this screen shot:
Most likely this isn't what you want. You want to be sure you specify an action and that the action isn't the same as the page that hosts the form itself. So here is an example from an upcoming update to ColdFusionBloggers:
<cflayout type="tab" style="margin-left: 10px;">
<cflayoutarea title="Login" source="login.cfm" />
<cflayoutarea title="Register" source="register.cfm" />
</cflayout>
The contents of register.cfm contain just the form itself. (This page is in development right now, so pardon the half-completed error checking.)
<cfset errors = "">
<cfif structKeyExists(form, "selected") and form.selected is "register">
<cfif not len(trim(form.username))>
<cfset errors = errors & "You must enter a username.<br />">
<cfelseif reFind("[^a-z0-9]", form.username)>
<cfset errors = errors & "Usernames can contain only numbers and letters.<br />">
</cfif>
</cfif>
<cfoutput>
<p>
Note that all form fields are required.
</p>
<cfform action="register.cfm" method="post">
<p>
<label>Username</label>
<input name="username" value="" type="text" size="30" />
<label>Password</label>
<input name="password" value="" type="password" size="30" />
<label>Name</label>
<input name="name" value="" type="text" size="30" />
<label>Email Address</label>
<input name="email" value="" type="text" size="30" />
<br /><br />
<input class="button" type="submit" value="Login"/>
<input type="hidden" name="selected" value="register">
</p>
</cfform>
</cfoutput>
So all in all a pretty cool feature. I'll be able to reload inside my tab without reloading the entire page - but it is definitely something you have to watch out.