Context-sensitive Help

Whilst desktop applications nearly always have some form of help text available to guide the user, web applications generally do not. This is because there is no straightforward mechanism to provide help to a user in HTML; instead the author needs to produce correctly formatted help files, or register for specific keyboard events.

XForms provides the help element to fill this need.

The Help Element

As with hint, the help element can be added to any form control, can contain other mark-up, and hides its implementation details--all of which make it very easy for authors to use.

Let's use the help element to provide more information about the Description control:

<xf:input ref="description">
  <xf:label>Description:</xf:label>
  <xf:hint>Enter a <strong>description</strong> for the link</xf:hint>
  <xf:help>
    Although called a <em>description</em>, del.icio.us uses this
    field more like a title.
  </xf:help>
</xf:input>

Once you've updated your form, reloaded it and put your cursor in the Description field, press F1. The display you have should look something like this:

Screenshot of help text for the 'description' control

The user can continue to interact with the form whilst the help is displayed--it won't be removed until the OK button is pressed. The help window can be moved out of the way if necessary, simply by dragging the blue title bar.

Experiment

Since you can place other mark-up into the help text, try adding the del.icio.us logo, or some links to external documents that might give your users even more information. Remember that in HTML, if you want your link to open in a new window, you need to set the target attribute to _new...otherwise you will lose your application!