Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Unit 06

VIEWS: 120 PAGES: 51

									Unit 6: Building Forms
Topics                          6-1


   Understanding HTML Forms
   Enabling Debug Output
   ColdFusion and Forms
   Conditional Processing
   Testing Submitted Forms
   Evaluating Form Variables
Understanding HTML Forms                                                   6-2


   Two pages are required: a FORM page and an ACTION
    page
     › FORM page contains the user interface elements, or form controls, to collect
       information from users
     › ACTION page handles the processing of the form page data
Form Illustration                       6-2


   When FORM is submitted, all user-entered values are
    stored in form variables and sent to the ACTION page
    for processing
<form> Tag                                                   6-2


   Surround all form controls with a <form> tag
   For ColdFusion pages, set METHOD to "Post"
     › Default is Get, which may cause undesirable results


      <form action="ProcessingPage.cfm"
                method="Post">
           {form controls, HTML & CFML}
        </form>
<form> Tag                          6-3


   Use the Form button to create
    a form:
HTML Form Controls                                                    6-4


The controls covered in this class:
      •   Text
      •   TextArea
      •   Password
      •   Checkbox
      •   Radio
      •   Select (multiple) – including dynamically populating them
      •   Submit
      •   Reset
      •   Hidden
Text                                          6-4


   Captures short strings
   Typeless value - any data type accepted
   No special characters are accepted
    First Name: <input type="Text" name="First_Name"
        value="Put name here" size="20"
        maxlength="30">

                      Put name here

   Creates a variable, Form.First_Name=“Put name here”
    that is passed to the ACTION page
TextArea                                                 6-4

   Captures long strings
   Can accept special characters
     Notes: <br>
       <textarea name="Notes"
             cols="10"
             rows="5"
             wrap=“virtual">Put notes here</textarea>




   Creates a variable, Form.Notes=“Put notes here” that is passed to
    the ACTION page
Password                                         6-5


   Identical to text except all characters are masked by
    asterisks (*) as they are typed
    Password: <input type="Password" name="Pwd"
      size="20" maxlength="30">

                          ********



   Creates a variable, Form.Pwd, which has a value of
    whatever was entered, that is passed to the ACTION
    page
Checkbox                                       6-5


   Captures yes/no information
    Email Notification?<input type="Checkbox"
      name="SendEmail“ value="Yes">




   Creates a variable, Form.SendEmail=“Yes” that is
    passed to the ACTION page if the checkbox was
    checked
Checkbox Groups                                                      6-6

   Checkboxes can also be used in groups, such as in a set of
    multiple choice questions
   See code example on page 6-6 of the Student Guide




   HTML handles multiple values for any form control by appending
    each value onto a list
     › Series of values separated by a delimiter, here a comma
     › If the user selects options A and B, the value of Form.Answer will be "A,B".
Radio                                                   6-7


   Used to capture a user’s choice in a set of mutually-
    exclusive options
   Used for groups of more than 2 options (3-5
    recommended)
   Each group of radio buttons on a form must share the
    same Name attribute.
Radio Button Example                                              6-7

     Favorite Color: <br>
       <input type="Radio" name="FavColor"
              value="R" checked>Red<br>
       <input type="Radio" name="FavColor"
              value="B">Blue<br>
       <input type="Radio" name="FavColor"
              value="G">Green<br>




   Creates a variable, Form.FavColor=“R” that is passed to the
    ACTION page
SELECT                                                   6-7


   Allows users to choose one from a set of mutually-
    exclusive options
     › Also allows multiple selections
   Used for groups of five or more options, or for a
    dynamically-generated list of options
Select Example                                                6-7

    Favorite Color: <br>
      <select name="Colors" size="1">
         <option value="R" select>Red</option>
         <option value="B">Blue</option>
         <option value="G">Green</option>
         <option value="P">Purple</option>
         <option value="O">Orange</option>
         <option value="Y">Yellow</option>
      </select>




   Creates a variable, Form.Color=“R” that is passed to the ACTION
    page
Multiple Select                                   6-8


   Select more than one from a list of options
   Shift-click and Ctrl-click supported
Multiple Select Example                                          6-8

Favorite Color: <br>
  <select name="Colors" size="3" multiple>
      <option value="R" selected>Red</option>
      <option value="B">Blue</option>
      <option value="G">Green</option>
      <option value="P">Purple</option>
      <option value="O">Orange</option>
      <option value="Y">Yellow</option>
  </select>




   Creates a variable, Form.Color=“R” that is passed to the ACTION
    page
   Additional selected options appended to the variable in a list format
Dynamically Populating                              6-8
Select Controls
   Dynamically generating options in a SELECT control
    helps if the list is very long or changes over time


<select name="States" size="1">
 <option value="">Please select a state</option>
 <cfoutput query="qGetStates">
  <option value="#q_GetStates.State#">
           #qGetStates.State_Long_Name#
  </option>
 </cfoutput>
</select>
Submit                                                            6-9

   Submits the form for processing
   At least one required for each form
   All submit buttons must go to the same ACTION page
      <input type="Submit" name="Order" value="Place Order">




   Creates a variable, Form.Order=“Place Order” that is
    passed to the ACTION page
