# XML - Managing Data Exchange/XForms

## What Is XForms?

Forms are an important part of many web applications today. An HTML form
makes it possible for web applications to accept input from a user. Web
users now do complex transactions that are starting to exceed the
limitations of standard HTML forms. XForms is the next generation of
HTML forms and is richer and more flexible than HTML forms.\
\
XForms uses XML for data definition and HTML or XHTML for data display.
XForms separates the data logic of a form from its presentation.
Separating data from presentation makes XForms device independent,
because the data model can be used for all devices. The presentation can
be customized for different user interfaces, like mobile phones and
handheld devices and can provide interactivity between such devices. It
is also possible to add XForms elements directly into other XML
applications like VoiceXML (speaking web data), WML (Wireless Markup
Language), and SVG (Scalable Vector Graphics).\
\

## The Purpose of XForms

XForms is the separation of purpose from presentation. For example, the
purpose of a questionnaire application is to collect information about
the user. This is done by creating a presentation that allows the user
to provide the required information. Web applications typically render
such a presentation as an interactive document that is continuously
updated during user interaction. By separating the purpose from its
presentation, XForms enables the binding of different interactions to a
single model.\

## The Main Aspects of XForms

The **XForms model** defines what the form is, what data it contains,
and what it should do. The **XForms user interface** defines the input
fields and how they should be displayed. The **XForms Submit Protocol**
defines how XForms send and receive data, including the ability to
suspend and resume the completion of a form. **XForms is \"instance
data\"**, an internal representation of the data mapped to the familiar
\"form controls\". Instance data is based on XML and defined in terms of
XPath's internal tree representation and processing of XML\

## The XForms Framework

With XForms, input data is described in two different parts:

1.  XForm model\
2.  XForm user interface\

\

### The XForms Model

The XForm model defines what the form is, what data it contains, and
what it should do.\
The data model is an instance (a template) of an XML document. The
XForms model defines a data model inside a `<model>`{=html} element:\

` ``<model>`{=html}\
` ``<instance>`{=html}\
`   ``<person>`{=html}\
`     ``<fname/>`{=html}\
`     ``<lname/>`{=html}\
`   ``</person>`{=html}\
` ``</instance>`{=html}\
` ``<submission id="form1" action="submit.asp" method="get"/>`{=html}\
` ``</model>`{=html}

\
From the example above, you can see that the XForms model uses an
`<instance>`{=html} element to define the XML template for data to be
collected, and a `<submission>`{=html} element to describe how to submit
the data.\
The XForms model does not say anything about the visual part of the form
(the user interface).\
\
====The `<instance>`{=html} Element==== The data collected by XForms is
expressed as XML instance data. XForms is always collecting data for an
XML document. The `<instance>`{=html} element in the XForms model
defines the XML document.\
In the example above the \"data instance\" (the XML document) the form
is collecting data for looks like this:

` ``<person>`{=html}\
`   ``<fname/>`{=html}\
`   ``<lname/>`{=html}\
` ``</person>`{=html}

After collecting the data, the XML document might look like this:

` ``<person>`{=html}\
`   ``<fname>`{=html}`Jim``</fname>`{=html}\
`   ``<lname>`{=html}`Jones``</lname>`{=html}\
` ``</person>`{=html}

\

#### The `<submission>`{=html} Element

The XForms model uses a `<submission>`{=html} element to describe how to
submit the data. The `<submission>`{=html} element defines a form and
how it should be submitted. In the example above, the id=\"form1\"
attribute identifies the form, the action=\"submit.asp\" attribute
defines the URL to where the form should be submitted, and the
method=\"get\" attribute defines the method to use when submitting the
data.\
\
The following diagram shows how the XForm model has the capability to
work with a variety of user interfaces.

### The XForms User Interface

The XForms user interface is used to display and input the data. The
user interface elements of XForms are called controls (or input
controls):

` ``<input ref="fname">`{=html}`<label>`{=html}`First Name``</label>`{=html}`</input>`{=html}\
` ``<input ref="lname">`{=html}`<label>`{=html}`Last Name``</label>`{=html}`</input>`{=html}\
` ``<submit submission="form1">`{=html}`<label>`{=html}`Submit``</label>`{=html}`</submit>`{=html}

