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.