Note |
---|
Please make sure you have read the Tag Syntax document and understand how tag attribute syntax works. |
Within the form tags, there are two classes of tags: the form tag itself, and all other tags, which make up the individual form elements. The behavior of the form tag is different than the elements enclosed within it.
Form Tag Themes
As explained in Themes and Templates, the HTML Tags (which includes Form Tags) are all driven by templates. Templates are grouped together to create themes. The framework bundles three themes in the distribution.
simple | Sometimes too simple | |
---|---|---|
xhtml | Extends simple | (default) |
ajax | Extends xhtml |
The predefined themes can be used "as is" or customized.
Tip | ||
---|---|---|
| ||
The xhtml theme renders out a two-column table. If a different layout is needed, do not write your own HTML. Create a new theme or utilize the simple theme. |
Simple theme caveats
The downside of using the simple theme is that it doesn't support as many of the attributes that the other themes do. For example, the label
attribute does nothing in the simple theme, and the automatic display of error messages is not supported.
Common Attributes
All the form tags extend the UIBean class. This base class provides a set of common attributes, that can be grouped in to three categories: templated-related
, javascript-related, and general attributes. The individual attributes are documented on each tag's reference page.
In addition to the common attributes, a special attribute exists for all form element tags: form
(${parameters.form}). The form
property represents the attributes used to render the form tag, such as the form's id. In a template, the form's ID can be found by calling ${parameters.form.id}.
Template-Related Attributes
Wiki Markup |
---|
{snippet:id=templateRelatedAttributes|javadoc=true|url=com.opensymphony.webwork.components.UIBean} |
Javascript-Related Attributes
Wiki Markup |
---|
{snippet:id=javascriptRelatedAttributes|javadoc=true|url=com.opensymphony.webwork.components.UIBean} |
Tooltip Related Attributes
Wiki Markup |
---|
{snippet:id=tooltipattributes|javadoc=true|url=com.opensymphony.webwork.components.UIBean} |
General Attributes
Wiki Markup |
---|
{snippet:id=generalAttributes|javadoc=true|url=com.opensymphony.webwork.components.UIBean} |
Note | ||
---|---|---|
| ||
Some tag attributes may not be utilized by all, or any, of the templates. For example, the form tag supports the |
Value/Name Relationship
In many of the tags (except for the form tag) there is a unique relationship between the name
and value
attributes. The name
attribute provides the name for the tag, which in turn is used as the control attribute when the form is submitted. The value submitted is bound to the name
. In most cases, the name
maps to a simple JavaBean property, such as "postalCode". On a submit, the value would be set to the property by calling the setPostalCode
mutator.
Likewise, a form control could be populated by calling a JavaBean accessor, like getPostalCode
. In the expression language, we can refer to the JavaBean property by name. An expression like "%{postalCode}" would in turn call getPostalCode
.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<@saf.form action="updateAddress"> <@saf.textfield label="Postal Code" name="postalCode" value="%{postalCode}"/> ... </@saf.form> |
However, since the tags imply a relationship between the name
and value
, the value
attribute is optional. If a value
is not specified, by default, the JavaBean accessor is used instead.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<@saf.form action="updateAddress"> <@saf.textfield label="Postal Code" name="postalCode"/> ... </@saf.form> |
While most attributes are exposed to the underlying templates as the same key as the attribute (${parameters.label}), the value
attribute is not. Instead, it can be accessed via the nameValue
key (${parameters.nameValue}). The nameValue
key indicates that the value may have been generated from the name
attribute rather than explicitly defined in the value
attribute.
ID Name Assignment
All form tags automatically assign an ID to the control, but the ID can be overridden if needed.
Forms | The default ID is the action name. For example, "updateAddress". |
---|---|
Controls | The default ID is the form's name concatenated with the tag name. For example, "updateAddress_postalCode". |
Required Attribute
The required
attribute on many UI tags defaults to true only if you have client-side validation enabled, and a validator is associated with that particular field.
Tooltip
Wiki Markup |
---|
{snippet:id=tooltipdescription|javadoc=true|url=com.opensymphony.webwork.components.UIBean} |
Wiki Markup |
---|
{snippet:id=tooltipexample|lang=xml|javadoc=true|url=com.opensymphony.webwork.components.UIBean} |
Form Tag Reference
Note | ||
---|---|---|
| ||
All tags that push something onto the value stack (like i18n or bean tags) will pop those objects from the stack when its processing completes. If a bean is instantiated with the bean tag ( |
- checkbox - renders a checkbox input field
- checkboxlist - renders a list of checkboxes
- combobox - renders a widget that fills a text box from a select
- datepicker - renders a date selection widget using JavaScript and DOM
- doubleselect - renders a double select widget, where the second drop down depends on the first
- head - renders the HEAD section for specific themes, such as CSS and JavaScript imports
- file - renders a file input field
- form - renders an input form
- hidden - renders a hidden form field
- label - renders renders a label
- optiontransferselect- renders an option transfer select component which is basically two select box with buttons in between allowing entries of each select to get transfer between each other.
- password - renders a password textfield
- radio - renders a radio button
- reset - renders a reset form button
- richtexteditor - renders a rich text editor
- select - renders a select
- submit - renders a submit button
- textarea - renders a textarea
- textfield - renders a textfield
- token - renders a hidden field to stop double-submission of containing forms
- updownselect - renders a select component with buttons to move the elements in the select component up and down