cfform

Description

Builds a form with CFML custom control tags; these provide more functionality than standard HTML form input elements. You can include the resulting form on the client page as HTML or Adobe Flash content, and generate the form by using XML and XSLT.

Category

Forms tags

Syntax

<cfform  
    accessible = "yes|no" 
    action = "form action" 
    archive = "URL" 
    codeBase = "URL" 
    format = "HTML|Flash|XML" 
    height = "pixels|percent" 
    id = "HTML id"     method = "POST|GET" 
    name = "name" 
    onError = "JavaScript function name or ActionScript code" 
    onLoad = "load event script"     onReset = "reset event script"     onSubmit = "JavaScript"  
    onSuccess = "JavaScript function name"  
    preloader = "yes|no" 
    preserveData = "yes|no" 
    scriptSrc = "path" 
    skin = "Flash skin|XSL skin" 
    style = "style specification" 
    timeout = "seconds" 
    width = "pixels|percent" 
    wMode = "window|transparent|opaque"> 
     
    ... 
 
</cfform>

See also

cfajaximport, cfapplet, cfcalendar, cfformgroup, cfformitem, cfgrid, cfinput, cfselect, cfslider, cftextarea, cftree; Requesting and Presenting Information in the Developing ColdFusion Applications

History

ColdFusion 8:

• Added support for adding interactive fields in PDF forms.

• Added the onSuccess attribute and support in AJAX controls for the onError attribute

ColdFusion MX 7:

• Added ability to set the default value of the scriptSrc attribute in the ColdFusion Administrator.

• Deprecated the passthrough attribute. The tag now supports all HTML form tag attributes directly.

• Added the method attribute and support for the GET method.

• Added support for Flash and XML output, including the format, height, width, preloader, timeout, wMode, accessible, and skin attributes.

• Added cfformgroup, cfformitem, and cftextarea child tags.

• Added the onReset attribute.

ColdFusion MX:

• Deprecated the enableCAB attribute. It might not work, and might cause an error, in later releases.

• Changed the name and action attributes to optional.

• Changed integer validation to require an integer value. In previous releases it would convert a floating point value to an integer.

Attributes

The following table lists attributes that ColdFusion uses directly. For HTML format forms, this tag also supports the standard HTML form tag attributes that are not on this list, and passes them directly to the browser. ColdFusion also includes all supported HTML attributes in the XML.

Usage

This tag requires an end tag.

You can use the following ColdFusion form control tags in the cfform tag:

• cfapplet: Used in HTML and XML format only; embeds a registered Java applet.

• cfformgroup: Used in Flash and XML format only; groups and arranges child controls.

• cfformitem: Used in Flash and XML format only; adds horizontal rules, vertical rules, and text to the form.

• cfgrid: Creates a grid control to display tabular data.

• cfinput: Creates and an input element.

• cfselect: Creates a drop-down list box.

• cfslider: Used in HTML and XML format only; creates a slider control.

• cftextarea: Creates a multiline text input box.

• cftree: Creates a tree control.

In HTML format, all tags, and in Flash format the cftree and cfgrid tags, require JavaScript support on the browser. The cfapplet tag and applet format cfgrid, cfslider, and cftree tags require the client to download a Java applet.

If you specify Flash format in the cfform tag, ColdFusion ignores any HTML in the form body. Use ColdFusion tags, such as cfinput, for all form controls. You can include individual Flash format cfgrid and cftree controls in an HTML format cfform tag.

In Flash format, if your forms do not request sensitive data (such as credit card numbers), consider setting the timeout attribute. This can prevent users from getting "The form data has expired. Please reload this page in your browser" errors if they use the browser back button to return to the form. For more information, see Caching data in Flash forms in the Developing ColdFusion Applications.

If attribute value text must include quotation marks, escape them by doubling them.

Using the onError attribute in Flash forms

If you use onSubmit or onBlur validation, the onError attribute lets you specify ActionScript code to execute if the user tries to submit a Flash form with validation errors, as follows:

• If you specify one or more valid Flash expressions, Flash executes the expressions.

• If you omit the attribute, Flash displays a dialog box with all applicable error messages.

• If you specify onError="" (an empty string) Flash does not display any message, but does not submit the form.

Your ActionScript can use the errors variable to determine the fields and errors. The errors object has the following fields:

The following example shows cfform tags with an onError attribute that selects the tab in an accordion or tab navigator that contains a lastName field with an invalid entry:

<cfform name="form1" format="flash" width="800" height="500"  
        onError="if (errors['lastName'] != undefined 
            ){tabA.selectedIndex=0; _root.lastName.setFocus();}">

Incorporating HTML form tags and attributes

In HTML format, the cfform tag lets you incorporate the following standard HTML elements. They are not available in Flash format:

• Standard HTML form tag attributes and values. The attributes and values are included in the form tag that cfform outputs in the page. For example, you can use form tag attributes like target or onMouseOver with cfform.

• HTML tags that can ordinarily be put within the HTML form tag. For example, you can use the HTML input tag to create a submit button in a cfform, without the other features of cfinput:

  <cfform> 
      <input type = "Submit" value = " update... "> 
  </cfform>

Using forms in cfdiv, cflayout, cffpod, and cfwindow controls

The cfdiv, cflayout, cffpod, and cfwindow tags create AJAX-based controls that can serve as containers for interactive forms. When you use such a structure, you do not want submitting form information to cause a new page to be displayed; instead, you want dynamic code to modify the existing page without causing a complete reload. You can do this by using the onSuccess and onError attributes.

