Form Helper Plugin

This plugin wraps form elements in a standard wrapper that includes a label, help text and errors making styling easier. You can also use the standard form wrapper to wrap any content that you wish to include in the form. Form helper gives you a standard set of tags in the 'form' namespace.

Here is an example page with several form elements:

Example code that produced the output above:

<g:form action="order">
      <div id="contactInfo">
        <h2>Contact Information</h2>
        <p>Plase enter your contact information.</p>
        <form:textField label="First name" name="firstName" bean="${participant}" />
        <form:textField label="Last name" name="lastName" bean="${participant}" />
        <form:textField label="Company" name="company" bean="${participant}" />
        <form:textField label="Phone" name="phone" bean="${participant}" />
        <form:textField label="E-mail" name="email" bean="${participant}" />
      </div>
      <div id="deliveryInfo">
        <h2>Delivery Information</h2>
        <p>Please enter your delivery information</p>
        <form:textField label="Address1" name="address1" bean="${participant}" />
        <form:textField label="Address2" name="address2" bean="${participant}" />
        <form:textField label="City" name="city" bean="${participant}" />
        <form:textField label="Province/State" name="province" bean="${participant}" />
        <form:textField label="Postal Code" name="postalCode" bean="${participant}" />
        <form:select label="Country" name="country" bean="${participant}"/>
      </div>
      <div id="submit">
        <h2>Payment method</h2>
        <p>Please select a payment method.</p>
        <form:textField label="Quantity" name="quantity" bean="${participant}" />
        <form:select label="Payment method" name="paymentType" bean="${participant}" from="${participant.constraints.paymentType.inList}" optionKey="value" optionValue="display" />
      </div>
      <div id="buttons">
        <input type="submit" name="submit" value="Continue" />
      </div>
    </g:form>

Notes

• Place help text in the body of each tag (except for the fieldWrapper)
• Properties with 'blank:false' in the constraints of the model class will be marked required

Tags

<form:buttonBar />

A convenience to wrap buttons in divs with standard names

Buttons do not get wrapped by fieldWrapper

Place your buttons in the body of the tag.

Produces:

<div class="buttonBar">
  <div class="buttons">
    YOUR BUTTONS HERE
  </div>
</div>

Example:

<form:buttonBar><g:submit value='something'></form:buttonBar>

<form:checkbox />

This tag places the label after the checkbox

Attributes (in addition to the ones for fieldWrapper)

NONE

Produces:

<input class="checkbox" type="checkbox" name="booleanProperty" /> A Checkbox

Example:

…
  <input class="checkbox" type="checkbox" name="booleanProperty" /> A Checkbox
  ...

<form:date />

Wraps a date picker based on g.datePicker

Attributes (in addition to the ones for fieldWrapper)

• precision: Same as for g.datePicker
• years: Same as for g.datePicker
• value: override or set the value from the bean

<form:date label="A Date" bean="${bean}" name="dateProperty" title="A Date" precision="minute" years="${(2000..2020)}">
      Instructional Text
    </form:date>

<form:fieldWrapper />

This is the standard wrapper for all of the following tags. You can also use this tag to wrap anything that you want included into the form. If you need to layout elements horizontally, you can use this tag to do so.

Attributes (these are global for all tags)

• bean: The object instance for this form item (not required)
• name: The property name within the object. Name can also be a list in which case the errors for each property in the list will be displayed. This is good for wrapping form elements that are displayed horizontally. (required if bean is defined)
• title: The title of this element (used for error messages)
• label: The label for this form element ( css class 'required' is added to the label when constraint 'blank:false' is present)
• id: The css id to give to this field (if you don't provide an id the name will be used)
• title: The title - used in error messages
• error: The error to display for this field. This overrides the error found in the bean for the named property

Example:

<form:fieldWrapper bean="${node}" name="body" title="body">
    <fckeditor:editor
      name="body"
      width="100%"
      height="400"
      toolbar="Standard"
      fileBrowser="default">
      ${node.body}
    </fckeditor:editor>
  </form:fieldWrapper>

<form:fileField />

Wraps a file field

Attributes (in addition to the fieldWrapper attributes)

• value: set the value or override the value from the bean

<form:fileField label="A File" bean="${bean}" name="fileProperty" title="File">
      Instructional Text
    </form:fileField>

<form:passwordField />

Wraps a password field

Attributes

• value: set the value or override the value from the bean

<form:passwordField label="A Password" bean="${bean}" name="passwordProperty">
      Instructional Text
    </form:passwordField>

<form:radioGroup />

Creates a radio group and wraps it

Attributes (in addition to the fieldWrapper attributes)

• map: A map of keys and values for each radio button

<form:radioGroup label="Radio Group" bean="${bean}" name="radioGroupProperty" title="Radio Group" map="[[key:'a',value:'radio a'],[key:'b',value:'radio b']]">
      Instructional Text
    </form:radioGroup>

<form:select />

Wraps a select box using g.select

Attributes (in addition to the fieldWrapper attributes)

• from: - The list or range to select from (if not provided a list can be taken from the inList constraint of the bean class
• optionKey: See the g.select tag description
• optionValue: See the g.select tag description

• If you leave out the 'from' attribute, the select tag can take it's options from the inList constraint in the model class

<form:textField />

This produces a standard textbox wrapped in fieldWrapper

Attributes (in addition fieldWrapper)

• readonly: set equal to "true" to mark this field readonly
• value: Set or override the value from the bean

<input type="text" class="textField" id="NAME" name="NAME" title="TITLE" value="" />

Example:

<form:textField name="title" label="title" bean="${node}" />

<form:textarea />

Wraps a textarea

Attributes (in addition to fieldWrapper)

• rows: The HTML rows attribute
• cols: The HTML cols attribute