# <netui:form> Tag

Renders an HTML form that can be submitted to a Java method in the Controller file for processesing.

## Syntax

<netui:form
action="string_action"
[enctype="string_enctype"]
[focus="string_focus"]
[id="id"]
[location="string_location"]
[method="string_method"]
[name="string_name"]
[onClick="string_onClick"]
[onDblClick="string_onDblClick"]
[onKeyDown="string_onKeyDown"]
[onKeyPress="string_onKeyPress"]
[onKeyUp="string_onKeyUp"]
[onMouseDown="string_onMouseDown"]
[onMouseMove="string_onMouseMove"]
[onMouseOut="string_onMouseOut"]
[onMouseOver="string_onMouseOver"]
[onMouseUp="string_onMouseUp"]
[onReset="string_onSubmit"]
[onSubmit="string_onSumbit"]
[scope="string_scope"]
[style="string_Style"]
[styleClass="string_Class"]
[tabindex="string_tabIndex"]
[tagId="string_tagId"]
[target="string_windowTarget"]
[type="string_type"] />

## Description

Renders an HTML form that can be submitted to a Java method in the Controller file for processesing.

Submitting Data

When a <netui:form> is submitted, the form data is passed to a method for processessing. The data is passed as a Form Bean instance. The <netui:form>'s input fields correspond to the properties of the Form Bean. When the form is submitted the following sequence of events occurs: (1) a new Form Bean instance is created, (2) the form data is loaded into the corresponding Form Bean properties, and (3) the Form Bean instance is passed to the method where the data is processed.

The `action` attribute determines the target method of the submission. The parameter of the target method determines the Form Bean instance that carries the submitted data.

For example, if a <netui:form>'s target method is `someAction` ...

          <netui:form action="someAction">
                   //
                   // input fields go here
                   //
              <netui:button value="Submit" type="submit"/>
          </netui:form>

...and the `someAction` method takes a Form Bean parameter of type `SomeFormBean`...

        /**
         * @jpf:action
         * @jpf:forward name="success" path="showData.jsp"
         */
         protected Forward someAction(SomeFormBean form)

...then an instance of `SomeFormBean` will carry the submitted data.

Pre-populating Form Fields with the Session Object

The `name`, `type`, and `scope` attributes can be used together to pre-populate the form fields with default values when they are first rendered in the browser.

In the Controller file, instantiate the appropriate Form Bean, set default values, and store the Form Bean instance in the Session object.

        protected void onCreate()
        {
          // Create a new Form Bean instance
          ProcessDataForm formInstance = new ProcessDataForm();

          // Set default values.
          formInstance.setAge(32);
          formInstance.setName("John");

          // Store the instance in the Session object.
          getSession().setAttribute("defaultValues", formInstance);
        }

Then, use the `name`, `type`, and `scope` attributes to pre-populate the form fields.

        <netui:form
            action="processData"
            name="defaultValues"
            type="tagSamples.netui.form.FormController$ProcessDataForm"
            scope="session">

Note: when the data is submitted, the data is passed as a Request-scoped Form Bean, *not* as the Session-scoped Form Bean used to pre-populate the fields. However, you may pass the data as a Page Flow-scoped Form Bean, if the annotation `@jpf:action form="somePageFlowScopedBean"` is set on the receiving method. For detailed information on Form Bean scopings see Form Bean Scopings

Pre-populating Form Fields By Passing a Form Bean Instance to the JSP Page

As an alternative to the pre-population technique above, you can set the pre-population values in a Form Bean instance and then pass that instance to the JSP page. For example, assume that index.jsp contains the <netui:form> and input elements. The following action method sets the pre-population values in a Form Bean instance and passes that instance to the <netui:form> and its input elements. Note that the Forward object returned by the method has two parameters, the String "success" and the pre-populated form.

        /**
       * @jpf:action
       * @jpf:forward name="success" path="index.jsp"
       */
      protected Forward begin(ProcessDataForm form)
      {
          form.setAge(44);
          form.setName("Mark");
          return new Forward("success", form);
      }

## Attributes

