XForms/Select
< XForms
使用 xf:select1 用于单选按钮和 xf:select 用于多选复选框之间只有一点小小的区别。在这个例子中，不是圆形圆圈，而是方块，你可以选中多个方块。请注意，输出包含一个带有空格分隔的字符串。这就是为什么屏幕标签可以有空格，但值应该只包含破折号分隔的值。
请注意，在这个程序中，我们使用 appearance="full" 属性。
请注意，当您选择多个项目时，输出中会显示一个以空格分隔的项目列表。这是一个很好的例子，说明为什么您不想在选择项目值标记中放置任何空格。
<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>
有很多方法可以更改用于显示包含多个项目的选定列表的屏幕区域的大小。XForms 规范建议用户可以使用一个称为 appearance 的简单属性来控制此区域。appearance 的三个建议值是
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
许多系统简单地使用 CSS 样式表来更改此布局。
您应该看到输出在您选中不同的复选框时发生变化。如果您选中多个复选框，结果将是一个用空格分隔选中值的字符串。
请注意，XForms 中的 "value" 小写，而不是 "label"，被插入到输出字符串中。这是一个很好的例子，说明为什么值不应该包含空格，只包含小写字母和破折号。