Introduction to Input Forms

Often you wish to have the user input values or parameters to specify the search arguments. For example, for our western states sales data, we may wish to have the user specify the state, category, channel, and price range for the report data. The easiest way to do this is through the use of an HTML file that has a form in it. There are many form data input options. Some of the most popular are introduced below.

The FORM Commands

Within the body of an HTML file, the form starts with the FORM command:

<FORM METHOD="POST" ACTION="CFMQUERY.CFM">

METHOD="POST" simply means that the form is to be posted on the screen. ACTION="CFMQUERY.CFM" tells the form to run the Cold Fusion query file specified when the form is submitted for action (see below). This is where you specify the name of the Cold Fusion file to run when the user completes the form and submits it for action. For example, the complete Cold Fusion query example below can be named "CFMQUERY.CFM" and this form can launch it. This is always the first statement of the form.

The last two statements of the form are the ones that submit the form for processing. They are:

<INPUT TYPE="SUBMIT" VALUE="text on button">
</FORM>

SUBMIT

Here is the button that results from the SUBMIT command. This button has "Press to Submit" as the VALUE.

Form Input Options

Between the <FORM> and the </FORM> commands are the various types of form input options available. You are familiar with most of them because they are the standard Windows input form options. Let's look at a few of them.

Select Box Option

A window with a list of options is created with the SELECT option. The user clicks on the one desired input value. A SELECT box is illustrated here.

SELECT box

Here is the HTML code to create the SELECT box.

<SELECT NAME="stateval" SIZE=3>
<OPTION VALUE="AZ">Arizona
<OPTION VALUE="CA" SELECTED>California
<OPTION VALUE="OR">Oregon
</SELECT>

The NAME="stateval" means that the variable "stateval" will be passed to the CFMQUERY.CFM Cold Fusion query. The actual value of "stateval" will be determined by which option the user clicks on. SIZE=3 means that the box displays only three of the options. This parameter sizes the box.

The OPTION VALUE="AZ" means that the variable "stateval" will have the value "AZ" when it is passed to CFMQUERY.CFM      The state name Arizona is what appears in the Select box. SELECTED simply means that the California option is the one already selected - the default selection. This parameter is optional, but only one option can be selected. Yes, it's this easy!

This type of form input option requires that you determine all possible valid values in the data and provide them for the user to select from. Also, you must ensure that the values are consistent with the data. For example, in our Proj3data.mdb database, "AZ" is the abbreviation for Arizona. If you specify "AX" as the value, then no data for Arizona will ever be found.

Radio Button Option

The Radio Button input option lets the user click on a button beside a label. Radio buttons look like this:

RADIO BUTTON

Here is the HTML code to create the Radio Buttons.

<INPUT TYPE="RADIO" NAME="channel" VALUE="Retail" CHECKED>Retail Channel
<INPUT TYPE="RADIO" NAME="channel" VALUE="Wholesale">Wholesale Channel

The NAME and VALUE parameters have the same function as in the SELECT box above. CHECKED has the same meaning as SELECTED above - it specifies the default choice. By design, only one radio button can be checked at a time, making it ideal for our simple application.

Check Box Option

Another popular input option is the Check Box. The user clicks on a box to the left of an option label to select the input option. The "problem" with check boxes is that the user may select more than one option. The programming to handle this is beyond the scope of this exercise, so it probably isn't a good idea to use check boxes. I include them here only to introduce them. Here is what a check box looks like:

CHECK BOX

Here is the HTML code to create the Check Boxes.

<INPUT TYPE="CHECKBOX" NAME="price" VALUE="Low" CHECKED>Low Price Range
<INPUT TYPE="CHECKBOX" NAME="price" VALUE="Mid">Mid Price Range
<INPUT TYPE="CHECKBOX" NAME="price" VALUE="High">High Price Range

The parameters are the same as the Radio Buttons.

Reset the Form Button

It is probably a good idea to put a button on the form to reset it in case the user makes mistakes. Clicking the RESET button resets all input options on the form to the default options and clears all fields. Here is a RESET button and the HTML code to generate it.

RESET BUTTON

<INPUT TYPE="RESET" NAME="Reset" VALUE="Click to Clear All Entries">

NAME simply specifies the button name, and VALUE specifies the text on the button.

A Simple Example

Let's set up a simple example that uses two files: an HTML file with the input form and a CFM file that queries the Proj3data.mdb database. Let's say that we want to let the user specify the State in which the sales took place. We want Cold Fusion to display all sales data in the Orders table from the specified state. This example specifies only the states of Arizona, California, Nevada, and Oregon (because I'm lazy!).

<HTML>
<HEAD>
<TITLE>Simple Input Form and Cold Fusion Example</TITLE>
</HEAD>
<BODY>
<H3 ALIGN=CENTER>Select State to display</H3>
<P>
<FORM METHOD="POST" ACTION="CFMQUERY.CFM">
<SELECT NAME="stateval" SIZE=3>
<OPTION VALUE="AZ">Arizona
<OPTION VALUE="CA" SELECTED>California
<OPTION VALUE="OR">Oregon
<OPTION VALUE="NV">Nevada
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="text on button">
</FORM>
<P>
</BODY>
</HTML>

This HTML file can be named "inputform.html" (or anything you want to name it)

Now we create the "cfmquery.cfm" Cold Fusion file referenced in the FORM command in the HTML file above. This is the file that the form will cause to execute that will query the ORDERS table for all data for the selected state, then display the data on the screen.

<HTML>
<HEAD>
<TITLE>Cold Fusion Example</TITLE>
<cfquery name = "salesinfo" datasource = "sds5_general">
SELECT STATE,CATEGORY,UNITS,NETAMT
FROM ORDERS
WHERE STATE = '#stateval#'
ORDER BY CATEGORY;
</cfquery>
</HEAD>
<BODY>
<H3 ALIGN=CENTER>List of Sales Data<H3>
<cfoutput query = "salesinfo">
#STATE# #CATEGORY# #NETAMT# <p>
</cfoutput>
<H4 ALIGN=CENTER>End of Sales Data List</H4>
</BODY>
</HTML>

This file MUST be named "cfmquery.cfm" because it is the file that is specified in the ACTION parameter in the FORM command in the HTML file. The file name can be anything as long as it is consistent with the name specified in the ACTION parameter in the HTML file.

The critical point to get here is the use of the variable "stateval". In the "inputform.html" document the form specified the variable "stateval" and the value of the variable is set when the user clicks on the option list. For example, if the user clicks on Arizona, the value of "stateval" is "AZ".

Look at the WHERE parameter in the SQL command above. The variable #stateval# is used in the criterion argument. Note that the variable #stateval# is within single quotes. Remember, text variable values must be within single quotes in the WHERE parameter. All data records with the variable STATE having the value "AZ" will be displayed. This is how Cold Fusion works. The variable value selected by the user is passed to SQL from the form, then Cold Fusion executes the SQL command against the database. Cold Fusion then displays all the data that meets the selection criterion. Yes, it's this simple!!!!!!!

Return to Project 8 Page