Improving the Web Forms Experience (original) (raw)

XForms

Improving the Web Forms Experience

CWI and W3C
Kruislaan 413
1098 SJ Amsterdam
The Netherlands

Steven.Pemberton@cwi.nl
www.cwi.nl/~steven

About the Instructor

Steven Pemberton is a researcher at the CWI, The Centre for Mathematics and Computer Science, a nationally-funded research centre in Amsterdam, The Netherlands, the first non-military Internet site in Europe.

Steven's research is in interaction, and how the underlying software architecture can support the user. At the end of the 80's he built a style-sheet based hypertext system called Views.

Steven has been involved with the World Wide Web since the beginning. He organised two workshops at the first World Wide Web Conference in 1994, chaired the first W3C Style Sheets workshop, and the first W3C Internationalisation workshop. He was a member of the CSS Working Group from its start, and is a long-time member (now chair) of the HTML Working Group, and co-chair of the XForms Working Group. He is co-author of (amongst other things) HTML 4, CSS, XHTML and XForms.

Steven is also Editor-in-Chief of ACM/interactions.

Objectives

HTML Forms, introduced in 1993, were the basis of the e-commerce revolution. After 10 years experience, it has become clear how to improve on them, for the end user, the author, and the owners of the services that the forms are addressing. XForms is a new technology, announced in October 2003, intended to replace HTML Forms.

The advantages of XForms include:

• It improves the user experience: XForms has been designed to allow much to be checked by the browser, such as types of fields being filled in, or that one date is later than another. This reduces the need for round trips to the server or for extensive script-based solutions, and improves the user experience by giving immediate feedback to what is being filled in.
• It is XML, and it can submit XML.
• It combines existing XML technologies: Rather than reinventing the wheel, XForms uses a number of existing XML technologies, such as XPath for addressing and calculating values, and XML Schemas for defining data types. This has a dual benefit: ease of learning for people who already know these technologies, and implementors can use off-the-shelf components to build their systems.
• It is internationalized.
• It is accessible: XForms has been designed so that it will work equally well with accessible technologies (for instance for blind users) and with traditional visual browsers.
• It is device independent: The same form can be delivered without change to a traditional browser, a PDA, a mobile phone, a voice browser, and even some more exotic emerging clients such as an Instant Messenger. This greatly eases providing forms to a wide audience, since forms only need to be authored once.
• It is easier to author complicated forms.

The presenter is one of the authors of the XForms specifications, and is chair of the Forms Working Group that produced the technology.

This tutorial works from a basis of HTML Forms, and introduces XForms step-by-step. It covers essentially all of XForms except some technical details about events, and no more than a passing reference to the use of Schemas.

Emphasis is on how to improve the user experience, and how XForms improves accessibility and device independence, and makes the author’s life easy in producing a better experience.

Plan

Four sections, each with a practical

1. Introduction, equivalents to HTML
2. Editing XML
3. Controlling controls
4. Wizards and shopping baskets

HTML Forms: a great success!

• Forms have been the basis of the e-commerce revolution
• You find them everywhere on the web

Searching

Buying

Logging in

Configuring hardware

Reading mail

Composing email

Etc etc

• Tracking packages
• calculating currencies
• submitting taxes
• banking
• expenses
• calendars
• blogging
• wiki
• ...

Problems with HTML Forms

• Presentation oriented, mixing data and presentation
• No types, Ping-ponging to the server
• Reliance on scripting
• Problems with non-Western characters
• Accessibility problems
• Hard to make cross-device for single authoring
• Impoverished data-model, no integration with existing streams
• Hard to manage, hard to see what is returned
• No support for wizards and shopping carts etc.

Soundbite: "Javascript accounts for 90% of our headaches in complex forms, and is extremely brittle and unmaintainable."

XForms

• e-forms are a current hot topic.
• The W3C XForms working group started out as a sub-group of the HTML working group, but soon spun off as an independent group when it emerged how much work there was to be done.
• XForms has been designed based on an analysis of HTML Forms, what they can do, and what they can't.

The Approach

The essence is to separate what is being returned from how the values are filled in.

• The model specifies the values being collected (the instance), and their related logic:
  • Types, restrictions
  • Initial values, Relations between values
