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↑Jump back a section
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.
<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"
"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.
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.