User Guide

Table Of Contents
714 Chapter 30: Creating Skinnable XML Forms
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 MX 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.
Example: CFML for a skinnable XML form
The following CFML code creates the form shown in the figure in About XML skinnable forms
on page 709. It shows how you can use CFML to structure your form.
<cfform name="comments" format="xml" skin="basiccss" width="400"
preservedata="Yes" >
<cfinput type="hidden" name="revision" value="12a">
<cfformgroup type="fieldset" label="Basic 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>