• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

Every time you start a new application in cold fusion, you need some sort of a form which mostly contain elements like ?text, hidden, password, submit?
It could boring if you use the CF editor, to pick ?cfform? fill its attributes, then pick ?cfinputs? one by one, fill out those attributes?.one by one, then change tabs and pick the ?submit? button ?so on and so forth. Even if you code in a note pad, it might get lengthy to code individual element.
Wouldn?t it be nicer to code all these elements at once, then just copy the code and paste it in your editor ?
The following shows u how ?
This is not a tutorial as such, more like an application that you can put in a directory.

Generally we know a particular Sign-In form will have 3 fields username, password and a submit button.
The point is, before you build a form page, you almost always know how many fields you need

So you start here by saying to your self?.?well? lets see, I need 5 fields on my form?
Step1.cfm

<cfform action="step2.cfm" method="POST" enablecab="Yes">
    <table>
        <caption><h3 style="font-family:arial;background:efefef;">Step 1</h3></caption>
        <tr>
            <td>Number Of Form-Fields :</td>
            <td>
                <select name="field_nos" style="width:60px; font-family:arial;background:efefef;">
                <!--- I have just restricted this example for 30 form fields. You can increase
                        that limit by increasing ?to? number in your loop --- >

                <cfloop index="i" from="1" to="30" step="1">
                    <cfoutput>
                        <option value="#i#">#i#</option>
                    </cfoutput>
                </cfloop>

                </select>
            </td>
            <td>
                <font size="-1">Choose between 1 & 30 !</font>
            </td>
        </tr>
        <tr>
            <td colspan="3" align="center"><input type="submit" value="Go To Step - 2"></td>
        </tr>
    </table>
</cfform>

step2.cfm
So you have come to phase 2 or step 2, where you can fill out many attributes of each of the fields in your form.

Since all ?<cfinput? tags need a ?<cfform? tag to get parsed?begin by filling out FORM DETAILS?.

<cfform action="step3.cfm" method="POST" enablecab="Yes" name="step2">
    <table>
        <tr>
            <td colspan="3" style="font-family:arial;font-weight:bold;background:efefef;">
                FORM DETAILS !
                <pre>
                    Form Name: <cfinput type="Text" name="form_name" required="yes">
                    Form Action:<cfinput type="Text" name="form_action" required="yes">
                    Method: <cfselect name="Form_Method" required="Yes">
                                    <option value="Post">Post</option>
                                    <option value="Get">Get</option>
                                </cfselect>
                    Enablecab: <cfselect name="enable_cab" required="Yes">
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </cfselect>
                </pre>
            </td>
        </tr>
        <!--- remember on the last page we filled in how many fields we need in our form ??this is why. ?..so now u can generate as many fields. This loop should accomplish that --- >

        <cfloop index="gen_frm" from="1" to="#form.field_nos#">
        <tr>
            <td style="font-family:arial;font-weight:bold;background:efefef;">
                FIELD <cfoutput>#gen_frm#</cfoutput> CAPTION:
            </td>
            <td>
                <cfinput type="Text" name="Caption#gen_frm#">
            </td>
        </tr>
        <tr>
            <td> FIELD TYPE:</td>
            <td>

            <!--- cold fusion also requires that each name attribute in a single form, be unique.
                    Our loops serves that purpose too, by appending sort of an id number to name a ?<cfinput name=? tag --- >

            <!--- here are just a few types of elements in a form. Oh yes? and if you need a Yes/No radio button, make sure
                    you count it twice ! one for the ?yes? and one for the ?no?--- >

            <cfselect name="frm_type#gen_frm#" required="Yes">
                <option value="text">Text</option>
                <option value="Submit">Submit</option>
                <option value="hidden">Hidden</option>
                <option value="password">Password</option>
                <option value="radio">Radio</option>
                <option value="checkbox">CheckBox</option>
            </cfselect>
            </td>
        </tr>
        <tr>
            <td>FIELD NAME:</td>
            <td><cfinput type="Text" name="frm_name#gen_frm#" message="Form Name in field-#gen_frm# is required !" required="Yes"></td>
            <td></td>
            <!--- in the ?message? section above is so designed that if you leave this field blank, the pop-up should tell you exactly which field you left blank --- >
        </tr>
        <tr>
            <td>FIELD VALUE:</td>
            <td><cfinput type="Text" name="frm_value#gen_frm#"></td>
            <td></td>
        </tr>
        <tr>
            <td>FIELD SIZE:</td>
            <td><cfinput type="Text" name="frm_size#gen_frm#"></td>
            <td></td>
        </tr>
        <tr>
            <td>FIELD MAX LENGTH:</td>
            <td><cfinput type="Text" name="frm_maxln#gen_frm#"></td>
            <td></td>
        </tr>
        <tr>
            <td>FIELD REQUIRED:</td>
            <td>
                <cfselect name="frm_req#gen_frm#" required="Yes">
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </cfselect>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>FIELD MESSAGE:</td>
            <td><cfinput type="Text" name="frm_message#gen_frm#"></td>
            <td style="font-size:9pt;background:efefef;">Add custom message if this field is required !</td>
        </tr>
        <tr>
            <td>FIELD TAB INDEX:</td>
            <td><cfinput type="Text" name="frm_tabind#gen_frm#"></td>
            <td style="font-size:9pt;background:efefef;"></td>
        </tr>
        <tr>
            <td colspan="3"><hr style=";color:black;border-width:thin;border-style:dashed;"></td>
        </tr>

        </cfloop>

        <tr>
            <input type="hidden" name="loop_times" value="<cfoutput>#field_nos#</cfoutput>">

            <td colspan="3" align="center"><input type="submit" value="Create Form"></td>
        </tr>

    </table>
