Styling forms

You can use the Theme editor to apply styles to forms. Apart from more general properties that you can use for styling, MCS provides some form-specific properties. Some properties apply to the form as a whole; others apply to individual controls on the form.

You can use the Theme editor to apply styles to forms. Apart from more general properties that you can use for styling, MCS provides some form-specific properties. Some properties apply to the form as a whole; others apply to individual controls on the form.

The properties allow you to specify how action type and list type input controls are displayed, and the names of the image policies to be used when an action element has an image. You can define the size and row count of text input controls, and style selection lists.

Note:

You can use the in-range, out-of-range, required, optional, valid and invalid pseudo-classes to style XForms elements based on their validation status. Refer to the topic entitled Specifying data types and validation criteria for more information.

Form fragment link styles

If your form is designed to use fragments, you can style the text on links between fragments. First you set up a class style, for example a font and a color. Then, in the form fragment layout Attribute view, you can assign the style using the Styleclass control for the next and previous Link Text.

Selection styles

The mcs-selection-list-style options for 'default', 'controls', 'circular-list', and 'menu' allow you to define display properties for selection elements in your form. The element names differ for XDIME and XDIME 2. A value of 'default' results in the device default behavior.

When you specify '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. So for a single select element, each of the options on the screen is rendered as radio button.

Defining the 'circular-list' on a single element renders a single option at a time. If the browser supports it, the user can navigate up or down through a list, presented as a continuous loop, equivalent to the Openwave 'spin' style. If the selection list is a multiple select list then the selection list is displayed in the default way for the device as if 'default' had been used.

When a 'menu' style is specified on either type of element, a popup menu is displayed if the device supports it.

Styling submit buttons

The mcs-form-action-style property set for the xforms:submit or xfaction element specifies how the submit action control should be displayed. For example, setting the value of the property to 'image' allows you to use an image as a submit button. The mcs-form-action-image property must point to an image policy or URI of the image to use.

Related topics