Using CFFORM ColdFusion Help

You’ve come a long way and now you will look how ColdFusion can further enhance HTML forms, making them easier to build and extending their capabilities with custom Java controls.’

You will start with CFIPUT.This tag provides an easy ~ay to create dynamically populated automatically validated text, check-box, and radio-button entry fields. This tag can replace most uses of the H1ML INPUTtag.

Next you will look at CFSELECT,which provides an easy way to crea e dynamic select fields. Then you will look at CFTEXT INPUT CFSLIDER CFGRID and CFTREE which are tags’ for adding specialized Java form controls to forms .

Before considering all these controls and fields, you need to Iook at the CFFORM tag.

The CFFORM tag is the ColdFusion alternative to the FORM tag and needs to be used when you plan to use the ColdFusion tags we are about to discuss to put together your form.

The CFFORM tag is used similarly to the HTML FORM tag and takes the following attributes:

ACTION The file name of the template to which the form should be submitted. This is a required attribute.
ENClYPE The MIME type of data submitted with the POST method. By default, this value is appl; cat; on/x-www-form-url encoded, and there is usually no reason to change the value of this optional attribute.
ENABLECAB This attribute indicates whether Java controls in the form should be made available as Microsoft cabinet files for users of Microsoft Internet Explorer. This is an optional attribute and takes YES or NO as possible values. .
NAME The name of the form. This is an optional attribute that should be used when you will need to access the form by name in scripts within the Web page.
ONSUBMIT The JavaScript function to execute after form validation is complete. This is an optional attribute.
TARGET The name of the frame or window in which the file specified by the ACTION attribute should be opened. This is an optional attribute, and if not specified, then the file will open in the same frame and window as the form.
PASSTHOUGH Optional. HTML attributes that are not explicitly supported by CFFORM. If you specify an attribute and its value, the attribute and value are passed to the HTML code that is generated for the CFINPUT tag. See the Usage section for more information about specifying values

These attributes should appear similar to those used with the FORM tag with the exception of the METHOD attribute which is not used with the CFFORM tag. Therefore in its simplest usage if you had planned to use the following tags to create a form like the following:

<FORMNAME-‘fOlllName’ METliOO-‘POST’ ACTION-‘ submi t .efm’

then you ~ou1d use these.Coldf’usion tags for creating your form. fiel~ and elements:
<CFFORM NAME-‘FormName’ ACTION-‘submit.cfm’)
.</CFFORM;>

Within opening and closing CFFORMtags, (OU can use’ both Coldfusion and HTML form tags. Within opening and closing FORM tags only HTML form tags can be used. If you attempt to use Cold Fusion form tags in an HTML form you will get an error like the one in Figure 15.16

FIGURE 15.16

FIGURE 15.16

Using CFINPUT

CFINPUT is the ColdFusion alternative to the standard INPUT tag; it can be used to create simple text entry fields as well as password fields, check boxes, and radio buttons .

At its.most basic the the be used in the same way as its standard HTML counterpart. For instance the following three tags

INPUT TYPE-‘Text’ NAME-‘TextField’ SI~20 VALUE-‘Value’)
<INPUT TYPE-‘checkbox.’ NAME-‘CheckBoxField’ VALUE-‘Value’)
<INPUT TYPE-‘radio’ NAME-‘RadioButtonField’ VALUE-‘Value’)

would work in the same way as the following ColdFusion alternatives

<CFINPUT TYPE-‘Text’ NAME-‘TextField’ SIZE-20 VALUE-‘Value’)
<CFINPUT TYPE-‘che~kbox’ NAME-‘CheckBoxFie1d’ VALUE-‘Value’)
<CFINPUT TYPE-‘ radio’ NAME-‘RadioButtonF;eld’ VALUE-‘Value’)

Using CFSELECT to Create Selection Lists

The CFSELECT tag is another that corresponds closely to an HTML tag (in this case SELECT) and generates regular HTML to be sent to the browser.

However, using the CFSELECT tag, you can avoid the entire CFOUTPUT section of your template and automatically create the drop-down list, as follows:

<CFSELECT NAME-‘Employee’ SIZE-l QUERY-‘Employees’ VALUE-‘IO’ OISPLAY·’LastNaMe’) </CFSELECT>

This code produces results like those in Figure 15.19.

FIGURE 15.19

FIGURE 15.19

There are some problems here though. First, even if no OPTIONtags are being used you must use the closing CFSELECTtag. Without it, ColdFusion generates an error. Second the VALUEattribute of the CFSELECTtag can be used to specify only a single field name from the query result set. This poses a difficulty: With the query as written you can display either the first name or the last name or both in the drop-down list. This makes the list of little use because of invariable duplicates in first and last names.

You can use some advanced. SQL techniques to au dress this problem. For instance SQL allows concatenation of multiple string fields into a single field to be returned by the query. In Microsoft Access this is done using the + or & operator and the AS key word. For instance to combine Last Name and First Name and return them in a single field called. Employee Name you could use last Name + First Name AS Employee Name in your SELECT statement.

Of course this produces results that aren’t ideal such as DaneshArman and Smith-Jane. Fortunately the concatenation operator can also be used to concatenate string operators with data from fields in a table. Therefore you can use LastName + ” • + FirstName AS EmployeeName. The end result is

<CFQUERY NAME-‘Employees’ DATASOURCE-‘EmployeeData’)
SELECT ID, LastHame + ” ‘ + FirstHame AS EmployeeName
FROM Employees
ORDER BY LastHame, FirstName
</CFQUERY>
<CFFORM ACTION-‘submit.cfm’ NAME-‘EmployeeList’>
<CFS,EUCT NAME-‘Employee” SIZE-l QUERY-‘Employees’ VALUE-‘lD’
DISPLAY-‘ EmployeeName’>
</CFSELECT>
</C~FORM>
This code produces a drop-down list that appears identical to the one you created
using SELECT and OPTION. In fact, the resulting HTML source code looks similar to what
you would expect your form to have looked like when you created it using SELECT,
OPTION, and CFOUTPUT (except that the formatting is not the most ideal for reading purposes):
.
<script LANGUAGE-JAVASCRIPT> •
.<!–
function _CF_checkEmployeeListCCF_this)
return true;
//–>
</script>

Posted on November 17, 2015 in Forms

Share the Story

Back to Top
Share This