初识XForm

最新推荐文章于 2022-09-27 20:49:28 发布

jason_hisoft

最新推荐文章于 2022-09-27 20:49:28 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： input upload html output 浏览器数据结构

本文链接：https://blog.youkuaiyun.com/jason_hisoft/article/details/593005

XForms作为W3C的候选标准，旨在改进网页表单的灵活性与功能性。通过将表单数据与表现分离，XForms允许开发者定义数据结构，并使用XPath引用。此外，XForms引入了select和select1元素，提供了更丰富的输入选项，例如多级菜单、范围滑块等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XFORM—— 下一代浏览器语言

1、XForm——下一代浏览器语言，已经成为W 3C 的候选标准

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

1、多级菜单

XForms 的现有实现还不支持这种特性，但是它已经存在于语言之中，当完成后将在产品实现中得到支持。不过目前要实现这一点，您可以使用 Choices 编写表单：

...
<xforms:select ref="order/belt/colors" appearance="compact">
<xforms:label>Choose up to four colors</xforms:label>
<xforms:choices>
<xforms:label>Primary Colors</xforms:label>

<xforms:item>
<xforms:label>Red</xforms:label>
<xforms:value>R</xforms:value>
</xforms:item>。。。

</xforms:choices>
<xforms:choices> //二级子菜单
<xforms:label>Secondary Colors</xforms:label>
</xforms:choices>

2、范围（Range）

XForms 中一个全新的控件是 range，它提供一个在标尺上的滚动块让用户移动来决定一个值。每个 range 控件都包括最大值（end）、起始值（start）和 stepsize （或者刻度上应该增加的点数）。注意，用户可以提交不是 stepsize 整倍数的值

<xforms:range end="100" ref="order/belt/percentages/color1"
start="0" stepsize="10">
<xforms:label>PercentageColor One</xforms:label>
</xforms:range>
<xforms:range end="100" ref="order/belt/percentages/color2"
start="0" stepsize="10">
<xforms:label>Percentage Color Two</xforms:label>
</xforms:range>

3、文件上传控件

XForms 提供了一个 upload 控件，自动把文件和二进制信息包括到提交的 XML 文档中。

<xforms:upload ref="order/belt/diagram">
<xforms:label>Sample Drawing</xforms:label>
</xforms:upload>

4、输出（Output）

XForms 一个很方便的特性是能够把表单中的信息直接显示在页面上。在 HTML 中，唯一真正可靠的（注意：“通过浏览器”）方式就是通过表单字段来实现，比如只读的文本框，而 XForms 允许把这些信息直接显示在页面上。output 也有 ref 属性。要输出的信息就是该属性中的 XPath 表达式所表示的值。

<xforms:output ref="order/ordertotal" />