Using the cfformgroup tag to structure forms

ColdFusion provides form group container types that provide basic structure to a Flash form. You specify these types in the type attribute of the cfformgroup tag. Use the following container types to control the layout of controls and groups of controls:

Type	Description
`horizontal`	Arranges individual controls horizontally, and optionally applies a label to the left of the controls. Use only for arranging ColdFusion form controls, including `cfformitem` controls. As a general rule, do not use to organize `cfformgroup` containers; use the `hbox` attribute instead. If you put other `cfformgroup` tags inside a `horizontal` form group, the controls inside the included `cfformgroup` tag do not align with other controls in the horizontal group.
`vertical`	Arranges individual controls vertically, and optionally applies a label to the left (not top) of the controls. Use only for groups of ColdFusion form controls, including `cfformitem` controls. As a general rule, do not use to organize `cfformgroup` containers; use the `vbox` attribute instead. If you put other `cfformgroup` tags inside a `vertical` form group, the controls inside the included `cfformgroup` tag do not align with other controls in the vertical group.
`hbox`	Arranges groups of controls horizontally. Does not apply a label. Use this attribute value to arrange other `cfformgroup` containers. This tag does not enforce alignment of child controls that have labels, so you should not use it to align individual controls.
`vbox`	Arranges groups of controls vertically. Does not apply a label. Use this attribute value to arrange other `cfformgroup` containers. This tag does not enforce alignment of child controls that have labels, so you should not use it to align individual controls.
`hdividedbox`	Arranges two or more children horizontally, and puts divider handles between the children that users can drag to change the relative sizes of the children. Does not apply a label. The direct children of an `hdividedbox` container must be `cfformgroup` tags with `type` attributes other than `horizontal` or `vertical`.
`vdividedbox`	Arranges two or more children vertically, and puts divider handles between the children that users can drag to change the relative sizes of the children. Does not apply a label. The direct children of a `vdividedbox` container must be `cfformgroup` tags with `type` attributes other than `horizontal` or `vertical`.
`tile`	Arranges its children in a rectangular grid in row-first order. Does not apply a label.
`panel`	Consists of a title bar containing the `label` attribute text, a border, and a content area with vertically arranged children.
`accordion`	Puts each of its child pages in an accordion pleat with a label bar. Displays the contents of one pleat at a time. Users click the labels to expand or contract the pleat pages. Does not apply a label.
`tabnavigator`	Puts each of its children on a tabbed page. Users click the tabs to display a selected page. Does not apply a label.
`page`	The immediate child of an accordion or tab navigator container. Specifies the label on the pleat bar or tab, and arranges its child containers and controls vertically.

For more information on using the accordion, tabnavigator, and page cfformgroup types, see Creating complex forms with accordion and tab navigator containers.

Example: structuring with the cfformgroup tag

The following example shows a form with an hdividedbox container with two vbox containers. The left box uses a horizontal container to arrange two radio buttons. The right box uses a tile container to lay out its check boxes. You can drag the divider handle to resize the two boxes. When you submit the form, the ColdFusion page dumps the Form scope to show the submitted data.

<cfif Isdefined("Form.fieldnames")>
<cfdump var="#form#" label="form scope">
<br><br>
</cfif>

<cfform name="myform" height="200" width="460" format="Flash" skin="HaloBlue">
   <cfformitem type="html" height="20">
      <b>Tell us your preferences</b>
   </cfformitem>
   <!--- Put the pet selectors to the left of the fruit selectors. --->
   <cfformgroup type="hdividedbox" >
   <!--- Group the pet selector box contents, aligned vertically. --->
      <cfformgroup type="VBox"  height="130">
         <cfformitem type="text" height="20">
            Pets:
         </cfformitem>
         <cfformgroup type="vertical" height="80">
            <cfinput type="Radio" name="pets" label="Dogs" value="Dogs"
               checked>
            <cfinput type="Radio" name="pets" label="Cats" value="Cats">
         </cfformgroup>
      </cfformgroup>
         
   <!--- Group the fruit selector box contents, aligned vertically. --->
      <cfformgroup type="VBox" height="130">
         <cfformitem type="text" height="20">
            Fruits:
         </cfformitem>
         <cfformgroup type="tile" height="80" width="190" label="Tile box">
            <--- Flash requires unique names for all controls --->
            <cfinput type = "Checkbox" name="chk1" Label="Apples"
               value="Apples">
            <cfinput type="Checkbox" name="chk2" Label="Bananas"
               value="Bananas">
            <cfinput type="Checkbox" name="chk3" Label="Pears"
               value="Pears">
            <cfinput type="Checkbox" name="chk4" Label="Oranges"
            value="Oranges">
            <cfinput type="Checkbox" name="chk5" Label="Grapes"
               value="Grapes">
            <cfinput type="Checkbox" name="chk6" Label="Cumquats"
               value="Cumquats">
         </cfformgroup>
      </cfformgroup>
   </cfformgroup>
   <cfformgroup type="horizontal">
      <cfinput type="submit" name="submit" width="100" value="Show Results">
      <cfinput type="reset" name="reset" width="100" value="Reset Fields">
   </cfformgroup>
</cfform>

View comments in LiveDocs