User Guide Cancel

Create and enable ColdFusion forms in Dreamweaver

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Note:

Support for ColdFusion is removed in Dreamweaver and later.

About ColdFusion forms

ColdFusion forms provide you with several built-in mechanisms to validate form data. For example, you can check to make sure a user has entered a valid date. Some form controls have additional features. Several do not have HTML counterparts, and others directly support dynamically populating the control from data sources.

Dreamweaver provides a number of enhancements for ColdFusion developers who use ColdFusion MX 7 or later as their development server. These enhancements include more Insert panel buttons, menu items, and Property inspectors so that you can rapidly build and set the properties of ColdFusion forms. You can also generate code that validates the information provided by site visitors. For example, you can check that the e‑mail address provided by a user contains the @ symbol, or that a required text field contains a certain type of value.

Enable the ColdFusion enhancements

Some of these enhancements require that you define a computer running ColdFusion MX 7 or later as a testing server for Dreamweaver. For example, the Property inspectors for form controls are available only if you specify the correct testing server.

You define a testing server only once. Dreamweaver then automatically detects the testing server version and makes the enhancements available if it detects ColdFusion.

  1. If you haven’t already done so, define a Dreamweaver site for your ColdFusion project.
  2. Select Site > Manage Sites, select your site from the list, and click Edit.
  3. Select the Servers category and specify a computer running ColdFusion MX 7 or later as the testing server for your Dreamweaver site. Ensure that you specify a valid Web URL.
  4. Open any ColdFusion document.

    You won’t see any visible changes to the Dreamweaver work space until you open a ColdFusion document.

Create ColdFusion forms

You can use a number of Insert panel buttons, menu items, and Property inspectors to rapidly create ColdFusion forms and set their properties in Dreamweaver.

Note:

These enhancements are available only if you have access to a computer running ColdFusion MX 7 or later.

  1. Open a ColdFusion page and place the insertion point where you want the ColdFusion form to appear.
  2. Select Insert > ColdFusion Objects > CFForm > CFForm, or select the CFForm category from the Insert panel and click the CF Form icon.

    Dreamweaver inserts an empty ColdFusion form. In Design view, the form is indicated by a dotted red outline. If you don’t see this outline, make sure that View > Visual Aids > Invisible Elements is selected.

  3. Ensure that the form is still selected, and then use the Property inspector to set any of the following form properties.

    CFForm

    Sets the name of the form.

    Action

    Lets you specify the name of the ColdFusion page to be processed when the form is submitted.

    Method

    Lets you define the method that the browser uses to send the form data to the server:

    POST

    Sends the data using the HTTP post method; this method sends the data in a separate message to the server.

    GET

    Sends the data using the HTTP get method, placing the form field contents in the URL query string.

    Target

    Lets you to modify the value of the target attribute of the cfform tag.

    Encoding Type

    Specifies the encoding method used for transmitting the form data.

    Note:

    Encoding type does not refer to character encoding. This attribute specifies the content type used to submit the form to the server (when the value of method is post). The default value for this attribute is application/x-www-form-urlencoded.

    Format

    Determines what kind of form is created:

    HTML

    Generates an HTML form and sends it to the client. The cfgrid and cftree child controls can be in Flash or applet format.

    Flash

    Generates a Flash form and sends it to the client. All controls are in Flash format.

    XML

    Generates XForms XML and puts the results in a variable with the ColdFusion form name. Does not send anything to the client. The cfgrid and cftree child controls can be in Flash or applet format.

    Style

    Lets you specify a style for the form. For more information, see the ColdFusion documentation.

    Flash/XML Skin

    Lets you specify a halo color to stylize the output. The theme determines the color used for highlighted and selected elements.

    Preserve Data

    Determines whether to override the initial control values with submitted values when the form posts to itself.

    • If False, values specified in the control tag attributes are used.

    • If True, submitted values are used.

    Scripts src

    Specifies the URL, relative to the web root, of the JavaScript file that contains client-side code used by the tag and its child tags. This attribute is useful if the file is not in the default location. This attribute may be required in some hosting environments and configurations that block access to the /CFIDE directory. The default location is set in the ColdFusion Administrator; by default, it is /CFIDE/scripts/cfform.js.

    Archive

    Specifies the URL of downloadable Java classes for cfgrid, cfslider, and cftree applet controls. The default location is /CFIDE/classes/cfapplets.jar.

    Height

    Specifies the height of the form.

    Width

    Specifies the width of the form.

    Display Tag Editor for cfform

    Lets you edit properties not listed in the Property inspector.

  4. Insert ColdFusion form controls.

    Place the insertion point where you want the ColdFusion form control to appear in the ColdFusion form, and then select the control from the Insert menu (Insert > ColdFusion Objects > CFForm), or from the CFForm category in the Insert panel.

  5. If required, set the properties of the control with the Property inspector.

    Make sure the control is selected in Design view and then set the properties in the Property inspector. For more information on the properties, click the Help icon in the Property inspector.

  6. Adjust the layout of the ColdFusion form.

    If you’re creating an HTML-based form, you can use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a ColdFusion form in another ColdFusion form (that is, you cannot overlap tags), but you can include more than one ColdFusion form in a page.

    If you’re creating a Flash-based form, use Cascading Style Sheets (CSS) styles to lay out your form. ColdFusion ignores any HTML in the form.

    Remember to label the ColdFusion form fields with descriptive text to let users know what they are responding to. For example, create a “Type your name label” to request name information.

