Form properties

Purpose

Specifies the appearance and positioning of input and other objects used in forms.

Controls

Properties

mcs-break-after

Specifies whether the group ends a form fragment. Applies to xforms:group and widget:wizard elements. The default value is 'never'.

Option	Description
always	Indicates that the group ends a form fragment, and another fragment begins immediately.
never	Indicates that the group does not end a form fragment.
inherit	The value of the property should be inherited from the parent element.

mcs-columns

Specifies the width (in characters) of a text input control. The default value is '20'.

Option	Description
<integer>	Specifies the number of characters of the text input control.
inherit	The value of the property should be inherited from the parent element.

mcs-form-action-image

Specifies an image policy or URI to be used when a form action has the mcs-form-action-style property set to 'image'. The default value is 'none'.

Option	Description
none	No image will be displayed.
url('URI')	The URI of the image to display.
mcs-component-url('URI')	The URI of the image policy to use.
inherit	The value of the property should be inherited from the parent element.

mcs-form-action-style

Specifies how form action controls should be displayed. The default is usually a button. For WML devices a link, which uses the anchor tag, can be specified instead of a button. The default value is 'default'.

Option	Description
default	Indicates that the default browser representation should be used.
image	Form action controls should be displayed as images.
link	Form action controls should be displayed as links.
inherit	The value of the property should be inherited from the parent element.

mcs-http-method-hint

The HTTP method to use. The default value is 'get'.

Option	Description
get	Indicates that the HTTP GET method should be used.
post	Indicates that the HTTP POST method should be used.
inherit	The value of the property should be inherited from the parent element.

mcs-image

Specifies an image policy or URI to be used next to, or on items such as an anchor. The default value is 'none'.

Option	Description
none	No image will be displayed.
url('URI')	The URI of the image to display.
mcs-component-url('URI')	The URI of the image policy to use.
inherit	The value of the property should be inherited from the parent element.

mcs-input-format

Defines the pattern to be used for validation. The default value is 'none'.

Option	Description
none	No validation pattern.
<string>	Defines the validation pattern. Refer to Validating form input for more information.
inherit	The value of the property should be inherited from the parent element.

mcs-rows

Defines the number of rows in a text input control. The default value is '1'.

Option	Description
<integer>	Specifies the number of rows in the text input control.
inherit	The value of the property should be inherited from the parent element.

mcs-selection-list-option-layout

Sets the order of the captions and controls in the display if both occupy the same pane. The default value is 'caption-first'.

Option	Description
caption-first	Indicates that captions should be displayed first.
control-first	Indicates that controls should be displayed first.
inherit	The value of the property should be inherited from the parent element.

mcs-selection-list-style

Specifies the type of the selection list input controls. The default value is 'default'.

Option	Description
circular-list	Specifies that the selection list should be displayed as a spin control on browsers that support this type of control. If the device does not support the use of spin controls, then the selection list is displayed in the default way for the device.
controls	The selection list is displayed as separate captions and controls. The controls will behave either like radio buttons, or checkboxes depending on whether the selection list allows only a single value, or multiple values to be selected at once.
default	The selection list should displayed the default way for the device.
menu	Specifies that the selection list should be displayed as a popup menu on browsers that support this type of control. If the device does not support the use of popup menus, then the selection list is displayed in the default way for the device.
inherit	The value of the property should be inherited from the parent element.

mcs-selection-list-trigger

Specifies the event that triggers display of a selection list. The default value is 'normal'.

Option	Description
focus	The selection list will display when the field has the focus.
normal	The normal device specific behavior is used.
select	The selection list will display when the field is selected.
inherit	The value of the property should be inherited from the parent element.

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
  xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Form properties</title>
    <style type="text/css">
      .fragment {
        mcs-break-after: always;
      }
      .fragment::before::mcs-reset {
        content: "Reset";
      }
      .fragment::before::mcs-previous {
        content: "&lt;&lt;";
      }
      .fragment::after::mcs-next {
        content: "&gt;&gt;";
      } 
      .drop_down {
        mcs-selection-list-style: menu;
      }
      .select1 {
        mcs-selection-list-style: controls;
        mcs-selection-list-option-layout: control-first;
        mcs-selection-list-trigger: focus; 
      }
      .list {
        mcs-selection-list-style: menu;
        mcs-rows: 2;
       
      }
      .select {
        mcs-selection-list-style: controls;
        mcs-selection-list-option-layout: caption-first;
      }
      .validate {
        mcs-columns: 50;
        mcs-validation-error-action: message;
        mcs-input-format: 'M:Xxxx*x';
      }
      xforms|submit {
        mcs-form-action-image: mcs-component-url('/images/search-submit.mimg');
        mcs-form-action-style: image;
        mcs-http-method-hint: get;
      }
    </style>
    <xforms:model id="demoSelect">
      <xforms:instance>
        <si:instance>
          <si:item name="input"/>
          <si:item name="drop_down"/>
          <si:item name="select1"/>
          <si:item name="select">Item1,Item3</si:item>
          <si:item name="list"/>
          <si:item name="firstName3"/>
          <si:item name="lastName3"/>
        </si:instance>
      </xforms:instance>
      <xforms:submission action="#" id="submit3"/>
    </xforms:model>
  </head>
  <body>
    <h4>Form properties</h4>
    <xforms:group class="fragment">
      <xforms:input model="demoSelect" ref="input" class="validate">
        <xforms:label>Label:</xforms:label>
      </xforms:input>
    </xforms:group>
    <xforms:group class="fragment">
      <xforms:select1 model="demoSelect" ref="drop_down" class="drop_down">
        <xforms:label>Label</xforms:label>
        <xforms:item>
          <xforms:label>Item1</xforms:label>
          <xforms:value>Item1</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label>Item2</xforms:label>
          <xforms:value>Item2</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label>Item3</xforms:label>
          <xforms:value>Item3</xforms:value>
        </xforms:item>
      </xforms:select1>
      <xforms:select1 model="demoSelect" ref="select1" class="select1">
        <xforms:label>Label</xforms:label>
        <xforms:item>
          <xforms:label>Item1</xforms:label>
          <xforms:value>Item1</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label>Item2</xforms:label>
          <xforms:value>Item2</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label>Item3</xforms:label>
          <xforms:value>Item3</xforms:value>
        </xforms:item>
      </xforms:select1>
    </xforms:group>
    <xforms:group class="fragment">
      <xforms:select model="demoSelect" ref="list" class="list">
        <xforms:label>Label</xforms:label>
        <xforms:item>
          <xforms:label>Item1</xforms:label>
          <xforms:value>Item1</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label>Item2</xforms:label>
          <xforms:value>Item2</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label>Item3</xforms:label>
          <xforms:value>Item3</xforms:value>
        </xforms:item>
      </xforms:select>
      <xforms:select model="demoSelect" ref="select" class="select">
        <xforms:label>Label</xforms:label>
        <xforms:item>
          <xforms:label>Item1</xforms:label>
          <xforms:value>Item1</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label>Item2</xforms:label>
          <xforms:value>Item2</xforms:value>
        </xforms:item>
        <xforms:item>
          <xforms:label>Item3</xforms:label>
          <xforms:value>Item3</xforms:value>
        </xforms:item>
      </xforms:select>
      <xforms:submit submission="submit3">
        <xforms:label>Send</xforms:label>
      </xforms:submit>
    </xforms:group>
  </body>
</html>

Related topics

• Style property categories
• Styling forms