Note: You must use the name attribute to create a form variable
for the button.
Reset                                                 6-10


   Resets all entries and lets the user start over
   Does not get assigned a variable on the ACTION page

    <input type="Reset">
Hidden Control                                  6-10


   Pass values from FORM to ACTION without the user
    seeing them
     <input type="Hidden" name="IsValidUser"
       value="1">
   Creates a variable, Form.IsValidUser=“1” that is
    passed to the ACTION page
Complete Form                                         6-10


   For each form control defined, a form variable is created
    to hold the user’s input
   All form variables are passed to the ACTION page on
    submission
   Example form values on ACTION page:
     › Form.First_Name="Put first name here"
     › Form.Notes="Put notes here"
     › Form.FavColor="R"
     › Form.Order="Place Order"
Walkthrough 6-1                                  6-12


In this walkthrough, you create an HTML form that uses
several different types of HTML controls.
Enabling Debug Output                           6-15

   Shows a page’s variables and their values
Walkthrough 6-2                                  6-16


In this walkthrough, you modify the debugging settings so
that variables and their values are displayed when you
submit a form.
ColdFusion and Forms                               6-17


   HTML can only provide the user interface
   CFML provides the processing of form data on the
    ACTION page
Conditional Processing                                                 6-18


   Use conditional processing to:
     › Determine if the user has entered a value into a form control
     › Perform custom validation on user input
     <cfif expression>
        HTML and CFML tags executed if
         expression is true
     </cfif>
<cfif> with <cfelse>                               6-18


   One <cfelse> tag can be used in a <cfif> tag
    <cfif expression>
     HTML and CFML tags executed if
       expression is true
    <cfelse>
     HTML and CFML tags executed if
       expression is false
    </cfif>
<cfelseif>                               6-18

   Test multiple conditions
     <cfif expression1>
       HTML and CFML tags executed if
          expression1 is true
    <cfelseif expression2>
       HTML and CFML tags executed if
          expression2 is true
    <cfelse>
       HTML and CFML tags executed for
        everything else
    </cfif>
<cfif> Example                            6-18

     <cfoutput>
     <cfif Form.State IS "MA">
         #Form.State# State Tax: 8.5%
     <cfelseif Form.State IS "VA">
         #Form.State# State Tax: 8.2%
     <cfelse>
         #Form.State# State Tax Unknown
     </cfif>
     </cfoutput>
Operators in Expressions          6-19


    ColdFusion Operator    Equivalent to
    IS, EQUALS, EQ               =
    LT                           <
    LTE, LE                      <=
    GT                           >
    GTE, GE                      >=
    IS NOT, NEQ                  <>
    CONTAINS                     N/A
    DOES NOT CONTAIN             N/A
Compound Boolean Conditions                            6-19


   Boolean operators: AND, OR, NOT:

    <cfif (expression OR expression) AND expression>
             HTML and CFML tags
        <cfelseif expression>
             HTML and CFML tags
        <cfelse>
             HTML and CFML tags
    </cfif>
Operator Precedence Rules                                  6-20


   Boolean conditions rules:
     › AND operators take precedence over OR operators
     › Terms enclosed in parentheses are read first
     › To ensure that an OR operator is interpreted prior to an AND operator, use
       parentheses to enclose the OR operator
     › When ColdFusion encounters nested parentheses, it starts with the innermost
       term
   Examples:
     › (a OR b) AND c
     › (a AND (b OR c)) OR d
Compound Example             6-20


  <cfoutput>
  <cfif Form.State IS "MA" OR
        Form.State IS "VT">
     #Form.State# State Tax: 8.5%
  <cfelseif Form.State IS "VA">
     #Form.State# State Tax: 8.2%
  <cfelse>
     #Form.State# State Tax Unknown
  </cfif>
  </cfoutput>
<cfif> and Functions                                6-20


   If a function returns a true or false value, it can be used
    directly in the <cfif> evaluation:

    <cfoutput>
    <cfif IsNumeric(Form.OrderID)>
        #Form.OrderID# is a valid number
    <cfelse>
        #Form.OrderID# is not a number
    </cfif>
    </cfoutput>
Shortcut Boolean Logic                           6-20


   ColdFusion performs shortcut Boolean logic on <cfif>
    evaluations
   Stops the processing of the evaluation of a conditional
    statement when it first encounters a FALSE condition
   In previous versions of ColdFusion, the following code
    example would produce an error if Form.x does not
    exist:
     <cfif IsDefined("Form.x")
       AND Form.x IS NOT "0">
Nesting <cfif> statements     6-21

<cfif Variables.Payment_Type IS "CC">
  <cfif Variables.CC_Type IS "AMEX">
    Bill to American Express
  <cfelseif Variables.CC_Type IS "VISA">
    Bill to VISA
  </cfif>
<cfelseif Variables.Payment_Type IS "PO">
   Purchase Order Payment
<cfelse>
   Unknown Payment Method
