Developer

Prepare for the transition from HTML forms to XForms

XForms are an XML-based replacement for conventional HTML Web forms. Learn about the basic elements of XForms and see how to implement them in a standard Web form.


By Tony Patton

Data collection is a standard part of almost every Web application. Although Java applets and Macromedia Flash offer excellent options for getting user input, the HTML form is still the most widely used mechanism for gathering data. The current momentum enjoyed by XML has led to another development, called XForms. XForms is an HTML form replacement that provides much more functionality and flexibility. Although no browsers currently support the XForms standard, it offers tremendous promise, and developers should become familiar with its features.

What's wrong with an HTML form?
Many aspects of HTML development have been improved with technologies like Cascading Style Sheets (CSS), Dynamic HTML (DHTML), and even editing tools like Macromedia DreamWeaver, but the design and structure of the HTML form has not changed. Currently, HTML forms create numerous obstacles for the Web development community.

First, the feature set of an HTML form is limited. Only basic data gathering elements (textbox, checkbox, etc.) are provided, and one action is associated with the form's submission. Scripting languages like JavaScript and VBScript can be used to extend the functionally, and technologies such as ASP.NET and JavaServer Pages (JSP) make it possible to bind data to these elements. But the approaches used are far from industry standard.

Another HTML form drawback is the lack of accessibility features. Web site accessibility is a major initiative that must be addressed to ensure that all users can take advantage of a site's features.

In addition, the Internet is fast moving from our desktops and laptops to mobile devices like cell phones and personal digital assistants (PDAs). HTML forms were designed to work well on the computer, so they do not always work well with the plethora of mobile devices available in today's market.

Finally, XML is evolving into the de facto standard for data transmission. HTML forms provide no XML support.

XForms provides an answer
XForms addresses every concern or problem with ease. Given its strong ties to the XML community, XForms offers tight XML integration. Common form features like data validation and calculations are provided, and XForms are device-independent, so they work just as well on your phone as on your laptop. Accessibility features have been a part of the XForms standard from the start as well.

Given its XML roots, XForms has been designed to be tightly integrated with XHTML (the next iteration of HTML). One of the key aspects of XForms is its goal to separate the form from the presentation. That is, the data and logic of an XForm is handled with XML and data is transferred using XML. But the actual presentation of XForm data is handled separately from the data. This allows the data to be designed without requiring any knowledge of how it will be used or presented.

This separation of presentation and data makes it possible to support an unlimited number of devices. When XML is used, other XML technologies like Wireless Markup Language (WML) or VoiceXML may be used to correctly present the data to the requesting client.

XForms controls
The most important aspects of the XForms standard are the controls. These controls are user interface components that facilitate data entry and display. They're analogous to the standard HTML form elements (like input and select elements). However, the XForms counterparts do provide additional functionality. Here is an annotated list of XForms controls:
  • <input>—Data entry
  • <textarea>—Data entry
  • <secret>—Entry of sensitive data
  • <output>—Inline display of data
  • <range>—Slide control selection of data values
  • <upload>—Upload files or data
  • <trigger>—Activating form events
  • <submit>—Submitting form data
  • <select>—Selecting multiple options

Data from the associated XML document is called instance data. Instance data can be assigned to individual or multiple controls, but it may not be used at all. The data is stored in memory, so it is still available. Storing the data in memory negates the necessity of hidden form fields.

I find the trigger element to be most intriguing because it provides a type of event-driven approach to forms development. Also, it may negate the need for extensive client-side scripts. The elimination of much of the client-side scripting is a goal of XForms.

Let's look at a simple example to illustrate some of what we've been discussing. First, here's a basic HTML form, which provides two data input fields and a submit button:
<html>
<head><title>Test</title></head>
<body>
<form action="process.jsp" method="post">
<p>
First Name: <input type="text" id="firstname" name="firstname">
<br>
Last Name: <input type="text" id="lastname" name="lastname">
<br>
<input type="submit" value="submit">
</p>
</form>
</body>
</html>


The same form designed with XForms looks like this:
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:xform=http://www.w3.org/2001/08/xforms>
<head>
<xform:xform id="nameinfo">
<xform:submitInfo action="process.jsp" method="post"/>
</xform:xform>
</head>
<body>
<xform:input xform="nameinfo" ref="firstname">
<xform:caption>First Name:</xform:caption>
</xform:input>
<xform:input xform="nameinfo" ref="lastname">
<xform:caption>Last Name:</xform:caption>
</xform:input>
<xform:submit xform="nameinfo">
<xform:caption>Submit</xform:caption>
</xform:submit>
</body>
</html>


This form uses the XHTML standard, so the correct namespaces are referenced in the first line. In addition, the XForms used in the XHTML are defined in the head section of the page. A name is assigned to the form, along with the necessary action to take when the associated form is submitted. This allows multiple forms to be set up, and their associated data can be intertwined. The instance data, data model, and data bindings are defined in the head section as well. Once this type of data is defined, it can be utilized in the rest of the form.

Only the beginning
The XForms specification is far from concise, and this article has provided only a brief introduction to this emerging standard. In addition to the form controls, XForms provides data types, data attributes, data structures, functions, and much more. Because it's an evolving standard, features may be removed or added as it matures.

A need-to-know basis
As I noted earlier, no major browser supports the XForms standard. A variety of tools are available to work with it, but deploying an XForms-based solution at this time is not realistic. Still, it is imperative to stay current with the evolution of XML and related standards. Developers must be aware of what is on the horizon.

Editor's Picks