Apache Struts 2 Documentation > Home > Guides > Tag Developers Guide > Struts Tags > UI Tags > Form Tags
Added by Patrick Lightbody, last edited by Don Brown on Sep 29, 2006  (view change)

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.

xhtml layout

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

Attribute Theme Data Types Description
templateDir n/a String define the template directory
theme n/a String define the theme name
template n/a String define the template name

Javascript-Related Attributes

Attribute Theme Data Types Description
onclick simple String html javascript onclick attribute
ondbclick simple String html javascript ondbclick attribute
onmousedown simple String html javascript onmousedown attribute
onmouseup simple String html javascript onmouseup attribute
onmouseover simple String html javascript onmouseover attribute
onmouseout simple String html javascript onmouseout attribute
onfocus simple String html javascript onfocus attribute
onblur simple String html javascript onblur attribute
onkeypress simple String html javascript onkeypress attribute
onkeyup simple String html javascript onkeyup attribute
onkeydown simple String html javascript onkeydown attribute
onselect simple String html javascript onselect attribute
onchange simple String html javascript onchange attribute

Tooltip Related Attributes

Attribute Data Type Default Description
tooltip String none Set the tooltip of this particular component
jsTooltipEnabled String false Enable js tooltip rendering
tooltipIcon String /struts/static/tooltip/tooltip.gif The url to the tooltip icon
tooltipDelay String 500 Tooltip shows up after the specified timeout (miliseconds). A behavior similar to that of OS based tooltips.
key simple String The name of the property this input field represents. This will auto populate the name, label, and value

General Attributes

Attribute Theme Data Types Description
cssClass simple String define html class attribute
cssStyle simple String define html style attribute
title simple String define html title attribute
disabled simple String define html disabled attribute
label xhtml String define label of form element
labelPosition xhtml String define label position of form element (top/left), default to left
requiredposition xhtml String define required label position of form element (left/right), default to right
name simple String Form Element's field name mapping
required xhtml Boolean add * to label (true to add false otherwise)
tabIndex simple String define html tabindex attribute
value simple Object define value of form element

When some attributes don't apply

Some tag attributes may not be utilized by all, or any, of the templates. For example, the form tag supports the tabindex attribute, but none of the themes render the tabindex.

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.

Using Expressions to populate a form for editing
<@s.form action="updateAddress">
    <@s.textfield label="Postal Code" name="postalCode" value="%{postalCode}"/>
    ...
</@s.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.

Populating a form for editing, the easy way
<@s.form action="updateAddress">
    <@s.textfield label="Postal Code" name="postalCode"/>
    ...
</@s.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

Every Form UI component (in xhtml / css_xhtml or any others that extends of them) could have tooltip assigned to a them. The Form component's tooltip related attribute once defined will be applicable to all form UI component that is created under it unless explicitly overriden by having the Form UI component itself defined that tooltip attribute.

In Example 1, the textfield will inherit the tooltipDelay adn tooltipIcon attribte from its containing form. In other words, although it doesn't defined a tooltipAboveMousePointer attribute, it will have that attributes inherited from its containing form.

In Example 2, the the textfield will inherite both the tooltipDelay and tooltipIcon attribute from its containing form but tooltipDelay attribute is overriden at the textfield itself. Hence, the textfield actually will have tooltipIcon defined as /myImages/myIcon.gif, inherited from its containing form and tooltipDelay defined as 5000, due to overriden at the textfield itself.

Example 3, 4 and 5 shows different way of setting the tooltipConfig attribute.
Example 3:Set tooltip config through body of param tag
Example 4:Set tooltip config through value attribute of param tag
Example 5:Set tooltip config through tooltipConfig attribute of component tag

<!-- Example 1: -->
<s:form
         tooltipConfig="#{'tooltipDelay':'500',
                          'tooltipIcon='/myImages/myIcon.gif'}" .... >
  ....
    <s:textfield label="Customer Name" tooltip="Enter the customer name" .... />
  ....
</s:form>

<!-- Example 2: -->
<s:form
        tooltipConfig="#{'tooltipDelay':'500',
                         'tooltipIcon':'/myImages/myIcon.gif'}" ... >
  ....
    <s:textfield label="Address"
         tooltip="Enter your address"
         tooltipConfig="#{'tooltipDelay':'5000'}" />
  ....
</s:form>


<-- Example 3: -->
<s:textfield
       label="Customer Name"
       tooltip="One of our customer Details'">
       <s:param name="tooltipConfig">
            tooltipDelay = 500 |
            tooltipIcon = /myImages/myIcon.gif
       </s:param>
</s:textfield>


<-- Example 4: -->
<s:textfield
         label="Customer Address"
         tooltip="Enter The Customer Address" >
         <s:param
             name="tooltipConfig"
             value="#{'tooltipDelay':'500',
                      'tooltipIcon':'/myImages/myIcon.gif'}" />
</s:textfield>


<-- Example 5: -->
<s:textfield
         label="Customer Telephone Number"
         tooltip="Enter customer Telephone Number"
         tooltipConfig="#{'tooltipDelay':'500',
                          'tooltipIcon':'/myImages/myIcon.gif'}" />

Next: UI Tag Reference