本文介绍了XForm作为W3C的候选标准，它实现了页面表现与数据模型的分离。通过示例展示了如何定义XForm Instance和数据结构，并探讨了XForms如何通过和元素提供更灵活的表单输入，支持多种表示类型，如单选按钮、检查框和下拉菜单。XForms的这一特性使得表单设计更加灵活且易于维护。
1、XForm——下一代浏览器语言，已经成为W3C的候选标准
2、将页面表现与模型分离——在XForm中需要预先定义XForm Instance，即表单的数据结构，页面表现部分用XPath对模型进行引用。如：
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms/cr">
<head>
<xforms:model>
<xforms:submission action="http://www.example.com" method="post" />
<xforms:instance xmlns="">
<logininfo>
<username></username>
<password></password>
</logininfo>
</xforms:instance>
</xforms:model>
</head>
<body>
<h1>Enter your Username and Password</h1>
<p>
<xforms:input ref="/logininfo/username">
<xforms:label>Username: </xforms:label>
</xforms:input>
<xforms:input ref="/logininfo/password">
<xforms:label >Password: </xforms:label>
</xforms:input>
</p>
<xforms:submit>
<xforms:label>Log in</xforms:label>
</xforms:submit>
</body>
</html>3、在 HTML 页面中，多项选择 表单可以使用：单选按钮、检查框、选择框和下拉菜单。所有这些都很有用，但是因为 HTML 的结构方式，表单一旦编码完成就再也不能倒回去了：单选按钮永远是单选按钮，下拉菜单永远是下拉菜单。
XForms 试图通过建立
select和select1元素校正这个问题。这些元素和 HTML 中的select元素一样，也带有可以选择的列表。但是与 HTML 不同的是，标记中不包含表示，XForms 允许开发人员简单地通过一个属性指定要使用的表示类型：每个select或select1元素都有自己的 label，而每个单独的item都有自己的label和value。其中的value就是真正提交给表单的信息。同样要注意，这些元素的 XML 结构是相同的，其中只有
appearance值发生变化。appearance的值可以是：
full（根据使用的是select或select1，类似于检查框或者单选按钮）。minimal（类似于列表框）。compact（类似于下拉菜单）。如：
...
<h1>Soaps</h1>
<p>
<xforms:input ref="order/soaps/item/qty">
<xforms:label>Qty: </xforms:label>
</xforms:input>
<xforms:select1 ref="order/soaps/item/flavor" appearance="minimal">
<xforms:label>Flavor</xforms:label>
<xforms:item>
<xforms:label>Plain</xforms:label>
<xforms:value>P</xforms:value>
</xforms:item>
<xforms:item>
<xforms:label>Four Sage</xforms:label>
<xforms:value>FS</xforms:value>
</xforms:item>
<xforms:item>
<xforms:label>Sweet Grass</xforms:label>
<xforms:value>SG</xforms:value>
</xforms:item>
</xforms:select1>
<xforms:input ref="order/soaps/item/unitprice">
<xforms:label>Unit price: </xforms:label>
</xforms:input>
<xforms:input ref="order/soaps/item/totalprice">
<xforms:label>Total: </xforms:label>
</xforms:input>
</p>
扫一扫
2149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
