XForms - HTML Layout of XForms Controls

Rationale

The Orbeon Forms XForms engine translates XForms markup into HTML markup. This document describes the markup produced by the XForms engine.

With Orbeon Forms 4.0

Orbeon Forms 4.0 only supports the "span" layout (see "With Orbeon Forms 3.9" below).

With Orbeon Forms 3.9

Nospan and span layouts

There are two formats for the markup:
  • Legacy layout ("nospan" layout)
    • With this format, the control proper and its nested label, help, hint and alert are in general all at the same level.
  • New layout ("span" layout)
    • The main difference from the legacy layout is the presence of an outer element (usually <span>) which encapsulates an entire control including nested LHHA elements.
      • NOTE: It is possible to use "external" LHHA elements using the @for attributes to avoid this encapsulation.
    • This greatly facilitate CSS styling, e.g. .xforms-textarea .xforms-label matches the labels within textareas only.
    • It maps more naturally to the XForms markup, where the control element usually encapsulates the LHHA elements (LHHA elements).
    • Size of the markup
      • The additional outer element  can cause the markup to be sometimes slightly larger.
      • However it allows removing unneeded identifiers on nested elements, so overall the hope is that the new layout is not be bigger than the old layout.

Orbeon Forms 3.9: choosing the HTML layout

The oxf.xforms.xhtml-layout property allows you to choose between the "nospan" and the "span" layout:

<property as="xs:string" name="oxf.xforms.xhtml-layout" value="span"/>

As of 2009-10, the <form> element features two classes which help style the "nospan" layout and "span" layouts:
  • xforms-layout-nospan
  • xforms-layout-span
This allows you to apply different CSS rules depending on the layout, e.g.:

.xforms-layout-nospan textarea.xforms-textarea, // covers "nospan" layout
  .xforms-layout-span .xforms-textarea textarea // covers "span" layout
{
    width: 100%
}

Detailed layout

To see the detailed layout of a control, use your browser's developer tools. Here is an example of xforms:input with the Chrome Dev Tools:



Comments