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.

Screen Image

XForms Select1 with appearance set to full

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.

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms Radio Button Usng Select1 appearance="full"</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <ColorCode/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
       <p>XForms Radio Button Usng Select1 appearance="full"</p>
        <xf:select1 ref="ColorCode" appearance="full" >  
            <xf:item>
                <xf:label>Red</xf:label>
                <xf:value>red</xf:value> 
            </xf:item>
            <xf:item>
                <xf:label>Orange</xf:label>
                <xf:value>orange</xf:value>
            </xf:item>
            <xf:item>
                <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"/>
   </body>
</html>

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

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"

<xf:select1 ref="my-element" appearance="full">
    <xf:label>Color: </xf:label>
    <div class="horiz">
      <xf:item>
          <xf:label>Red</xf:label>
          <xf:value>red</xf:value>
       </xf:item>
       <xf:item>
           <xf:label>Green</xf:label>
           <xf:value>green</xf:value>
       </xf:item>
       <xf:item>
           <xf:label>Red</xf:label>
           <xf:value>blue</xf:value>
       </xf:item>
     </div>
</xf:select1>

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.

<xf:select1 ref="my-element">
   <xf:itemset nodeset="instance('codes')/data/item">
      <xf:label ref="label"/>
      <xf:value ref="value"/>
   </xf:itemset>
</xf:select1>

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.

Next Page: Select1 drop list | Previous Page: Checkbox
Home: XForms