Building Forms

HTML forms begin with an opening FORM tag and end with a closing FORM tag. The FORM tag accepts two major attributes that you will use to describe the form's associated action page and how to submit values to it.

Within the form block, you'll describe the form controls needed to gather and submit user input.

Note:

Because forms are not ColdFusion-specific, the syntax and examples that follow provide you with just enough detail to get going with ColdFusion Express.

FORM tag syntax

<FORM ACTION="ActionPage" METHOD="Post">
    ...
</FORM>

Specify an action page to pass form variables using the ACTION attribute.
Use the METHOD attribute to specify how the variables are submitted from the browser to the action page on the server.

All ColdFusion forms must be submitted with an attribute setting of METHOD="Post".

Form control syntax

There are a variety of form controls types available. You choose form control input types based on the type of input the user should provide. For example:

This code creates a text contol:

<INPUT TYPE="Text" NAME="ControlName" SIZE="Value" MAXLENGTH="Value">

This code creates a series of radio buttons:

<INPUT TYPE="RadioButton" NAME="ControlName" VALUE="Value1">DisplayName1
<INPUT TYPE="RadioButton" NAME="ControlName" VALUE="Value2">DisplayName2
<INPUT TYPE="RadioButton" NAME="ControlName" VALUE="Value3">DisplayName3

This code creates a drop down select box:

<SELECT NAME="ControlName">
    <OPTION VALUE="Value1 ">DisplayName1
    <OPTION VALUE="Value2">DisplayName2
    <OPTION VALUE="Value3">DisplayName3
</SELECT>

This code creates a check box:

<INPUT TYPE="Checkbox" NAME="ControlName" VALUE="Yes|No">Yes

This code creates a reset button:

<INPUT TYPE="Reset" NAME="ControlName" VALUE="DisplayName">

This code creates a submit button:

<INPUT TYPE="Submit" NAME="ControlName" VALUE="DisplayName">

Click here to see form controls in action.

Form usage example

The code below creates a form for users to enter employee information. The comments explain the code in this context.

<HTML>
<HEAD>
<TITLE>Input form</TITLE>
</HEAD>
<BODY>
<!--- define the action page in the form tag. The form variables will 
pass to this page when the form is submitted --->

<FORM ACTION="ActionPage.cfm" METHOD="POST">
<!--- title the form--->
<H4>Employee Data Form</H4>
<!--- use P tags to format your form--->
<P>
    <!--- text field label--->
    Employee Last Name<BR>
    <!--- text field allows users to enter an employee's last name--->
    <INPUT TYPE="Text" NAME="LastName" size="20" maxlength="50">
</P>
<P>
    <!--- drop down select box allows users to select a department --->
    <!--- label the form control--->
    Department<BR>
    <SELECT NAME="Department">
        <OPTION VALUE="Training">Training</OPTION>
        <OPTION VALUE="Marketing">Marketing</OPTION>
        <OPTION VALUE="HR">HR</OPTION>
        <OPTION VALUE="Sales">Sales</OPTION>
    </SELECT>
</P>
<P>
    <!--- checkbox allows users to identify contract employees --->
    <!--- label the field--->
    Contract Employee?<BR>
    <INPUT TYPE="Checkbox" NAME="Contract" VALUE="Yes">Yes
</P>
<P>
    <!--- the submit button passes data to the action page specified in 
the opening form tag--->
    <INPUT TYPE="Submit" NAME="SubmitButton" VALUE="Submit Form">
</P>
<P>
    <!--- reset button resets the data on the form  --->
    <INPUT TYPE="Reset" NAME="Reset" VALUE="Reset Form Values">
</P>
<!--- end form --->
</FORM>
</BODY>
</HTML>

To create a form to accept user input:

Create a new application page in HomeSite.
Save the page as FormPage.CFM within the CFDOCS directory.

Remember that CFDOCS resides under your web root directory.

Title the page Chapter 7 Form Page.
Add an opening FORM tag directly under the BODY tag:

<FORM ACTION = "ActionPage.cfm" METHOD = "POST">

Add a heading for the form page:

<H4>Employee Data Form </H4>

Add P tags to format the heading.
Add a text input control so that users can enter a last name on the form:

<INPUT TYPE = "Text" NAME = "LastName" SIZE = "20" MAXLENGTH = "50">

Add a label above the form control to describe it on the form:

Last Name <BR>

Add a select box so that users can select a department:

<SELECT NAME = "Department">
    <OPTION VALUE = "Training">Training</OPTION>
    <OPTION VALUE = "Marketing">Marketing</OPTION>
    <OPTION VALUE = "HR">HR</OPTION>
     <OPTION VALUE = "Sales">Sales</OPTION>   
</SELECT>

Add a label above the select box to describe it on the form:

Department<BR>

Add a checkbox so that users can identify contract employees:

<INPUT TYPE="Checkbox" NAME="Contract" VALUE="Yes">Yes

Add a label above the checkbox to describe it on the form:

Contract employee?<BR>

Add a submit form control to pass the data to the action page:

<INPUT TYPE="Submit" NAME="SubmitButton" VALUE="Submit Form">

Add a reset form control so that users can reset the data on the form page:

<INPUT TYPE="Reset" NAME="ResetButton" VALUE="Reset Form Values">

Add a closing FORM tag before the closing BODY tag to end the form:

</FORM>

Add P tags throughout the code to format the page.
Save the page.
View the form in a browser.

The form appears in the browser.

Remember that you need an action page in order to submit values; you will create one later in this chapter.

Modify as needed.

Click here to see how the page should look at this time.

Click here to see the code behind the scenes.

Note:

You will receive errors if you submit the form for processing at this time. You will learn about action pages and the characteristics of form variables later on in this chapter.