XForms, Select1

Motivation

You want an input control that allows a user to select one and only one item from a list of possible items. You have enough room on the form to display all the possible values. You would also like what the user sees and what is placed in the instance to be different.

Method

Any time you would like the user to make a single selection from a list of possible options you can use the XForms select1 control. There are two variations of this, one to display all the values (also known as a radio-button) and one that presents a drop-down list and thus takes up less screen area.

Each item on the list of possible choices must have an item and within that it must have a value and an optional label. The value is the string that will be inserted into the data element that is referenced using the ref property. The ref property points to a data element in your model.

Link to Working XForms Example

Select1 Radio Buttons

Note that the lower-case value will be displayed under the select1 control to show you how the select1 control is changing the model. Only the labels are shown to the user.

Example Program

In the example below, the instance variable MyCode inside MyModel will be set to the value selected by the radio buttons control.

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">;

XForms Radio Button Usng Select1 appearance="full"

xmlns="">

XForms Radio Button Usng Select1 appearance="full"

ref="ColorCode" appearance="full" >

Red
red

Orange
orange

Yellow
yellow

Green
green

Blue
blue

Output: ref="ColorCode"/>

Testing

You should see all the possible values when you use a full appearance. Each time you click on one of the radio buttons, the value of MyCode in the model will be updated and the output should automatically be updated. Note that the value is displayed (in lowercase), not the label.

Changing the Orientation to Horizontal

You can change the radio button to use a horizontal layout by applying float:left style to all the item elements.

Horizontal Radio Button (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

In your CSS do the following:

.horiz xf|item {
float: left;
}

In your body wrap all of the xf:item elements in a div with a class="horiz"

ref="my-element" appearance="full">
Color:
class="horiz">

Red
red

Green
green

Red
blue

Discussion

You can always change a radio button to a drop down list by just removing the appearance="full" attribute from the select1 element.

You can also use an XPath expression to display labels and values from the model using the xf:itemset element.

ref="my-element">
nodeset="instance('codes')/data/item">
ref="label"/>
ref="value"/>

See the other examples for examples of this.

Acknowledgments

The question about horizontal layout was posted on the mozilla.dev.tech.xforms mailing list in April of 2008 and the solution was provided by Aaron from IBM.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.