• The body of the document then binds forms controls to values in the instance

Controls

An essential difference with HTML is that XForms controls are_intent-based_ rather than presentation oriented.

Rather than specifying that a control consists of radio buttons, or a menu, XForms specifies for instance that a control selects one item from a list of items. CSS or similar can be used to provide the necessary presentation.

This way the same XForm can be used across different devices without change.

XForms improves the user experience

XForms has been designed to allow much to be checked by the browser, such as

• types of fields being filled in
• that a particular field is required
• or that one date is later than another.

This reduces the need for round trips to the server or for extensive script-based solutions, and improves the user experience by giving immediate feedback on what is being filled in.

It is easier to author and maintain complicated forms

Because XForms uses declarative markup to declare properties of values, and to build relationships between values, it is much easier for the author to create complicated, adaptive forms, and doesn't rely on scripting.

An HTML Form converted to XForms looks pretty much the same, but when you start to build forms that HTML wasn't designed for, XForms becomes much simpler.

It is XML, and it can submit XML

XForms is properly integrated into XML: it is in XML, the data it collects in the form is XML, it can load external XML documents as initial data, and can submit the results as XML.

By including the user in the XML pipeline, it at last means you can have end-to-end XML, right up to the user's desktop.

However, it still supports 'legacy' servers.

XForms is also a part of XHTML2.

It combines existing XML technologies

Rather than reinventing the wheel, XForms uses a number of existing XML technologies, such as

• XPath for addressing and calculating values
• XML Schema for defining data types.

This has a dual benefit:

• ease of learning for people who already know these technologies
• the ability for implementors to use off-the-shelf components to build their systems.

It integrates into existing data streams

Data can be pre-loaded into a form from external sources.

Existing Schemas can be used.

It integrates with SOAP and XML RPC.

Doesn't require new server infrastructure.

It is device independent

Thanks to the intent-based controls, the same form can be delivered_without change_ to a traditional browser, a PDA, a mobile phone, a voice browser, and even some more exotic emerging clients such as an Instant Messenger.

This greatly eases providing forms to a wide audience, since forms only need to be authored once.

It is internationalized

Thanks to using XML, there are no problems with loading and submitting non-Western data.

It is accessible

XForms has been designed so that it will work equally well with accessible technologies (for instance for blind users) and with traditional visual browsers.

It is royalty-free and unencumbered

Open standard

Wide industry support

Widely implemented

No vendor lock-in!

(If you think this is a good idea, join W3C!)

It supports new use cases

Regular forms uses

Editing XML

Spreadsheets

Applications

As output transformation

Basic structure of XForms

Take this simple HTML form:

The main difference in XForms is that details of the values collected and how to submit them are gathered in the head, in an element calledmodel; only the form controls are put in the body.

... basic structure

So in this case the minimum you need in the head is (XForms elements and attributes are in lower case):

The <form> element is now no longer needed; the controls in the body look like this:

Find Go

... basic structure

What you can hopefully work out from this is that form controls have a<label> element as child, the <input>uses "ref" instead of "name", and there is a separate submit control that links to the details of the submission in the head. So the complete example is:

Complete XForms search example

<h:html xmlns:h="http://www.w3.org/1999/xhtml" xmlns="" title="undefined" rel="noopener noreferrer">http://www.w3.org/2002/xforms"> <h:head> <h:title>Search <submission** **action="http://example.com/search"** **method="get" id="s"/> <h:body> <h:p> Find Go

Namespaces

• Another obvious difference is the use of h: prefixes
• Nothing to do with XForms, but with XML
• Namespace says which language elements belong to
• One language may be the 'default' language
• In the above XForms is the default
• XHTML could have been made the default:

HTML as default namespace

**** **Find** **** **** **Go** ****

Choice of prefixes

• You can make nothing the default, and prefix all elements
• You can choose any prefix; h: or x: orhtml: or form:, or ...

Making XForms documents interoperable

• Unfortunately, Microsoft Internet Explorer does not allow you to choose default language
• HTML must be default
• Some magic words are needed, but your documents will also run on true XML systems (This is for FormsPlayer; other IE plugins may not require this)

