Using CSS

To show how CSS is used, we'll restyle our form so that each control is on its own line, with all the data entry areas lining up vertically. We'll also add a nice dotted line to separate each control. The result will be something like this:

The CSS rules for this are pretty simple, so I'll show them first and then explain what it all means. To update your form, place the following in the head element, after the title, and then refresh the browser:

<style type="text/css">
  html
  {
    font-family      : "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size        : x-small;
  }

  xf\:input,
  xf\:output
  {
    width            : 100%;
    padding-top      : 0.4em;
    padding-bottom   : 0.1em;
    border-bottom    : #d0c49d 1px dashed;
  }

  xf\:label
  {
    width            : 12em;
    vertical-align   : middle;
    margin-right     : 0.2em;
  }
</style>

The first part--the rules for the html element--will no doubt be familiar to you, and simply set a default font for our document.

The next set of CSS rules concern all input and output controls; to indicate that we want these rules to apply to the XForms input and output elements rather than elements with the same name from a different language (you never know!), we include the colon in the CSS selector. Note that since CSS uses the colon to specify pseudo-classes, we must escape it by placing a '\' in front:

  xf\:input,
  xf\:output
  {
    .
    .
    .

The first rule for input and output controls sets the width of the control to 100%, ensuring that each control takes up a whole line. Similarly the first rule for labels sets their width to 12em, which has the effect of lining up all the data entry areas.

Anatomy of a Control

Your first thought when looking at the previous rules may have been that setting the width of an input to 100% ought to have made just the data entry area take up an entire line, on a separate line from the label. This is a common assumption for people used to using HTML, and the reason is that the HTML input control is only a data entry area, with any labels that might apply to it being separate and taking up their own space. This means that there is no way to style the label for a specific control.

In XForms things are different. The control encloses its own label and the data entry area, like this:

Each of these parts can be styled independently, and since they have a common parent they can also be styled in relation to each other. For example, if we want the data entry area of all input controls to have a light green background, we would use this rule:

  .input-value,
  {
    background-color : lightgreen;
  }

The resulting form would look something like this:

Experiment

Try altering the values of the three parts of a control--the container, the label and the value--and see what happens. For example, see if you can make all labels bold, and place the label and data entry parts of controls on separate lines.

The Hint Element

Let's add some hints to our form to help our users, starting with a simple one on the URL control:

<xf:input ref="url">
  <xf:label>URL:</xf:label>
  <xf:hint>Please enter the URL for the link you want to store</xf:hint>
</xf:input>

If you add this hint to the form so far, you should end up with something like this (when you've opened the form, move your mouse over the URL control to see the hint):

Next we'll add a hint to the description control, but this time we'll make use of the HTML strong element to emphasise to our users what it is exactly that we want them to enter:

<xf:input ref="description">
  <xf:label>Description:</xf:label>
  <xf:hint>Enter a <strong>description</strong> for the link</xf:hint>
</xf:input>

(Note that you don't need to use a prefix on HTML tags in the way that we are doing for tags from the XForms language.)

The form will now look something like this:

You can use pretty much any HTML or XForms elements you like inside hint, making this a very easy way to create complicated user interfaces; for example, when a user hovers over the name of a person or a company, you could show the corresponding face or logo. Similarly, hovering over a product name might show its picture. In fact, you could even use the hint to show a further sub-form that collects more information from the user. Nesting mark-up in this way is a powerful technique which you will see used again and again, and we'll show some real examples in a later tutorial.

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:

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!