Exercise 1: Using an HTML form to collect data

In this exercise, you develop the Trip Edit page, which provides a data entry form that is used to add new trips and edit existing trips. You validate the data entered against Compass Travel business rules. The fields required to capture trip information are the same as those on the Trip Detail page that you used to display trip information in Lesson 6: Creating a Main Application Page. The following figure shows the Trip Edit page:


Image shows picture Trip edit data collection page.

The page appears when the user clicks the Add or Edit button on the main Trip Maintenance application page (tripdetail.cfm).

To create the Trip Edit data collection form:

  1. Create a blank file.
  2. Enter or copy and paste the following code into the file:
    <html>
    <head><title>Compass Travel Trip Maintenance</title></head>
    <body>
    	<form action="tripeditaction.cfm" method="post">
    		<!--- Field: Trip Maintenance Image --->
    	<IMG src="images/tripmaintenance.gif">
    	<P>
    	<table>
    	    <!--- Field: tripName --->
    	    <TR>
    		    <TD valign="top"> Trip Name </TD>
    		    <TD><INPUT type="text" name=tripName size="50"></TD>
    		</TR>
    			<!--- Field: eventType --->
    		<tr>
    			<td valign="top">Type of Event</td>
    			<td><select size="1" name="eventType">
    				<option value="1" selected>Surfing</option>
    				<option value="2">Mountain Climbing</option>
    				<option value="3">Mountain Biking</option>
    				</select>
    			</td>
    		</tr>
    	    <!--- Field: tripDescription --->
    	    <TR>
    		    <TD valign="top"> Trip Description </TD>
    		    <TD>
    				<textarea cols="50" rows="5" name="tripDescription"></textarea>
    			</TD>
    		</TR>
    	    <!--- Field: tripLocation --->
    	    <TR>
    		    <TD valign="top">Trip Location</TD>
    		    <TD><INPUT name=tripLocation size=50></TD>
    		</TR>
    	    <!--- Field: departureDate --->
    	    <TR>
    		    <TD valign="top"> Departure Date</TD>
    		    <TD><INPUT name=departureDate size=10></TD>
    		</TR>
    	    <!--- Field: returnDate --->
    	    <TR>
    		    <TD valign="top"> Return Date</TD>
    		    <TD><INPUT name=returnDate size=10></TD>
    		</TR>
    	    <!--- Field: numberPeople --->
    	    <TR>
    		    <TD valign="top">Number of People</TD>
    		    <TD><INPUT size=6 name=numberPeople></TD>
    		</TR>
    	    <!--- Field: Price --->
    	    <TR>
    		    <TD valign="top">Price</TD>
    		    <TD><INPUT size=10 name=price></TD>
    		</TR>
    	    <!--- Field: baseCost --->
    	    <TR>
    		    <TD valign="top"> Base Cost </TD>
    		    <TD><INPUT size=10 name=baseCost></TD>
    		</TR>
    	    <!--- Field: depositRequired --->
    	    <TR>
    		    <TD valign="top"> Deposit Required </TD>
    		    <TD><input type="checkbox" name="depositRequired" value="Yes"></TD>
    		</TR>
    	    <!--- Field: tripLeader --->
    	    <TR>
    		    <TD valign="top">Trip Leader</TD>
    		    <TD><INPUT maxLength=50 size=50 name=tripLeader></TD>
    		</TR>
    	    <!--- Field: photo --->
    	    <TR>
    		    <TD valign="top">Photo File Name</TD>
    		    <TD><INPUT maxLength=50 size=50 name=photo></TD>
    		</TR>
    	</table>
    	<p>	
    	<input type="submit" value="Save">
    	<input type="submit" value="Cancel" name="btnCancel">
    	</p>
    	</form>
    </body>
    </html>
    
  3. Save the file as tripedit.cfm in the my_app directory.

Reviewing the code

The following table explains the use of some of the HTML tags in the Trip Edit page. For more information on HTML, consult any HTML primer.

Tag

Description

Form

You create a data entry form by using the form tag. The form tag takes two tag attributes; for example:

<form action="tripeditaction.cfm" Method= "Post">

Here, the action attribute specifies the name of the ColdFusion file that the web server will navigate to in response to the form’s submission. The method attribute specifies how data is returned to the web server. Submit all ColdFusion forms using the Post method attribute.

Table

You can format a data entry form and display its controls neatly, by using the table tag, table; table row tag, tr; and the table data tag, td.

Form Controls

The form requires controls to collect and submit user input. There are a variety of types of form controls that you can use. For this lesson, you will use the following controls:

  • <input> Accepts text answers, such as Trip Name and Trip Price.
  • <input type=checkbox> Asks yes or no questions, such as Deposit Required?
  • <select>,<option> Provides user with a list of possible answers, such as the event type (Mountain Biking, Surfing, and so on).
  • <textarea> Gathers user input on multiple lines, such as for the Trip Description.
  • <input type=submit> Posts the information collected to the server.

To test the Trip Edit page:

  1. View the tripedit.cfm page in a browser.
  2. Enter a trip name in the Trip Name field.
  3. Click Save.

    An error occurs.

If you view the form source (tripedit.cfm) in an editor, you can see that the <form> tag has an action attribute. This attribute indicates the page that receives the form values posted by the tripedit.cfm page. Because you have not yet created the tripeditaction.cfm page, ColdFusion MX sends an error.

At this point, this form does not store any information in the database and does not enforce any business rules of Compass Travel. In the next exercise, you develop the action page to enforce the business rules.