Example 5.3: Create A Login Form

Team-Fly    

ColdFusion® MX: From Static to Dynamic in 10 Steps
By Barry Moore
Table of Contents
Step 5.  Using Forms with ColdFusion MX


In this example, we will create a login screen for administration staff to edit details in our Staff.mdb database via the web. We will use a ColdFusion form to create some client-side validation to ensure that both fields on the form are filled in (see Figure 5.16).

Figure 5.16. The administrators' login screen.

graphics/05fig16.gif

We will demonstrate how to create an action page for this form in Step 9, "User Security." For the time being, let's just create the form.

  1. Open your text editor and enter the following code or open the completed AdminLogin.cfm file from the CompletedFiles\Examples\Step05 folder.

    [View full width]

    <!--- File: AdminLogin.cfm Description: Demo the use of CFFORM Author: Created: ---> <HTML> <HEAD> <TITLE>Administrator Login</TITLE> </HEAD> <BODY> <CFFORM ACTION="AdminValidate.cfm" METHOD="post"> <TABLE BGCOLOR="#FFFFCC" BORDER="1" ALIGN="center"> <TR> <TD COLSPAN="2"> <B>Administration Login</B> </TD> </TR> <TR> <TD> Username: </TD> <TD> <CFINPUT TYPE="Text" NAME="UserName" MESSAGE="Please enter a valid graphics/ccc.gifusername" REQUIRED="Yes"> </TD> </TR> <TR> <TD>Password:</TD> <TD> <CFINPUT TYPE="Password" NAME="Password" MESSAGE="Please enter a valid graphics/ccc.gifpassword"REQUIRED="Yes" MAXLENGTH="8"> </TD> </TR> <TR> <TD COLSPAN="2"> <INPUT TYPE="submit" VALUE="Login"> </TD> </TR> </TABLE> </CFFORM> </BODY> </HTML>
  2. Save this file into your Examples\Step05 folder.

  3. Browse to the page and attempt to submit the form without entering any information. You should see a display similar to the one shown in Figure 5.17.

    Figure 5.17. The form validation warning.

    graphics/05fig17.gif

  4. Use your browser's View, Source command. You should see code similar to that shown in Figure 5.18. Notice the JavaScript functions that ColdFusion has created to enforce the client-side validation.

    Figure 5.18. The login form browser source code.

    graphics/05fig18.gif


    Team-Fly    
    Top
     



    ColdFusion MX. From Static to Dynamic in 10 Steps
    ColdFusion MX: From Static to Dynamic in 10 Steps
    ISBN: 0735712964
    EAN: 2147483647
    Year: 2002
    Pages: 140
    Authors: Barry Moore

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net