</cfform>

step3.cfm

This page will display your form ?Form Test Section?, as well as spit-out the code in the ?code section? Try it out !!!

<!--- This is what shows you the form. If you have made a particular field ?required? and
on the test form section, you try to submit this form with an empty required field, then the CF should pop up a window with your message. If you had not specified a message, then a default message should pop up --- >

<h2>FORM TEST SECTION</h2>
<cfform action="#form_name#" method="#form_method#" enablecab="#enable_cab#" name="#form_name#">
    <table>

        <cfloop index="gen_frm" from="1" to="#loop_times#">
        <tr>
            <cfset Caption="Caption#gen_frm#">
            <cfset frm_type="frm_type#gen_frm#">
            <cfset frm_name="frm_name#gen_frm#">
            <cfset frm_value="frm_value#gen_frm#">
            <cfset frm_size="frm_size#gen_frm#">
            <cfset frm_maxln="frm_maxln#gen_frm#">
            <cfset frm_req="frm_req#gen_frm#">
            <cfset frm_message="frm_message#gen_frm#">
            <cfset frm_tabind="frm_tabind#gen_frm#">
           
            <cfset Caption="#Evaluate(Caption)#">
            <cfset frm_type="#evaluate(frm_type)#">
            <cfset frm_name="#evaluate(frm_name)#">
            <cfset frm_value="#evaluate(frm_value)#">
            <cfset frm_size="#evaluate(frm_size)#">
            <cfset frm_maxln="#evaluate(frm_maxln)#">
            <cfset frm_req="#evaluate(frm_req)#">
            <cfset frm_message="#evaluate(frm_message)#">
            <cfset frm_tabind="#evaluate(frm_tabind)#">
           
            <cfif frm_type neq "Submit">
                <cfif frm_maxln eq ''>
                    <cfset frm_maxln=255>
                </cfif>

                <cfif frm_size eq ''>
                    <cfset frm_size=25>
                </cfif>

                <cfif frm_message eq ''>
                    <cfset frm_message="#caption# is required !">
                </cfif>

                <td>
                    <cfoutput>#Ucase(Caption)#</cfoutput>
                </td>
                <td>
                    <cfinput type=