XForms 入门简介，第 1 部分: 新的 Web 表单标准

最新推荐文章于 2024-04-27 09:57:54 发布

meiqingxin

最新推荐文章于 2024-04-27 09:57:54 发布

阅读量466

点赞数

分类专栏： XForms

XForms 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

为何使用 XForms？

在讨论 XForms 之前，首先简要回顾一下表单的历史。

在万维网历史的早期，使用简单的文本输入表单向运行在服务器上的 CGI 程序发送请求，为那些勇于向未知领域探索的先驱者增加了一些交互性。随着 Web 日趋成熟，网站上提供的数据输入表单越来越复杂。

现在很容易找到极其复杂的表单，特别是在电子商务网站或论坛上。这些可能是运行在服务器上的 PHP 或 Java™ 代码的前端，也可能是在浏览器中运行的 JavaScript，用 Ajax 技术把结果发送给服务器。

不幸的是，HTML 表单是由混合了表示和内容的元素创建的。从混合了文档结构和格式元素的基于表示的松散的 HTML 转变为用 CSS 样式化的清晰的 XHTML ，需要一种方式把表单数据及行为与表示分离开来。

进入浏览器

现在已讨论了数年的 XForms 标准得到了不少应用程序的支持（包括 Firefox、Mozilla 以及 Seamonkey，但需要安装 XForms 扩展），并将成为 HTML 表单的 XML 替代品。

其他流行的 Web 浏览器通过插件支持 XForms（比如 Internet Explorer 6 的 formsPlayer，参考资料中提供了下载链接）。任何支持标准的浏览器还可以使用 FormFaces，一种在客户系统上对 XForms 和标准 HTML 控件进行来回转换的纯 JavaScript XForms 实现。此外，一些重要的产品如 IBM Workplace Forms 也实现了 XForms。

表单数据模型（数据提交时的行为、初始值等）和表示分离开来。同一种表示可以根据样式表或者适合用户浏览器的需求而做不同的解释。比方说，移动电话上的浏览器可能采用不同的技术显示控件；对移动电话用户而言，菜单和列表比弹出式选择框更方便。

回页首

XForms 是如何工作的

我们来看一个简单的 HTML 表单，它向本地机器上假想的查询引擎提交一个搜索字符串（如清单 1 所示）。要注意，这里实际上是 XHTML 而非 HTML 4.01，XForms 需要有效的 XML 文档（比如 XHTML），很快您就会看到 XForms 版。此外，可能还需要修改 URL 以便在您的环境中能正常工作。

清单 1. 简单 HTML 表单（simple.xhtml）

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Form</title>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.
</p>

<form action="http://localhost/imaginary-search-engine" method="get">
    <p>
    Find: <input type="text" name="query"/>
    <input type="submit" value="Search"/>
    </p>
</form>
</body>
</html>

为了便于查看，清单 1 给出的是标准的、100% 有效的 XHTML Strict。<form> 部分用粗体突出显示。

在目前典型的 Web 浏览器中呈现时，这段 XHTML 看起来很熟悉，可能有点原始（图 1）。

图 1. Firefox 呈现的简单 HTML 表单

在图 1 中的字段输入一些文本并单击按钮之后，编码成 URL 的数据被发送到假想的搜索引擎：http://localhost/imaginary-search-engine?query=whatever-you-entered。

清单 2 显示了 XForms 版，不同之处已经标了出来。

清单 2. 简单 XForms 表单

<?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 v2</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>

这里有三处主要的变化：

“xf:”名称空间用于增加 XForms 规范中的元素。
<head> 中增加了 <xf:model> 元素，该元素声明了一个 <xf:submission>。这样就把动作（假想的搜索引擎）绑定到了 get 方法，并将其命名为 submit-search 以便后面使用。
表单的表示元素（文本输入字段 <xf:input> 和提交按钮 <xf:submit>）现在变成了单纯的表示元素，规定表单字段出现在呈现页面中的何处以及如何出现。它们引用了前面声明的 <xf:model> 元素。

XForms 版的显示结果如图 2 所示。后面再介绍如何安装 Firefox 的 XForms 扩展。

图 2. Firefox 呈现的简单 XForms 表单

表单看起来完全相同！使用 XForms 而不是传统的 HTML 表单不旦没有任何损失，而且还获得了使用 XML 数据模型的全部好处。

回页首

设置查看 XForms 的环境

如果下载了例子文件（请参阅下载部分），应该注意到浏览器不能正确显示 XForms 版（如图 3 所示）。

图 3. 没有 XForms 支持的浏览器中显示的简单 XForms 页面

除非您喜欢的 Web 浏览器提供了内置的 XForms 支持，否则必须使用一种 XForms 实现（请参阅参考资料中列出的 XForms Web 站点）。我们来看看如何安装一种最便捷的实现 —— Mozilla 扩展。由于它适用于现有版本的 Mozilla、Firefox 和 Seamonkey，甚至连安装或者切换浏览器都不需要！后面还要说明如何安装 Internet Explorer 6 插件。

为 Firefox 增加 XForms 扩展

在 Firefox 中打开 Mozilla XForms Project 页面（请参阅参考资料）。单击可以在 Latest Release 标题下找到的下载页面链接。

XForms Project 的下载页面会警告说该插件还不能用于最终用户，然后就给会出真正的下载页面的链接。单击它，然后单击 Install Now 链接。

图 4. Firefox 关于安装扩展的标准警告

Firefox 显示了一个警告框（如图 4 所示），单击 Install Now 按钮下载并安装 XForms 扩展。重新启动 Firefox 来激活它（如图 5 所示）。

