Using an HTML form to collect data

Based on the data requirements determined in Lesson 1, the following figure shows the Trip Edit data collection page:

Image shows picture Trip edit data collection page.

Exercise: view the source and test the Trip Edit page

To view the source and test the Trip Edit data collection form:

  1. Open an editor, then locate and open the file tripedit1.cfm in the solutions directory \cfdocs\getting_started\solutions under your web root directory.
  2. Review the HTML source code used to create the Trip Edit page. If you are not fluent in HTML, 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 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.
  3. Save the file as tripedit.cfm to the my_app directory.
  4. View the tripedit.cfm in a browser and test the form by entering a trip name in the Trip Name field then clicking Save. An error occurs.
  5. View the form source (tripedit.cfm) in an editor to try to determine the cause of the error. Notice that the <form> tag on line 6 of the source code has an action attribute. This attribute indicates the page to receive the form values posted by the tripedit.cfm page. Since the page, tripeditaction.cfm, does not exist yet, the ColdFusion Server sends an error.

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

Comments