Insert ColdFusion form controls

Use the Insert panel or Insert menu to quickly insert ColdFusion form controls into a ColdFusion form. You need to create a blank ColdFusion form before inserting controls in it.

Note:

These enhancements are only available if you have access to a computer running ColdFusion MX 7 or later.

  1. In Design view, place the insertion point inside the form outline.
  2. Select the control from the Insert menu (Insert > ColdFusion Objects > CFForm), or from the CFForm category in the Insert panel.
  3. Click the control on the page to select it and then set its properties in the Property inspector.

    For information on the properties of specific controls, see the topics about the controls.

Insert ColdFusion text fields

You can visually insert a ColdFusion text field or password field into your form, and then set its options.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

Visually insert a ColdFusion text field

  1. In Design view, place the insertion point inside the form outline.
  2. In the CFForm category of the Insert panel, click the CF Text Field icon or select Insert > ColdFusion Objects > CFForm > CFtextfield.

    A text field appears in the form.

  3. Select the text field and set its properties in the Property inspector.
  4. To label the text field on the page, click beside it and enter text for the label.

Visually insert a password field

  1. Repeat steps 1 and 2 in the previous procedure for inserting a text field.
  2. Select the inserted text field to display its Property inspector.
  3. Select the Password value from the Text Mode pop‑up menu in the Property inspector.

CFTextField options (ColdFusion)

To set the options of a ColdFusion text or password field, set any of the following options in the CFTextField Property inspector:

CFtextfield

Sets the id attribute of the <cfinput> tag.

Value

Lets you specify text to be displayed in the field when the page first opens in a browser. The information can either be static or dynamic.

To specify a dynamic value, click the lightning bolt icon beside the Value box and select a recordset column in the Dynamic Data dialog box. The recordset column supplies a value to the text field when you view the form in a browser.

Text Mode

Lets you switch between the standard text input field and the password input field. The attribute modified by this control is type.

Read Only

Lets you make the displayed text read-only.

Max Length

Sets the maximum number of characters accepted by the text field.

Mask

Lets you specify a mask for your requested text. You use this property to validate the user input. The mask format is composed of A, 9, X and ? characters.

Note:

The mask attribute is ignored for the cfinput type="password" tag.

Validate

Specifies the type of validation for the current field.

Validate At

Specifies when the field is validated: onSubmit, onBlur or onServer.

Label

Lets you specify a label for the text field.

Pattern

Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation.

Height

Lets you specify the height of the control, in pixels.

Width

Lets you specify the width of the control, in pixels.

Size

Lets you specify the size of the control.

Required

Lets you specify whether the text field must contain data before the form is submitted to the server.

Display Tag Editor

Lets you edit properties not listed in the Property inspector.

Insert ColdFusion hidden fields

