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   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   and within that it must have a   and an optional  . The value is the string that will be inserted into the data element that is referenced using the   property. The   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.

  XForms Radio Button Usng Select1 appearance="full"   Red red   Orange orange   <xf:label>Yellow</xf:label> <xf:value>yellow</xf:value> </xf:item> <xf:item> <xf:label>Green</xf:label> <xf:value>green</xf:value> </xf:item> <xf:item> <xf:label>Blue</xf:label> <xf:value>blue</xf:value> </xf:item> </xf:select1> Output: <xf: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.



In your CSS do the following:

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

Discussion
You can always change a radio button to a drop down list by just removing the   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.

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.