cfinput

Description

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

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

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" 
    matchContains = "true|false" 
    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.

Attributes

Attribute	Description	Required	Default
autosuggest	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 Developing ColdFusion Applications	Optional, HTML
autosuggestBindDelay	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.	Optional, HTML	0.5 seconds
autosuggestMinLength	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".	Optional, HTML	1
bind	A bind expression that dynamically sets an attribute of the control. For details, see Usage.	Optional; HTML, Flash
bindAttribute	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".	Optional; HTML	value
bindOnLoad	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".	Optional; HTML	no
checked	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.	Optional; all	no
dayNames	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.	Optional; all	S, M, T, W, T, F, S
delimiter	The delimiter to use to separate entries in a static auto-suggest list. This attribute is meaningful only if the autosuggest attribute is a string of delimited values.	Optional, HTML	comma (,)
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).	Optional; all	not disabled
enabled	Boolean value that specifies whether the control is enabled. A disabled control appears in light gray. The inverse of the disabled attribute.	Optional; Flash	yes
firstDayOfWeek	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.	Optional; all	0
height	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.	Optional; see Description
id	The HTML ID of the form.	Optional; HTML	name attribute value
label	Label to put next to the control on a Flash form. Not used for button, hidden, image, reset, or submit types.	Optional; Flash, XML
mask	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 the Usage section.	Optional; Flash, HTML
matchContains	If true, the match returned contains the query string. By default, the results that start with the query string are returned.	Optional	false
maxLength	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.	Optional; all
maxResultsDisplayed	The maximum number suggestions to display in the auto-suggest list. Valid only for cfinput type="text".	Optional; HTML	10
message	Message text to display if validation fails.	Optional; all
monthNames	Applies to datefield type only. A comma-delimited list of the month names that display at the top of the calendar.	Optional; all	January, February, March, April, May, June, July, August, September, October, November, December
name	Name for form input element.	Required; all
onBindError	The name of a JavaScript function to execute if evaluating a bind expression, including an auto-suggest 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.	Optional; HTML	See Description
onChange	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.	Optional; all
onClick	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.	Optional; all
onError	Name of a custom JavaScript function to execute if validation fails.	Optional; HTML, XML
onKeyDown	JavaScript (HTML/XML) or ActionScript (Flash) ActionScript to run when the user presses a keyboard key in the control.	Optional; all
onKeyUp	JavaScript (HTML/XML) or ActionScript (Flash) to run when the user releases a keyboard key in the control.	Optional; all
onMouseDown	JavaScript (HTML/XML) or ActionScript (Flash) to run when the user releases a mouse button in the control.	Optional; all
onMouseUp	JavaScript (HTML/XML) or ActionScript (Flash) to run when the user presses a mouse button in the control.	Optional; all
onValidate	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.	Optional; HTML, XML
pattern	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 Developing ColdFusion Applications.	Required if validate= "regex"; HTML, XML
range	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. Note: ColdFusion does not process the range attribute when you use onsubmit or onBlur validation in XML format forms.	Optional; all
readonly	Applies to HTML and Flash forms.Valid only for cfinput type= "text". ColdFusion ignores this attribute for all other input types.	Optional; Flash, HTML
required	yes: the field must contain data. no: allows an empty field.	Optional; all	no
showAutosuggestLoadingIcon	A Boolean value that specifies whether to display an animated icon when loading an auto-suggest value for a text input.	Optional; HTML	true
size	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.	Optional; all
sourceForTooltip	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.	Optional; HTML
src	Applies to Flash button, reset, submit, and image types, and the HTML image type. URL of an image to use on the button.	Optional; Flash, HTML
style	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 Developing ColdFusion Applications. In XML format, ColdFusion passes the style attribute to the XML.	Optional; all
tooltip	Text to display when the mouse pointer hovers over the control. Ignored if you specify a sourceForTooltip attribute.	Optional; Flash, HTML
type	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. Not supported when you use Ajax form submission to submit the form asynchronously from the page. 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.	Optional; all	text
typeahead	A Boolean value that specifies whether the auto-suggest feature should automatically complete a user’s entry with the first result in the suggestion list. Valid only for cfinput type="text".	Optional; HTML	no
validate	The type or types of validation to do. Available validation types and algorithms depend on the format. For details, see Usage.	Optional; all
validateAt	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.	Optional; all	onSubmit
value	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.	depends on type setting; all
visible	Boolean value that specifies whether to show the control. Space that would be occupied by an invisible control is blank.	Optional; Flash	yes
width	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.	Optional; see Description

Usage

For this tag to work properly. the browser must be JavaScript-enabled.
If the cfformpreserveData 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 Developing ColdFusion Applications.

cfmldocs