What Is XForms?Edit
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 XFormsEdit
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 XFormsEdit
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 FrameworkEdit
With XForms, input data is described in two different parts:
- XForm model
- XForm user interface
The XForms ModelEdit
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> element:
<model> <instance> <person> <fname/> <lname/> </person> </instance> <submission id="form1" action="submit.asp" method="get"/> </model>
From the example above, you can see that the XForms model uses an <instance> element to define the XML template for data to be collected, and a <submission> 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> ElementEdit
The data collected by XForms is expressed as XML instance data. XForms is always collecting data for an XML document. The <instance> 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> <fname/> <lname/> </person>
After collecting the data, the XML document might look like this:
<person> <fname>Jim</fname> <lname>Jones</lname> </person>
The <submission> ElementEdit
The XForms model uses a <submission> element to describe how to submit the data. The <submission> 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 InterfaceEdit
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"><label>First Name</label></input> <input ref="lname"><label>Last Name</label></input> <submit submission="form1"><label>Submit</label></submit>
In the example above the two <input> elements define two input fields. The ref="fname" and ref="lname" attributes point to the <fname> and <lname> elements in the XForms model. The <submit> element has a submission="form1" attribute which refers to the <submission> element in the XForms model. A submit element is usually displayed as a button. Notice the <label> elements in the example. With XForms every input control element has a required <label> element.
Putting Everything TogetherEdit
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> <model> <instance> <person> <fname/> <lname/> </person> </instance> <submission id="form1" action="submit.asp" method="get"/> </model> <input ref="fname"><label>First Name</label></input> <input ref="lname"><label>Last Name</label></input> <submit submission="form1"><label>Submit</label></submit> </xforms>
The XForms ProcessorEdit
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> <fname>Jim</fname> <lname>Jones</lname> </person>
Or it can be submitted as text, looking something like this:
The XForms NamespaceEdit
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 ExampleEdit
Take a look at this document using XForms:
<xforms> <model> <instance> <person> <fname/> <lname/> </person> </instance> <submission id="form1" method="get" action="submit.asp"/> </model> <input ref="fname"> <label>First Name</label></input>
<input ref="lname"> <label>Last Name</label></input>
<submit submission="form1"> <label>Submit</label></submit> </xforms>
The Form ControlsEdit
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.
|XForms form control||Closest XHTML equivalent||Description|
|<input>||<input type="text">||For entry of small amounts of text|
|<textarea>||<textarea>||For entry of large amounts of text|
|<secret>||<textarea>||For entry of large amounts of text|
|<secret>||<input type="password">||For entry of sensitive information|
|<output>||N/A||For inline display of any instance data|
|<range>||N/A||For smooth "volume control" selection of a value|
|<upload>||<input type="file">||For upload of file or device data|
|<trigger>||<button>||For activation of form events|
|<submit>||<input type="submit">||For submission of form data|
|<select>||<select multiple="multiple"> or multiple <input type="checkbox">||For selection of zero, one, or many options|
|<select1>||<select> or multiple <input type="radio">||For selection of just one option among several|
In the course of form processing, often some particular action needs to happen.
|setfocus||Gives focus to a particular form control.|
|setvalue||Sets the value of a particular node.|
|message||Displays a message to the user.|
|send||Submits all or part of the instance data.|
|reset||Resets all or part of the instance data.|
|load||Opens a document in the same or a new window.|
|refresh||Refreshes the view of the instance data.|
|recalculate||Recalculates the instance data.|
|revalidate||Revalidates the instance data.|
|setindex||Navigates through a repeating sequence.|
|insert||Inserts a node from a repeating sequence.|
|delete||Removes a node from a repeating sequence.|
|toggle||Selects a case of a switch|
|dispatch||Dispatch an event.|
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.
|avg()||Returns the arithmetic mean of the indicated nodes|
|min() and max()||Returns the minimum or maximum value of the indicated nodes|
|count-non-empty()||Returns the number of non-empty nodes|
|if()||Returns one of two strings depending on a Boolean value|
|index()||Indicates the current position in a repeating sequence|
|days-from-date()||Converts an XML Schema datatype into a number of days|
|seconds-from-dateTime()||Converts an XML Schema datatype into a number of seconds|
|seconds()||Converts an XML Schema duration into a number of seconds|
|months()||Converts an XML Schema duration into a number of months|
|now()||Returns the current date/time|
- XForms Tutorial and Cookbook Wikibook This wiki book has over 75 XForms examples with links to working XForms applications.