Form/Field

You can use this ViewHelper to create complete form fields for your form. By default you have to take care of quite a lot of things yourself to render a form field, like

• form control
• label
• relation between label and form control to enable focusing by clicking on the label
• wrapper around the label + control for better styling
• showing validation errors next to the form control
• add a class to the wrapper around the label + control to indicate an validation error
• maybe add an infotext

To make this easier and reduce the fluid code needed you can use this viewhelper like this:

Basic usage

<e:form.field name="foo" control="Textfield" wrap="Default" value="bar" />

This will render a Textfield with the name foo inside the default wrapper based on Bootstrap 3 and a value of ``bar`

<div class="form-group">
  <label for="foo" class="col-sm-3 control-label">Foo</label>
  <div class="col-sm-9">
    <input class="form-control" id="foo" type="text" name="foo" value="bar">
  </div>
</div>

Output of the same field when validation failed

<div class="form-group has-error">
  <label for="foo" class="col-sm-3 control-label">Foo</label>
  <div class="col-sm-9">
    <input class="form-control" id="foo" type="text" name="foo" value="bar">
    <span class="help-block">This property is required.</span>
  </div>
</div>

Usage with an object bound form

To make things even easier you can use it in combinatin with the binding of objects to you form like this:

<f:form action="create" object="myObject" name="myObject">
  <e:form.field property="someString" />
  <e:form.field property="someRelation" />
  <e:form.field property="someBoolean" />
  ...
</f:form>

This will automatically resolve the control that should be used based on the property type and use the default wrap.

<form action="...">
   <div class="form-group">
     <label for="someString" class="col-sm-3 control-label">Some String</label>
     <div class="col-sm-9">
       <input class="form-control" id="someString" type="text" name="someString">
     </div>
   </div>
   <div class="form-group">
     <label for="someRelation" class="col-sm-3 control-label">Some String</label>
     <div class="col-sm-9">
       <input class="form-control" id="someRelation" type="text" name="someRelation">
       <select class="form-control" id="someRelation" name="someRelation">
         <!-- Options provided by the RelationOptionsProvider -->
       </select>
     </div>
   </div>
   <div class="form-group">
     <label for="someString" class="col-sm-3 control-label">Some String</label>
     <div class="col-sm-9">
       <input class="form-control" id="someString" type="text" name="someString">
     </div>
   </div>
 </form>

Arguments

Name	Type	Required	Description
additionalAttributes	array	no	Additional tag attributes. They will be added directly to the resulting HTML tag.
data	array	no	Additional data-* attributes. They will each be added with a “data-” prefix.
name	string	no	Name of input tag
value	mixed	no	Value of input tag
property	string	no	Name of Object Property. If used in conjunction with <f:form object=”...”>, “name” and “value” properties will be ignored.
control	string	no	Specifies the control to use to render this field
wrap	string	no	Specifies the wrap used to render the field
class	string	no	CSS class(es) for this element
dir	string	no	Text direction for this HTML element. Allowed strings: “ltr” (left to right), “rtl” (right to left)
id	string	no	Unique (in this file) identifier for this HTML element.
lang	string	no	Language for this element. Use short names specified in RFC 1766
style	string	no	Individual CSS styles for this element
title	string	no	Tooltip text of element
accesskey	string	no	Keyboard shortcut to access this element
tabindex	integer	no	Specifies the tab order of this element
onclick	string	no	JavaScript evaluated for the onclick event