The cfform tag takes a skin attribute, which lets you select an overall appearance for your form. The skin determines the color used for highlighted and selected elements.

You can select the following Flash skins:

• haloBlue

• haloGreen (the default)

• haloOrange

• haloSilver

The ColdFusion Flash form tags have a style attribute that lets you specify control characteristics using CSS syntax. You can specify a style attribute in the following tags:

• cfform

• cfformgroup

• cfcalendar

• cfformitem, types hrule and vrule

• cfgrid

• cfinput

• cfselect

• cftextarea

• cftree

  The attributes for the cfform and cfformgroup generally apply to all the form or form group’s children.

  Flash supports many, but not all, standard CSS styles. ColdFusion Flash forms only support applying specific CSS style specifications to individual CFML tags and their corresponding Flash controls and groups. You cannot use an external style sheet or define a document-level style sheet, as you can for HTML forms.

To specify a Flash style, use the following format:

style="stylename1: value; stylename2: value; ..."

For example, the following code specifies three style values for a text input control:

<cfinput type="text" name="text2" label="Last" 
    style="borderSyle:inset; fontSize:12; backgroundColor:##FFEEFF">

Style properties can be Boolean values, strings, numbers, or arrays of these values.

Because of the way Flash control styles are implemented, some common styles are valid, but have no effect, in some tags. Therefore, in the table in Styles valid for all controls in ColdFusion Flash Form Style Reference in the CFML Reference, the listed styles do not cause errors when used in controls, but might not have any effect.

Styles can be inheritable or noninheritable. If a style is noninheritable, it only affects the tag, and does not affect any of its children. For example, to maintain a consistent background color in an hbox form group and its children tags, specify the color in all tags. If a style is inheritable, it applies to the tag and its children.

The following code creates a Flash form that uses a skin and styles to control its appearance.

The code for the form is as follows. Comments in the code explain how formatting controls and styles determine the appearance.

<!--- Specify the form height and width, use the HaloBlue skin.  
         Note: Flash ignores a backgroundColor style set in cfform. ---> 
<cfform name="myform" height="390" width="440" format="Flash" skin="HaloBlue"> 
    <!--- The input area is a panel. Styles to specify panel characteristics. 
             Child controls inherit the background color and font settings. ---> 
    <cfformgroup type="Panel" label="Contact Information" 
            style="marginTop:20; marginBottom:20; fontSize:14; fontStyle:italic;  
            headerColors:##FFFF00, ##999900; backgroundColor:##FFFFEE; 
            headerHeight:35; cornerRadius:12"> 
        <!--- This vbox sets the font size and style, and spacing between and 
                 around its child controls. --->  
        <cfformgroup type="vbox" style="fontSize:12; fontStyle:normal; 
                verticalGap:18; marginLeft:10; marginRight:10"> 
            <!--- Use a horizontal group to align the first and last name fields  
                     and set a common label. ---> 
            <cfformgroup type="horizontal" label="Name" > 
                <!--- Use text styles to highlight the entered names. ---> 
                <cfinput type="text" required="Yes" name="firstName" label="First" 
                    value="" width="120" style="color:##006090; fontSize:12; 
                    fontWeight:bold" /> 
                <cfinput type="text" required="Yes" name="lastName" label="Last" 
                    value="" width="120" style="color:##006090; fontSize:12; 
                    fontWeight:bold"/> 
            </cfformgroup> 
            <!--- Horizontal rules surround the e-mail address.  
                     Styles specify the rule characteristics. ---> 
            <cfformitem type="hrule" style="color:##999900; shadowColor:##DDDD66; 
                strokeWidth:4"/> 
            <cfformitem type="HTML" Style="marginTop:0; marginBottom:0"> 
                <textformat indent="57"> <font size="-1">Flash fills this field in 
                automatically. You can replace the text.</font></textformat> 
            </cfformitem> 
            <cfinput type="text" name="email" label="email"  
                bind="{firstName.text}.{lastName.text}@mm.com"> 
            <cfformitem type="hrule" style="color:##999900; shadowColor:##DDDD66; 
                strokeWidth:4"/> 
            <cfinput type="text" name="phone" validate="telephone" label="Phone"> 
            <!--- Styles control the colors of the current, selected, and  
                rolled-over dates. ---> 
            <cfinput type="datefield" name="mydate1" label="Date"  
                style="rollOverColor:##DDDDFF; selectionColor:##0000FF; 
                todayColor:##AAAAFF"> 
        </cfformgroup> <!--- vbox ---> 
    </cfformgroup> <!--- panel ---> 
    <!--- A style centers the buttons at the bottom of the form. ---> 
    <cfformgroup type="horizontal"style="horizontalAlign:center"> 
        <cfinput type = "submit" name="submit" width="100" value = "Show Results"> 
        <cfinput type = "reset" name="reset" width="100" value = "Reset Fields"> 
    </cfformgroup> 
</cfform>