Adobe ColdFusion 8

cfinput

Description

Used within the cfform tag, to place input controls that support input validation on a form.

Category

Forms tags

Syntax

<cfinput 
    name = "name"
    autosuggest = "list or bind expression"
    autosuggestBindDelay = "integer number if seconds"
    autosuggestMinLength = "integer"
    bind = "bind expression"
    bindAttribute = "attribute name"
    bindOnLoad = "no|yes"
    checked = "yes|no"
    dayNames = "day of week labels separated by commas"
    delimiter = "character"
    disabled = "disabled"
    enabled = "yes|no"
    firstDayOfWeek = "day name"
    height = "number of pixels"
    id = "HTML id"
    label = "text"
    mask = "masking pattern"
    maxLength = "number"
    maxResultsDisplayed = "number"
    message = "text"
    monthNames = "month labels"
    onBindError = "JavaScript function name"
    onChange = "JavaScript or ActionScript"
    onClick = "JavaScript or ActionScript"
    onError = "script name"
    onKeyDown = "JavaScript or ActionScript"
    onKeyUp = "JavaScript or ActionScript"
    onMouseDown = "JavaScript or ActionScript"
    onMouseUp = "JavaScript or ActionScript"
    onValidate = "script name"
    pattern = "regular expression"
    range = "minimum value, maximum value"
    required = "yes|no"
    showAutosuggestLoadingIcon = "yes|no"
    size = "integer"
    sourceForToolTip = "URL"
    src = "image URL"
    style = "style specification"
    tooltip = "text"
    type = "input type"
    typeahead = "no|yes"
    validate = "data type"
    validateAt = "onBlur|onServer|onSubmit"
    value = "initial value"
    visible = "yes|no"
    width = "integer number of pixels">

Some attributes apply to only specific display formats. For details, see the Attributes table.

In HTML format forms, standard HTML input control attributes not listed above are passed to the HTML and have their normal effect.

Note: You can specify this tag's attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute names as structure keys.

See also

cfajaximport, cfapplet, cfcalendar, cfform, cfformgroup, cfformitem, cfgrid, cfselect, cfslider, cftextarea, cftree, Using Ajax form controls and features in "Using Ajax UI Components and Features" in the ColdFusion Developer's Guide

History

ColdFusion 8

  • Added autosuggest, autosuggestBindDelay, autosuggestMinLength, delimiter, maxResultsDisplayed, showAutosuggestLoadingIcon, and typeahead attributes.
  • Added support for the bind attribute in HTML forms and the bindAttribute and bindOnload, and onBindError attributes.
  • Added the sourceForTooltip attribute
  • Added support for datefield value of the type attribute in HTML forms.

ColdFusion MX 7:

  • Added support for button, file, hidden, image, reset, and submit controls.
  • Added support for generating Flash and XML controls (specified in the cfform tag).
  • Added datefield type (Flash forms only) and the supporting dayNames and monthNames attributes.
  • Added bind, enabled, height, label, tooltip, visible, and width attributes for use in Flash forms.
  • Added support for onBlur and onServer validation, including the validateAt attribute.
  • Added USdate, range, boolean, email, URL, uuid, guid, maxlength, noblanks, and submitOnce validation attribute values.
  • Added support for preventing multiple submissions.
  • Added the mask attribute.
  • Deprecated the passthrough attribute. The tag now supports all HTML input tag attributes directly.

