XHTML2 & XForms (original) (raw)

Structuring advantages

Advantages include:

• easier to cut and paste and keep your heading levels consistent
• importing sections in PHP-like situations
• you are no longer restricted to 6 levels of header.

h1-h6 are currently still available.

It is amazing how little issues can take so much effort.

A question that we often had to address was "is

The Japanese community were also asking for a .

And then we had an aha moment...

James Joyce Ulysses

James Joyce Ulysses

James Joyce Ulysses

Separator

These are all

The only thing wrong with

We already needed a separator element for navigation lists, so we just decided to do away with all the confusion and rename

Better paragraphs

A paragraph is now much closer to what people perceive as a paragraph. For instance, this is now allowed:

Advantages include:

• easier to cut and paste and keep your heading levels consistent.
• importing sections in PHP-like situations
• you are no longer restricted to 6 levels of header.

Images

You might be surprised to know that was not in the original HTML.

is actually badly designed:

• Not backwards compatible :-)
• No fallback except the alt text (this has seriously impeded the acceptance of PNG images)
• The alt text can't be marked up
• Longdesc is hard to use, seldom implemented, and seldom used.

... images

So what we have done is allowed the src attribute on any element. The image replaces the element content, and the element content is fallback. Essentially we have added fallback, moved the longdesc into the document, merged it with alt, and allowed it to be marked up all in one go.

Walk down the steps from the platform turn left, and walk on to the end of the street

The element is still available, but the alt text goes in the content:

W3C

Image types

HTML4 has the 'type' attribute in a number of places as a hint to the browser as to what it could expect if it went and got a resource.

But it is pretty useless. Some browsers ignore it, some don't.

Now it is a specification of the type, and meshes with the HTTP accept: field. This means that

...

will give you a GIF, or otherwise give you the fallback.

Similarly, you can write:

...

...

Leaving the type attribute off is equivalent to sayingtype="*/*"

Whitespace and pre

In HTML the only method to retain whitespace in content is with<pre>.

IN XHTML2, all elements can use the attributelayout="relevant".

...

This doesn't impose a fixed-width font on the output, just that spaces and newlines are preserved.

Lines

splits a paragraph into different parts, but they are unaddressable with CSS. So instead of a breaking element, XHTML2 uses a structuring element:

Steven Pemberton
CWI/W3C
Amsterdam

is now

Steven Pemberton CWI/W3C Amsterdam

This gives you many more presentational possibilities, such as automatic numbering of lines, or colouring of alternate lines, etc.

Hypertext

In a non-backwards compatible step, HTML4 allowed any element to become the target of a link (with id on any element).

XHTML2 extends this by now allowing any element to become the source of a link as well, by allowing href anywhere.

So, instead of

you may now write

though is still available.

Navigation lists

One thing you see everywhere on the web are menus for navigation, implemented with script.

XHTML2 now supports these natively:

Whether they are presented as menus, or in some other way, depends on the platform, the stylesheet, etc.

dir, edit

Certain things that used to be done with elements are now done with attributes:

and

<span **dir="rlo"**>...

media

In certain places in HTML4/XHTML1 you can say that an element applies only to a specific media, like:

<**/head**> <**group** compose="vertical"> <**frame** id="banner" source="banner.xhtml"/> <**group** compose="horizontal"> <**/group**> <**frame** id="footer" source="copyright.xhtml"/> <**/group**>

home.xframes#frames(main=a.xhtml,banner=b.xhtml)

XForms: the new Web Forms language

The major new functionality in XHTML2 is the forms language, XForms.

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
• ...

So why XForms?

After a decade of experience with HTML Forms, we now know more about what we need and how to achieve it.

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, the Approach and the Advantages

XForms has been designed based on an analysis of HTML Forms, what they can do, and what they can't.

The Essence: Separation of Values from Controls

There are two parts to the essence of XForms. The first is to separate what is being returned from how the values are filled in.

• The model specifies the values being collected (theinstance), 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

The Essence: Intent-based Controls

The second part is that the form controls, rather than expressing how they should look (radio buttons, menu, etc), express their intent (this control selects one value from a list).

You then use styling to say how they should be represented, possibly with different styling for different devices (as a menu on a small screen, as radio buttons on a large screen).

Colour: red green blue

Overview of Advantages

XForms gives many advantages over classic HTML Forms:

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 rather easy to implement

