Developing Web Applications with ColdFusion Previous Up One Level Next Search
Chapter 4 :  Retrieving and Formatting the Data You Want



Using Forms to Specify the Data to Retrieve

Until now, you've retrieved all of the records from a table. However, there are many instances when you'll want to retrieve data based on certain criteria. For example, you may want to see records for everyone in a particular department, everyone in a particular town whose last name is Smith, or books by a certain author.

You can use forms in ColdFusion applications to allow users to specify what data they want to retrieve in a query.

When you submit a form, you pass the variables to an associated page, called an action page, where some type of processing takes place.

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

FORM tag syntax

<FORM ACTION="actionpage.cfm" METHOD="Post">
    ...
</FORM>

Form Controls

Within the form, you'll describe the form controls needed to gather and submit user input. 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.

HTML Form Controls
Control Code
Text control 
<INPUT TYPE="Text" NAME="ControlName" SIZE="Value" MAXLENGTH="Value">
Radio buttons 
<INPUT TYPE="Radio" NAME="ControlName" VALUE="Value1">DisplayName1
<INPUT TYPE="Radio" NAME="ControlName" VALUE="Value2">DisplayName2
<INPUT TYPE="Radio" NAME="ControlName" VALUE="Value3">DisplayName3
Select box 
<SELECT NAME="ControlName">
    <OPTION VALUE="Value1">DisplayName1
    <OPTION VALUE="Value2">DisplayName2
    <OPTION VALUE="Value3">DisplayName3
</SELECT>
Check box 
<INPUT TYPE="Checkbox" NAME="ControlName" VALUE="Yes|No">Yes
Reset button 
<INPUT TYPE="Reset" NAME="ControlName" VALUE="DisplayName">
Submit button 
<INPUT TYPE="Submit" NAME="ControlName" VALUE="DisplayName">

Note To create a form:
  1. Create a new application page, using Studio.
  2. Edit the page so that it appears as follows: 
    <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">

<!-- text box -->
<p>
First Name: <INPUT TYPE="Text" NAME="FirstName" SIZE="20" 
MAXLENGTH="35"><br>
Last Name: <INPUT TYPE="Text" NAME="LastName" SIZE="20" 
MAXLENGTH="35"><br>
Salary: <INPUT TYPE="Text" NAME="Salary" SIZE="10" MAXLENGTH="10">
</P>

<!-- select box -->
City
<SELECT NAME="City">
    <OPTION VALUE="Arlington">Arlington
    <OPTION VALUE="Boston">Boston
    <OPTION VALUE="Cambridge">Cambridge
    <OPTION VALUE="Minneapolis">Minneapolis
    <OPTION VALUE="Seattle">Seattle
</SELECT>

<!-- radio buttons -->
<p>
Department:<br>
<input type="radio" name="Department" value="Training">Training<br>
<input type="radio" name="Department" value="Sales">Sales<br>
<input type="radio" name="Department" value="Marketing">Marketing<br>
</p>

<!-- check box -->
<P>
Contractor? <input type="checkbox" name="Contractor" value="Yes" 
checked>Yes
</P>

<!-- reset button -->
<INPUT TYPE="Reset" NAME="ResetForm" VALUE="Clear Form">

<!-- submit button -->
<INPUT TYPE="Submit" NAME="SubmitForm" VALUE="Submit">
</FORM>
</BODY>
</HTML>
  3. Save the page as formpage.cfm within the myapps directory under your Web root directory.
  4. 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.

Code Review

A form appears on the page, ready for user input.

Code Description 
<FORM ACTION="actionpage.cfm" METHOD="POST">
Gather the information from this form using the Post method, and do something with it on the page actionpage.cfm. 
<INPUT TYPE="Text" NAME="FirstName" SIZE="20" 
MAXLENGTH="35">
Create a text box called FirstName where users can enter their first name. Make it 20 characters wide, but allow input of up to 35 characters. 
<INPUT TYPE="Text" NAME="LastName" SIZE="20" 
MAXLENGTH="35">
Create a text box called LastName where users can enter their first name. Make it 20 characters wide, but allow input of up to 35 characters. 
<INPUT TYPE="Text" NAME="Salary" SIZE="10" 
MAXLENGTH="10">
Create a text box called Salary where users can enter a salary to look for. Make it 10 characters wide, and allow input of up to 10 characters. 
<SELECT NAME="City">
    <OPTION VALUE="Arlington">Arlington
    <OPTION VALUE="Boston">Boston
    <OPTION VALUE="Cambridge">Cambridge
    <OPTION VALUE="Minneapolis">Minneapolis
    <OPTION VALUE="Seattle">Seattle
</SELECT>
Create a drop down select box named City and populate it with the values "Arlington," "Boston," "Cambridge," "Minneapolis," and "Seattle." 
<input type="checkbox" name="Contractor" 
value="Yes|No" checked>Yes
Create a checkbox that allows users to specify whether they want to list employees who are contractors. Have the box checked by default. 
<INPUT TYPE="Reset" NAME="ResetForm" 
VALUE="Clear Form">
Create a reset button to allow users to clear the form. Put the text "Clear Form" on the button. 
<INPUT TYPE="Submit" NAME="SubmitForm" 
VALUE="Submit">
Create a submit button to send the values users enter to the action page for processing. Put the text "Submit" on the button.

Form Notes and Considerations


Copyright © 1999, Allaire Corporation. All rights reserved. Previous Up Next Home Search