The function specified by the onSuccess attribute gets called if the form data is submitted successfully. This function is responsible for updating the pod, layout, or window to reflect the results of the submission, for example, to display additional data or pop up a confirmation window. This function must not take any arguments

The function specified by the onError attribute gets called if an error occurs when the form data is submitted. This function is responsible for handling the error, such as displaying an error message. This function must take two arguments: an error number and an error message.

Incorporating interactive fields in PDF forms

ColdFusion lets you use the cfform tag to create PDF forms that contain static and interactive form fields. The cfform tag must exist within a cfdocument tag (where format="pdf"). Only one cfform tag can exist within a cfdocument tag.

Completed forms can be posted to the server as an HTTP Post, or the entire PDF can be submitted as binary stream. If the PDF is submitted, you can use the cffile tag to save completed PDF form to a hard drive:

<cffile action="write" file="c:\savedpdf.pdf" output="#PDF.content#">

The output can be manipulated and extracted by using the tag.

Only the following cfform attributes are supported in generating PDF forms:

• action

• format

• method

• name

• onSubmit

• skin

• style

To embed an existing PDF form generated by LiveCycle Designer or Acrobat, use the tag.

Example

<h3>cfform Example</h3> 
<!--- If Form.oncethrough exists, the form has been submitted. ---> 
<cfif IsDefined("Form.oncethrough")> 
    <cfif IsDefined("Form.testVal1")> 
        <h3>Results of Radio Button Test</h3> 
        <cfif Form.testVal1>Your radio button answer was yes 
        <cfelse>Your radio button answer was no 
        </cfif> 
    </cfif> 
    <h3>Results of Checkbox Test</h3> 
    <cfif IsDefined("Form.chkTest2")> 
        Your checkbox answer was yes 
    <cfelse> 
        Your checkbox answer was no 
    </cfif> 
    <cfif IsDefined("Form.textSample") AND Form.textSample is not ""> 
        <h3>Results of Credit Card Input</h3> 
        Your credit card number, <cfoutput>#Form.textSample#</cfoutput>,  
        was valid under the MOD 10 algorithm. 
    </cfif> 
    <cfif IsDefined("Form.sampleSlider")> 
        <cfoutput> 
            <h3>You gave this page a rating of #Form.sampleSlider#</h3> 
        </cfoutput> 
    </cfif> 
    <hr noshade="True"> 
</cfif> 
 
<!--- Begin by calling the cfform tag. ---> 
<cfform name="cfformexample"> 
    <h4>This example displays radio button input type for cfinput.</h4> 
    Yes <cfinput type = "Radio" name = "TestVal1" value = "Yes" checked> 
    No <cfinput type = "Radio" name = "TestVal1" value = "No"> 
    <h4>This example displays checkbox input type for cfinput.</h4> 
    <cfinput type = "Checkbox" name = "ChkTest2" value = "Yes"> 
    <h4>This shows client-side validation for cfinput text boxes.</h4> 
    (<i>This item is optional</i>)<br> 
    Please enter a credit card number: 
    <cfinput type = "Text" name = "TextSample"  
        message = "Please enter a Credit Card Number"  
        validate = "creditcard" required = "No"> 
    <h4>This example shows the use of the cfslider tag.</h4> 
    Rate your approval of this example from 1 to 10 by sliding control.<br> 
    1 <cfslider name = "sampleSlider" width="100" 
            label = "Page Value: " range = "1,10" 
            message = "Please enter a value from 1 to 10"> 10 
    <p><cfinput type = "submit" name = "submit" value = "show me the result"> 
    <cfinput type = "hidden" name = "oncethrough" value = "Yes"></p> 
</cfform>

A simple XML form

The following example shows a simple XML-format form. It uses the default.xsl transform that is supplied with ColdFusion to generate the HTML output for display:

<cfform name="testXForm" format="XML" skin="basic"> 
<!--- Use cfformgroup to put the first and last names on a single line. ---> 
    <cfformgroup type="horizontal"> 
        <cfinput type="text" name="firstname" label="First Name:" value="Robert"> 
        <cfinput type="text" name="lastname" label="Last Name:" value="Smith"> 
</cfformgroup> 
<cfinput type="password" name="password" label="Password:" value=""> 
<cfinput type="hidden" name="hidden" label="hidden:" value=""> 
<cfselect name="state" style="width:200" label="State"> 
    <option>California</option> 
    <option selected>Utah</option> 
    <option>Iowa</option> 
    <option selected>New York</option> 
    </cfselect> 
    <cftextarea name="description" label="Description:" rows="5" cols="40"> 
    this is sample text.</cftextarea> 
</cfform>

A simple PDF form

<cfdocument format="pdf"> 
    <cfdocumentsection ../> 
    ... 
    ... 
    <cfform type="html/xform"> 
        <cfinput type="textbox" name="employeeName" value="#fullName#" readonly="true"> 
        <cfinput type="textbox" name="employeeID" value="#id#" readonly> 
        <cfselect name="contributionPercentage" options="#optionsStruct#" required="true"> 
        <cfinput type="submit" name="SubmitAsHTTPPost"> 
        <cfinput type="submit" name="SubmitAsPDF" submitType="PDF"> 
    </cfform> 
    ... 
    ... 
    <cfdocumentsection ../> 
</cfdocument>