Back

textField()

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.

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. 
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"
)#
Copied!