Adding text, images, rules, and space with the cfformitem tag

Because Flash forms do not support inline HTML, you use the cfformitem tag to add text blocks and horizontal and vertical rules to your form. (Flash form controls, such as cfinput, use the label or value attribute to specify text labels.) You can also use the cfformitem tag to add spacers between visual form elements.

The cfformitem type="hrule" and cfformitem type="vrule" tags put horizontal and vertical rules in the form. You can specify the rule thickness, color, and shadow characteristics by using style specifications. For more information on specifying rule styles, see Styles for cfformitem with hrule or vrule type attributes in ColdFusion MX Flash Form Style Reference in CFML Reference.

The cfformitem type="spacer" tag puts a blank space of the specified height and width on the form. This tag type does not use styles; it can be useful in improving the form appearance by helping you control the form layout.

The cfformitem type="text" tag lets you insert plain text in the form You can use the style attribute to apply a consistent format to the text.

The cfformitem type="html" tag lets you insert formatted text and images in the form. You can include basic HTML-style formatting tags in the body of this tag to add images and to format and style the text.

You can use the following formatting tags and attributes in the body of a cfformitem type="html" tag:

Tag	Valid attributes
`a`	`href` URL to link to. `target` window name; can be a standard HTML window name such as _blank.
`b`	None.
`br`	None.
`font`	`color` Must be in hexadecimal format, such as #FF00AA. Use a single number sign (#) character. `face C`an be a comma-delimited list of font face names; Flash uses the first font that is available on the client system. `size` In pixels; + and -relative values are allowed.
`i`	None.
`img`	See the attribute table for the `img` tag. *Note:* You must close this tag with /> or an </img> tag.
`li`	None.
`p`	`align` Must be one of the following: `left`, `right`, `center`.
`textformat`	See the attribute table for the `textformat` tag.
`u`	None.

The img tag supports the following attributes:

Attribute	Description
`src`	(Required) URL or pathname to a JPEG or SWF file. Images are not displayed until they have downloaded completely. Flash Player does not support progressive JPEG files.
`width`	Width of the image, in pixels.
`height`	Height of the image in pixels.
`align`	Horizontal alignment of the embedded image within the text field. Valid values are `left` and `right`. The default value is `left`.
`hspace`	Number of pixels of horizontal space that surround the image where no text appears. The default value is `8`.
`vspace`	Number of pixels of vertical space that surround the image where no text appears. The default value is `8`.

Note: Because of the Flash dynamic sizing rules, to ensure that the image displays properly, you might have to specify the formitem tag height attribute and the width and height attributes for the form or the containing cfformgroup tag. Also, the image always displays on a new line, not inline with text, and text that follows the image in your code occupies any available space to the right of the image.

The textformat tag is specific to Flash, and has the following attributes:

Attribute	Description
`blockindent`	Block indentation, in points.
`indent`	Indentation from the left margin to the first character in the paragraph.
`leading`	Amount of leading (vertical space) between lines.
`leftmargin`	Left margin of the paragraph, in points.
`rightmargin`	Right margin of the paragraph, in points.
`tabstops`	Custom tab stops as an array of nonnegative integers. To specify tabs in text, use the \t escape character.

For detailed descriptions of these tags, see the Flash documentation.

The following code creates a simple Flash form that consists of a formatted text area surrounded by horizontal rules:

<cfform name="myform" height="220" width="400" format="Flash" >
   <!--- Use text formitem tag with style specifications for the heading. --->
   <cfformitem type="text" style="fontWeight:bold; fontSize:14;">
   Flash form with formatted text and rules
   </cfformitem>
   <!--- The spacer adds space between the text and the rule --->
   <cfformitem type="spacer" height="2" />
   <cfformitem type="hrule" />
   <cfformitem type="html">
      <b><font color="#FF0000" size="+4" face="serif">
      This form has formatted text, including:</font></b><br>
      <textformat blockindent="20" leading="2">
         <li>colored text</li>
         <li><i>italic and bold text</i></li>
         <li>a bulleted list in an indented block</li>
      </textformat>
      <p><b>The text is preceded and followed by horizontal rules</b></p>
      It also has a link to a web page.</b><br>
      <a href="http://www.macromedia.com/" target="_blank">
      <font color="#0000FF"><u>
      This link displays the Macromedia home page in a new browser window
      </u></font></a>
   </cfformitem>
   <cfformitem type="spacer" height="2" />
   <cfformitem type="hrule" />
</cfform>

This form appears as follows:

Flash form that results from preceding code

View comments in LiveDocs