You can visually insert a ColdFusion hidden field into your form and set its properties. Use hidden fields to store and submit information that the user does not enter. The information is hidden from the user.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. In Design view, place the insertion point inside the form outline.
  2. In the CFForm category of the Insert panel, click the CF Hidden Field icon.

    A marker appears in the ColdFusion form. If you don’t see the marker, select View > Visual Aids > Invisible Elements.

  3. Select the hidden field on the page and set any of the following options in the Property inspector:

    Cfhiddenfield

    Lets you specify the unique name for the hidden field.

    Value

    Lets you specify a value for the hidden field. The data can either be static or dynamic.

    To specify a dynamic value, click the lightning bolt icon beside the Value box and select a recordset column in the Dynamic Data dialog box. The recordset column supplies a value to the text field when you view the form in a browser.

    Validate

    Specifies the type of validation for the current field.

    Validate At

    Specifies when the field is validated: onSubmit, onBlur or onServer.

    Label

    Lets you specify a label for the control. This property is ignored by the ColdFusion server at run time.

    Pattern

    Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation.

    Height

    Lets you specify the height of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Width

    Lets you specify the width of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Size

    Lets you specify the size of the control. This property is ignored by the ColdFusion server at run time.

    Required

    Lets you specify whether the hidden field must contain data before the form is submitted to the server.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

Insert ColdFusion text areas

You can visually insert a ColdFusion text area into your form and set its properties. A text area is an input element that consists of multiple lines of text.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. Place the insertion point inside the form outline.
  2. In the CFForm category of the Insert panel, click the CF Text Area icon.

    A text area appears in the ColdFusion form.

  3. Select the text area on the page and set any of the following options in the Property inspector:

    Cftextarea

    Lets you specify a unique name for the control.

    Char Width

    Lets you set the number of characters per line.

    Num Lines

    Lets you set the number of rows to display in the text area.

    Wrap

    Lets you specify how you want the text entered by users to wrap.

    Required

    Lets you specify whether the user must enter data in the field (checked) or not (unchecked).

    Initial Value

    Lets you specify text to display in the text area when the page is initially opened in a browser.

    Validate

    Specifies the type of validation for the field.

    Validate At

    Specifies when the field is validated: onSubmit, onBlur, or onServer.

    Label

    Lets you specify a label for the control.

    Style

    Lets you specify a style for the control. For more information, see the ColdFusion documentation.

    Height

    Lets you specify the height of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Width

    Lets you specify the width of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

  4. To label the text area, click beside it and enter text for the label.

Insert ColdFusion buttons

You can visually insert a ColdFusion button into your form and set its properties. ColdFusion buttons control ColdFusion form operations. Buttons can be used to submit ColdFusion form data to the server or to reset the ColdFusion form. Standard ColdFusion buttons are typically labeled Submit, Reset, or Send. You can also assign other processing tasks that you defined in a script. For example, the button might calculate the total cost of selected items based on assigned values.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. Place the insertion point inside the ColdFusion form outline.
  2. In the CFForm category of the Insert panel, click the CF Button icon.

    A button appears in the ColdFusion form.

  3. Select the button on the page and set any of the following options in the Property inspector:

    Cfbutton

    Lets you specify a unique name for the control.

    Action

    Lets you specify the type of button to create.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

    The other properties are ignored by the ColdFusion server at run time.

Insert ColdFusion check boxes

You can visually insert a ColdFusion check box into your form and set its properties. Use check boxes to let users select more than one option from a set of options.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. Place the insertion point inside the form outline.
  2. In the CFForm category of the Insert panel, click the CF Checkbox icon.

    A check box appears in the ColdFusion form.

  3. Select the check box on the page and set any of the following options in the Property inspector:

    Cfcheckbox

    Lets you specify a unique name for the control.

    Checked Value

    Lets you specify a value to be returned by the check box if the user checks it.

    Initial State

    Lets you specify whether the check box is checked when the page first opens in a browser.

    Validate

    Specifies the type of validation for the check box.

    Validate At

    Specifies when the check box is validated: onSubmit, onBlur, or onServer.

    Label

    Lets you specify a label for the check box.

    Pattern

    Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation.

    Height

    Lets you specify the height of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Width

    Lets you specify the width of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Size

    Lets you specify the size of the control. This property is ignored by the ColdFusion server at run time.

    Required

    Lets you specify whether the checkbox must be checked before the form is submitted to the server.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

  4. To label the check box, click next to the check box on the page and enter text for the label.

Insert ColdFusion radio buttons