XForms equivalents for simple HTML Forms features

Now to compare one for one HTML forms controls with XForms equivalents

Simple Text Input

To input a single text element

First name:

is written

First name:

There is no need to indicate that it is text: in the absence of any other information, by default it is text (called string in XForms).

We will see later how to give any control an initial value.

Textarea

To input multiline text

Message:

is written

Styling controls

Styling is done using a style sheet. For instance:

textarea[ref="message"] { font-family: sans-serif; height: 20em; width: 80em }

or

textarea[ref="message"] { font-family: serif; height: 2cm; width: 20% }

If you want all your textareas to have the same dimensions, you can use

textarea { font-family: sans-serif; height: 20em; width: 80em }

Adding a stylesheet

The easiest way to include a style sheet in your document is to add this at the beginning of the document:

where 'style.css' is the name of your stylesheet, although in XHTML you can also say in the :

(In IE you must do this)

Radio Buttons

Radio buttons select one value from a set:

Gender: Male Female

becomes

Presentation of controls

• Controls principally represent their purpose
• select and select1 may be presented as radio buttons, a (scrollable) select area, or a menu.
• Use the hint appearance="full" to suggest presentation as radio buttons.
• Use appearance="compact" to suggest a select area
• Use appearance="minimal" to suggest a menu

We will see later how to preselect a value.

Checkboxes

HTML Checkboxes select zero or more from a list.

Flavors: Vanilla Strawberry Chocolate

is written

... checkboxes

Depending on the presence of the multiple attribute in HTML, menus select one, or zero or more from a list of options. You either use<select1> to select a single choice, or<select> to select zero or more.

Month:

would be written:

... menus

If multiple isn't on the HTML select, useselect1 instead.

Open and closed selections

You can add selection="open" on select andselect1 to allow for open ended selections:

File Select

To select a file to be uploaded

is written

<submission method="form-data-post" .../> ... File:

Passwords

Password:

is written

Reset

