If you haven’t already done so, define a Dreamweaver
site for your ColdFusion project.
Sist oppdatert
2021-05-07
Merk:
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.
-
-
Select Site > Manage Sites, select your site from the list, and click Edit.
-
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.
-
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.
Merk:
These enhancements are available only if you have access to a computer running ColdFusion MX 7 or later.
-
Open a ColdFusion page and place the insertion point where you want the ColdFusion form to appear.
-
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.
-
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.
Merk: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.
-
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.
-
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.
-
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.
Merk:
These enhancements are only available if you have access to a computer running ColdFusion MX 7 or later.
-
In Design view, place the insertion point inside the form outline.
-
Select the control from the Insert menu (Insert > ColdFusion Objects > CFForm), or from the CFForm category in the Insert panel.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
Visually insert a ColdFusion text field
-
In Design view, place the insertion point inside the form outline.
-
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.
-
Select the text field and set its properties in the Property inspector.
-
To label the text field on the page, click beside it and enter text for the label.
Visually insert a password field
-
Repeat steps 1 and 2 in the previous procedure for inserting a text field.
-
Select the inserted text field to display its Property inspector.
-
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.
Merk:
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
In Design view, place the insertion point inside the form outline.
-
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.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
Place the insertion point inside the form outline.
-
In the CFForm category of the Insert panel, click the CF Text Area icon.
A text area appears in the ColdFusion form.
-
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.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
Place the insertion point inside the ColdFusion form outline.
-
In the CFForm category of the Insert panel, click the CF Button icon.
A button appears in the ColdFusion form.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
Place the insertion point inside the form outline.
-
In the CFForm category of the Insert panel, click the CF Checkbox icon.
A check box appears in the ColdFusion form.
-
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.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
Place the insertion point inside the form outline.
-
Select Insert > ColdFusion Objects > CFForm > CFradiobutton.
A radio button appears in the ColdFusion form.
-
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.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
Place the insertion point inside the form outline.
-
In the CFForm category of the Insert panel, click the CF Select icon.
A select box appears in the ColdFusion form.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
In Design view, place the insertion point inside the form outline.
-
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.Merk:
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.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
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.
-
In the Property inspector, set the form method to POST.
-
From the Enctype pop‑up menu, select multipart/form-data.
-
Position the insertion point inside the form outline where you want to file field to appear.
-
Select Insert > ColdFusion Objects > CFForm > CFfilefield.
A file field appears in the document.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
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.
-
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.
-
Switch to Code view (View > Code) and enter the following tag anywhere between the opening and closing CFForm tags:
<cfinput name="datefield" type="datefield">
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
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.
-
Change the control’s properties in the Property inspector.
For more information, click the Help icon in the Property inspector.
-
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.
Merk:
This enhancement is available only if you have access to a computer running ColdFusion MX 7 or later.
-
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.
-
Select a field in the form that you want to validate.
-
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.
Logg på kontoen din