Adobe ColdFusion 8

Using cfformgroup tags

The cfformgroup tag lets you structure forms by organizing its child tags, for example, to align them horizontally or vertically. Some skins might use cfformgroup tags for more complex formatting, such as tabbed navigator or accordion containers. ColdFusion makes no limitations on the type attributes that you can use in a form, but the XSLT must process the resulting XML to affect the display.

Using ColdFusion skins: The skins provided in ColdFusion support the following type attribute values:

  • horizontal
  • vertical
  • fieldset

The horizontal and vertical types arrange their child tags in the specified direction and place a label to the left of the group of children. The following text from the Example: a simple skinnable form section shows how you could use a cfformgroup tag to apply a Name label and align first and last name fields horizontally:

<cfformgroup type="horizontal" label="Name">
    <cfinput type="text" name="firstname" label="First" required="yes">
    <cfinput type="text" name="lastname" label="Last" required="yes">
</cfformgroup>

The fieldset type corresponds to the HTML fieldset tag, and groups its children by drawing a box around them and replacing part of the top line with legend text. To specify the legend, use the label attribute. To specify the box dimensions, use the style attribute with height and width values.

The following code shows a simple form group with three text controls. The cfformgroup type="vertical" tag ensures that the contents of the form is consistently aligned. The cfformgroup type="horizontal" aligns the firstname and lastname fields horizontally.

<cfform name="comments" format="xml" skin="basiccss" width="400"
        preservedata="Yes" >
    <cfformgroup type="fieldset" label="Contact Information">
        <cfformgroup type="vertical">
            <cfformgroup type="horizontal" label="Name">
                <cfinput type="text" size="20" name="firstname" required="yes">
                <cfinput type="text" size="25" name="lastname" required="yes">
            </cfformgroup>
            <cfinput type="text" name="email" label="E-mail" validation="email">
        </cfformgroup>
     </cfformgroup>
</cfform>

Note: Because XML is case-sensitive, but ColdFusion is not, ColdFusion converts cfformgroup and cfformitem attributes to all-lowercase letters. For example, if you specify cfformgroup type="Random", ColdFusion converts the type to random in the XML.

Using other skins: If you use any other skin, the supported attributes and attribute values depend on the skin implementation. Get the information about the supported attributes and attribute values from the skin developer.