Introduction to ColdFusion Markup Language, concluded - The cfform tag
(Page 6 of 6 )
ColdFusion's<cfform>tags are quite similar to their HTML counterparts, but they do have a few impressive features that go beyond what HTML is capable of doing. HTML's<input>tag has been replaced with CFML's<cfinput>tag, which adds a few attributes allowing you to add JavaScript validation to forms easily.
We will now look at a brief comparison to demonstrate the advantages of ColdFusion forms over their HTML counterparts.
Enter the following code into a new file and save it asforms.cfm:
<!-- HTML -->
<form action="action.cfm" method="post">
UserName: <input type="Text" name="UserName"><br />
Password: <input type="Password" name="Password"><br />
<input type="Submit" value="Login">
</form>
<!-- CFML -->
<cfform action="action.cfm" method="post">
UserName:
<cfinput type="Text" name="UserName"
required="Yes" message="Please Enter your user name."><br />
Password:
<cfinput type="Password" name="Password"
required="Yes" message="Please enter your password."><br />
<input type="Submit" value="Login"> </cfform>
The preceding code creates two forms, as you can see in Figure 3-17.
Figure 3-17. Two identical-looking forms, but one is a standard HTML form and one is a ColdFusion form
The topmost form is a simple HTML form without validation. If we wanted to verify that the user had entered a UserName and Password, we would need to create our own JavaScript functions and validate the data using anOnClickorOnSubmithandler. The bottom ColdFusion form allows us simply to addrequired='Yes'to the<cfinput>tag, and if the user tries to submit the form without entering a value, a JavaScript pop-up message will prompt the user to enter a value, as shown in Figure 3-18.
Figure 3-18. Form validation is really simple to add to ColdFusion forms.
By adding the message attribute to the<cfinput>, you can customize the JavaScript message produced by ColdFusion to be more user-friendly. When using the<cfinput>tag, ColdFusion provides you with the validation code. This allows you to develop applications much faster.
ColdFusion also allows you to specify the data type for the<cfinput>. Now let's take a look at another example. Create a new.cfmfile, enter the following code into it, and save it asageform.cfm:
<cfform action="action.cfm" method="post">
<cfinput name="Age" type="text" size="2" maxlength="3"
range="0,100" required="yes"
message="Please enter a valid integer"
validate="integer">
<input type="submit" value="Go">
</cfform>
Test this in a browser, and you will see something similar to Figure 3-19.
Figure 3-19. Our ColdFusion age form
ColdFusion will allow users to enter only integers in this text field, and will make sure that the users' age is between 0 and 100. A JavaScript pop-up containing the custom error message will appear if the user does any of these things:
- Does not enter a value
- Enters a non-integer
- Enters a number that is out of the allowed range
The user is not allowed to submit the form until the field passes the validation, as shown in Figure 3-20.
Figure 3-20. If the user does not enter a valid integer, the custom error message appears.
It is important to note that all of this JavaScript validation will work only if users have JavaScript enabled in their browsers. If the users have JavaScript disabled, they will be able to enter whatever values they wish and submit the form to the server. For this reason, you should also perform server-side validation on user-entered data before entering it into a data store. We explain validation in more detail in Chapter 4 and Chapter 5.<cfform>also enables you to use Java-based controls not available in native HTML, such as trees and grids. We also cover<cfform>in more detail in Chapter 5.
Summary
This has been a fairly quick introduction to some of the more common CFML tags. You should now have a better understanding of the CFML syntax and have a very basic knowledge of the difference between ColdFusion tags and ColdFusion functions.
There are certainly a lot of tags that we don't have the space to explain in detail; you can find a complete list of tags and functions (and detailed explanations) athttp://livedocs.macromedia.com/. Before proceeding, you should also understand the difference between the<cfset>and<cfparam>tag, and understand and be familiar with basic<cfif>syntax; these will be used heavily throughout the rest of the book.
You should now be relatively familiar with the following CFML tags (remember that practice makes perfect):
- <cfset>
- <cfparam>
- <cfif>,<cfelseif>, and<cfelse>
- <cfswitch>,<cfcase>, and<cfdefaultcase>
- <cflocation>
- <cfinclude>
- <cfmail>
- <cfdirectory>
- <cffile>
- <cfform>
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter three of the book ColdFusion Web Development with Dreamweaver MX 2004, written by Jen and Peter deHaan et al. (Apress; ISBN: 1590592379). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 5 
