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.

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  username" REQUIRED="Yes">                    </TD>              </TR>              <TR>                    <TD>Password:</TD>                    <TD>                    <CFINPUT TYPE="Password" NAME="Password" MESSAGE="Please enter a valid  password"REQUIRED="Yes" MAXLENGTH="8">                    </TD>              </TR>              <TR>                    <TD COLSPAN="2">                         <INPUT TYPE="submit" VALUE="Login">                    </TD>              </TR>          </TABLE>  </CFFORM>    </BODY>  </HTML>

Save this file into your Examples\Step05 folder.
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.
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.


Team-Fly

Top

Figure 5.16. The administrators' login screen.

Figure 5.17. The form validation warning.

Figure 5.18. The login form browser source code.