textField()

Signature

textField() — returns string

Available in: controller Category: Form Object Functions

Description

Builds and returns an HTML text field form control that is bound to a model object and one of its properties. By default, it will populate the value of the field from the property on the object. You can pass additional attributes such as class, id, or rel to customize the rendered tag. When working with nested associations or hasMany relationships, you can use the association and position arguments to bind the field to related properties. Wheels also supports automatically generating and placing labels, wrapping controls with custom HTML, and marking fields with errors when validation fails. The type argument lets you adjust the input type for use with HTML5 attributes like email, tel, or url.

Parameters

Name	Type	Required	Default	Description
objectName	any	yes	—	The variable name of the object to build the form control for.
property	string	yes	—	The name of the property to use in the form control.
association	string	no	—	The name of the association that the property is located on. Used for building nested forms that work with nested properties. If you are building a form with deep nesting, simply pass in a list to the nested object, and Wheels will figure it out.
position	string	no	—	The position used when referencing a hasMany relationship in the association argument. Used for building nested forms that work with nested properties. If you are building a form with deep nestings, simply pass in a list of positions, and Wheels will figure it out.
label	string	no	useDefaultLabel	The label text to use in the form control.
labelPlacement	string	no	around	Whether to place the label before, after, or wrapped around the form control. Label text placement can be controlled using aroundLeft or aroundRight.
prepend	string	no	—	String to prepend to the form control. Useful to wrap the form control with HTML tags.
append	string	no	—	String to append to the form control. Useful to wrap the form control with HTML tags.
prependToLabel	string	no	—	String to prepend to the form control’s label. Useful to wrap the form control with HTML tags.
appendToLabel	string	no	—	String to append to the form control’s label. Useful to wrap the form control with HTML tags.
errorElement	string	no	span	HTML tag to wrap the form control with when the object contains errors.
errorClass	string	no	field-with-errors	The class name of the HTML tag that wraps the form control when there are errors.
type	string	no	text	Input type attribute. Common examples in HTML5 and later are text (default), email, tel, and url.
encode	any	no	true	Use this argument to decide whether the output of the function should be encoded in order to prevent Cross Site Scripting (XSS) attacks. Set it to true to encode all relevant output for the specific HTML element in question (e.g. tag content, attribute values, and URLs). For HTML elements that have both tag content and attribute values you can set this argument to attributes to only encode attribute values and not tag content.

Examples

1. Basic text field with label
#textField(label="First Name", objectName="user", property="firstName")#

2. Using a custom input type
#textField(
 label="Email Address", 
 objectName="user", 
 property="email", 
 type="email"
)#

3. Adding CSS classes and attributes
#textField(
 label="Phone", 
 objectName="contact", 
 property="phoneNumber", 
 class="form-control", 
 placeholder="Enter phone number"
)#

4. Nested form with hasMany association
<fieldset>
 <legend>Phone Numbers</legend>
 <cfloop from="1" to="#ArrayLen(contact.phoneNumbers)#" index="i">
 #textField(
 label="Phone ##i#", 
 objectName="contact", 
 association="phoneNumbers", 
 position=i, 
 property="phoneNumber"
 )#
 </cfloop>
</fieldset>

5. Prepending and appending HTML wrappers
#textField(
 label="Website", 
 objectName="company", 
 property="website", 
 prepend="<div class='field-wrapper'>", 
 append="</div>"
)#

6. Handling validation errors
#textField(
 label="Username", 
 objectName="user", 
 property="username", 
 errorElement="div", 
 errorClass="input-error"
)#