ui:form

This element begins a form that may contain form elements like input boxes and buttons. The generated HTML code consists of a form element and many hidden input fields keeping the current state of the dialog.

In order to include form elements, an ui:form element is required, and all form elements must only occur within ui:form. Furthermore, an ui:form is required, too, if the page contains hyperlinks (ui:a). Furthermore, an ui:form is required if the page refers to popup pages.

It is recommended to put the ui:form element into a table, because many browsers render the table only once it is completely loaded. This avoids that the user presses buttons before the ui:form element is loaded which causes incorrect behaviour of the system. However, newer browsers supporting DOM level 2 render tables even if they are incomplete such that the trick no longer works. (Note that submitting clearly incomplete forms should be considered as a bug of the browsers.)

Declaration

Level: Generative element

<!ELEMENT ui:form ANY>

<!ATTLIST ui:form 
          action-suffix CDATA "">

The children may be any elements that are allowed in page context (see ui:page for an overview); however, it is not allowed that there is a second ui:form element anywhere in the current page.

Attributes

action-suffix: This string is appended to the automatically generated ACTION attribute. The string should begin with a slash character.

The element ui:form defines almost no attributes; however, if there are attributes these are added to the generated HTML form element. Especially onsubmit and onreset work. Note that the attributes name, action, method, accept-charset, and enctype are generated and if these occur inside ui:form they will be ignored.

Sub elements

All elements allowed in a page body can occur within ui:form.

Generated HTML code

The ui:form element generates HTML code which roughly looks as follows:

<form name="uiform" action="..." method="post" enctype="multipart/form-encoded"
      accept-charset="...">
  <input type="hidden" ...>
  <input type="hidden" ...>
  ... (Sub elements)
  <input type="hidden" ...>
  <input type="hidden" ...>
</form>

Note that the generated form element has always the name uiform such that it is possible to access the element from Javascript code. - If there are attributes in the ui:form element, these are added to the generated form element.

Sometimes, ui:form generates a second form element

<form name="uialtform" ...>
  ...
</form>

immediately after uiform.

Example

A page with a button:

<ui:page name="sample">
  <html>
    <body>
      <ui:form>
        <h1>A sample page</h1>
        You can press on this
        <ui:button name="sample_button" label="Button"/>
      </ui:form>
    </body>
  </html>
</ui:page>