XForms
From Wikibooks, the open-content textbooks collection
[edit] XForms Tutorial and Cookbook
Welcome to the XForms Tutorial and Cookbook Wikibook! XForms is a World Wide Web Consortium recommendation for creating web forms and web applications. XForms is easy to learn, provides a rich user experience and does not require you to learn JavaScript.
This is a collaborative project and we encourage everyone who is using XForms to contribute their complete working XForms examples. All example programs must conform to the creative-commons-2.5 share-alike with attribution license agreement [1].
As of April 1st 2009 there are now 94 tested example programs in this book. The countdown is underway to our goal of 100 example programs!
- Instructors: please sign our Guest Registry if you are using this book for learning or teaching XForms.
- Contributors: please see our Naming Conventions to ensure your examples are consistent with the textbook.
- If you are looking for a specific example program, please feel free to use the Examples Wanted section.
We are now the 6th hit on the XForms keyword on Google Search. With a little more work we can make it to the first page. If you feel these examples are useful please create links to this site. This book has over 30 contributors.
A French version can be found here of this XForms tutorial
Recent Changes Google Code Version Control System Book Statistics Related Wikibooks: XQuery XForms/REST/XQuery
Note: Almost all of the examples have been tested with the FireFox 2.0 XForms addon and the newer 0.8.6ff3 FireFox 3.0 addon. Please let us know if you find any errors.
[edit] Table of Contents
- Cover
- Introduction - About this book and overview of the technology.
- Background - A brief history and motivation for the XForms standard.
- Benefits - Why use XForms?
- Installing and Testing - How to install an XForm plug-in or extension.
- Naming Conventions - Naming standards used throughout this book.
- XForms by Example - Short example to test your installation and get you started.
- Beginning Examples - These examples are for people who are just getting started.
- HelloWorld - A simple test to see if XForms is installed correctly.
- Message - Open a panel with a message
- XForms Architecture - An introduction to the XForms MVC architecture
- Input - A simple input that updates the model
- Incremental Many to One - How a single input field can change many output controls
- Spreadsheet like updating - how XForms tracks what fields need to be updated
- Bind - how to bind inputs to the model using the bind element
- Adder - sample XForm that uses a remote web service to sum two numbers
- Beginning Examples - These examples are for people who are just getting started.
- Form Controls
- Input - a simple input form with a label
- Address - a simple address form with labels
- Address Aligned - using CSS to align fields
- Input Field Width - using CSS to control field width
- Secret - a way to enter passwords

- Message Types - three types of messages
- Textarea - a large block of text
- Textarea with style - styling textarea using CSS

- Checkbox - a simple boolean (yes/no) checkbox
- Select1 - the new radio button
- Select1 drop list - select a single option from a drop-down list
- Open Selection - suggests a value or allows the user to add their own
- Select - selecting many (check-boxes)
- Select Multi-Column - selecting from many columns (check-boxes)
- Selecting from Model - getting data for select lists from the model
- Selecting from File - getting data for select lists from an external file

- Selecting a Date - using the bind command to present a calendar selector
- Formatting a date - display a date in MM/DD/YYYY format

- Upload - uploading a file from a local file system
- Trigger - the new button
- Controlling Button Appearance - setting button labels, hints and using images
- Range - adding a slider to your form
- Setting Initial Cursor - setting the initial cursor position when a form loads
- Search Form - creating a search form
- Rich Text Editor - allow users to add markup using a WYSIWYG editor
- Submitting Data
- Submit - saving your XML data to a file or web server
- Encoding Parameters - encoding submission parameters
- Events
- Events Overview - What are XForms events and how to use them
- Selection and Deselection Events - Logging events when tabs are selected or deselected
- Conditional Actions
- Output
- Binds to many instances - binding to many instances in many models
- Bind to ranges - binding to two different ranges
- Repeat - using repeat to display lists
- Conditional Styling - using CSS and group to conditionally display items in a list
- Formatting Numbers - how to format numbers and currency
- Output and Links - how to display links in your output
- Dynamic Forms - getting dynamic forms without using Javascript
- Switch and Case - swapping views with switch and case
- Relevant - displaying only relevant fields
- Disable Buttons - how to disable buttons when they are not relevant
- Read Only - setting input fields to be read only
- Select and Group - using select to conditionally display a group
- Dynamic Labels - dynamically change the labels of a form without reloading the page
- Suggesting Items - creating a list of suggested items as you type
- Slideshow - changing images in a slideshow
- Referencing Items - referencing items in sets
- Dynamic Selection Lists - itemset's that are dynamically dependent on values of an xml-instance
- Deep Copy with Insert Origin - using insert origin to perform a deep copy between instances in a model
- Incremental Model Loading - loading a model incrementally
- A Trigger for Inserting BBcode into a Textarea box
- Intermediate Examples - Note: These examples assume that you understand many of the beginning concepts.
- Menus - navigation of complex forms
- Horizontal File Tab Menu - a complete working example with no Javascript

