Home arrow ColdFusion arrow Page 6 - Introduction to ColdFusion Markup Language, concluded
COLDFUSION

Introduction to ColdFusion Markup Language, concluded


If you want to get a good start on learning ColdFusion, look no further. This article covers a whole bunch of CFML tags and some basic functions. It is the second of two parts, and 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).

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 41
January 26, 2006
TABLE OF CONTENTS:
  1. · Introduction to ColdFusion Markup Language, concluded
  2. · Query Loop
  3. · Collection Loop
  4. · The cfdirectory tag
  5. · The cffile tag
  6. · The cfform tag

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
COLDFUSION ARTICLES

- Adobe ColdFusion Just Got More RAD
- How to Access a SQL Anywhere Database with C...
- CFXML: Probing XMLDOM in ColdFusion
- Creating a Web Service with ColdFusion: the ...
- CFAjax: What it is and How to Use it
- Querying SQL 2000 Server from ColdFusion
- Introduction to ColdFusion Markup Language, ...
- Introduction to ColdFusion Markup Language
- Databases and Dreamweaver MX 2004, concluded
- Databases and Dreamweaver MX 2004
- Welcome to Coldfusion MX 6.1, concluded
- Welcome to Coldfusion MX 6.1
- What You Must Know About ColdFusion Flow-Con...
- What You Must Know About Operators in ColdFu...
- Everything You Must Know About ColdFusion Va...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials