HTML 表单可以由 XML 文档支持吗？

Question

可以将 HTML 表单绑定到 XML 文档吗？

为了提供一些上下文，Adobe XFA 表单是为呈现为 PDF 表单而创建的 XML 文档。它们支持与我正在寻找的非常相似的 XML 绑定，但我不知道 HTML 表单中有任何类似的东西并寻求建议。

XFA 表单还可以定义绑定到其表单字段的 XML 文档的绑定。不需要定义模式 - 表单可以与 XML 数据合并，也可以根据表单中指定的绑定生成 XML 数据。

示例表单定义：

<subform layout="tb">
    <bind match="dataRef" ref="$.doc" />
    <field w="0.5in">
        <bind match="none" />
        <ui>
            <button />
        </ui>
        <caption>
            <value>Add</value>
        </caption>
        <event activity="click" name="event__click">
            <script contentType="application/x-javascript">
               this.resolveNode("itemList").instanceManager.addInstance();
            </script>
        <event>
    </field>
    <subform layout="tb" name="itemList">
        <bind match="dataRef" ref="$.item[*]">
        <occur min="1" max="-1" />
        <field w="2in">
            <bind match="dataRef" ref="$.name" />
            <ui>
                <textEdit />
            </ui>
            <caption>
                <value>Name</value>
            </caption>
        </field>
    </subform>
</subform>

如果表单在没有数据的情况下呈现，它看起来类似于：

如果表单与以下输入数据合并：

<doc>
   <item>
       <name>item1</name>
   </item>
   <item>
       <name>item2</name>
   </item>
   <item>
       <name>item3</name>
   </item>
</doc>

它会呈现类似于：

您可能会在表单定义代码中注意到，Adobe XFA 表单使用自己的 XML 语言和称为 SOM 表达式的表达式语法。第一个绑定$.doc 绑定到顶级根节点名称doc。

下一个绑定 $.item[*] 嵌套在 subform 元素中，并且与 $.doc 绑定相关。

子表单元素是一个容器，类似于 HTML div 元素。

子表单绑定到根doc 元素下的item 元素。 [*] 语法意味着子表单将针对 xml 文档中的每个 item 元素重复。

子表单元素中的occur 元素进一步限定了可以发生的实例数。 min=1表示即使合并到表单中的数据中没有item元素，也会自动生成一个。 max=-1 表示项目实例的数量没有限制。

field 元素绑定到$.name。这意味着它的值将更新（或创建）当前item 下的name 元素。

表单中的“添加”按钮会创建新实例，Adobe Reader 有一个内置的 Javascript 引擎和它自己的 API 来管理持久化回绑定到表单的 XML 数据的表单实例。

当然，也可以从保存的 PDF 表单中提取 XML 数据。

XFA 表单中还有更多功能，例如条件绑定，但我很好奇 HTML 表单中是否存在类似的东西，也许是一些可以将表单链接到 XML 文档并以类似方式定位它们的库.

XPATH 将是理想的替代 Adob​​e SOM 表达式语法。此外，最好从表单发布 XML，而不是 HTML 表单默认执行的名称/值对。

Answer 1

我猜你要找的是XSLT。这使您可以将一种格式良好的文档转换为另一种。如果这是您想要的，那么here already 有一个很好的答案。

Answer 2

有很多方法可以将 XML 转换为 HTML 表单。这个问题听起来很像工具推荐，所以唯一要做的就是列出选项：

方法一： 该站点引导用户粘贴 XML 文档，然后将其转换为表单。它已经过时了，因为上次更改日志是在 2006 年。

http://www.datamech.com/XMLForm/

方法二： 您可以自己编写脚本，将XML > JSON 转换为JSON > HTMLForm。

1. 将 XML 转换为 JSON 工具：
   • xml-js（NPM 模块）
   • xml2json（更受欢迎，但在 Windows 中安装有问题）
   • Blog tutorial（手编代码）
2. 将 JSON 转换为表单工具：
   • json-forms（这可能需要您遵循特定的架构。）
   • Write the code yourself!

Answer 3

如果其他人偶然发现了同样的问题，您可以使用 xslt 找到您正在寻找的内容（从 xml 文档创建 html）。

将这篇孤独的帖子视为您访问 xslt 的起点。如果您以前从未处理过它，可能会有点难以消化。不要害怕。每一段旅程都从第一步开始。 （等等等等）

从 xml 开始，以及你想要创建的 html 的一些想法

所以 - 对于您的示例 XML：

<doc>
    <item name="Item1" />
    <item name="Item2" />
    <item name="Item3" />
</doc>

假设您要创建一个相当简单的 HTML 代码段：

<form class="tb">
    <div><a class="btn btn-primary">Add</a></div>
    <ul>
        <li><label>Name</label><input type="text" class="form-control" value="Item1" /></li>
        <li><label>Name</label><input type="text" class="form-control" value="Item2" /></li>
        <li><label>Name</label><input type="text" class="form-control" value="Item3" /></li>
    </ul>
</form>

接下来，构建你的 Xslt

一开始有一些工作，还有一些语法需要学习。但是，如果我们切入正题，这就是您最终会得到的 xslt。这只是文字。只是另一个您可以硬编码、嵌入、存储在文件中、从 url 获取等的文件。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
<xsl:output method="html" />
<xsl:template match="doc">
<form class="tb">
    <div><a class="btn btn-primary">Add</a></div>
    <ul>
        <xsl:for-each select="item">
           <li><label>Name</label><input type="text" class="form-control" value="<xsl:value-of select="@name"/>" /></li>
        </xsl:for-each>
        <xsl:if test="count(item)=0">
           <li><label>Name</label><input type="text" class="form-control" value="" /></li>
        </xsl:if>
    </ul>
</form>
</xsl:template>

一些 Xslt 注释

从上面可以看出，您设置了一个 BASE 文档节点来循环使用 <xsl:template match="doc"> 标记。如果您的 xml 文档有一个 doc 节点，则包含模板中的 html。如果没有doc 节点，则跳过它。

您可以将您的 xslt 分解为不同的模板 - 并将它们也包含在主模板中。挺好看的。

在上面的示例中，我们使用<xsl:for-each> 标记循环遍历您的item 节点，我们甚至还有一个“备用” html，如果有零item 标记（即包围的空输入标记），它就会显示经过 <xsl:if test="count(item)=0">)。

那里有一些非常棒的 xslt 引用，但我喜欢来自 Microsoft 的引用，因为我可以使用下面的 c# 代码从特定的 xslt 模板和我的 xml 文档中获取 html。

最后，把它们放在一起

一旦你有了你的xml（上图）和你的xslt（上图），你就可以使用它们来生成一个你想要的长度和复杂的html字符串。这是我们用来从 xslt 和非常复杂的 xml 文档生成大量抵押合同的方法的几乎逐字复制。我发誓 - 它速度极快，每天为我们生成数千页 html。

private string GetHtmlFromXslt(string xml, string xslt) {
    XslCompiledTransform transform = new XslCompiledTransform();
    using (XmlReader reader = XmlReader.Create(new StringReader(xslt))) {
        transform.Load(reader);
    }
    StringWriter results = new StringWriter();
    using (XmlReader reader = XmlReader.Create(new StringReader(xml))) {
        transform.Transform(reader, null, results);
    }
    return results.ToString();
}

这是一个 .net 核心项目文件，仅引用 System.Xml 和 System.Xml.Xsl - 这两者都是 System.Xml 中的标准。

升C！？布莱赫！啊！ OP说JAVASCRIPT。天哪...

我知道你是一个 JavaScript 人。有一些工具可以（完全）做同样的事情here 和here。

我只是没有使用这些库，因为我们所有的 xml 都是 (a) 私有的并且 (b) 位于服务器上。但是 - 我查看了代码，它们都遵循相同的方法 - 一个 xml 文件和一个 xslt 文件，结合大约 8-10 行实际代码并生成一个可爱的 html 婴儿。

所以。而已。没有工具。没有第三方插件。没有疯狂的 json 东西。

祝你好运！迫不及待地想看看你们这些疯狂的孩子们创造了什么！