XMLDOMCSSJavascriptXHTMLXPathXForms

��� =Regular XHTML Browser

Time to build all of above: 3 programmers, 4 months

Total footprint (on IPAQ implementation): 400K (above Java VM)

In fact this is quite evolutionary: XForms uses existing W3C components. It is only the XForms processing model that describes when to calculate values that is really new.

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!)

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 you put the following in the head (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

Complete XForms search example

**Find** **Go**

Making the Submitted Values Explicit

Although in simple cases the instance element is optional, it is good practice to include an explicit instance, like this:

• You immediately see that the only data value submitted is called "q".
• The system will now also check that when you say ref="q" that there really is a q in the instance.
• We've used <data> here, but you can use any tag you like.

Initial Values

For initialising controls including initialising checked boxes, and selected menu items etc., you just supply an instance with pre-filled values. For the search example:

would pre-fill the text control with the word Keywords.

• Any values in the instance that haven't been bound to by a control are by definition not visible to the user.
• Therefore there is no need for hidden controls
• To add a hidden value results to the search form, we change the instance to:

Getting Initial Values From Elsewhere

• You don't have to specify the initial instance in the document itself, because you can load it from an external resource, like this:
  <instance
  **src="" title="undefined" rel="noopener noreferrer">http://example.org/templates/t21.xml"**/>
• The resource then contains your data, like 640 480 8
• You can use a local file, likesrc=" file:data.xml"

Configuring Hardware

This makes configuring hardware even easier than it now is: instead of the device hosting a web server that can deal with HTML Forms, all it has to do is deliver its configuration parameters as an XML document, and XForms provides the interface.

'Editing' any XML document

• External instances give you immense power
• The ref attribute on controls can be any XPath expression
• XPath lets you select any element or attribute in an XML document
• You can bring in any XML document as instance, even an XHTML document

... example

• For instance to bind to the <title> element in an XHTML document
  ...
  (i.e. the title element within the head element within the html element, all in the XHTML namespace)
• or the class attribute on the body element:
  ...

Editing example

Suppose a shop has very unpredictable opening hours (perhaps it depends on the weather), and they want to have a Web page that people can go to to see if it is open. Suppose the page in question has a single paragraph in the body:

The shop is closed today.

Well, rather than teaching the shop staff how to write HTML to update this, we can make a simple form to edit the pageinstead:

Editing XHTML page

• The page must be correct XHTML (not HTML)
• The server must accept the "put" method (or you can save the result to a file if it is on the local machine)
• (It is examples like this that make the advantages of XHTML over HTML visible)

XForms controls

XForms has equivalent controls for everything that you can do in HTML.

But there is an important difference: XForms controls are not presentation based, but intent-based – they say what they are meant to achieve not how they do it.

... controls

For instance, a select control

can be represented using radio buttons, a drop-down menu, a select list (or anything else suitable you can think of)

depending on the style-sheet or the choice of the device.

Country Netherlands United Kingdom France

XForms equivalents for simple HTML Forms features

As already said, XForms has equivalents for all HTML controls, such as text, text boxes, selecting one or many, file upload, etc.

A user agent may adapt an input control based on knowledge of the data-type involved.

For instance

can pop up a date picker control.

Extra control: range

XForms has a couple of extra controls:

may be represented with a slider or similar.

Extra control: output

The output control allows you to include values as text in the document.

Your current total is:

or

Total

This can be used to allow the user to preview values being submitted.

... output

You can also calculate values:

Total volume:

(where height, width and depth are values collected by other controls.)

Wizards: toggle and switch

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

An example

Repeat

Repeat allows you to bind to repeating items in an instance. There are also facilities to delete and insert items in a repeating set.

You have already seen an example

Controlling Controls

• In HTML you can specify that controls are disabled, or_read-only_ but the only way you can change the property is with scripting.
• XForms offers easy ways to control these properties, but has other properties you can specify as well

Properties

The 'model binding' properties that you can control are:

• that a value is only relevant in certain circumstances (for instance name of spouse only if married)
• that a value is readonly in certain circumstances
• that a value is required (that a value must be supplied before the form can be submitted)
• that a value has a constraint (for instance that the year of birth is earlier than the year of death)
• that the value must conform to a type (for instance that it must be an integer), or
• that it is calculated from other values (for instance that the total is the sum of some other values).

... properties

Note that in XForms it is the collected value that has the property, not the control, but the property shows up on all controls bound to the value.

These properties use a <bind> element that goes in the<model>. To use bind, you must have an explicit <instance> element.

Disabled Controls = relevant

To disable controls you use the relevant property. For instance, to say that the credit card number only needs to be filled in if the person is paying by credit, you can write:

An example of what we are going to do

... relevant

• This states that the values within cc are only relevant when method has the value credit, and will therefore be disabled for other values of method.
• A browser is free to decide how disabled controls are presented (and it may also allow you to specify in a stylesheet how they should look), but typically they will be grayed out in the normal way.

... writing the controls

The controls could be written like this (but note that there is no indication that they may get disabled: that is inherited from the value they refer to):

<select1 **ref="method"**> Method of payment: Cashcash Credit cardcredit

Readonly Controls

Similarly to relevant, you can specify a condition under which a value is read-only. For instance:

This example says that the default value of color isblack, and can't be changed if variant has the value basic.

Required Controls

A useful new feature in XForms is the ability to state that a value must be supplied before the form is submitted.

The simplest case is just to say that a value is always required. For instance, with the search example:

... required

but like the readonly and relevant attributes, you can use any XPath expression to make a value conditionally required:

<bind nodeset="state" **required="../country='USA'"**/>

which says that the value for state is required when the value for country is "USA".

It is up to the browser to decide how to tell you that a value is required, but it may also allow you to define it in a stylesheet.

Constraint Property

This property allows you to add extra constraints to a value. For instance:

<bind nodeset="year" **constraint=". > 1970"**/>

constrains the year to be after 1970.

Note the XPath use of "." to mean "this value".

Calculate Property

It is possible to indicate that a value in the instance is calculated from other values. For instance:

<bind ref="volume" **calculate="../height * ../width * ../depth"**/>

When a value is calculated like this, it automatically becomesreadonly.

... calculate functions

There are a number of functions available, including:

• arithmetic: + - * div mod
• string manipulation: concat, substring, ...
• date handling: days-from-date, seconds-from-dateTime, months, seconds, now
• booleans: <= < >= > = != and or
• conditionals using 'if':
  

Types

• Any value can be given a type. The browser can then check that the values match the required type.
• For instance, if the search example is actually only for searching for numbers (for instance for searching in a bug database), then we only have to add:
  <bind nodeset="q" **type="xsd:integer"**/>
• This will prevent the value being submitted unless it is an integer.
• You can also apply a schema to a whole instance

... types

• If you want to collect the URL of someone's homepage, then you can specify
  <bind nodeset="homepage" **type="xsd:anyURI"**/>
• As already mentioned, user agents can do special things when they know the data type of a value. For instance, pop up a date picker rather than require you to type in the characters of a date.

... types

There are a number of useful built-in types you can use, including:

• xsd:string, xsd:normalizedString (a string with whitespace characters replaced by the space character).
• xsd:integer, xsd:nonPositiveInteger, xsd:negativeInteger, xsd:nonNegativeInteger, xsd:positiveInteger
• xsd:boolean
• xsd:decimal, xsd:double
• xsd:date, xsd:time, xsd:dateTime
• xsd:anyURI (A URI)
• xforms:listItems (A space-separated list of strings for use withselect)
• xforms:listItem (A string without any spaces)

... types

You can apply Schemas to instances:

or include them inline:

Combining Properties

If you have several binds referring to the same value, you can combine them:

<bind nodeset="q" **type="xsd:integer"** **required="true()"**/>

Submitting

Now to look at details of submission, like multiple submissions, submission methods, and what happens after submission.

Multiple Submissions

• HTML only allows you to submit the data to one server, in a single way.
• XForms allows you to submit the data to different servers, or in different ways.
• For instance, the search example could allow the user to submit the search string to different search engines:

... multiple submissions

and then in the body:

Find: <submit **submission="org"**> Search example.org <submit **submission="com"**> Search example.com

Find:

Submission Methods

• Just as with HTML there are a number of ways to submit the data.
• There is still support for GET, URL-encoded POST, and multipart formdata POST.
• There are some new ways of submission; the most interesting are: method="post": posts the results as XML method="put": puts the results as XML.
• You can submit to a SOAP or XML RPC server as well as traditional ones.

... submission to file

• An interesting use of this is something like:
  
  which saves your results to the local filestore by using thefile: scheme.
• For a large form, you could have separate 'save to disk' and 'submit' buttons.

Life after Submit

• The default when values have been submitted is for the result returned by the server to replace the whole document, just as with HTML.
• There are other options, specified with the attributereplace on the submission element.
• replace="instance" replaces only the instance
• replace="none" leaves the form document as-is without replacing it.

... example of different submissions

• For example, for an address-change form for a bank, you can provide two buttons
  • prefill the form with name and address based on the account number
  • submit the changed results
• The first button replaces the instance with a new instance containing the details of the person with the account number, which you can then change;
• the 'submit' button will then send the changed instance back, leaving the form as-is in the browser to allow further changes or to input a new account number to prefill.

... example

More than one form in a document

• For more than one form in a document, you can use one model per form, but then you need to identify which form each control refers to
• You do this with an id attribute on each model, and amodel attribute on each control:

... more than one form

<model **id="search"**> <submission id="s" .../> <model **id="login"**> <submission id="l" .../> ... <input **model="search"** ref="q">Find Go ... <input **model="login"** ref="user">User name <secret **model="login"** ref="passwd">Password Log in

More than one instance in a model

• You can have more than one instance in a model.
• You identify which one you want with an id attribute and the use of the instance() function.
• If you don't identify which, then the first instance in the model is used
• Particularly useful for inputting values from several external sources

... more than one instance

... more than one instance

Using more than one instance

Useful for filling itemsets in select and select1:

or creating dynamic labels (think multilingual) [example]:

can also take src="..."

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 (on Openoffice/Staroffice)
• Mozilla
• (More that are still secret)

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.

• the entire British Insurance industry,
• the US Navy (in submarines),
• NASA (Jet Propulsion Laboratories),
• UK Government (Planning Inspectorate),
• Verifone - a payment company, for configuring petrol pumps,
• Xerox, for an Enterprise Content Management system, to implement dynamic forms and to do XML binding to editing and adding for Wikis, Blogs, and content management, and another use in active development.
• Yahoo for several internal applications.
• NACS - the National Association of Consumer Stores for configuring and accessing data from a range of devices,
• Vancity - A Canadian Credit Union, with public XForms-driven pages,
• Daiwa - a Japanese Bank, for a transaction system,
• German Shipbuilders, for configuring ships,
• Fraunhofer (known for MP3) for configuring websites,
• Bristol-Myers-Squibb (pharmaceutical),
• Remia - a major Dutch food manufacturer,
• KDDI: embedded in a Japanese mobile phone,
• CDC: for disease control after hurricane Katrina

... users

That list is there just to give a taste, but amongst others not mentioned there are at least 3 fortune 500 companies who don't want it to be public knowledge so that their competitors don't get wind of it.

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

Mobile: XForms (XSmiles) on an IPAQ

XSmiles now running under J2ME PP

...

...

XForms (picoForms) on a Nokia 9300

XForms (SolidApp) on a Sony Ericsson phone

XForms for Web Applications

XForms has everything needed for an application:

• A data model
• Processing
• Input
• Output

People are already using XForms for some pretty exciting applications. xport.net who produce FormsPlayer are doing the most interesting stuff, by using SVG as the stylesheet language. They have produced examples such as a world clock, a contacts database, and even Google Maps in XForms!

Google maps in XForms

maps

The interesting thing about this last example is that it is 25K of XForms, compared with 200K+ of javascript...

This is largely thanks to the declarative programming model of XForms, that means that you don't have to deal with lots of the fiddly administrative details.

Bear in mind that empirical evidence suggests that a program that is an order of magnitude larger takes 34 times as much effort; or put the other way, a program that is an order of magnitude smaller costs 3% of the effort...

This has been backed up recently by a company using XForms for designing special-purpose interfaces. Usually it takes 30 people 5 years to finish one project. With XForms it took 10 people 1 year (including learning XForms).

Conclusion (XForms)

XForms is achieving critical mass much faster than we had anticipated. Companies large and small, consortia, even governments and government agencies are beating a path to our door.

Apart from offering a far more managable base for forms on the web, we believe that XForms is an excellent basis for future web applications, because it offers a model that gives you:

• Accessible applications
• Device-independent applications
• Much less programming.

Conclusion (XHTML2)

XHTML2 has been designed on the basis of requirements from a large number of different communities.

It has been designed to be as recognisably XHTML as possible within the constraints of the new requirements.

It is going to last call shortly: we welcome your comments!