You can visually insert a ColdFusion radio button into your form and set its properties. Use radio buttons when you want users to select only one choice from a set of options. Radio buttons are typically used in groups. All radio buttons in a group must have the same name.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. Place the insertion point inside the form outline.
  2. Select Insert > ColdFusion Objects > CFForm > CFradiobutton.

    A radio button appears in the ColdFusion form.

  3. Select the radio button on the page and set any of the following options in the Property inspector:

    Cfradiobutton

    Lets you specify a unique name for the control.

    Checked Value

    Lets you specify a value to be returned by the radio button if the user checks it.

    Initial State

    Lets you specify whether the radio button is checked when the page first opens in a browser.

    Validate

    Specifies the type of validation for the radio button.

    Validate At

    Specifies when the radio button is validated: onSubmit, onBlur, or onServer.

    Label

    Lets you specify a label for the radio button.

    Pattern

    Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation.

    Height

    Lets you specify the height of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Width

    Lets you specify the width of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Size

    Lets you specify the size of the control. This property is ignored by the ColdFusion server at run time.

    Required

    Lets you specify whether the radio button must be checked before the form is submitted to the server.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

  4. To label the radio button, click beside it on the page and enter text for the label.

Insert ColdFusion select boxes

You can visually insert a ColdFusion select box into your form and set its properties. A select box lets a visitor select one or more items from a list. Select boxes are useful when you have a limited amount of space, but need to display many items. They’re also useful when you want to control the values returned to the server. Unlike text fields, where users can type anything they want, including invalid data, with select boxes, you can set the exact values returned by a menu.

You can insert two types of select boxes into a form: a menu that “drops down” when the user clicks it, or a menu that displays a scrollable list of items that the user can select.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. Place the insertion point inside the form outline.
  2. In the CFForm category of the Insert panel, click the CF Select icon.

    A select box appears in the ColdFusion form.

  3. Select the select box on the page and set any of the following options in the Property inspector:

    Cfselect

    Lets you specify a unique name for the control.

    Type

    Lets you choose between a pop‑up menu or a list. If you select the list type, the List Height and Allow Multiple List Selections options become available.

    List Height

    Lets you specify the number of lines to display in the list menu. Available only if you select the list type.

    Allow Multiple List Selections

    Lets you specify whether the user can select more than one option from the list at a time. Available only if you select the list type.

    Edit Values

    Opens a dialog box that lets you add, edit, or remove options from the select box.

    Initially Selected

    Lets you specify which option is selected by default. You can select more than one option if you selected the Allow Multiple List Selections option.

    Recordset

    Lets you specify the name of the ColdFusion query you want to use to populate the list or menu.

    Display Column

    Lets you specify the recordset column to supply the display label of each list element. Used with Recordset property.

    Value Column

    Lets you specify the recordset column to supply the value of each list element. Used with the Recordset property.

    Flash Label

    Lets you specify a label for the select box.

    Flash Height

    Lets you specify the height of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Flash Width

    Lets you specify the width of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Message

    Specifies the message to be displayed if the Required property is set to Yes and the user failed to make a selection before submitting the form.

    Required

    Lets you specify whether a menu item must be selected before the form is submitted to the server.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

Insert ColdFusion image fields

You can visually insert a ColdFusion image field into your form and set its options. Use image fields to make custom buttons.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. In Design view, place the insertion point inside the form outline.
  2. In the CFForm category of the Insert panel, click the CF Image Field icon. Browse to select the image to insert, and click OK. Alternatively, you can enter the path of the image file in the Src box.
    Note:

    If the image is outside the site root folder, you should copy the image to the root folder. Images outside the root folder might not be accessible when you publish the site.

  3. Select the image field on the page and set any of the following options in the Property inspector:

    Cfimagefield

    Lets you specify a unique name for the control.

    Src

    Lets you specify the URL of the inserted image.

    Alt

    Lets you specify a message when the image cannot be displayed.

    Align

    Lets you specify the alignment of the picture.

    Border

    Lets you set the width of the image border.

    Edit Image

    Opens the image in your default image editor.

    To define a default image editor, select Edit > Preferences > File Types / Editors. Otherwise, the Edit Image button does not perform any action.

    Validate

    Specifies the type of validation for the image field.

    Validate At

    Specifies when the field is validated: onSubmit, onBlur, or onServer.

    Label

    Lets you specify a label for the radio button.

    Pattern

    Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation.

    Height

    Lets you specify the height of the control, in pixels.

    Width

    Lets you specify the width of the control, in pixels.

    Size

    Lets you specify the size of the control. This property is ignored by the ColdFusion server at run time.

    Required

    Lets you specify whether the control must contain data before the form is submitted to the server.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

Insert ColdFusion file fields

You can visually insert a ColdFusion file field into your form and set its properties. Use a file field to let users select a file from their computer, such as a word processing document or a graphics file, and upload it to the server. A ColdFusion file field looks like other text fields, except it also has a Browse button. Users can manually enter the path to the file they want to upload, or use the Browse button to locate and select the file.

