Table of Contents
Advertisement
DEVELOPING COLDFUSION 9 APPLICATIONS
Requesting and Presenting Information
An accordion container places 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
image shows a three-pleat accordion, open to the middle pleat, Preferences:
A tab navigator container places each logical form page on a tabbed frame. When the user clicks a tab, the selected page
replaces the previous page. The image in
The following example generates a two-tab navigator container that gets contact information and preferences. You can
change it to an accordion container by changing the
to
To prevent the accordion from having scroll bars, increase the
accordion.
the
tag
tabnavigator
height
<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"
bind="{firstName.text}.{lastName.text}@mm.com">
<cfformitem type="spacer" height="3" />
<cfformitem type="hrule" />
<cfformitem type="spacer" height="3" />
<cfinput type="text" name="phone" validate="telephone" required="no"
About Flash forms
attribute of the first
type
attribute to 260.
Last updated 8/5/2010
shows a tab navigator container.
cfformgroup
tag
cfform
tag from
tabnavigator
attribute to 310 and
height
774
Advertisement
Table of Contents