action | Required. The action method invoked on form submit. Form data is passed to this method.
Required | Supports runtime expression evaluation | Data bindable
Yes | No | No
enctype | The content encoding to be used on a POST submit.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
focus | The `tagID` of an input field which should receive initial focus.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
id |
Required | Supports runtime expression evaluation | Data bindable
No | No |
location | The location hash to append to the URL.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
method | The request method used when submitting this form.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
name | The attribute key under which the associated Form Bean used to populate the input form is stored. This Form Bean is found in the scope defined by the `scope` attribute.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onClick | The onClick JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onDblClick | The onDblClick JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyDown | The onKeyDown JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyPress | The onKeyPress JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyUp | The onKeyUp JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseDown | The onMouseDown JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseMove | The onMouseMove JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseOut | The onMouseOut JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseOver | The onMouseOver JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseUp | The onMouseUp JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onReset | The JavaScript onReset event.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
onSubmit | The JavaScript onSubmit event.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
scope | The scope (`request` or `session`) under which the associated Form Bean used to populate the form input fields is stored. Using the `name`, `type` and `scope` attributes defines the Form Bean used.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
style | Sets the style of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
styleClass | The class of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
tabindex | The tabIndex of the rendered HTML tag. This attribute determines the position of the rendered HTML tag in the sequence of tags that the user may advance through by pressing the TAB key.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
tagId | String value. Sets the `id` (or `name`) attribute of the rendered HTML tag. Note that the real id attribute rendered in the browser may be changed by the application container (for example, Portal containers may change the rendered id value to ensure the uniqueness of id's on the page). In this case, the real id rendered in the browser may be looked up through the JavaScript function getNetuiTagName( tagId, tag ). For example, assume that some tag's `tagId` attribute is set to `foo`.
        <netui:textBox tagId="foo" />
Then the following JavaScript function will return the real id attribute rendered in the browser:
        getNetuiTagName( "foo", this )
To get a <netui:form> element and all of its children elements in JavaScript, use the same JavaScript function `getNetuiTagName( tagId, tag )`. For example, assume that there is a <netui:form> whose tagId attribute is set to `bar`.
        <netui:form tagId="bar" >
Then the following JavaScript function will return the <netui:form> element and its children (packaged as an array).
        document[getNetuiTagName( "bar", this )]
To retreive the value entered into a <netui:textBox> within the <netui:form> tag, use the following JavaScript expression.
        document[getNetuiTagName("bar", this)][getNetuiTagName("foo", this)].value
The second parameter ensures that the JavaScript function begins its search within the correct Portlet scope. Pass the JavaScript keyword `this` as the second parameter. For detailed information on using the function `getNetuiTagName( tagId, tag )` see Using JavaScript in Page Flow and Portal Applications.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
target | The window target
Required | Supports runtime expression evaluation | Data bindable
No | No | No
type | The Java class name of the Form Bean to be created, if necessary. This Form Bean will be created if the `name` and `scope` attributes are set. The Form Bean is then used to populate the form input fields.
Required | Supports runtime expression evaluation | Data bindable
No | No | No

## Sample

In this first sample, the <netui:form> tag invokes the `processData` action method in the Controller file when the form is submitted.

          <netui:form action="processData">
                  Name:
                  <netui:textBox dataSource="{actionForm.name}"/>
                  Age:
                  <netui:textBox dataSource="{actionForm.age}"/>
                  <netui:button value="Submit" type="submit"/>
          </netui:form>

Notice that the processData action method takes a parameter of type `ProcessDataForm`.

        /**
         * @jpf:action
         * @jpf:forward name="success" path="showData.jsp"
         */
        protected Forward processData(ProcessDataForm form)
        {
            //
            // Process the submitted data here.
            //

            return new Forward("success");
        }

This means that the submitted data is loaded into an instance of ProcessDataForm before it is passed to the action method.

In this next sample, the form fields are pre-populated based upon default values stored in the Session object.

          <netui:form action="Action" type="corp.Controller$NameBean"
              scope="session" name="nameBean">
              Name: <netui:textBox dataSource="{actionForm.name}" />
              <netui:button value="Submit"/>
          </netui:form>

## Code Sample

[BEA_HOME]/weblogic81/samples/workshop/SamplesApp/WebApp/tagSamples/netui/form/

## Related Topics

<netui:form> Tag Sample

Using Form Beans to Encapsulate Data