In the example above the two `<input>`{=html} elements define two input
fields. The ref=\"fname\" and ref=\"lname\" attributes point to the
`<fname>`{=html} and `<lname>`{=html} elements in the XForms model. The
`<submit>`{=html} element has a submission=\"form1\" attribute which
refers to the `<submission>`{=html} element in the XForms model. A
submit element is usually displayed as a button. Notice the
`<label>`{=html} elements in the example. With XForms every input
control element has a required `<label>`{=html} element.\
==Putting Everything Together== XForms has to run inside another XML
document. It could run inside XHTML 1.0, and it will run inside XHTML
2.0. If we put it all together, the document will look like this:

` ``<xforms>`{=html}\
` ``<model>`{=html}\
` ``<instance>`{=html}\
`   ``<person>`{=html}\
`     ``<fname/>`{=html}\
`     ``<lname/>`{=html}\
`   ``</person>`{=html}\
` ``</instance>`{=html}\
` ``<submission id="form1" action="submit.asp" method="get"/>`{=html}\
` ``</model>`{=html}\
` ``<input ref="fname">`{=html}`<label>`{=html}`First Name``</label>`{=html}`</input>`{=html}\
` ``<input ref="lname">`{=html}`<label>`{=html}`Last Name``</label>`{=html}`</input>`{=html}\
` ``<submit submission="form1">`{=html}`<label>`{=html}`Submit``</label>`{=html}`</submit>`{=html}\
` ``</xforms>`{=html}

\

## The XForms Processor

An XForms Processor built into the browser will be responsible for
submitting the XForms data to a target. The data can be submitted as XML
and could look something like this:

` ``<person>`{=html}\
`   ``<fname>`{=html}`Jim``</fname>`{=html}\
`   ``<lname>`{=html}`Jones``</lname>`{=html}\
` ``</person>`{=html}

Or it can be submitted as text, looking something like this:

` fname=Jim;lname=Jones`

\

## The XForms Namespace

The official namespace for XForms is: <http://www.w3.org/2002/xforms>.
If you want to use XForms in HTML (or XHTML 1.0), you should declare all
XForms elements with an XForms namespace. XForms is expected to be a
standard part of XHTML 2.0, eliminating the need for the XForms
namespace.

## An XForms Example

Take a look at this document using XForms:

` ``<xforms>`{=html}\
` ``<model>`{=html}\
`   ``<instance>`{=html}\
`   ``<person>`{=html}\
`     ``<fname/>`{=html}\
`     ``<lname/>`{=html}\
`   ``</person>`{=html}\
`   ``</instance>`{=html}\
`   ``<submission id="form1" method="get" action="submit.asp"/>`{=html}\
` ``</model>`{=html}\
` ``<input ref="fname">`{=html}\
` ``<label>`{=html}`First Name``</label>`{=html}`</input>`{=html}\
`  ``<input ref="lname">`{=html}\
` ``<label>`{=html}`Last Name``</label>`{=html}`</input>`{=html}\
\
`  ``<submit submission="form1">`{=html}\
` ``<label>`{=html}`Submit``</label>`{=html}`</submit>`{=html}\
` ``</xforms>`{=html}

## The Form Controls

The components of the form that deal with data entry and display are
referred to as the form controls or user interface controls. XForms
defines a comprehensive set of device-neutral, platform-independent form
controls. For each element of data defined in the model, a form control
defines its appearance via the client. These controls can be combined
with stylesheets to provide sophisticated form displays.

```{=html}
<table border="1">
```
```{=html}
<tr>
```
```{=html}
<td>
```
**XForms form control**

```{=html}
</td>
```
```{=html}
<td>
```
**Closest XHTML equivalent**

```{=html}
</td>
```
```{=html}
<td>
```
**Description**

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<input>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
`<input type="text">`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
For entry of small amounts of text

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
```{=html}
<textarea>
```
```{=html}
</td>
```
```{=html}
<td>
```
```{=html}
<textarea>
```
```{=html}
</td>
```
```{=html}
<td>
```
For entry of large amounts of text

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<secret>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
```{=html}
<textarea>
```
```{=html}
</td>
```
```{=html}
<td>
```
For entry of large amounts of text

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<secret>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
`<input type="password">`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
For entry of sensitive information

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
```{=html}
<output>
```
```{=html}
</td>
```
```{=html}
<td>
```
N/A

```{=html}
</td>
```
```{=html}
<td>
```
For inline display of any instance data

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<range>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
N/A

