Programming ColdFusion MX, 2nd Edition

Basic Input Controls

The cfinput tag closely resembles the HTML input tag and can be used for creating text boxes, password entry boxes, radio buttons, and checkboxes. At the most basic level, the cfinput tag behaves exactly like the HTML input tag. Consider the following HTML input tags:

<input type="text" name="MyText" size="10" maxlength="10" value="MyValue">
<input type="password" name="MyPassword" size="10" maxlength="10">
<input type="radio" name="MyRadioButton" value="MyValue" checked>
<input type="checkbox" name="MyCheckbox" value="MyValue" checked>

Here are the equivalent cfinput tags:

<cfinput type="text" name="MyText" size="10" maxlength="10" value="MyValue">
<cfinput type="password" name="MyPassword" size="10" maxlength="10">
<cfinput type="radio" name="MyRadioButton" value="MyValue" checked>
<cfinput type="checkbox" name="MyCheckbox" value="MyValue" checked>

As you can see, the tags are virtually identical. What sets a cfinput tag apart from its HTML counterpart is built-in data validation. The cfinput tag can require input for a given form field as well as validate the data against a predefined or custom validation routine. Example 10-1 demonstrates how to use the cfinput tag to require data entry for various input types.

Example 10-1. Creating a form with cfform and cfinput

<cfif IsDefined('form.FieldNames')> <h3>You submitted:</h3> <cfloop index="Field" list="#form.Fieldnames#"> <cfoutput><b>#Field#</b>: #form[Field]#<br></cfoutput> </cfloop> <hr noshade> </cfif> ...