ColdFusion MX: Changed the cfform tag preserveData attribute behavior: if it is set to True, ColdFusion checks radio and check box values only if their value matches the posted value for the control. (In earlier releases, if the posted value did not match any of the cfinput check boxes or radio buttons for the control, the checked attribute was used.

Attributes

The following table lists attributes that ColdFusion uses directly. The tag also supports all HTML form tag attributes that are not on this list, and passes them directly to the browser.

Note: Attributes that are not marked as supported in All or XML are not handled by the skins provided with ColdFusion. They are, however, included in the generated XML.

Attribute

Req/Opt; formats

Default

Description

name

Required;

all

 

Name for form input element.

autosuggest

Optional, HTML

 

Specifies entry completion suggestions to display as the user types into a text input. The user can select a suggestion to complete the text entry.

The valid value can be either of the following:

  • A string that consists of the suggestion values separated by the delimiter specified by the delimiter attribute.
  • A bind expression that gets the suggestion values based on the current input text. The bind expression must pass a cfautosuggestvalue bind parameter to represent the user input.

Valid only for cfinput type="text".

For more information, see "Using autosuggest text input fields" in the ColdFusion Developer's Guide

autosuggestBindDelay

Optional, HTML

0.5 seconds

A nonzero integer that specifies the minimum time between autosuggest bind expression invocations, in seconds. This value also specifies the delay from when the user first enters a minimum-length entry in the field until the suggestion box appears. Use this attribute to limit the number of requests that are sent to the server when a user types.

Valid only for cfinput type="text".

Note: The only way to get the default behavior is to omit the attribute. Otherwise, the delay must be a nonzero integer value.

autosuggestMinLength

Optional, HTML

1

The minimum number of characters required in the text box before invoking a bind expression to return items for suggestion.

Valid only for cfinput type="text".

bind

Optional;

HTML,

Flash

 

A bind expression that dynamically sets an attribute of the control. For details, see Usage.

bindAttribute

Optional;

HTML

value

Specifies the HTML tag attribute whose value is set by the bind attribute. You can only specify attributes in the browser's HTML DOM tree, not ColdFusion-specific attributes.

Ignored if there is no bind attribute.

Valid only for cfinput type="text".

bindOnLoad

Optional;

HTML

no

A Boolean value that specifies whether to execute the bind attribute expression when first loading the form.

Ignored if there is no bind attribute.

Valid only for cfinput type="text".

checked

Optional;

all

no

Selects a radio button or check box control:

  • yes
  • no

For HTML format, you can indicate that the item is selected by specifying the value as checked or specifying the attribute with no value.

dayNames

Optional;

all

S, M, T, W, T, F, S

Applies to datefield type only. A comma-delimited list that sets the names of the weekdays displayed in the calendar. Sunday is the first day; the rest of the weekday names follow in the normal order.

delimiter

Optional, HTML

comma (,)

The delimiter to use to separate entries in a static autosuggest list. This attribute is meaningful only if the autosuggest attribute is a string of delimited values.

disabled

Optional;

all

not disabled

Disables user input, making the control read-only. The attribute behavior depends on the format of the form as follows:

  • HTML format forms: ColdFusion passes this attribute directly to the HTML. To disable input, specify disabled without a value (HTML format) or with the value disabled (XHTML compliant). To enable input, omit this attribute.
  • Flash format forms: To disable input, specify disabled without an attribute, or disabled="yes" (or any ColdFusion positive Boolean value, such as true). To enable input, omit the attribute or specify disabled="no" (or any ColdFusion negative Boolean value, such as false).

enabled

Optional; Flash

yes

Boolean value that specifies whether the control is enabled. A disabled control appears in light gray. The inverse of the disabled attribute.

firstDayOfWeek

Optional;

all

0

Applies to datefield type only. Integer in the range 0-6 that specifies the first day of the week in the calendar: 0 indicates Sunday; 6 indicates Saturday.

height

Optional; see Description

 

Applies to most Flash types, HTML image type on some browsers. The height of the control, in pixels. The displayed height might be less than the specified size.

id

Optional;

HTML

name attribute value

The HTML ID of the form.

label

Optional; Flash, XML

 

Label to put next to the control on a Flash form. Not used for button, hidden, image, reset, or submit types.

mask

Optional;

Flash, HTML

 

For tags with type="text". A mask pattern that controls the character pattern that users can enter, or that the form sends to ColdFusion. Mask characters and the corresponding valid input characters are:

  • A = [A-Za-z]
  • X = [A-Za-z0-9]
  • 9 = [0-9]
  • ? = Any character
  • All other characters = insert the literal character

For tags with type="datefield", a pattern that controls the format of dates that the user selects in the calendar. Mask characters are:

  • D = day; can use 0-2 mask characters.
  • M = month; can use 0-4 mask characters.
  • Y = year; can use 0, 2, or 4 characters.
  • E = day in week; can use 0-4 characters.

For more information, see Masking input data in Usage.

maxLength

Optional;

all

 

Maximum length of text entered, if type = "Text" or "password". For complete length validation, specify maxLength validation in a validate attribute; otherwise, this attribute prevents users from typing beyond the specified length, but does not prevent them from pasting in a longer value.

maxResultsDisplayed

Optional;

HTML

10

The maximum number suggestions to display in the autosuggest list.

Valid only for cfinput type="text".

message

Optional;

all

 

Message text to display if validation fails.

monthNames

Optional;

all

January, February, March, April, May, June, July, August, September, October, November, December

Applies to datefield type only. A comma-delimited list of the month names that display at the top of the calendar.

onBindError

Optional;

HTML

See Description

The name of a JavaScript function to execute if evaluating a bind expression, including an autosuggest bind expression, results in an error. The function must take two attributes: an HTTP status code and a message.

If you omit this attribute, and have specified a global error handler (by using the ColdFusion.setGlobalErrorHandler function), it displays the error message; otherwise a default error pop-up displays.

onChange

Optional;

all

 

JavaScript (HTML/XML) or ActionScript (Flash) to run when the control changes due to user action. In Flash, applies to datefield, password, and text types only.

onClick

Optional;

all

 

JavaScript (HTML/XML) or ActionScript (Flash) to run when the user clicks the control. In Flash, applies to button, checkbox, image, radio, reset, and submit types only.

onError

Optional;

HTML, XML

 

Name of a custom JavaScript function to execute if validation fails.

onKeyDown

Optional;

all

 

JavaScript (HTML/XML) or ActionScript (Flash) ActionScript to run when the user presses a keyboard key in the control.

onKeyUp

Optional;

all

 

JavaScript (HTML/XML) or ActionScript (Flash) to run when the user releases a keyboard key in the control.

onMouseDown

Optional;

all

 

JavaScript (HTML/XML) or ActionScript (Flash) to run when the user releases a mouse button in the control.

onMouseUp

Optional;

all

 

JavaScript (HTML/XML) or ActionScript (Flash) to run when the user presses a mouse button in the control.

onValidate

Optional;

HTML, XML

 

Name of a custom JavaScript function to validate user input. The form object, input object, and input object values are passed to the routine, which should return true if validation succeeds, and false otherwise. If used, the validate attribute is ignored.

pattern

Required if validate= "regex";

HTML, XML

 

JavaScript regular expression pattern to validate input. ColdFusion uses this attribute only if you specify regex in the validate attribute.

Omit leading and trailing slashes. For examples and syntax, see "Building Dynamic Forms with cfform Tags" in the ColdFusion Developer's Guide.

range

Optional;

all

 

Minimum and maximum allowed numeric values. ColdFusion uses this attribute only if you specify range in the validate attribute.

If you specify a single number or a single number followed by a comma, it is treated as a minimum, with no maximum. If you specify a comma followed by a number, the maximum is set to the specified number, with no minimum.

required

Optional;

all

no

  • yes: the field must contain data.
  • no: allows an empty field.

showAutosuggestLoadingIcon

Optional; HTML

true

A Boolean value that specifies whether to display an animated icon when loading an autosuggest value for a text input.

size

Optional;

all

 

Size of input control. Ignored, if type = "radio" or "checkbox".

If specified in a Flash form, ColdFusion sets the control width pixel value to 10 times the specified size and ignores the width attribute.

sourceForTooltip

Optional; HTML

 

The URL of a page to display as a tool tip. The page can include HTML markup to control the format, and the tip can include images.

If you specify this attribute, an animated icon appears with the text "Loading..." while the tip is being loaded.

src

Optional;

Flash, HTML

 

Applies to Flash button, reset, submit, and image types, and the HTML image type. URL of an image to use on the button.

style

Optional;

all

 

In HTML or XML format, ColdFusion passes the style attribute to the browser or XML.

In Flash format, must be a style specification in CSS format. For detailed information on specifying Flash styles, see "Creating Forms in Flash" in the ColdFusion Developer's Guide.

In XML format, ColdFusion passes the style attribute to the XML.

tooltip

Optional; Flash, HTML

 

Text to display when the mouse pointer hovers over the control.

Ignored if you specify a sourceForTooltip attribute.

type

Optional;

all

text

The input control type to create:

  • button: push button.
  • checkbox: check box.
  • datefield: HTML and Flash only; date entry field with an expanding calendar from which users select the date or dates. In HTML format only, users can also enter the date by typing in the field.
  • file: file selector; not supported in Flash.
  • hidden: invisible control.
  • image: clickable button with an image.
  • password: password entry control; hides input values.
  • radio: radio button.
  • reset: form reset button.
  • submit: form submission button.
  • text: text entry box.

typeahead

Optional;

HTML

no

A Boolean value that specifies whether the autosuggest feature should automatically complete a user's entry with the first result in the suggestion list.

Valid only for cfinput type="text".

validate

Optional;

all

 

The type or types of validation to do. Available validation types and algorithms depend on the format. For details, see Usage.

validateAt

Optional;

all

onSubmit

How to do the validation; one or more of the following values:

  • onSubmit
  • onServer
  • onBlur

The onBlur and onSubmit values are identical in Flash forms. For multiple values, use a comma-delimited list.

For details, see Usage.

value

depends on type setting;

all

 

HTML: corresponds to the HTML value attribute. Its use depends on control type.

Flash: optional; specifies text for button type inputs: button, submit, and image.

visible

Optional; Flash

yes

Boolean value that specifies whether to show the control. Space that would be occupied by an invisible control is blank.

width

Optional; see Description

 

Applies to most Flash types, and HTML image type on some browsers. The width of the control, in pixels. For Flash forms, ColdFusion ignores this attribute if you also specify a size attribute value.

Note: Attributes that are marked as not supported in XML are not handled by the skins provided with ColdFusion. They are, however, included in the generated XML.

Usage

For this tag to work properly. the browser must be JavaScript-enabled.

If the cfform preserveData attribute is true and the form posts back to the same page, the posted value of the cfinput control is used, instead of its Value or Checked attribute.

You can use the keyboard to access and select dates from a datefield Flash input: press Tab to go to the field and press the Spacebar to open the menu. Use the Up, Down, Left, and Right Arrow keys to change the selected date. Use the Home and End keys to reach the first and last enabled date in a month, respectively. Use the Page Up and Page Down keys to reach the previous and next month, respectively.

Note: To clear a datefield entry in Flash format forms, select the field to open the menu, and click the selected date.

For more information, see cfform. For information on using JavaScript regular expressions with this tag, see "Building Dynamic Forms with cfform Tags" in the ColdFusion Developer's Guide.

Validation

The following sections describe how to do validation in cfinput tags.

Validation methods 
ColdFusion provides four methods of validation of cfinput text and password fields.

You can specify one or a combination of the following in the validateAt attribute:

  • onSubmit The form page on the browser includes JavaScript functions that perform validation before the form is submitted to the server. In Flash format forms, this option is identical to onBlur.
  • onBlur In HTML format the form page on the browser includes JavaScript functions that perform validation when the field loses the focus. In Flash format, the attribute is equivalent to onSubmit. OnBlur validation uses the same algorithms as onSubmit validation. OnBlur validation was added in ColdFusion MX 7.
  • onServer ColdFusion performs the validation on the server. Some onServer algorithms vary from the onSubmit algorithms. OnServer Date and Time validation allow more patterns than onSubmit validation. OnServer validation was added in ColdFusion MX 7, and automatically generates hidden fields to support the validation.

You can also omit a validate attribute and specify the type of validation for the field in a separate hidden form field. This form of validation is equivalent to onServer validation, but it lets you specify separate messages for each validation that you do on the field. It is backward compatible with previous ColdFusion releases. For more information on hidden form field validation, see cfform and "Validating form data using hidden fields" in "Validating form data using hidden fields" in the ColdFusion Developer's Guide.

Validation types
Use the following values in the validate attribute to specify input validation for all validation methods. Most attributes apply only to password or text fields. You can specify multiple validation types in a comma-delimited list, but only some combinations are meaningful.

Type

Description

date

If validateAt="onServer", allows any date format that returns true in the IsDate function; otherwise, same as USdate.

USdate

A US date of the format mm/dd/yy mm-dd-yy or mm.dd.yy, with 1-2 digit days and months, 1-4 digit years.

eurodate

A date of the format dd/mm/yy, with 1-2 digit days and months, 1-4 digit years. The format can use /, -, or . characters as delimiters.

time

Time format hh:mm:ss

float or numeric

A number; allows integers.

integer

An integer.

range

A numeric range.

boolean

A value that can be converted to a Boolean value: Yes, No, True, False, or a number.

telephone

Standard U.S. telephone formats. Allows an initial 1 long-distance designator and up to 5-digit extensions, optionally starting with x.

zipcode

U.S. 5- or 9-digit ZIP code format #####-####. The separator can be a hyphen (-) or a space.

creditcard

Strips blanks and dashes; verifies number using mod10 algorithm. Number must have 13-16 digits.

ssn or social_security_number

US. Social Security number format, ###-##-####. The separator can be a hyphen (-) or a space.

email

A valid e-mail address of the form name@server.domain. ColdFusion validates the format only; it does not check that entry is a valid active e-mail address.

URL

A valid URL pattern; supports http, https, ftp file, mailto, and news URLs.

guid

A unique identifier that follows the Microsoft/DCE format, xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx, where x is a hexadecimal number.

uuid

A universally unique identifier (UUID) that follows the ColdFusion format, xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxx, where x is a hexadecimal number.

maxlength

Limits the input to a maximum number of characters.

noblanks

Does not allow fields that consist only of blanks.

regex or regular_expression

Matches input against the pattern attribute. Valid in HTML and XML format only; ignored in Flash format.

SubmitOnce

Used only with submit and image types; prevents the user from submitting the same form multiple times before until the next page loads (for example, submitting an order a second time before getting the first order confirmation). Valid in HTML and XML format only; ignored in Flash format.

Validation differences
The preceding table describes the general validation behavior. The underlying validation code must differ depending on the validation method and the form type. As a result, the algorithms used vary in some instances, including the following:
  • The validation algorithms used for date/time values varies between onSubmit/OnBlur and OnServer.
  • The algorithms used for onSubmit/OnBlur validation in Flash vary from those used for HTML/XML format, and generally follow simpler rules.

The table describes the onSubmit/OnBlur behavior in HTML format. For detailed information on the OnServer validation algorithms, see "Data validation types" in "Data validation types" in the ColdFusion Developer's Guide.

For more information on validation, including discussions of the advantages and disadvantages of different validation types, see "Validating Data" in the ColdFusion Developer's Guide.

Masking input data

In HTML and Flash forms, the mask attribute controls the format of data that can be entered into a text field or that is selected in a datefield input control calendar. In HTML format, it does not prevent users from typing a date that does not follow the mask into a datefield input control. You can combine masking and validation on a field.

In text fields, ColdFusion automatically inserts any literal mask characters, such as hyphen (-) characters in telephone numbers. Users type only the variable part of the field.

The following pattern enforces entry of a part number of the format EB-1234-c1-098765, where the user starts the entry by typing the first numeric character, such as 3. ColdFusion fills in the preceding EB prefix and all - characters. The user must enters four numbers, followed by two alphanumeric characters, followed by six numbers.

<cfinput type="text" name="newPart" mask="EB-9999-XX-999999"/>

Note: To force a pattern to be all-uppercase or all-lowercase, use the ColdFusion UCase or LCase functions in the action page.

For tags with type="datefield" (and cfcalendar tags), the number of pattern characters determines the format of the output when the user selects a date in the calendar, as follows:

Mask

Pattern

D

Single- or double-digit day of month, such as 1 or 28

DD

Double-digit day of month, such as 01 or 28

M

Single- or double-digit month, such as 1 or 12

MM

Double-digit month, such as 01 or 12

MMM

Abbreviated month name, such as Jan or Dec

MMMM

Full month name, such as January or December

YY

Two-character year, such as 05

YYYY

Four-character year, such as 2005

E

Single-digit day of week, such as 1 or 7

EEE

Abbreviated day of week name, such as Mon or Sun

EEEE

Full month day of week name, such as Monday or Sunday

The following pattern specifies that the Flash forms sends the date selected by using a datefield input control to ColdFusion as text in the format 04/29/2004:

<cfinput name="stDate" type="datefield" label="date:" mask="mm/dd/yyyy"/>

Flash form data binding

The bind attribute lets you populate form fields by using the contents of other form fields. To specify text from another field in a Flash format cfinput tag bind attribute, use the following format:

{sourceTagName.text}

For example, the following line uses the values from the firstName and lastName fields to construct an e-mail address. (The user can change or replace this value with a typed entry.)

<cfinput type="text" name="email" label="email"
    bind="{firstName.text}.{lastName.text}@mm.com">

HTML form data binding

The bind attribute lets you set cfinput attributes dynamically. For example, you can automatically fill an email field text-input value based on name and domain field values.

In HTML format, the bind attribute specifies a bind expression, which can have any for the following forms:

  • A Bind parameter or string that contains one or more bind parameters. A bind parameter specifies a form control value or other attribute and, optionally, an event. In its most basic form, a bind parameter consists of the name or id attribute of the control to which you are binding in braces ({ }) The value of the control attributes specified in the bind parameters determine the value of the cfinput control attribute.
  • A CFC or JavaScript function, or URL, typically using one or more bind parameters as function parameters. The data returned by the function or URL sets the cfinput attribute value.

For details of using HTML form data binding, see "Binding data to form fields" in the ColdFusion Developer's Guide.

Note: To bind to a cfinput control with type attribute of button, you must specify a bind event setting such as click in the bind expression of the control that binds to the button. The default event, onChange, has no effect.

Example: without binding

<!--- This example shows the use of cfinput within a cfform to ensure simple
    validation of text items. --->
<cfform action = "cfinput.cfm">
<!--- Phone number validation. --->
Phone Number Validation (enter a properly formatted phone number): <br>
<cfinput 
    type = "Text" name = "MyPhone" 
    message = "Enter telephone number, formatted xxx-xxx-xxxx (e.g. 617-761-2000)"
    validate = "telephone" required = "yes">
    <font size = -1 color = red>Required</font>
<!--- Zip code validation. --->
<p>Zip Code Validation (enter a properly formatted zip code):<br>
<cfinput 
    type = "Text" name = "MyZip" 
    message = "Enter zip code, formatted xxxxx or xxxxx-xxxx" 
    validate = "zipcode" required = "yes">
    <font size = -1 color = red>Required</font>
<!--- Range validation. --->
<p>Range Validation (enter an integer from 1 to 5): <br>
<cfinput 
    type = "Text" name = "MyRange" range = "1,5" 
    message = "You must enter an integer from 1 to 5" 
    validate = "integer" required = "no">
<!--- Date validation. --->
<p>Date Validation (enter a properly formatted date):<br>
<cfinput 
    type = "Text" name = "MyDate" 
    message = "Enter a correctly formatted date (dd/mm/yy)" 
    validate = "date" required = "no">
<input 
    type = "Submit" name = "" 
    value = "send my information">
</cfform>

Example: with binding

The following example uses binding to generate a default e-mail address based on input controls with a first, last and domain names, and fills in the e-mail text-input field with the result.

The CFML page contains the following code:

<h3>CFC bind using onkeyup() event</h3>
<ul>
    <li>When you type in the First Name field, the first initial appears in
            the Email control.</li>
    <li>Each key you enter in the Last Name and Domain fields appears in the
            Email control.</li>
</ul>

<cfform name="mycfform">
    First Name<font color="#FF0000">*</font>:&nbsp;&nbsp;&nbsp;
        <cfinput type="text" name="firstname" required="yes"><br>
    Last Name<font color="#FF0000">*</font>:&nbsp;&nbsp;&nbsp;
        <cfinput type="text" name="lastname" required="yes"><br>
    Domain<font color="#FF0000">*
        </font>:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <cfinput type="text" name="domain" required="yes"><br>
    <br>
        <cfinput type="text" name="email1"
            bind="cfc:bindFcns.getEmailId({firstname@keyup},{lastname@keyup},
                {domain@keyup})"> 
    <br><br>
<font color="#FF0000">*</font> indicates the field is required.
</cfform>

The bindFcns CFC contains the following code:

<cfcomponent>
    <cffunction name="getEmailId" access="remote">
        <cfargument name="firstname"> 
        <cfargument name="lastname"> 
        <cfargument name="domain"> 
        <cfreturn "#left(firstname,1)#.#lcase(arguments.lastname)#@#
    lcase(domain)#">
    </cffunction>
</cfcomponent>