```{=html}
</td>
```
```{=html}
<td>
```
For smooth \"volume control\" selection of a value

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<upload>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
`<input type="file">`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
For upload of file or device data

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<trigger>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
`<button>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
For activation of form events

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<submit>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
`<input type="submit">`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
For submission of form data

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<select>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
`<select multiple="multiple">`{=html} or multiple
`<input type="checkbox">`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
For selection of zero, one, or many options

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
`<select1>`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
`<select>`{=html} or multiple `<input type="radio">`{=html}

```{=html}
</td>
```
```{=html}
<td>
```
For selection of just one option among several

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
</table>
```
\

## XForms Action

In the course of form processing, often some particular action needs to
happen.

```{=html}
<table border="1">
```
```{=html}
<tr>
```
```{=html}
<td>
```
**XForms Action**

```{=html}
</td>
```
```{=html}
<td>
```
**Description**

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
setfocus

```{=html}
</td>
```
```{=html}
<td>
```
Gives focus to a particular form control.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
setvalue

```{=html}
</td>
```
```{=html}
<td>
```
Sets the value of a particular node.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
message

```{=html}
</td>
```
```{=html}
<td>
```
Displays a message to the user.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
send

```{=html}
</td>
```
```{=html}
<td>
```
Submits all or part of the instance data.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
reset

```{=html}
</td>
```
```{=html}
<td>
```
Resets all or part of the instance data.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
load

```{=html}
</td>
```
```{=html}
<td>
```
Opens a document in the same or a new window.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
refresh

```{=html}
</td>
```
```{=html}
<td>
```
Refreshes the view of the instance data.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
recalculate

```{=html}
</td>
```
```{=html}
<td>
```
Recalculates the instance data.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
revalidate

```{=html}
</td>
```
```{=html}
<td>
```
Revalidates the instance data.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
setindex

```{=html}
</td>
```
```{=html}
<td>
```
Navigates through a repeating sequence.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
insert

```{=html}
</td>
```
```{=html}
<td>
```
Inserts a node from a repeating sequence.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
delete

```{=html}
</td>
```
```{=html}
<td>
```
Removes a node from a repeating sequence.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
toggle

```{=html}
</td>
```
```{=html}
<td>
```
Selects a case of a switch

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
dispatch

```{=html}
</td>
```
```{=html}
<td>
```
Dispatch an event.

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
</table>
```
\

## XForms Methods

The XForms specification uses and builds upon XPath, which includes
adding some method calls useful for forms: These can be called at any
point where XPath is allowed. Additionally, implementations can support
"extension functions" to provide additional functionality.

```{=html}
<table border="1">
```
```{=html}
<tr>
```
```{=html}
<td>
```
**Method**

```{=html}
</td>
```
```{=html}
<td>
```
**Description**

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
avg()

```{=html}
</td>
```
```{=html}
<td>
```
Returns the arithmetic mean of the indicated nodes

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
min() and max()

```{=html}
</td>
```
```{=html}
<td>
```
Returns the minimum or maximum value of the indicated nodes

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
count-non-empty()

```{=html}
</td>
```
```{=html}
<td>
```
Returns the number of non-empty nodes

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
if()

```{=html}
</td>
```
```{=html}
<td>
```
Returns one of two strings depending on a Boolean value

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
index()

```{=html}
</td>
```
```{=html}
<td>
```
Indicates the current position in a repeating sequence

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
days-from-date()

```{=html}
</td>
```
```{=html}
<td>
```
Converts an XML Schema datatype into a number of days

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
seconds-from-dateTime()

```{=html}
</td>
```
```{=html}
<td>
```
Converts an XML Schema datatype into a number of seconds

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
seconds()

```{=html}
</td>
```
```{=html}
<td>
```
Converts an XML Schema duration into a number of seconds

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
months()

```{=html}
</td>
```
```{=html}
<td>
```
Converts an XML Schema duration into a number of months

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
<tr>
```
```{=html}
<td>
```
now()

```{=html}
</td>
```
```{=html}
<td>
```
Returns the current date/time

```{=html}
</td>
```
```{=html}
</tr>
```
```{=html}
</table>
```
\

## See Also

-   XForms Tutorial and Cookbook Wikibook This wiki
    book has over 75 XForms examples with links to working XForms
    applications.

