XForms is the next generation of Web-based data processing. It replaces traditional HTML forms with an XML data model and presentation elements.
In this three-part series, you'll be introduced to XForms and its capabilities, including the basic XForms model and form, the various types of
basic and advanced form submission. This article covers how XForms actually works, and shows you how to set up XForms with Firefox and
Microsoft® Internet Explorer so that you can view your XForms samples.
XForms is gaining momentum rapidly, with support available for common browsers using extensions or plugins, and through things like the IBM® Workplace
Forms technology (see the Resources
section to find out more). Its flexibility and power make it attractive to Web developers, and its small footprint and
client-side processing make it attractive to systems administrators. The W3C is currently reviewing XForms 1.1 as a Working Draft document (1.0 is
an official Internet Recommendation, which puts it on par with things like XHTML, PNG, and CSS), and IBM is currently spearheading an effort to merge
competing XML-based forms' standards with the features and abilities of XForms.
This article explains the evolution of forms from simple text searches to today's interactive masterpieces and explains the next step in Web forms, XForms.
It explains what makes XForms different and gets the user ready for Part 2
by setting up his or her environment.
Read on to see how a simple HTML form can be replaced with a simple XForms form, and how you can use XForms' capabilities to save (and reload later)
a form's data to a local file.
If you'd like to follow along with the XHTML and XForms documents discussed in this article, grab the archive linked in the Downloads
It contains the files you're going to look at, which you can use as a starting point for your own XForms
You'll also be installing an XForms extension that lets you view XForms documents directly in current versions of Firefox, Internet Explorer, Seamonkey, or Mozilla.
If you don't currently have one of these excellent, standards-compliant browsers installed, now's a good time to get one.
Before jumping into XForms, let's get a little historical perspective on forms.
Early in the history of the World Wide Web, simple text entry forms were used to send requests to CGI programs that ran on the server, bringing some additional
interactivity to those pioneers venturing out into the unknown. As the Web matured, the data entry forms presented by Web sites grew more complex.
These days, you can easily find extremely complex forms, especially on e-commerce sites or forums. These can be front ends to PHP or Java code running on
Unfortunately, HTML's forms are created from elements that intermingle presentation and content.
With the move from sloppy presentation-based HTML mixing
the document structure with formatting elements, to clean XHTML styled with CSS, you need a way of separating a form's data and behavior from its presentation.
| || |
|What about Web Forms?|
Web Forms 2.0 (see link in the resources
section) builds on HTML's existing forms capabilities, adding many of the features found in XForms, but taking a simpler, more backwards-compatible approach. There is a movement underway to combine XForms and Web Forms into a single part of the upcoming XHTML 2.0
The XForms standard, which has been in discussion for several years now, is supported by quite a few applications (including Firefox, Mozilla, and Seamonkey
if you install the XForms extension), and is intended to be an XML replacement for the chaos of HTML forms.
Other popular Web browsers support XForms through plugins (such as formsPlayer for Internet Explorer 6, available from Resources
). Any standards-supporting
system. Additionally, major products such as IBM Workplace Forms
A form's data model (how it behaves when data is submitted, initial values, and more) is separated from its presentation. The same presentation can be interpreted
differently based on a style sheet, or whatever is appropriate for the user's browser. A browser running on a cell phone might, for example, use different techniques
to display the controls; menus and lists are easier for cell phone users than pop-up choice boxes.
Let's take a look at a simple HTML form that submits a search string to an imaginary query engine running on your local machine (see Listing 1). Note that this is
actually XHTML rather than HTML 4.01; XForms requires valid XML documents (such as XHTML) and you'll be seeing an XForms version shortly. Also note that
you may need to tweak your URLs to get them to work properly in your own environment.
Listing 1. A simple HTML form (simple.xhtml)
<head> <title>Search Form</title> </head>
<body> <h1>Search Form</h1> <
<p> Enter a search string, then click the Search button.
<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>
Listing 1 is standard, 100% valid XHTML Strict for your viewing pleasure. The
<form> section has been highlighted in bold.
When rendered in a
typical current Web browser, this XHTML looks quite familiar, if a bit primitive (Figure 1).
Figure 1. A simple HTML form rendered by Firefox
When you enter some text in the field shown in Figure 1 and click the button, the data is encoded into the URL sent to the imaginary search engine:
Listing 2 shows you the XForms version, with the differences highlighted.
Listing 2. A simple XForms form
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
<title>Search Form v2</title>
<xf:submission action="http://localhost/imaginary-search-engine" method="get" id="submit-search"/>
<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>
There are three main
changed areas here:
- The "
xf:" namespace adds the elements from the XForms specification.
<xf:model> element has been added to the
<head>, which declares an
<xf:submission>. This binds the action (your imaginary search engine) to the get method and names it submit-search for later use.
- The form's presentation elements (
<xf:input> for the text input field, and
<xf:submit> for the submission button) are now just presentation elements, indicating where and how the form's fields should appear in the rendered page. They refer back to the model declared in the
And here's how the XForms version looks (see Figure 2). Installation of the XForms extension for Firefox is covered later.
Figure 2. A simple XForms form rendered in Firefox
The forms look exactly the same! You lose absolutely nothing by using XForms instead of
traditional HTML forms, and you've gained all the advantages of using an XML data model.
If you've downloaded the example archive (found in the Downloads
section), you might have noticed that your browser won't display the XForms version properly (see Figure 3).
Figure 3. Your simple XForms page on a browser without XForms support
Until your favorite Web browser offers built-in support for XForms, you'll have to use one of the XForms implementations (see the XForms Web site listed in Resources
). Let's take a quick look at installing one of the most convenient implementations, the Mozilla extension. Since this works with current versions of Mozilla, Firefox, and Seamonkey, you probably won't even have to install or switch browsers! You'll also look at installing the Internet Explorer 6 plugin.
In Firefox, pull up the Mozilla XForms Project page (see Resources
). Click the download page link you'll find under the Latest Release heading.
The downloads page for the XForms Project will warn you about the plugin not being ready for end-users, and then give you a link to the actual download
page. Click that, then click the Install Now link.
Figure 4. Firefox's standard warning about installing extensions
Firefox displays a warning dialog (see Figure 4); click the Install Now button to download and install the XForms extension. Restart Firefox to activate it (see Figure 5).
Figure 5. Restart to activate your new extensions
After restarting your browser, you can load the simple XForms example that was looked at earlier; this time you'll actually see the
XForms elements rendered properly!
On the formsPlayer Web page (see Resources
for a link), click the Download fP for free
link to access the registration page.
Enter your e-mail address and other data, then click the Install formsPlayer link to download and install the plugin.
When IE loads the plugin archive, it will display a warning under the URL about the ActiveX control.
Click this warning, then select Install ActiveX Control. IE will download and install formsPlayer. When
IE's Security warning pops up, click Install to go ahead with the installation.
Once formsPlayer is installed, you'll be redirected to a page with links to several examples. View any of
them to verify your