- XML Reference Guide
- Overview
- What Is XML?
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Table of Contents
- The Document Object Model
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- DOM and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- Implementations
- DOM and JavaScript
- Using a Repeater
- Repeaters and XML
- Repeater Resources
- DOM and .NET
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Downloads
- DOM and C++
- DOM and C++ Resources
- DOM and Perl
- DOM and Perl Resources
- DOM and PHP
- DOM and PHP Resources
- DOM Level 3
- DOM Level 3 Core
- DOM Level 3 Load and Save
- DOM Level 3 XPath
- DOM Level 3 Validation
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Implementations
- The Simple API for XML (SAX)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- SAX and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- SAX and .NET
- Informit Articles and Sample Chapters
- SAX and Perl
- SAX and Perl Resources
- SAX and PHP
- SAX and PHP Resources
- Validation
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Document Type Definitions (DTDs)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XML Schemas
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- RELAX NG
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Schematron
- Official Documentation and Implementations
- Validation in Applications
- Informit Articles and Sample Chapters
- Books and e-Books
- XSL Transformations (XSLT)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XSLT in Java
- Java in XSLT Resources
- XSLT and RSS in .NET
- XSLT and RSS in .NET Resources
- XSL-FO
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XPath
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XML Base
- Informit Articles and Sample Chapters
- Official Documentation
- XHTML
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XHTML 2.0
- Documentation
- Cascading Style Sheets
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XUL
- XUL References
- XML Events
- XML Events Resources
- XML Data Binding
- Informit Articles and Sample Chapters
- Books and e-Books
- Specifications
- Implementations
- XML and Databases
- Informit Articles and Sample Chapters
- Books and e-Books
- Online Resources
- Official Documentation
- SQL Server and FOR XML
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Implementations
- Service Oriented Architecture
- Web Services
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Creating a Perl Web Service Client
- SOAP::Lite
- Amazon Web Services
- Creating the Movable Type Plug-in
- Perl, Amazon, and Movable Type Resources
- Apache Axis2
- REST
- REST Resources
- SOAP
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- SOAP and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- WSDL
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- UDDI
- UDDI Resources
- XML-RPC
- XML-RPC in PHP
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Ajax
- Asynchronous Javascript
- Client-side XSLT
- SAJAX and PHP
- Ajax Resources
- JSON
- Ruby on Rails
- Creating Objects
- Ruby Basics: Arrays and Other Sundry Bits
- Ruby Basics: Iterators and Persistence
- Starting on the Rails
- Rails and Databases
- Rails: Ajax and Partials
- Rails Resources
- Web Services Security
- Web Services Security Resources
- SAML
- Informit Articles and Sample Chapters
- Books and e-Books
- Specification and Implementation
- XML Digital Signatures
- XML Digital Signatures Resources
- XML Key Management Services
- Resources for XML Key Management Services
- Internationalization
- Resources
- Grid Computing
- Grid Resources
- Web Services Resource Framework
- Web Services Resource Framework Resources
- WS-Addressing
- WS-Addressing Resources
- WS-Notifications
- New Languages: XML in Use
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Google Web Toolkit
- GWT Basic Interactivity
- Google Sitemaps
- Google Sitemaps Resources
- Accessibility
- Web Accessibility
- XML Accessibility
- Accessibility Resources
- The Semantic Web
- Defining a New Ontology
- OWL: Web Ontology Language
- Semantic Web Resources
- Google Base
- Microformats
- StructuredBlogging
- Live Clipboard
- WML
- XHTML-MP
- WML Resources
- Google Web Services
- Google Web Services API
- Google Web Services Resources
- The Yahoo! Web Services Interface
- Yahoo! Web Services and PHP
- Yahoo! Web Services Resources
- eBay REST API
- WordML
- WordML Part 2: Lists
- WordML Part 3: Tables
- WordML Resources
- DocBook
- Articles
- Books and e-Books
- Official Documentation and Implementations
- XML Query
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XForms
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Resource Description Framework (RDF)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Topic Maps
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation, Implementations, and Other Resources
- Rich Site Summary (RSS)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Simple Sharing Extensions (SSE)
- Atom
- Podcasting
- Podcasting Resources
- Scalable Vector Graphics (SVG)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- OPML
- OPML Resources
- Summary
- Projects
- JavaScript TimeTracker: JSON and PHP
- The Javascript Timetracker
- Refactoring to Javascript Objects
- Creating the Yahoo! Widget
- Web Mashup
- Google Maps
- Indeed Mashup
- Mashup Part 3: Putting It All Together
- Additional Resources
- Frequently Asked Questions About XML
- What's XML, and why should I use it?
- What's a well-formed document?
- What's the difference between XML and HTML?
- What's the difference between HTML and XHTML?
- Can I use XML in a browser?
- Should I use elements or attributes for my document?
- What's a namespace?
- Where can I get an XML parser?
- What's the difference between a well-formed document and a valid document?
- What's a validating parser?
- Should I use DOM or SAX for my application?
- How can I stop a SAX parser before it has parsed the entire document?
- 2005 Predictions
- 2006 Predictions
- Nick's Book Picks
If you've done any amount of web development, you're probably familiar with HTML forms. Forms allow you to collect information from a user in order to perform searches or obtain information, personal or not. As the web is increasingly used for actual applications, forms are virtually impossible to escape.
The trouble with forms as they're implemented in HTML is that they're not really flexible enough to take the place of the forms that developers might build into an offline client. That's not to say that you can't duplicate just about any functionality given enough effort (and control over the browser environment), but consider this example:
The form is fairly simple, and can be created using standard HTML:
<html> <form action="/reportingApp/submissions" method="post"> <h2>Order record</h2> <table> <tr><td>Customer Name: </td> <td><input type="text" name="custname" /></td></tr> <tr><td>Order Date: </td> <td><input type="text" name="orderdate" /></td></tr> <tr><td>Unit Price: </td> <td><input type="text" name="unitprice" /></td></tr> <tr><td>Quantity: </td> <td><input type="text" name="qty" /><br /></td></tr> </table> <input type="submit" value="Save Report" /> <input type="reset" value="Clear Form" /> </form>
Thing is, this form has a few requirements. The order date has to be a date, for one thing. The unit price has to be a decimal number between 10 and 25, as determined by the sales person, and the quantity has to be an integer. If you've ever tried to code a form like this, you know that you have two basic choices: you can let the user submit the form, then check the data, and if something's wrong with it, you can send them back to the form and ask them to fix their mistakes, or you can write JavaScript that validates the data before the user submits it, and try to keep up with all of the different versions of browsers the user might be using and the variations in how they handle JavaScript.
Plus, if you're already building an XML application, wouldn't it be nice if the submitted information came to the server as XML other than as individual values you still had to put into some usable form? And wouldn't it be nice if users who were offline, say at a client or in a cab or airplane, could save their form data and submit it later? And what about users who are on different types of devices, such as PDAs or a voice-based system? It'd be nice to be able to separate the actual model of the form from the presentation.
Those are some of the things that XForms provides. Let's look at the same (basic) form, but built using XForms and shown in an XForms-capable browser, XSmiles:
This version of the form has two immediately noticable differences from the first version. First of all, the date is now a calendar control, so we don't have to rely on the user to submit a real date in a particular format:
Second, the price is now a range slider, so we don't have to rely on the user to submit a value that's both a decimal number and a value between 10 and 25. A second field echoes back the value so the user knows precisely what he or she has chosen.
So how did we make that happen? Let's look at the actual code:
<?xml version="1.0" encoding="ISO-8859-1"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xfm="http://www.w3.org/2002/xforms/cr" xmlns:ev="http://www.w3.org/2001/xml-events"> <head> <xfm:model id="form1" schema="orderschema.xsd"> <xfm:submission id="submit1" localfile="temp.xml" /> <xfm:instance id="instance1" xmlns=""> <order xmlns=""> <customer></customer> <orderDate></orderDate> <item> <unitPrice>25</unitPrice> <quantity></quantity> </item> </order> </xfm:instance> </xfm:model> </head> <body> <h1>Order record</h1> <p> <xfm:input model="form1" ref="customer" style="width:100px"> <xfm:label>Customer name: </xfm:label> </xfm:input> </p> <p> <xfm:input model="form1" ref="orderDate"> <xfm:label>Order Date: </xfm:label> </xfm:input> </p> <p> <xfm:range model="form1" ref="item/unitPrice" start="10.0" end="25.0" step=".5"> <xfm:label>Select Price:</xfm:label> </xfm:range> <br /> <xfm:output model="form1" ref="item/unitPrice"> <xfm:label>Unit Price: </xfm:label> </xfm:output> </p> <p> <xfm:input model="form1" incremental="true" ref="item/quantity"> <xfm:label>Select Quantity: </xfm:label> </xfm:input> </p> <p> <xfm:submit model="form1" name="Submit" submission="submit1"> <xfm:label>Submit Order</xfm:label> </xfm:submit> <xfm:trigger> <xfm:label>Reset Form</xfm:label> <xfm:reset ev:event="DOMActivate" model="form1"/> </xfm:trigger> </p> </body> </html>
Now, there's a lot going on here, so let's just take it one step at a time. First of all, unlike an HTML form, an XForms form has its data separated from the form controls. The XML structure shown in the instance element is the structure in which the data will ultimately be submitted to the server. That data has to conform to an XML Schema, orderschema.xsd, so the browser knows the data type each entry must follow. That's how it knows to treat the orderData as a calendar control, but more than that, it's how the browser knows how to validate the inputs. For example, if the user tries to enter a non-integer value for the quantity, the browser won't submit the form.
The model also specifies how the form information should be submitted. In this case, we're simply sending the information to a local file so we can take a look at it, but you can send it to a remote server as XML, or using the same encoding methods in use on HTML forms. Separating the model and instance data from the form itself has several advantages, not the least of which is the ability to mix elements from different forms (or actually, models) on the page, which isn't possible in HTML.
As for the form controls themselves, they consist of several types, such as the input, range, submit and trigger here. Each references a node in the instance document, with the root node of the data, order, as the context. So the quantity, with it's ref attribute of item/quantity, is stored in the order/item/quantity node. You can see how this works by filling out and submitting the form, which gives you a result along the lines of:
<?xml version="1.0" encoding="ISO-8859-1"?> <order xmlns="" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xfm="http://www.w3.org/2002/xforms/cr"> <customer>Joe Blow</customer> <orderDate>2003-02-27</orderDate> <item> <unitPrice>23.0</unitPrice> <quantity>3</quantity> </item> </order>
Note that this relationship between the instance document and the form controls is a two-way street; any information you use to initially populate the instance document will be reflected in the initial state of the form.
It's impossible to cover all of the aspects of XForms in this one page discussion, but it should give you enough of the basics to know what it is you're looking at. As you further your investigation, here are some items of interest to keep in mind:
- XForms enables you to submit all or part of the instance document when the user submits the form.
- XForms provides a robust implementation of XML Events that allows you easily to mimic many of the functions usually reserved for client applications.
- A tradtional HTML form replaces the page when the user submits the form, but XForms gives you the option to replace the instance document instead. You can use this capability to allow the user to process multi-stage data. (FormsPlayer even has a simple demo that makes use of this technique to use the form for Web Services requests.)
- XForms has built-in a capabilites for such techniques as basing the value of one control on the value of one or more other controls, required values, and values that are only required under certain circumstances. (For example, a credit card number is only necessary if the user is paying by credit card.)
- XForms provides elements that enable you to iterate over nodes in the instance document. For example, you can set up a form that will automatically display inputs for each of the items that already exist as part of the user's order, even if you don't know how many there are to start with. This capability makes it possible to dynamically pre-populate a form without ever having to touch the form controls.
- XForms makes adding or removing controls fairly straightfoward, so the structure of the form itself can react dynamically to user actions.
At the time of this writing XForms 1.0 has reached Candidate Recommendation stage and several implementations are already in full swing. Although it's unlikely to be an issue for some time, XForms will replace traditional HTML forms in XHTML 2.0, which is still in the early stages of development.