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"，被插入到輸出字串中。這是一個很好的例子，說明為什麼值不應該包含空格，只包含小寫字母和破折號。