</cfif>
Testing Submitted Forms                     6-22


   Use conditional processing in ACTION page to be sure
    form was submitted
   Submit button must be clicked; therefore it must exist in
    the ACTION page
   Test using:
     › <cfif>
     › IsDefined() function


   In order for a form variable to be created for the button,
    the <input> tag must use the name attribute
IsDefined() Function                       6-22


   IsDefined() takes one argument, a variable of any type,
    and returns either "Yes" or "No"
   Returns a "Yes" if the variable X exists in the Form
    scope, or "No" if it does not:
     <cfoutput>
        #IsDefined("Form.x")#
    </cfoutput>
IsDefined() Function                              6-22

   FORM submit button defined as follows:
     <input type="Submit" name="Order"
       value="Place Order">
   ACTION page tests for the variable:
      <cfif NOT IsDefined("Form.Order")>
        Error – no data supplied! Please use
                 the form and re-submit.
        <cfabort>
     </cfif>
     <!---rest of the form processing code --->


   Consider using the <cfinclude> tag to include the form instead of
    aborting
The <cflocation> Tag                                      6-23



   Redirects the flow of control to a different ColdFusion or HTML
    page

     <cflocation url="page">




   In this example, the user is redirected to the StatusCodeList.cfm
    page after inserting a row of data

     <cfif NOT IsDefined("Form.Order")>
        <cflocation url=”order_form.cfm”>
     </cfif>

     <!---rest of the form processing code --->
Redirection Process Flow                                                    6-23

   The process for redirecting is as follows:
     1. ColdFusion continues to execute code up to the <cflocation> tag. In this case, the row is
         successfully inserted into the database.
     2. Once the <cflocation> tag is encountered, an HTTP error is generated and sent back to the
         browser. This error informs the browser that the page has moved, and provides the redirected
         URL to the browser.
     3. The browser then takes the redirected URL and makes a second request of the web server for the
         new file.
     4. The web server finds and sends back the new page.
   The end result is that any HTML that was being built up to the
    <cflocation> tag will be discarded.
Walkthrough 6-3                        6-24


In this walkthrough, you test the form to make sure people
don’t surf directly to the ACTION page without first
submitting the FORM page.
Evaluating Form Variables                              6-25


   Certain form controls will not exist on the ACTION page if they are
    not given a value on the FORM page
   Form controls that do not exist on the ACTION page without a
    value:
     › Radio buttons without an assigned default
     › Unchecked checkboxes
     › Select controls with multiple selections allowed and none selected
     › Submit buttons that are not clicked
   Use the <cfparam> tag to assign default values to any FORM
    variables that do not exist on the ACTION page
The <cfparam> Tag                              6-25

   <cfparam> creates variables
    that do not exist:
     <cfparam name=“name“ default=“default">
   Equivalent to:

     <cfif NOT
       IsDefined("Name")>
        <cfset name =
       "default">
     </cfif>
The <cfparam> Tag                                        6-25

   FirstName is set to Jeanette by the <cfset> tag, but the LastName
    variable is not set
   The first <cfparam> tag is ignored, since FirstName exists
   The second <cfparam> tag assigns the last name to Frueh
   The output is “Jeanette Frueh”
     <cfset FirstName = "Jeanette">
     <cfparam name="FirstName" default= "Ben">
     <cfparam name="LastName" default= "Frueh">
     <cfoutput>
            #Variables.FirstName# #Variables.LastName#
     </cfoutput>
Variable Scoping                            6-26


   <cfset> can be used to manipulate variables of different
    scopes, including FORM variables:
     <cfset Form.Name = "NewName">
   Use the <cfparam> tag to create the form variable if it
    does not already exist:
      <cfparam name="Form.Delivery" default="No">
   If you do not specify a scope prefix for the variable
    name, the default is to create a new variable in the local
    (Variables.) scope, but only if the variable does not exist
    in any other scope
Walkthrough 6-4                      6-27


In this walkthrough, you use the <cfparam> with the <cfif>
tag to make sure the checkbox form variable exists on the
ACTION page.
Unit Summary                                            6-29

   You need an HTML FORM page and an ACTION page to gather
    and process information on the web. The FORM page contains the
    fields the user fills out, and the ACTION page contains the code
    necessary to process the data collected.
   SELECT controls can be dynamically populated.
   For most form controls, there is a variable created and passed to
    the ACTION page.
   Certain form controls do not exist on the ACTION page if they are
    not given a value on the FORM page. Make sure they do exist
    before you try to use them.
   Displaying a page’s variables and their values in the browser
    speeds development. You can display some variables by selecting
    the debug options in the ColdFusion Administrator.
Unit Summary (cont.)                    6-29

   You can use <cfif> to perform conditional logic.
   You can nest <cfif> blocks.
   You can use <cfif> and <cfelse> with boolean operators
    to build compound conditional blocks.
   You can determine if a form variable exists by using
    <cfif> with the IsDefined() function.
   Use the <cfparam> tag to handle non-existent form
    variables.
   Use <cflocation> to redirect the user to another
    ColdFusion or HTML page.

								
To top