User Guide

Table Of Contents
Building Flash forms 697
An accordion container puts each logical form page on an accordion pleat. Each pleat has a label
bar; when the user clicks a bar, the current page collapses and the selected page expands to fill the
available form space. The following figure shows a three-pleat accordion, open to the middle
pleat, Preferences:
A tab navigator container puts each logical form page on a tabbed frame. When the user clicks a
tab, the selected page replaces the previous page. The figure in About Flash forms shows a tab
navigator container.
The following example generates a two-tab tab navigator container that gets contact information
and preferences. You can change it to an accordion container by changing the
type attribute of
the first
cfformgroup tag from accordion to tabnavigator. To prevent the accordion from
having scroll bars, you must also increase the
cfform tag height attribute to 310 and the
tabnavigator tag height attribute to 260.
<cfif IsDefined("Form.fieldnames")>
<cfdump var="#form#" label="form scope">
<br><br>
</cfif>
<br>
<cfform name="myform" height="285" width="480" format="Flash" skin="HaloBlue">
<cfformgroup type="tabnavigator" height="240" style="marginTop: 0">
<cfformgroup type="page" label="Contact Information">
<!--- Align the first and last name fields horizontally. --->
<cfformgroup type="horizontal" label="Your Name">
<cfinput type="text" required="Yes" name="firstName" label="First"
value="" width="100"/>
<cfinput type="text" required="Yes" name="lastName" label="Last"
value="" width="100"/>
</cfformgroup>
<cfformitem type="hrule" />
<cfformitem type="HTML"><textformat indent="95"><font size="-2">
Flash fills this field in automatically.
You can replace the text.
</font></textformat>
</cfformitem>
<!--- The bind attribute gets the field contents from the firstName
and lastName fields as they get filled in. --->
<cfinput type="text" name="email" label="email"