- Horizontal File Tab Menu Highlighted - Tab menu with selected tab highlighted using CSS target

- Vertical Menu - Menu similar to prior version but using vertical orientation
- Folding Menus - Folding menus
- Tree Menus - Hierarchical Tree Menus
- Deselect Events - Catching the Deselection Events when you navigate away from a form
- Horizontal File Tab Menu Highlighted With Binding - Another Horizontal File Tab Menu using an Instance, Binding, Events and CSS
- Horizontal File Tab Menu - a complete working example with no Javascript
- Reading and writing to files
- Read and write with get and put - using the submission element to read and write a static
- Saving Intermediate Form Data - saving intermediate form data to a local drive
- Advanced Search - a search screen with simple and advanced tabs
- Tabular and Repeating Data
- Repeat into table - putting data into HTML tables
- Repeat filter - dynamically filtering out rows from lists
- Inline Repeats - add structures horizontally to the right
- Insert - inserting a new row into a tabular structure
- Insert with Origin - inserting new data and specifying initial values using the origin attribute
- Delete - delete the selected row from a tabular structure
- Disable Trigger - disable the delete button when only a single item remains
- Delete Confirm - confirming before you delete
- Delete Confirm with CSS - Styling your confirmation with CSS
- Trailing Insert and Delete - add and delete from the end of a list
- Insert and Delete into Table - insert and delete rows into a table
- Highlight Selected Row - highlight a selected row
- Table Column Total - table with a column total in table footer
- XML Schema
- Load from XML Schema - load data types from an external XML Schema file
- Validate - validate form using XML Schema
- Validate with schema types - validate form using XML Schema types
- Facet Validation - check min and max lengths of fields from the XML Schema
- JavaScript
- Dynamically Load JavaScript - example of how to dynamically load a JavaScript program
- Graphics
- Pie Chart - draw a pie chart using range controls
- Google Charts - use the Google Charts REST web service
- Venn Diagram - change Venn diagram parameters with range controls
- Supply and Demand - use range controls to change price and see the impact on demand
- Development Tools
- Event Logger - demonstration of how to log events
- Replace Tester - testing regular expression substitution
- Process Step Editor - editing a list of horizontal process steps
- Application Builder - a form use to create a forms management application
- Dashboard Builder - a form to specify the layout of a single page dashboard
- URL Rewriter - a form configure and test Jetty URL rewrite rules
- Web Service Tester - a form for testing a web service
- Menus - navigation of complex forms
- Advanced Examples
- Hierarchical Bookmarks - editing bookmarks
- Outline Editor - outline with indenting
- Synonym Set Editor - associate a synonym set with a business term
- W2 Tax Form - sample tax form based on Mozilla XForms site
- Invoice Manager - invoice manager
- Calculator - a four function calculator
- Crime Profile - sample of complex form used in criminal justice
- CSS tables - formatting tabular output with CSS without using HTML table
- Search flickr - search flickr using REST interface
- Web service - calling a web service from within an XForm
- Stock Quote - Calling a REST service that returns stock information from a ticker symbol
- Search Amazon - Search amazon using a web service
- Custom Controls - Example of a custom control using XBL
- Warn on Navigate Away - Warn users if they navigate away before saving
- Graph Viewer - Viewing a graph of nodes and links
- Select All - Selecting all rows in a table
- Google Maps - Example of using Google Maps from within XForms
- Sorting using XSLT - Example of how to sort an instance using a XSLT stylesheet
- Mobile XForms - Examples of XForm-based mobile applications
- Client XForms Solution
- FireFox Extension
- FormFaces
- Picoforms
- Ubiquity XForms - http://code.google.com/p/ubiquity-xforms/
- XSLTForms - Open source client-side implementation, not a plug-in or install, works with all major browsers (IE, FireFox, Opera, Safari, Chrome and more).
- Server Solutions
- Apache - Configuring Apache to work with XForms
- Versioning Form Data With WebDAV and Subversion - Using subversion and WebDAV to automatically version form data
- IIS - Configuring Microsoft's IIS to work with XForms
- XML Databases - Using native XML databases to work with XForms
- eXist - Using the eXist OpenSource native XML database
- IBM DB2 - Using the DB2 v9 with XForms
- Orbeon Forms - Open Source Ajax-based XForms implementation (also comes with the Form Builder editor)
- Chiba - Open Source Java Implementation of the W3C XForms standard
- Development Tools
Key to symbols:
| Wikibook Development Stages | ||||
|---|---|---|---|---|
| Sparse text |
Developing text |
Maturing text |
Developed text |
Comprehensive text: |
indicates an XForms/Best practice