File fields require that you use the POST method to transmit files from the browser to the server. The file is posted to the address that you specify in the form’s Action box. Contact your server administrator to confirm that anonymous file uploads are allowed before using a file field in your form.

File fields also require that the form encoding be set to multipart/form. Dreamweaver sets this automatically when you insert a file field control.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. In Design view, select the CFForm to display its Property inspector.

    To quickly select the form, click anywhere in the form outline and click the <cfform> tag in the tag selector at the bottom of the Document window.

  2. In the Property inspector, set the form method to POST.
  3. From the Enctype pop‑up menu, select multipart/form-data.
  4. Position the insertion point inside the form outline where you want to file field to appear.
  5. Select Insert > ColdFusion Objects > CFForm > CFfilefield.

    A file field appears in the document.

  6. Select the file field on the page and set any of the following properties in the Property inspector:

    Cffilefield

    Lets you specify a unique name for the control.

    Max Length

    Lets you specify the maximum number of characters that the path to the file can have.

    Validate

    Specifies the type of validation for the field.

    Validate At

    Specifies when the field is validated: onSubmit, onBlur, or onServer.

    Label

    Lets you specify a label for the field.

    Pattern

    Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation.

    Height

    Lets you specify the height of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Width

    Lets you specify the width of the control, in pixels. This property is ignored by the ColdFusion server at run time.

    Size

    Lets you specify the size of the control.

    Required

    Lets you specify whether the file field must contain data before the form is submitted to the server.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

Insert ColdFusion date fields

Although you can’t visually insert a ColdFusion date field in Dreamweaver, you can visually set its properties. A ColdFusion date field is a special type of text field that lets users select a date from a pop‑up calendar to insert it in the text field.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. In Design view, select the CFForm to display its Property inspector.

    To quickly select the form, click anywhere in the form outline and click the <cfform> tag in the tag selector at the bottom of the Document window.

  2. In the Property inspector, set the form’s Format property to Flash.

    The date field control can only be rendered in Flash-based ColdFusion forms.

  3. Switch to Code view (View > Code) and enter the following tag anywhere between the opening and closing CFForm tags: 
    <cfinput name="datefield" type="datefield">
  4. Switch to Design view, select the date field on the page, and then set any of the following options in the Property inspector:

    Cfdatefield

    Lets you specify a unique name for the control.

    Value

    Lets you specify a date to be displayed in the field when the page first opens in a browser. The date can either be static or dynamic.

    To specify a dynamic value, click the lightning bolt icon beside the Value box and select a recordset column in the Dynamic Data dialog box. The recordset column supplies a value to the date field when you view the form in a browser.

    Validate

    Specifies the type of validation for the field.

    Validate At

    Specifies when the field is validated: onSubmit, onBlur, or onServer.

    Label

    Lets you specify a label for the field.

    Pattern

    Lets you specify a JavaScript regular expression pattern to validate input. Omit leading and trailing slashes. For more information, see the ColdFusion documentation.

    Height

    Lets you specify the height of the control, in pixels.

    Width

    Lets you specify the width of the control, in pixels.

    Size

    Lets you specify the size of the control.

    Required

    Lets you specify whether the date field must contain a value before the form is submitted to the server.

    Display Tag Editor

    Lets you edit properties not listed in the Property inspector.

Modify ColdFusion form controls

You can visually change the properties of ColdFusion form controls whether you’re working in Design view or Code view.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. In Design view, select the form control on the page; in Code view, click anywhere inside the control’s tag.

    The Property inspector displays properties of the form control.

  2. Change the control’s properties in the Property inspector.

    For more information, click the Help icon in the Property inspector.

  3. To set more properties, click the Display Tag Editor button in the Property inspector and set the properties in the Tag editor that appears.

Validate ColdFusion form data

You can build ColdFusion forms in Dreamweaver that check the contents of specified fields to ensure the user entered the correct data type.

Note:

This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.

  1. Create a ColdFusion form that includes at least one input field and one Submit button. Ensure that every ColdFusion field that you want to validate has a unique name.
  2. Select a field in the form that you want to validate.
  3. In the Property inspector, specify how you want to validate the field.

    The lower part of each input Property inspector contains controls to help you define the specific validation rule. For example, you might want to specify that a text field should contain a telephone number. To do this, select Telephone from the Value pop‑up menu in the Property inspector. You can also specify when to validate from the Validate At pop‑up menu.

More like this

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy