XForms - HTML Layout of XForms Controls

Site map

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity

XPL - Command Line Applications
edited by Eric van der Vlist
XForms - Other Extensions
edited by Erik Bruchez
Output Control
edited by Erik Bruchez
Orbeon Forms 4.0
edited by Erik Bruchez
Processors - XSLT and JAXP (TrAX)
edited by Erik Bruchez
View All

Documentation‎ > ‎II. Developer and Administrator Guide‎ > ‎

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.

As of August 2009, there are two formats for the markup:

Legacy layout ("nospan" layout)

This is the layout in use up to today.
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)

This is a new layout being introduced progressively.
Reasons

The new layour 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 label, help, hint, and alert elements (LHHA elements).
NOTE: It is still possible to use "external" LHHA elements using the @for attributes to avoid this encapsulation.

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.

This might 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 will not be bigger than the old layout.

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"/>

CSS styling tips

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 .xforms-textarea,         // covers "nospan" layout

  .xforms-layout-span .xforms-textarea textarea // covers "span" layout

{

    width: 100%

}

TODO: notes about MIP classes

xforms-alert-active is no longer strictly necessary but kept for now

[TODO: more]

xforms:input

Default

XForms:

<xforms:input id="my-new-input" ref=".">

    <xforms:label>My label</xforms:label>

    <xforms:hint>My hint</xforms:hint>

    <xforms:help>My help</xforms:help>

    <xforms:alert>My alert</xforms:alert>

</xforms:input>

Legacy HTML:

<xhtml:label class="xforms-label" id="my-old-input-label" for="my-old-input$xforms-input-1">My label</xhtml:label>

<xhtml:span id="my-old-input" class="xforms-control xforms-input xforms-invalid xforms-required xforms-required-filled xforms-type-NCName">

    <xhtml:input id="my-old-input$xforms-input-1" type="text" name="my-old-input$xforms-input-1" value="Hello!" class="xforms-input-input xforms-type-NCName"/>

</xhtml:span>

<xhtml:img id="my-old-input-help-image" class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>

<xhtml:label class="xforms-help" id="my-old-input-help" for="my-old-input$xforms-input-1">My help</xhtml:label>

<xhtml:label class="xforms-alert-active xforms-alert" id="my-old-input-alert" for="my-old-input$xforms-input-1">My alert</xhtml:label>

<xhtml:label class="xforms-hint" id="my-old-input-hint" for="my-old-input$xforms-input-1">My hint</xhtml:label>

New HTML:

<xhtml:span id="my-new-input" class="xforms-control xforms-input xforms-invalid xforms-required xforms-required-filled xforms-type-NCName">
    <xhtml:label class="xforms-label" for="my-new-input$xforms-input-1">My label</xhtml:label>
    <xhtml:input id="my-new-input$xforms-input-1" type="text" name="my-new-input$xforms-input-1" value="Hello!" class="xforms-input-input xforms-type-NCName"/>
    <xhtml:img class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>
    <xhtml:label class="xforms-help" for="my-new-input$xforms-input-1">My help</xhtml:label>
    <xhtml:label class="xforms-alert-active xforms-alert" for="my-new-input$xforms-input-1">My alert</xhtml:label>
    <xhtml:label class="xforms-hint" for="my-new-input$xforms-input-1">My hint</xhtml:label>
</xhtml:span>

Type "xs:boolean"

[TODO]

Type "xs:dateTime"

[TODO]

xforms:select1

Minimal

XForms:

<xforms:select1 id="my-new-select1" ref="." appearance="minimal">

    <xforms:label>My label</xforms:label>

    <xforms:hint>My hint</xforms:hint>

    <xforms:help>My help</xforms:help>

    <xforms:alert>My alert</xforms:alert>

    <xforms:item>

        <xforms:label>Apple</xforms:label>

        <xforms:value>apple</xforms:value>

    </xforms:item>

    <xforms:item>

        <xforms:label>Orange</xforms:label>

        <xforms:value>orange</xforms:value>

    </xforms:item>

</xforms:select1>

Legacy HTML:

<xhtml:label class="xforms-label" id="my-old-select1-label" for="my-old-select1">My label</xhtml:label>

<xhtml:select id="my-old-select1" class="xforms-control
xforms-select1 xforms-incremental xforms-select1-appearance-minimal
xforms-required xforms-required-filled xforms-type-NCName"
name="my-old-select1">

    <xhtml:option value="b3iUb0x15AA=" selected="selected">Apple</xhtml:option>

    <xhtml:option value="2KtpnvqzFEE=">Orange</xhtml:option>

 </xhtml:select>

 <xhtml:img id="my-old-select1-help-image" class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>

 <xhtml:label class="xforms-help" id="my-old-select1-help" for="my-old-select1">My help</xhtml:label>

<xhtml:label class="xforms-alert-inactive xforms-alert"
id="my-old-select1-alert" for="my-old-select1">My
alert</xhtml:label>

 <xhtml:label class="xforms-hint" id="my-old-select1-hint" for="my-old-select1">My hint</xhtml:label>

New HTML:

<xhtml:span id="my-new-select1" class="xforms-control xforms-select1 xforms-incremental xforms-select1-appearance-minimal xforms-required xforms-required-filled xforms-type-NCName">
    <xhtml:label class="xforms-label" for="my-new-select1$$c">My label</xhtml:label>
    <xhtml:select id="my-new-select1$$c" name="my-new-select1">
        <xhtml:option value="b3iUb0x15AA=" selected="selected">Apple</xhtml:option>
        <xhtml:option value="2KtpnvqzFEE=">Orange</xhtml:option>
    </xhtml:select>
    <xhtml:img class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>
    <xhtml:label class="xforms-help" for="my-new-select1$$c">My help</xhtml:label>
    <xhtml:label class="xforms-alert-inactive xforms-alert" for="my-new-select1$$c">My alert</xhtml:label>
    <xhtml:label class="xforms-hint" for="my-new-select1$$c">My hint</xhtml:label>
</xhtml:span>

Appearance "compact"

[TODO]

Appearance "full"

The following examples are for xforms:select1. For the layout of xforms:select, replace "select1" with "select".

XForms:

<xforms:select1 id="my-new-select1" ref="." appearance="full">

   <xforms:label>My label</xforms:label>

   <xforms:hint>My hint</xforms:hint>

   <xforms:help>My help</xforms:help>

   <xforms:alert>My alert</xforms:alert>

   <xforms:item>

   <xforms:label>Apple</xforms:label>

   <xforms:value>apple</xforms:value>

   </xforms:item>

   <xforms:item>

   <xforms:label>Orange</xforms:label>

   <xforms:value>orange</xforms:value>

   </xforms:item>

</xforms:select1>

Legacy HTML:

<label class="xforms-label xforms-repeat-selected-item-1" id="my-new-select1$$l">My label</label>

<span id="my-new-select1"    class="xforms-control xforms-select1 xforms-incremental xforms-select1-appearance-full    xforms-required xforms-required-filled xforms-type-NCName">

   <span class="xforms-selected">

   <label for="my-new-select1$$e0">

   <input id="my-new-select1$$e0" type="radio" name="my-new-select1" value="apple" checked="checked"/>Apple

   </label>

   </span>

   <span class="xforms-deselected">

   <label for="my-new-select1$$e1">

   <input id="my-new-select1$$e1" type="radio" name="my-new-select1" value="orange"/>Orange

   </label>

   </span>

</span>

<img id="my-new-select1$$i" class="xforms-help-image xforms-repeat-selected-item-1" src="/ops/images/xforms/help.png" title="" alt=""/>

<span class="xforms-help xforms-repeat-selected-item-1" id="my-new-select1$$p">My help</span>

<span class="xforms-alert-inactive xforms-alert xforms-repeat-selected-item-1" id="my-new-select1$$a">My alert</span>

<span class="xforms-hint xforms-repeat-selected-item-1" id="my-new-select1$$t">My hint</span>

New HTML:

<span id="my-new-select1"    class="xforms-control xforms-select1 xforms-incremental xforms-select1-appearance-full    xforms-required xforms-required-filled xforms-type-NCName">

   <label class="xforms-label">My label</label>

   <span>

   <span class="xforms-selected">

   <label for="my-new-select1$$e0">

   <input id="my-new-select1$$e0" type="radio" name="my-new-select1" value="apple" checked="checked"/>Apple

   </label>

   </span>

   <span class="xforms-deselected">

   <label for="my-new-select1$$e1">

   <input id="my-new-select1$$e1" type="radio" name="my-new-select1" value="orange"/>Orange

   </label>

   </span>

   </span>

   <img class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>

   <span class="xforms-help">My help</span>

   <span class="xforms-alert-inactive xforms-alert">My alert</span>

   <span class="xforms-hint">My hint</span>

</span>

NOTE: The layout of items has changed in June 2010:

Old layout:

<input id="my-new-select1$$e1" type="radio" name="my-new-select1" value="orange"/>

<label for="my-new-select1$$e1">Orange</label>

New layout:

<label for="my-new-select1$$e1">

<input id="my-new-select1$$e1" type="radio" name="my-new-select1" value="orange"/>Orange

</label>

The reason for the new layout is to improve the CSS styling of vertically aligned checkboxes and radio buttons.

Appearance "xxforms:tree"

[TODO]

Appearance "xxforms:menu"

[TODO]

xforms:output

Default

XForms:

<xforms:output id="my-new-output" ref=".">

    <xforms:label>My label</xforms:label>

    <xforms:hint>My hint</xforms:hint>

    <xforms:help>My help</xforms:help>

    <xforms:alert>My alert</xforms:alert>

</xforms:output>

Legacy HTML:

<xhtml:label class="xforms-label" id="my-old-output-label" for="my-old-output">My label</xhtml:label>

<xhtml:span id="my-old-output" class="xforms-control xforms-output xforms-invalid xforms-required xforms-required-filled xforms-type-NCName">Hello!</xhtml:span>

<xhtml:img id="my-old-output-help-image" class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>

<xhtml:label class="xforms-help" id="my-old-output-help" for="my-old-output">My help</xhtml:label>

<xhtml:label class="xforms-alert-active xforms-alert" id="my-old-output-alert" for="my-old-output">My alert</xhtml:label>

<xhtml:label class="xforms-hint" id="my-old-output-hint" for="my-old-output">My hint</xhtml:label>

New HTML:

<xhtml:span id="my-new-output" class="xforms-control xforms-output xforms-invalid xforms-required xforms-required-filled xforms-type-NCName">
    <xhtml:label class="xforms-label" for="my-new-output$$c">My label</xhtml:label>
    <xhtml:span id="my-new-output$$c" class="xforms-output-output">Hello!</xhtml:span>
    <xhtml:img class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>
    <xhtml:label class="xforms-help" for="my-new-output$$c">My help</xhtml:label>
    <xhtml:label class="xforms-alert-active xforms-alert" for="my-new-output$$c">My alert</xhtml:label>
    <xhtml:label class="xforms-hint" for="my-new-output$$c">My hint</xhtml:label>
</xhtml:span>

Appearance "xxforms:download"

[TODO]

Mediatype "image/*"

[TODO]

Mediatype "text/html"

[TODO]

xforms:group

Default

XForms:

<xforms:group id="my-new-group" ref=".">
<xforms:label>My label</xforms:label>
...
</xforms:group>

Legacy HTML:

<xhtml:label class="xforms-label" id="my-new-group-label" for="my-new-group">My label</xhtml:label>
<xhtml:span id="my-new-group" class="xforms-group xforms-invalid xforms-required">
...
</xhtml:span>
<xhtml:img id="my-new-group-help-image" class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>
<xhtml:label class="xforms-help" id="my-new-group-help" for="my-new-group">My help</xhtml:label>
<xhtml:label class="xforms-alert-active xforms-alert" id="my-new-group-alert" for="my-new-group">My alert</xhtml:label>
<xhtml:label class="xforms-hint" id="my-new-group-hint" for="my-new-group">My hint</xhtml:label>

New HTML:

<xhtml:span id="my-new-group" class="xforms-group xforms-invalid xforms-required">
    <xhtml:label class="xforms-label" for="my-new-group">My label</xhtml:label>
    ...
    <xhtml:img class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>
    <xhtml:label class="xforms-help" for="my-new-group$$c">My help</xhtml:label>
    <xhtml:label class="xforms-alert-active xforms-alert" for="my-new-group$$c">My alert</xhtml:label>
    <xhtml:label class="xforms-hint" for="my-new-group$$c">My hint</xhtml:label>
</xhtml:span>

Appearance "xxforms:internal"

XForms:

<xforms:group id="my-new-internal-group" ref="." appearance="xxforms:internal">
<xforms:label>My label</xforms:label>
...
</xforms:group>

Legacy HTML:

...

New HTML:

...

Appearance "xxforms:fieldset"

XForms:

<xforms:group id="my-new-fieldset-group" ref="." appearance="xxforms:fieldset">
<xforms:label>My label</xforms:label>
...
</xforms:group>

Legacy HTML:

<xhtml:fieldset id="my-new-fieldset-group" class="xforms-group xforms-group-appearance-xxforms-fieldset xforms-invalid xforms-required">
<xhtml:legend class="xforms-label">My label</xhtml:legend>
...
</xhtml:fieldset>
<xhtml:img id="my-new-fieldset-group-help-image" class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>
<xhtml:label class="xforms-help" id="my-new-fieldset-group-help" for="my-new-fieldset-group">My help</xhtml:label>
<xhtml:label class="xforms-alert-active xforms-alert" id="my-new-fieldset-group-alert" for="my-new-fieldset-group">My alert</xhtml:label>
<xhtml:label class="xforms-hint" id="my-new-fieldset-group-hint" for="my-new-fieldset-group">My hint</xhtml:label>

New HTML:

<xhtml:fieldset id="my-new-fieldset-group" class="xforms-group xforms-group-appearance-xxforms-fieldset xforms-invalid xforms-required">
    <xhtml:legend class="xforms-label">My label</xhtml:legend>
    ...
    <xhtml:img class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>
    <xhtml:label class="xforms-help" for="my-new-fieldset-group$$c">My help</xhtml:label>
    <xhtml:label class="xforms-alert-active xforms-alert" for="my-new-fieldset-group$$c">My alert</xhtml:label>
    <xhtml:label class="xforms-hint" for="my-new-fieldset-group$$c">My hint</xhtml:label>
</xhtml:fieldset>

Use between table elements

XForms:

<xforms:group id="my-new-table-grou" ref=".">
    <xforms:label>My label</xforms:label>
    <xhtml:tr>
        <xhtml:td>...</xhtml:td>
    </xhtml:tr>
</xforms:group>

Legacy HTML:

<xhtml:tr id="group-begin-my-new-table-group" class="xforms-group-begin-end xforms-invalid xforms-required"/>
<xhtml:tr class="xforms-invalid xforms-required">
<xhtml:td>...</xhtml:td>
</xhtml:tr>
<xhtml:tr id="group-end-my-new-table-group" class="xforms-group-begin-end"/>

New HTML:

xforms:trigger

Full

XForms:

<xforms:trigger id="my-new-trigger" ref=".">
    <xforms:label>My label</xforms:label>
    <xforms:hint>My hint</xforms:hint>
    <xforms:help>My help</xforms:help>
    <xforms:alert>My alert</xforms:alert>
</xforms:trigger>

Legacy HTML:

<xhtml:button id="my-old-trigger" class="xforms-control xforms-trigger xforms-invalid xforms-required xforms-type-NCName" title="My hint" type="button">My label</xhtml:button>

<xhtml:img id="my-old-trigger-help-image" class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>

<xhtml:label class="xforms-help" id="my-old-trigger-help" for="my-old-trigger">My help</xhtml:label>

New HTML:

<xhtml:span id="my-new-trigger" class="xforms-control xforms-trigger xforms-invalid xforms-required xforms-type-NCName">

    <xhtml:button id="my-new-trigger$$c" title="My hint" type="button">My label</xhtml:button>

    <xhtml:img class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>

    <xhtml:label class="xforms-help" for="my-new-trigger$$c">My help</xhtml:label>

</xhtml:span>

Appearance "minimal"

XForms:

<xforms:trigger id="my-new-minimal-trigger" ref="." appearance="minimal">

    <xforms:label>My label</xforms:label>

    <xforms:hint>My hint</xforms:hint>

    <xforms:help>My help</xforms:help>

    <xforms:alert>My alert</xforms:alert>

</xforms:trigger>

Legacy HTML:

<xhtml:a id="my-old-minimal-trigger" class="xforms-control xforms-trigger xforms-trigger-appearance-minimal xforms-invalid xforms-required xforms-type-NCName" title="My hint" href="#">My label</xhtml:a>

<xhtml:img id="my-old-minimal-trigger-help-image" class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>

<xhtml:label class="xforms-help" id="my-old-minimal-trigger-help" for="my-old-minimal-trigger">My help</xhtml:label>

New HTML:

<xhtml:span id="my-new-minimal-trigger" class="xforms-control xforms-trigger xforms-trigger-appearance-minimal xforms-invalid xforms-required xforms-type-NCName">
    <xhtml:a id="my-new-minimal-trigger$$c" title="My hint" href="#">My label</xhtml:a>
    <xhtml:img class="xforms-help-image" src="/ops/images/xforms/help.png" title="" alt=""/>
    <xhtml:label class="xforms-help" for="my-new-minimal-trigger$$c">My help</xhtml:label>
</xhtml:span>

Standalone LHHA elements

With the New HTML layhout, these elements simply point to the associated HTML control if any, or to the enclosing span:

<label for="total-units-output" id="total-units-output$l" class="xforms-label">Total Units:</label>

[TODO: how MIP classes are set]

	Orbeon Search