图 5. 重新启动来激活新安装的扩展

重新启动浏览器后，就可以打开前面看到的简单 XForms 的例子，这一次才会真正看到正确呈现的 XForms 元素！

为 Internet Explorer 6 添加 XForms 插件

从 formsPlayer 网页（参见参考资料中的链接）单击 Download fP for free 链接访问注册页。输入电子邮件地址和其他数据，单击 Install formsPlayer 链接下载并安装该插件。

IE 加载插件时会在这个 ActiveX 控件的 URL 下面显示一条警告信息。单击该警告，然后选择 Install ActiveX Control。IE 就会下载并安装 formsPlayer。弹出 IE 的安全警告时单击 Install 继续安装。

formsPlayer 安装后就会重定向到一个页面，其中包含几个例子的链接。查看其中的任何一个来检查安装是否成功。

回页首

一个表单，多种表示

由于 XForms 文档中数据模型和表示分开，用户浏览器可以使用最合理、最有效的方式呈现表单元素。

比方说，如果要求用户从列表中选择一项，Web 浏览器可以用标准的单选按钮组来表示列表。而在移动电话的浏览器上，同一个列表可以呈现为一个弹出菜单，因为它更容易使用电话的方向轮来浏览。

不需要任何特殊的 CSS 或者 JavaScript 来检查用户的浏览器（这是很多网站容易犯的一个错误），它是由浏览器的 XForms 实现自动处理的。普通的 HTML 表单很难实现这种适应性，因为数据和表示紧密地联系在一起。

由于 XForms 模型是 XML，也可使用 XSLT 或 JavaScript（通过 DOM）之类的技术用所喜欢的任何接口来表示此模型，比如为没有 XForms 支持的用户提供普通 HTML 或 XHTML，或者专有的 GUI 。

与 XML 的紧密集成

XForms 文档必须是有效的 XML（如 XHTML）。数据模型的实例（用于提供默认值等，请参阅本系列的后续文章）是 XML 文档。甚至可以从位于用户机器或者服务器上的外部 XML 文件中加载数据模型实例。

这种与 XML 的紧密结合使得很容易把 XForms 数据和其他支持 XML 输入输出的技术结合起来，比如数据库，而不需要在数据库和表示给用户的表单之间增加脚本。

离线保存表单和延后提交

XForms 为浏览器带来的最有趣的特性之一是将表单内容（字段中的所有数据，以及存储在数据模型型中的“隐藏”数据）保存到文件中。通过新增的 <xf:submission> 元素和 put 方法，可以将这些数据作为 XML 文件保存到本地文件系统或者服务器上。以后可以重新加载进来并在原来的地方继续，不需要使用任何额外的脚本或者数据库访问。

这里还说明了 XForms 的另一个优点，一个表单可以有任意多个提交动作（如清单 3 所示）。在 HTML 中每个表单只能有一个动作。

清单 3. 为表单增加数据存储和加载

<?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 v3</title>
<xf:model>
    <xf:instance>
        <data xmlns="">
            <query>Enter your search string here.</query>
        </data>
    </xf:instance>
    <xf:bind nodeset="query" required="true()"/>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
    <xf:submission action="file:///tmp/XFormsQuery.xml"
        method="put" id="save-search" replace="none"/>
    <xf:submission action="file:///tmp/XFormsQuery.xml"
        method="get" id="load-search" replace="instance"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.  
You can also save your search string for later.
</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>
<p>
<xf:submit 
submission="save-search"><xf:label>Save</xf:label></xf:submit>
<xf:submit 
submission="load-search"><xf:label>Load</xf:label></xf:submit>
</p>
</body>
</html>

和上一个 XForms 试验的区别同样用粗体字标了出来。我们来详细讨论一下这些变化。

首先增加了一个数据模型实例（在 <xf:instance> 元素中）。其中包括数据的根（被适当地命名为 <data>，要注意这里需要空的 xmlns 属性），这个元素中又包含表单所需要的数据，表单后面 <xf:input> 元素引用的 <query>。该 <query> 元素中的数据是默认的查询字符串，当被呈现时，显示于 <xf:input> 元素之中。

然后，有一个 <xf:bind> 元素，它使 <query> 数据变成必须的；如果 <query> 为空，<xf:submit> 按钮将什么也不做。

最后，为 <xf:model> 增加了两个新的 <xf:submission> 动作，从而能够将数据保存到文件（通过 put 方法）然后从文件中加载进来而不需要重新加载整个页面（使用 get 方法，replace="instance" 属性只重新加载数据模型实例）。

页面的下方增加了两个 <xf:submit> 元素，用于保存和加载数据。

图 6 显示了 Firefox 中的呈现结果。要注意 Find 字段中填充了包含在数据模型实例中的默认值以及新增加的 Save 和 Load 按钮。

图 6. 改进的新表单

现在如果单击 Save 按钮，在 /tmp 目录中将看到一个名为 XFormsQuery.xml 的文件，其中包含数据模型实例（如清单 4 所示）。为了测试 Loading 功能，修改 Find 字符串后单击 Load，将看到 Find 字符串又改成了原来的那个，它是从 /tmp 中的 XFormsQuery.xml 文件加载的。

清单 4. 保存的数据模型实例

chrish@dhcp1 [531]$ cat XFormsQuery.xml 
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns:xf="http://www.w3.org/2002/xforms">
            <query>Enter your search string here.</query>
        </data>

控制输出有很多方法，不过这里都没有使用。在任何情况下，Save 和 Load 函数都能工作，不需要任何脚本。

回页首