• Hardly anyone actually uses reset buttons, yet very many Web forms include them.
• Often the reset button with the text "Reset" is larger than the submission button that is often marked "OK" (and there's no undo)
• While it is possible to create a reset button in XForms, it is deliberately harder to do:

is therefore written

Exercise: Log in

Write a form to login somewhere.

Example

If your form doesn't work, check that:

• the namespace URIs are correct
• elements have the correct prefix
• elements are closed properly
• attributes are properly enclosed in quotes
• the element is correctly declared (if necessary)

Buttons

Buttons have no predefined behavior, but have a behavior attached to them which is triggered when a relevant event occurs.

The button element

can be written

Show <h:script ev:event="DOMActivate" type="text/javascript">show()

or

... buttons

Show

where "#show" locates the element (for instance ascript element) that implements the behavior:

• The <script> element is a handler for the event DOMActivate and in the absence of any other information, the parent element is theobserver (<input> in this case).
• Note that

  ... another advantage

  This approach allows you to specify handlers for different events:(HTML example)

  Actions

  • XForms does not use script, but in-built actions.
  • You've already seen one example with reset: Clear all fields ****
  • is an action that resets all values in the instance to their original values (a copy is made on startup).

  Other actions

  • setvalue: for setting values in an instance
  • send: submit an instance
  • message: display a message
    Done!
    level="ephemeral": hover style
    level="modeless": window style
    level="modal": "OK" style

  ... other actions

  • setfocus: set focus on a control
  • action: for grouping
  • load: load a resource or

  ... other actions

  • dispatch: dispatch an event
  • rebuild, recalculate, revalidate, refresh: almost never needed
  • toggle: see later under wizards
  • insert, delete, setindex: see later under repeat

  Help, hint and alert

  All forms controls have, as well as a element, also , and .

  • help: is displayed if the user asks for help
  • hint: is for hover-type hints
  • alert: is for information if the value does not validate Return Must be a date later than today

  Events

  There are very many events you can catch in XForms, including initialisation events, error notifications, values changing, validity changing, and submission done.

  Saved! ... Save

  Other ways to specify the event-observer-handler relationship

  One way is to move the handler to some other part of the document, and specify the relationship there (like some variants of HTML use thefor attribute on the <script> element):

  ... ...

  ... another way

  Another way is to move the handler somewhere, and specify the relationship in another place with the <listener> element:

  ... ... ...

  • This allows you to use the same handler for more than one observer
  • Note that the ev: prefix goes on the element in this case, not the attributes.

  ... another way

  And finally, you can specify the relationship on the observer itself:

  ... ...

  Exercise: Events

  When the Form has been loaded, an xforms-ready event is sent to the <model> element.

  Write a handler that sets the focus to a particular control.

  You will need the action <setfocus control="_...id..._"/>

  Example

  Wizards: toggle and switch

  These are used to reveal and hide parts of the interface.

  About you Name: City: Email: Next **** ...

  ... toggle and switch

  ... Your preferences Favorite food: ...
  Next ... ...

  ... Adding a back button

  ... Your preferences Favorite food: Favorite drink: Preferred music style:
  Back Next ...

  Switch for simple/advanced views

  To: Subject: **** **More** **** **** To: Subject: Cc: Bcc: **** **Less** **** ****

  Switch for editing

  Name: City: Email: **** **Edit** **** **** Name: City: Email: **** **Done** **** ****

  Exercise: Switch and Toggle

  Take the earlier bank example (in the section "Life after submit") and split the two parts of the interaction up using a switch.

  Hint: you might need , ,

  Example

  Repeat

  Repeat allows you to bind to repeating items in an instance

  eggs6 milk2 litres ...

  <**repeat nodeset="buy"** id="shoprepeat"> Buy Amount

  Note that a repeat sets the XPath context.

  Adding items

  There is an action called insertthat adds items to a collection:

  New <**insert** ev:event="DOMActivate" nodeset="buy" position="before" at="1" />

  This adds a new item at the start; you can add a new element at the end with

  or add a new item after the current position with

  Deleting items

  To delete an item, you use the delete action:

  Delete <**delete** ev:event="DOMActivate" nodeset="buy" at="index(shoprepeat)" />

  The best place to include this is in the repeat, so you get one delete button per item, but you could put it next to the 'new' button, when it would delete the 'current' item.

  Implementations

  • At release XForms had more implementations announced than any other W3C spec had ever had at that stage
  • Different types of implementation:
    • plugin
    • native
    • 'zero install'
    • proxy
    • editors
    • office suites
  • Many big players doing implementations, e.g.
    • Novell
    • Oracle
    • IBM
    • Sun

  "The age of the fat client is past" -- an implementor

  Users

  As you would expect with a new technology, first adopters are within companies and vertical industries that have control over the software environment used.

  Major companies and industries that are already using XForms include Bristol-Myers-Squibb, Hewlett-Packard, Remia - a major Dutch food manufacturer, Frauenhofer (known for MP3), Daiwa - a Japanese Bank, the entire British Life Insurance industry, the US Navy, German Shipbuilding ... and several more that are on the point of being announced.

  As more industries adopt XForms, the expectation is that it will then spread out into horizontal use.

  The Future

  Experience with XForms 1.0 has revealed a number of things:

  • Some ambiguities
  • Some missing functionality
  • Some 'low hanging fruit': additional features implemented on several implementations, but in different ways

  A future iteration of XForms will address these issues.

  More Information

  The origin: www.w3.org/Markup/Forms, and if your company is a member: www.w3.org/Markup/Forms/Group

  XForms: http://www.w3.org/TR/xforms/

  XPath: http://www.w3.org/TR/xpath

  XPath quick reference: http://www.mulberrytech.com/quickref/XSLTquickref.pdf

  XML Events: http://www.w3.org/TR/xml-events/

  validator: www.xformsinstitute.com

  Exercise: To Do list

  Design a To Do list manager

  What will the data-structure look like?

  What actions will you need?

  E.g.

  • New task
  • Delete task
  • Change state of task

  Example form

  Data structure

  Exercise: RSS

  RSS contains sequences of items like this:

  W3C Standards Tour The W3C Spanish Office brings its first W3C Standards Tour to ten universities in Spain from 3 to 26 November. http://www.w3.org/News/2004#item163 2004-10-27

  write a form to edit such a document. (The root element is rdf:RDF)