XForms/Select

XForms Checkbox Buttons

There is just a small difference between using xf:select1 for radio buttons and the xf:select for multiple selection check boxes. In this example instead of round circles there are squares and you can check multiple squares. Note that the output contains a string with spaces between the values. This is why screen labels can have spaces but values should only contain dashes between the values.

Note that in this program we use appearance="full" attribute.

Screen Image

XForms select with multiple selections and appearance="full"

XForms Application

Load XForms Application

Note that as you select multiple items a space-delimited list of items appears in the output. This is a good example of why you do not want to put any spaces in a selection item value tag.

Sample Program

<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
>
   <head>
      <title>XForms Radio Button Using xf:Select appearance="full"</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <MyCode type="xs:string"/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
       <p>XForms Radio Button Using Select appearance="full"</p>
        <xf:select ref="MyCode" selection="closed" 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:select>
       Output: <xf:output ref="/data/MyCode"/>
   </body>
</html>

Using the Appearance Attribute

There are many ways to change the amount of screen area used to display a selection list with many items. The XForms specification suggests that the user can control this area using a simple attribute called appearance. The three suggested values of appearance are:

 appearance="full"
 appearance="compact"
 appearance="minimal"

Where:

  "full": all choices should be rendered at all times.
  "compact": a fixed number of choices should be rendered, with scrolling facilities as needed
  "minimal": a minimum number of choices should be rendered, with a facility to temporarily render additional choices

Many systems simply use a CSS style sheet to change this layout.

W3C Specification on the User Interface Options for Selecting Many

Testing

You should see the output change as you check different boxes. If you check multiple boxes, the result is a string with spaces separating the checked values.

Note that the XForms "value" in lowercase, not the "label", is inserted into the output string. This is an excellent example of why values should not contain spaces, just lowercase letters and dashes.

Next Page: Select Multi-Column | Previous Page: Open Selection
Home: XForms