XForms/只讀
< XForms
表單經常需要顯示使用者無法編輯的欄位。以下程式演示了此功能。
這在 XForms 中使用繫結和樣式表來完成。
可以使用單個繫結語句將單個欄位（或欄位組）標記為只讀。例如，假設你有一組與向 IT 部門遠端員工運送物資相關的欄位。賬單地址無法更改，只能更改物品的收貨人。
模型中的以下單行將使 BillToAddress 的所有子元素變為只讀
<xf:bind nodeset="/PurchaseOrders/BillToAddress" readonly="true()" />
請注意，由於 CSS 的原因，此繫結下的所有欄位都將被標記為只讀。這是你可能希望在應用程式中以邏輯方式對只讀資料元素進行分組的一個很好的理由。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Demonstration of Read-Only Binding</title>
<link rel="stylesheet" type="text/css" href="table-form.css" />
<xf:model>
<xf:instance xmlns="" src="PurchaseOrder.xml" />
<!-- the following line sets all the data input fields under this node to be read-only -->
<xf:bind nodeset="/PurchaseOrder/BillToAddress" readonly="true()" />
</xf:model>
</head>
<body>
<xf:group ref="/PurchaseOrder/BillToAddress">
<xf:label class="box-label">Billing Address :</xf:label>
<xf:input ref="OrganizationName">
<xf:label>Organization Name: </xf:label>
</xf:input>
<xf:input ref="LocationStreetFullText">
<xf:label>Street: </xf:label>
</xf:input>
<xf:input ref="LocationStreetFullText2">
<xf:label />
</xf:input>
<xf:input ref="LocationCityName">
<xf:label>City:</xf:label>
</xf:input>
<xf:input ref="LocationStateName">
<xf:label>State:</xf:label>
</xf:input>
<xf:input ref="LocationPostalID">
<xf:label>Postal Code:</xf:label>
</xf:input>
</xf:group>
<xf:group ref="/PurchaseOrder/ShipToAddress">
<xf:label class="box-label">Shipping Address :</xf:label>
<xf:input ref="PersonName">
<xf:label>Person Name: </xf:label>
</xf:input>
<xf:input ref="LocationStreetFullText">
<xf:label>Street: </xf:label>
</xf:input>
<xf:input ref="LocationStreetFullText2">
<xf:label />
</xf:input>
<xf:input ref="LocationCityName">
<xf:label>City:</xf:label>
</xf:input>
<xf:input ref="LocationStateName">
<xf:label>State:</xf:label>
</xf:input>
<xf:input ref="LocationPostalID">
<xf:label>Postal Code:</xf:label>
</xf:input>
</xf:group>
</body>
</html>
<PurchaseOrder xmlns="">
<BillToAddress>
<OrganizationName>MegaCorp IT Dept.</OrganizationName>
<LocationStreetFullText>123 Main St.</LocationStreetFullText>
<LocationStreetFullText2>Mailstop 47</LocationStreetFullText2>
<LocationCityName>Anytown</LocationCityName>
<LocationStateName>Minnesota</LocationStateName>
<LocationPostalID>55123</LocationPostalID>
</BillToAddress>
<ShipToAddress>
<PersonName>John Jones</PersonName>
<LocationStreetFullText>123 Main Street SE</LocationStreetFullText>
<LocationStreetFullText2>Apartment 123</LocationStreetFullText2>
<LocationCityName>Anytown</LocationCityName>
<LocationStateName>Minnesota</LocationStateName>
<LocationPostalID>55123</LocationPostalID>
</ShipToAddress>
</PurchaseOrder>
/* a stylesheet for tabular XForms input field alignment */
@namespace xf url("http://www.w3.org/2002/xforms");
/* give the input form labels and the fieldset legend a bold sans-serif font */
label {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: small;
}
xf|group {
border: black solid 2px;
padding: 5px;
width: 300px;
}
/* the labels are right-aligned in a 150px wide column */
xf|input xf|label {
width: 150px;
margin: 3px;
text-align: right;
}
/* the input values are left aligned */
xf|value {
text-align: left;
}
/* vertical area between input boxes */
input {
margin: .2em;
}
/* each input is a row in the group table */
xf|input {
display: table-row;
}
/* each label within an input is a cell in the input row */
xf|input xf|label {
display: table-cell;
}
/* each value (pseudo-element) is also a cell in the input row */
xf|input::value {
display: table-cell;
}