XForms 是下一代的基于 Web 的数据处理技术。它用 XML 数据模型和表示元素代替了传统的 HTML 表单。本系列文章有三个部分，介绍了 XForms 及其功能，内容包括基本的 XForms 模型和表单、各种不同类型的控件、基本和高级表单提交技术。本文是此系列文章的第二部分，重点讨论如何使用各种控件创建基于 XForms 的表单以及如何创建数据模型。
简介
XForms 的发展势头迅猛，常见浏览器使用扩展或插件来支持它，此外还有 IBM® Workplace Forms 之类的技术（请参见参考资料部分）。它的灵活和强大对 Web 开发人员很有吸引力，内存占用少和客户端处理又让系统管理员十分感兴趣。W3C 正在审查 XForms 1.1 工作草案文档（1.0 是正式的 Internet 推荐标准，和 XHTML、PNG 以及 CSS 具有同等的地位），IBM 目前带头致力于把那些竞争的基于 XML 的表单标准与 XForms 的特性和功能结合起来。
本文说明了如何使用各种控件创建基于 XForms 的表单、如何建立数据模型以及不同类型的基本提交动作。第 1 部分讨论了各种浏览器以及为了查看和与 XForms 文档交互所需要的插件，本文不再赘述。如果阅读过上一部分，或者已经为使用的浏览器安装了插件，可以直接下载本文中的代码查看示例 XForms。
回页首
创建基本的表单
本系列的第 1 部分中已经创建了一个非常简单的表单，其中包括一个文本输入字段和一个提交按钮，可以向本地主机上假想的搜索引擎发送请求（如图 1 所示）。这类表单仍然很常见，尽管它通常不是孤立在单独的网页上。
图 1. 非常简单的 Web 表单
非常简单的 Web 表单
这是个很好的起点，我们再来看看 XHTML 和 XForms 代码（清单 1）。XForms 的专用代码用粗体字显示，很容易看到，文档的其他部分是纯粹的 XHTML 1.1 Strict。
清单 1. 起点
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Search Form</title>
<xf:model>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>
<p>
Enter a search string, then click the Search button.
</p>
<p>
<xf:input ref="query"><xf:label>Find:</xf:label></xf:input>
<xf:submit
submission="submit-search"><xf:label>Search</xf:label>
</xf:submit>
</p>
</body>
</html>
增加 XForms 名称空间（使用 xf: 前缀）后，已经有了一个 <xf:model> 块，它声明了名为 submit-search 的提交动作，可以使用标准的 HTTP GET 方法提交指定的搜索字符串。<body>, <xf:input> 和 <xf:submit> 元素中的内容构成了简单的表单，包括输入字段和提交按钮，后者触发 <xf:model> 中声明的动作。
如果愿意的话，可以直接试一试，<xf:input> 和 <xf:submit> 元素的距离、先后或位置没有任何特殊要求，它们可以出现在文档 <body> 的任何地方。表单的输入部件表示与其数据模型分离开来。
由于将使用该文档作为本文中其他 XForms 文档的出发点，这里还提供了 XMLSchema 和 xml-events 的 XML 名称空间声明，XForms 利用这两个辅助标准分别提供标准数据类型和表单事件。
回页首
创建一个简单的模型
XForms 的吸引人的原因之一是其将数据模型从表示中分离出来的方法。再看看清单 1，模型（<xf:model> 块中）本身存在于 XHTML 文档的 <head> 中。
当然，除了一个提交动作之外这个模型完全是空的。它不含任何数据！
不过，先别忙。系统（在这里就是支持 XForms 的浏览器）为您创建了一个（如清单 2 所示），其中包含表单引用的数据字段。
清单 2. 简单表单默认的完整 <xf:model>
<xf:model>
<xf:instance>
<data xmlns="">
<query/>
</data>
</xf:instance>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
显式地包含这种形式的实例为表单额外增加了一层验证；表单控件（比如这个简单表单中的文本字段和提交按钮）所引用的字段必须存在于模型实例之中。引用不存在的实例元素的控件要么不能呈现，要么生成错误消息（取决于 XForms 实现）。
回页首
默认值
如果显式地声明数据实例，可用它来定义默认值，只要将默认值放在字段元素中即可。清单 3 中的模型和清单 2 相同，只不过为查询提供了一个有帮助的默认值（如图 2 所示）。
清单 3. 在 <xf:instance> 中直接包含默认值
<xf:model>
<xf:instance>
<data xmlns="">
<query>One or more search keywords.</query>
</data>
</xf:instance>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
图 2. 在模型实例中包含帮助性的提示或者有意义的默认值
在模型实例中包含帮助性的提示或者有意义的默认值
回页首
隐藏值和隐藏控件
用户触发提交动作时，XForms 发送完整的 XML 文档（数据模型实例）。创建模型实例时可以包含需要的任何数据。
因而不再需要在表单中使用隐藏控件。如果有些数据需要发送到服务器上的表单处理程序，但是又不必显示给用户（或者需要保持不变），那么可以将其添加到模型实例中（如清单 4 所示）。
清单 4. 在实例而不是表单中包含隐藏数据或者常量
<xf:model>
<xf:instance>
<data xmlns="">
<query>One or more search keywords.</query>
<engine-version>2</engine-version>
<results>25</results>
</data>
</xf:instance>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
该例中，<engine-version> 和 <results> 永远不会被表单控件引用，也不会被用户看到（除非用户查看源代码）。这些数据组作为查询的一部分发送给 imaginary-search-engine，imaginary-search-engine 可以利用它们选择搜索引擎和设置返回的结果数。
回页首
加载实例
如果数据模型很大，或者需要向用户隐藏某些数据，可以从外部 XML 文件加载实例（如清单 5 所示）。
清单 5. XML 文件中的简单模型实例
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="">
<query>One or more search keywords.</query>
<engine-version>2</engine-version>
<results>25</results>
</data>
只要让 <xf:instance> 引用具体的实例 URL（如清单 6 所示）就可以了。
清单 6. 引用外部模型实例
<xf:model>
<xf:instance src="search-instance.xml"/>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
由于 <xf:instance> 的 src 属性可以从任何 URL 加载 XML 数据，可以用 XForms 编辑或原样表示任何数据。多数 XForms 实现都要求源文档的 URL 在同一个域中，但部分 XForms 实现也允许您配置一个可信任的站点列表。
回页首
XML 数据中的引用
加载 XML 文件作为数据实例时，有可能无法控制 XML；数据也许是数据库或者其他某个应用程序提供的。如何引用 XML 中的某个元素呢？到目前为止，您还只看到了引用与数据模型匹配的元素。
XForms 表单元素使用的数据模型引用实际上是 XPath 表达式，因此可用 XPath 表达式来引用模型中的任何元素。清单 7 显示了一个扩展后的实例，其中包括一些嵌套元素。
清单 7. 更复杂的数据模型实例
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="">
<query>One or more search keywords.</query>
<engine-version>2</engine-version>
<results>25</results>
<some>
<additional>
<info status="important">Nested info.</info>
</additional>
</some>
</data>
可用 XPath 表达式 some/additional/info（或者 /data/some/additional/info，如果使用绝对路径的话）来访问 <info> 元素，或者用 some/additional/info/@status 访问 <info> 元素的 status 属性。清单 8 显示了可用于编辑该数据文件的表单，在这里假设 Web 服务器支持 PUT 方法（可能需要某种身份验证来保护这种功能）。
清单 8. 编辑更复杂的 XML 数据
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Search Form</title>
<xf:model>
<xf:instance src="http://localhost/~chrish/data.xml"/>
<xf:submission action="http://localhost/~chrish/data.xml"
method="put" id="submit-edit"/>
</xf:model>
</head>
<body>
<h1>XPath</h1>
<p>
Change the info and status!
</p>
<p>
<xf:input ref="some/additional/info"><xf:label>New
info:</xf:label></xf:input><br/>
<xf:input ref="some/additional/info/@status"><xf:label>New
status:</xf:label></xf:input>
<xf:submit
submission="submit-edit"><xf:label>Save</xf:label></xf:submit>
</p>
</body>
</html>
无论在客户机还是服务器上，对 XForms 来说 XPath 都是一种很好的辅助技术；一旦掌握了 XPath，就可以在表单和表单处理程序中使用它。
回页首
控件的类型
到目前为止，我们只用到了 <xf:input> 和 <xf:submit> 控件，但是 XForms 还提供了很多其他的表单控件。我们来看看这些控件及其在 HTML 中的等价物。
<xf:group>（HTML <fieldset>）用于对表单中的控件进行逻辑分组。清单 9 说明了如何使用 <xf:group> 为三个输入字段加标签。
清单 9. 分组控件
<xf:group>
<xf:label>Personal Information</xf:label>
<p><xf:input ref="lastname"><xf:label>Last
name:</xf:label></xf:input></p>
<p><xf:input ref="firstname"><xf:label>First
name:</xf:label></xf:input></p>
<p><xf:input
ref="address"><xf:label>Address:</xf:label></xf:input></p>
</xf:group>
<xf:input>（HTML <input type="text">）显示一个标准的文本输入字段，我们已经多次用到了它。
<xf:secret>（HTML <input type="password">）显示一个文本输入字段，输入的内容隐藏起来，适用于输入口令或者其他保密数据。<xf:secret> 与文档源代码中的 <xf:input> 完全相同。
<xf:select appearance="full">（HTML <input type="checkbox">）为用户提供一个或多个可选项，允许多选。清单 10 给出了一个例子。
清单 10. 多选控件
<xf:select ref="potato-chips" appearance="full">
<xf:label>Favourite flavours:</xf:label>
<xf:item><xf:label>Dill
Pickle</xf:label><xf:value>dill</xf:value></xf:item>
<xf:item><xf:label>Ketchup</xf:label><xf:value>ketchup<
/xf:value></xf:item>
<xf:item><xf:label>Plain</xf:label><xf:value>plain<
/xf:value></xf:item>
<xf:item><xf:label>Salt &
Vinegar</xf:label><xf:value>snv</xf:value></xf:item>
</xf:select>
<xf:select appearance="minimal">（HTML <select multiple>）用于从菜单或列表中选择一个或多个项，对 appearance 属性使用 minimal 可以在更小的区域中呈现项目列表。
<xf:select1>（HTML <input type="radio">）类似于 <xf:select>，但是只允许用户从列表中选择一项。它可以呈现为一组单选按钮、可滚动的选择区域或者菜单，使用 appearance 属性告诉呈现引擎应该呈现为什么。
<xf:select1> 和嵌套的 <xf:choices>（HTML <select> 和嵌套的 <optgroup>）允许用户从分组列表中选择一项。<xf:choices> 子列表的标签呈现在列表中，但是不能选择。清单 11 显示了一个饮料列表让用户选择，用户也可以从非酒精和酒精饮料中选择。
清单 11. 从多个分组中选择一项
<xf:select1 ref="drink">
<xf:label>Drink:</xf:label>
<xf:item><xf:label>None</xf:label><xf:value>none
</xf:value></xf:item>
<xf:choices>
<xf:label>Soft drinks</xf:label>
<xf:item><xf:label>Juice</xf:label><xf:value>juice
</xf:value></xf:item>
<xf:item><xf:label>Milk</xf:label><xf:value>milk
</xf:value></xf:item>
<xf:item><xf:label>Soda</xf:label><xf:value>soda
</xf:value></xf:item>
<xf:item><xf:label>Water</xf:label><xf:value>water<
/xf:value></xf:item>
</xf:choices>
<xf:choices>
<xf:label>Wine and beer</xf:label>
<xf:item><xf:label>Beer</xf:label><xf:value>beer<
/xf:value></xf:item>
<xf:item><xf:label>Red
wine</xf:label><xf:value>redwine</xf:value></xf:item>
<xf:item><xf:label>White
wine</xf:label><xf:value>whitewine</xf:value></xf:item>
</xf:choices>
</xf:select1>
<xf:textarea>（HTML <textarea>）显示一个多行文本输入字段，如果默认值不合适可使用 CSS 样式控制区域的大小。
<xf:trigger>（HTML <input type="button">）呈现一个动作按钮。按钮没有预定义的行为，因此需要为其附加一个动作，按钮被激活时将触发该动作。清单 12 中的 <xf:trigger> 激活一个 JavaScript™ 函数，名为 calculate()。
清单 12. 调用 JavaScript 函数 calculate() 的按钮
<xf:trigger>
<xf:label>Calculate</xf:label>
<script ev:event="DOMActivate" type="text/javascript">
calculate();
</script>
</xf:trigger>
要注意，这里第一次使用 ev: 名称空间，虽然在前面的基本表单的示例中早已声明。它用于引用标准 XML Events 属性 ev:event，它告诉触发器什么时候激活脚本。
<xf:trigger>（HTML <input type="image">）也可用于为表单添加图像按钮，只需在 <xf:label> 元素中插入 <img> 元素或者使用 CSS 将图像作为元素的背景即可。
如果正在把某些 HTML 表单升级到 XForms 表单，可以使用 <xf:trigger>（HTML <input type="reset">）增加 Reset 按钮（升级规范可能要求“全部功能”，包括无用的 Reset 按钮）。清单 13 说明了如何创建一个表单复位按钮，但是不要在新表单中使用它：最终用户永远不会有意识地单击 Reset 按钮。
清单 13. 实现无用的历史遗留物：Reset 按钮
<xf:trigger>
<xf:label>Reset</xf:label>
<xf:reset ev:event="DOMActivate"/>
</xf:trigger>
<xf:upload>（HTML <intput type="file">）用于实现文件上传。和其他控件相比这个更复杂一点，因为它需要一种特殊的 <xf:submission> 方法：form-data-post（如清单 14 所示）。
清单 14. 使用 <xf:submission> 方法上传文件
<xf:model>
...
<xf:submission action="http://localhost/upload-engine"
method="form-data-post" id="upload"/>
</xf:model>
表单下方的 <xf:upload> 元素看起来类似于 <xf:submit> 或 <xf:input>（如清单 15 所示）。
清单 15. 使用 <xf:upload> 上传文件
<xf:upload ref="upload"><xf:label>Upload a
file:</xf:label></xf:upload>
另外，还有一些 HTML 中不存在的控件。
<xf:output> 允许在文档中增加一些文本值。比如清单 7 中向数据模型增加了 <results> 元素。虽然用户不能修改它，但是可以通过编辑模型来改变它（特别是如果使用外部 XML 文件中定义的模型的话）。可以使用 <xf:output> 元素向用户显示这些信息（如清单 16 所示）。
清单 16. 使用 <xf:output> 显示模型中的数据
<p>
Your search will return a maximum of
<xf:output ref="results"> matches.
</p>
<xf:range> 为用户显示一个范围选择条（slide）或者适合于获得受约束值的其他控件。比方说，可以用三个 range 让用户输入红/绿/蓝中的一个作为突出显示搜索结果的颜色（如清单 17 所示）。
清单 17. 使用范围输入控件
<p>
Keyword highlight:<br/>
<xf:range ref="r" start="0" end="100" step="1"><xf:label>Red</xf:label></xf:range><br/>
<xf:range ref="g" start="0" end="100" step="1"><xf:label>Green</xf:label></xf:range><br/>
<xf:range ref="b" start="0" end="100" step="1"><xf:label>Blue</xf:label></xf:range>
</p>
现在介绍了各种 XForms 输入控件（和一个输出控件），下面来看看各种不同的提交动作。
回页首
基本提交动作
XForms 标准支持通常的 HTML 表单提交方法，但是 HTML 需要 method 和 enctype 来指定提交方法，而 XForms 只需要一个 method。
<xf:submission method="form-data-post" action="url"/> 和 HTML 中的 <form method="post" enctype="multipart/form-data"> 相同，可以按同样的方法在收到 URL 时被处理。
<xf:submission method="get" action="url"/> 和 HTML 中的 <form method="get"> 相同。
<xf:submission method="urlencoded-post" action="url"> 和 HTML 中的 <form method="post" enctype="application/x-www-form-urlencoded"> 相同。
除了和 HTML 兼容的提交方法之外，XForms 还定义了两种新的提交动作，method="post" 和 method="put"。
method="post" 动作将表单数据模型实例作为 XML 文档 post 给接收 URL，适用于 XSLT 或者其他 XML 处理技术。客户机不需要制定编码或者转义，服务器上也不需要特殊处理（除了标准 XML 解析以外）。
method="put" 动作将表单数据模型实例作为 XML 文档 put 给目标 URL。如果服务器支持 PUT 方法，并且允许对目标 URL 使用该方法，该 XML 文档将代替目标 URL 上的文件。可利用该方法现场编辑“任何”XML 文档，只需要通过和后来 put 动作要用到的相同的 URL 加载数据模型实例即可。
纯 XML post 和 put 方法是 XForms 目标的一部分，为数据处理带来了一定程度的灵活性。
回页首
结束语
XForms 提供了一致的、清晰的基于 XML 的数据模型，可以在文档或者页面处理期间加载的外部文件中直接包含任意的 XML。该标准支持现在所有 HTML 表单控件的等价物，并增加了另外两个有用的控件用于范围选择和显示数据。基本 XForms 提交动作包含了原来的 HTML 的提交方法，并增加了两种基于 XML 的方法。本文全面介绍了这些控件，您可以以此为基础开始自己的 XForms 体验。
XForms 学习交流群:38587873/. 欢迎大家入群讨论。
简介
XForms 的发展势头迅猛，常见浏览器使用扩展或插件来支持它，此外还有 IBM® Workplace Forms 之类的技术（请参见参考资料部分）。它的灵活和强大对 Web 开发人员很有吸引力，内存占用少和客户端处理又让系统管理员十分感兴趣。W3C 正在审查 XForms 1.1 工作草案文档（1.0 是正式的 Internet 推荐标准，和 XHTML、PNG 以及 CSS 具有同等的地位），IBM 目前带头致力于把那些竞争的基于 XML 的表单标准与 XForms 的特性和功能结合起来。
本文说明了如何使用各种控件创建基于 XForms 的表单、如何建立数据模型以及不同类型的基本提交动作。第 1 部分讨论了各种浏览器以及为了查看和与 XForms 文档交互所需要的插件，本文不再赘述。如果阅读过上一部分，或者已经为使用的浏览器安装了插件，可以直接下载本文中的代码查看示例 XForms。
回页首
创建基本的表单
本系列的第 1 部分中已经创建了一个非常简单的表单，其中包括一个文本输入字段和一个提交按钮，可以向本地主机上假想的搜索引擎发送请求（如图 1 所示）。这类表单仍然很常见，尽管它通常不是孤立在单独的网页上。
图 1. 非常简单的 Web 表单
非常简单的 Web 表单
这是个很好的起点，我们再来看看 XHTML 和 XForms 代码（清单 1）。XForms 的专用代码用粗体字显示，很容易看到，文档的其他部分是纯粹的 XHTML 1.1 Strict。
清单 1. 起点
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Search Form</title>
<xf:model>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>
<p>
Enter a search string, then click the Search button.
</p>
<p>
<xf:input ref="query"><xf:label>Find:</xf:label></xf:input>
<xf:submit
submission="submit-search"><xf:label>Search</xf:label>
</xf:submit>
</p>
</body>
</html>
增加 XForms 名称空间（使用 xf: 前缀）后，已经有了一个 <xf:model> 块，它声明了名为 submit-search 的提交动作，可以使用标准的 HTTP GET 方法提交指定的搜索字符串。<body>, <xf:input> 和 <xf:submit> 元素中的内容构成了简单的表单，包括输入字段和提交按钮，后者触发 <xf:model> 中声明的动作。
如果愿意的话，可以直接试一试，<xf:input> 和 <xf:submit> 元素的距离、先后或位置没有任何特殊要求，它们可以出现在文档 <body> 的任何地方。表单的输入部件表示与其数据模型分离开来。
由于将使用该文档作为本文中其他 XForms 文档的出发点，这里还提供了 XMLSchema 和 xml-events 的 XML 名称空间声明，XForms 利用这两个辅助标准分别提供标准数据类型和表单事件。
回页首
创建一个简单的模型
XForms 的吸引人的原因之一是其将数据模型从表示中分离出来的方法。再看看清单 1，模型（<xf:model> 块中）本身存在于 XHTML 文档的 <head> 中。
当然，除了一个提交动作之外这个模型完全是空的。它不含任何数据！
不过，先别忙。系统（在这里就是支持 XForms 的浏览器）为您创建了一个（如清单 2 所示），其中包含表单引用的数据字段。
清单 2. 简单表单默认的完整 <xf:model>
<xf:model>
<xf:instance>
<data xmlns="">
<query/>
</data>
</xf:instance>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
显式地包含这种形式的实例为表单额外增加了一层验证；表单控件（比如这个简单表单中的文本字段和提交按钮）所引用的字段必须存在于模型实例之中。引用不存在的实例元素的控件要么不能呈现，要么生成错误消息（取决于 XForms 实现）。
回页首
默认值
如果显式地声明数据实例，可用它来定义默认值，只要将默认值放在字段元素中即可。清单 3 中的模型和清单 2 相同，只不过为查询提供了一个有帮助的默认值（如图 2 所示）。
清单 3. 在 <xf:instance> 中直接包含默认值
<xf:model>
<xf:instance>
<data xmlns="">
<query>One or more search keywords.</query>
</data>
</xf:instance>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
图 2. 在模型实例中包含帮助性的提示或者有意义的默认值
在模型实例中包含帮助性的提示或者有意义的默认值
回页首
隐藏值和隐藏控件
用户触发提交动作时，XForms 发送完整的 XML 文档（数据模型实例）。创建模型实例时可以包含需要的任何数据。
因而不再需要在表单中使用隐藏控件。如果有些数据需要发送到服务器上的表单处理程序，但是又不必显示给用户（或者需要保持不变），那么可以将其添加到模型实例中（如清单 4 所示）。
清单 4. 在实例而不是表单中包含隐藏数据或者常量
<xf:model>
<xf:instance>
<data xmlns="">
<query>One or more search keywords.</query>
<engine-version>2</engine-version>
<results>25</results>
</data>
</xf:instance>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
该例中，<engine-version> 和 <results> 永远不会被表单控件引用，也不会被用户看到（除非用户查看源代码）。这些数据组作为查询的一部分发送给 imaginary-search-engine，imaginary-search-engine 可以利用它们选择搜索引擎和设置返回的结果数。
回页首
加载实例
如果数据模型很大，或者需要向用户隐藏某些数据，可以从外部 XML 文件加载实例（如清单 5 所示）。
清单 5. XML 文件中的简单模型实例
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="">
<query>One or more search keywords.</query>
<engine-version>2</engine-version>
<results>25</results>
</data>
只要让 <xf:instance> 引用具体的实例 URL（如清单 6 所示）就可以了。
清单 6. 引用外部模型实例
<xf:model>
<xf:instance src="search-instance.xml"/>
<xf:submission action="http://localhost/imaginary-search-engine"
method="get" id="submit-search"/>
</xf:model>
由于 <xf:instance> 的 src 属性可以从任何 URL 加载 XML 数据，可以用 XForms 编辑或原样表示任何数据。多数 XForms 实现都要求源文档的 URL 在同一个域中，但部分 XForms 实现也允许您配置一个可信任的站点列表。
回页首
XML 数据中的引用
加载 XML 文件作为数据实例时，有可能无法控制 XML；数据也许是数据库或者其他某个应用程序提供的。如何引用 XML 中的某个元素呢？到目前为止，您还只看到了引用与数据模型匹配的元素。
XForms 表单元素使用的数据模型引用实际上是 XPath 表达式，因此可用 XPath 表达式来引用模型中的任何元素。清单 7 显示了一个扩展后的实例，其中包括一些嵌套元素。
清单 7. 更复杂的数据模型实例
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="">
<query>One or more search keywords.</query>
<engine-version>2</engine-version>
<results>25</results>
<some>
<additional>
<info status="important">Nested info.</info>
</additional>
</some>
</data>
可用 XPath 表达式 some/additional/info（或者 /data/some/additional/info，如果使用绝对路径的话）来访问 <info> 元素，或者用 some/additional/info/@status 访问 <info> 元素的 status 属性。清单 8 显示了可用于编辑该数据文件的表单，在这里假设 Web 服务器支持 PUT 方法（可能需要某种身份验证来保护这种功能）。
清单 8. 编辑更复杂的 XML 数据
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Search Form</title>
<xf:model>
<xf:instance src="http://localhost/~chrish/data.xml"/>
<xf:submission action="http://localhost/~chrish/data.xml"
method="put" id="submit-edit"/>
</xf:model>
</head>
<body>
<h1>XPath</h1>
<p>
Change the info and status!
</p>
<p>
<xf:input ref="some/additional/info"><xf:label>New
info:</xf:label></xf:input><br/>
<xf:input ref="some/additional/info/@status"><xf:label>New
status:</xf:label></xf:input>
<xf:submit
submission="submit-edit"><xf:label>Save</xf:label></xf:submit>
</p>
</body>
</html>
无论在客户机还是服务器上，对 XForms 来说 XPath 都是一种很好的辅助技术；一旦掌握了 XPath，就可以在表单和表单处理程序中使用它。
回页首
控件的类型
到目前为止，我们只用到了 <xf:input> 和 <xf:submit> 控件，但是 XForms 还提供了很多其他的表单控件。我们来看看这些控件及其在 HTML 中的等价物。
<xf:group>（HTML <fieldset>）用于对表单中的控件进行逻辑分组。清单 9 说明了如何使用 <xf:group> 为三个输入字段加标签。
清单 9. 分组控件
<xf:group>
<xf:label>Personal Information</xf:label>
<p><xf:input ref="lastname"><xf:label>Last
name:</xf:label></xf:input></p>
<p><xf:input ref="firstname"><xf:label>First
name:</xf:label></xf:input></p>
<p><xf:input
ref="address"><xf:label>Address:</xf:label></xf:input></p>
</xf:group>
<xf:input>（HTML <input type="text">）显示一个标准的文本输入字段，我们已经多次用到了它。
<xf:secret>（HTML <input type="password">）显示一个文本输入字段，输入的内容隐藏起来，适用于输入口令或者其他保密数据。<xf:secret> 与文档源代码中的 <xf:input> 完全相同。
<xf:select appearance="full">（HTML <input type="checkbox">）为用户提供一个或多个可选项，允许多选。清单 10 给出了一个例子。
清单 10. 多选控件
<xf:select ref="potato-chips" appearance="full">
<xf:label>Favourite flavours:</xf:label>
<xf:item><xf:label>Dill
Pickle</xf:label><xf:value>dill</xf:value></xf:item>
<xf:item><xf:label>Ketchup</xf:label><xf:value>ketchup<
/xf:value></xf:item>
<xf:item><xf:label>Plain</xf:label><xf:value>plain<
/xf:value></xf:item>
<xf:item><xf:label>Salt &
Vinegar</xf:label><xf:value>snv</xf:value></xf:item>
</xf:select>
<xf:select appearance="minimal">（HTML <select multiple>）用于从菜单或列表中选择一个或多个项，对 appearance 属性使用 minimal 可以在更小的区域中呈现项目列表。
<xf:select1>（HTML <input type="radio">）类似于 <xf:select>，但是只允许用户从列表中选择一项。它可以呈现为一组单选按钮、可滚动的选择区域或者菜单，使用 appearance 属性告诉呈现引擎应该呈现为什么。
<xf:select1> 和嵌套的 <xf:choices>（HTML <select> 和嵌套的 <optgroup>）允许用户从分组列表中选择一项。<xf:choices> 子列表的标签呈现在列表中，但是不能选择。清单 11 显示了一个饮料列表让用户选择，用户也可以从非酒精和酒精饮料中选择。
清单 11. 从多个分组中选择一项
<xf:select1 ref="drink">
<xf:label>Drink:</xf:label>
<xf:item><xf:label>None</xf:label><xf:value>none
</xf:value></xf:item>
<xf:choices>
<xf:label>Soft drinks</xf:label>
<xf:item><xf:label>Juice</xf:label><xf:value>juice
</xf:value></xf:item>
<xf:item><xf:label>Milk</xf:label><xf:value>milk
</xf:value></xf:item>
<xf:item><xf:label>Soda</xf:label><xf:value>soda
</xf:value></xf:item>
<xf:item><xf:label>Water</xf:label><xf:value>water<
/xf:value></xf:item>
</xf:choices>
<xf:choices>
<xf:label>Wine and beer</xf:label>
<xf:item><xf:label>Beer</xf:label><xf:value>beer<
/xf:value></xf:item>
<xf:item><xf:label>Red
wine</xf:label><xf:value>redwine</xf:value></xf:item>
<xf:item><xf:label>White
wine</xf:label><xf:value>whitewine</xf:value></xf:item>
</xf:choices>
</xf:select1>
<xf:textarea>（HTML <textarea>）显示一个多行文本输入字段，如果默认值不合适可使用 CSS 样式控制区域的大小。
<xf:trigger>（HTML <input type="button">）呈现一个动作按钮。按钮没有预定义的行为，因此需要为其附加一个动作，按钮被激活时将触发该动作。清单 12 中的 <xf:trigger> 激活一个 JavaScript™ 函数，名为 calculate()。
清单 12. 调用 JavaScript 函数 calculate() 的按钮
<xf:trigger>
<xf:label>Calculate</xf:label>
<script ev:event="DOMActivate" type="text/javascript">
calculate();
</script>
</xf:trigger>
要注意，这里第一次使用 ev: 名称空间，虽然在前面的基本表单的示例中早已声明。它用于引用标准 XML Events 属性 ev:event，它告诉触发器什么时候激活脚本。
<xf:trigger>（HTML <input type="image">）也可用于为表单添加图像按钮，只需在 <xf:label> 元素中插入 <img> 元素或者使用 CSS 将图像作为元素的背景即可。
如果正在把某些 HTML 表单升级到 XForms 表单，可以使用 <xf:trigger>（HTML <input type="reset">）增加 Reset 按钮（升级规范可能要求“全部功能”，包括无用的 Reset 按钮）。清单 13 说明了如何创建一个表单复位按钮，但是不要在新表单中使用它：最终用户永远不会有意识地单击 Reset 按钮。
清单 13. 实现无用的历史遗留物：Reset 按钮
<xf:trigger>
<xf:label>Reset</xf:label>
<xf:reset ev:event="DOMActivate"/>
</xf:trigger>
<xf:upload>（HTML <intput type="file">）用于实现文件上传。和其他控件相比这个更复杂一点，因为它需要一种特殊的 <xf:submission> 方法：form-data-post（如清单 14 所示）。
清单 14. 使用 <xf:submission> 方法上传文件
<xf:model>
...
<xf:submission action="http://localhost/upload-engine"
method="form-data-post" id="upload"/>
</xf:model>
表单下方的 <xf:upload> 元素看起来类似于 <xf:submit> 或 <xf:input>（如清单 15 所示）。
清单 15. 使用 <xf:upload> 上传文件
<xf:upload ref="upload"><xf:label>Upload a
file:</xf:label></xf:upload>
另外，还有一些 HTML 中不存在的控件。
<xf:output> 允许在文档中增加一些文本值。比如清单 7 中向数据模型增加了 <results> 元素。虽然用户不能修改它，但是可以通过编辑模型来改变它（特别是如果使用外部 XML 文件中定义的模型的话）。可以使用 <xf:output> 元素向用户显示这些信息（如清单 16 所示）。
清单 16. 使用 <xf:output> 显示模型中的数据
<p>
Your search will return a maximum of
<xf:output ref="results"> matches.
</p>
<xf:range> 为用户显示一个范围选择条（slide）或者适合于获得受约束值的其他控件。比方说，可以用三个 range 让用户输入红/绿/蓝中的一个作为突出显示搜索结果的颜色（如清单 17 所示）。
清单 17. 使用范围输入控件
<p>
Keyword highlight:<br/>
<xf:range ref="r" start="0" end="100" step="1"><xf:label>Red</xf:label></xf:range><br/>
<xf:range ref="g" start="0" end="100" step="1"><xf:label>Green</xf:label></xf:range><br/>
<xf:range ref="b" start="0" end="100" step="1"><xf:label>Blue</xf:label></xf:range>
</p>
现在介绍了各种 XForms 输入控件（和一个输出控件），下面来看看各种不同的提交动作。
回页首
基本提交动作
XForms 标准支持通常的 HTML 表单提交方法，但是 HTML 需要 method 和 enctype 来指定提交方法，而 XForms 只需要一个 method。
<xf:submission method="form-data-post" action="url"/> 和 HTML 中的 <form method="post" enctype="multipart/form-data"> 相同，可以按同样的方法在收到 URL 时被处理。
<xf:submission method="get" action="url"/> 和 HTML 中的 <form method="get"> 相同。
<xf:submission method="urlencoded-post" action="url"> 和 HTML 中的 <form method="post" enctype="application/x-www-form-urlencoded"> 相同。
除了和 HTML 兼容的提交方法之外，XForms 还定义了两种新的提交动作，method="post" 和 method="put"。
method="post" 动作将表单数据模型实例作为 XML 文档 post 给接收 URL，适用于 XSLT 或者其他 XML 处理技术。客户机不需要制定编码或者转义，服务器上也不需要特殊处理（除了标准 XML 解析以外）。
method="put" 动作将表单数据模型实例作为 XML 文档 put 给目标 URL。如果服务器支持 PUT 方法，并且允许对目标 URL 使用该方法，该 XML 文档将代替目标 URL 上的文件。可利用该方法现场编辑“任何”XML 文档，只需要通过和后来 put 动作要用到的相同的 URL 加载数据模型实例即可。
纯 XML post 和 put 方法是 XForms 目标的一部分，为数据处理带来了一定程度的灵活性。
回页首
结束语
XForms 提供了一致的、清晰的基于 XML 的数据模型，可以在文档或者页面处理期间加载的外部文件中直接包含任意的 XML。该标准支持现在所有 HTML 表单控件的等价物，并增加了另外两个有用的控件用于范围选择和显示数据。基本 XForms 提交动作包含了原来的 HTML 的提交方法，并增加了两种基于 XML 的方法。本文全面介绍了这些控件，您可以以此为基础开始自己的 XForms 体验。
XForms 学习交流群:38587873/. 欢迎大家入群讨论。
扫一扫
1618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
