| 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. 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.
|