The Input Control

The simplest way to get data from a user is much the same as in HTML forms--by using the input control. However, although the controls have the same name, they do have a slightly different structure. We'll see an example first, and then look at how the mark-up differs from what you might be used to in HTML. The control we'll examine asks a user for a URL:

<xf:input ref="url">
  <xf:label>URL:</xf:label>
</xf:input>

The first difference from HTML that we can see, is that we must provide a label for the control. This shows how seriously accessibility has been taken in the design of XForms, and means it is now possible for voice systems to really know which text on a page applies to which control, rather than having to guess, as screenreaders are forced to do with today's forms.

The second change is that the data to be entered by the user is referred to using the ref attribute, rather than the name attribute.

The final change is that the name of the control has to have a qualifier on it, to show that it comes from the XForms language, and not the HTML language. This is pretty common when using a combination of XML languages, and distinguishing between languages is easily achieved by using a namespace prefix.

So far, so good. Now lets create another control--this time one that asks for a description for this URL:

<xf:input ref="description">
  <xf:label>Description:</xf:label>
</xf:input>

Hopefully no surprises there, since the only differences between this and our URL control are the text of the label, and the value used in the ref attribute.

If you want to follow along, copy the mark-up for the two controls into the body element in a document based on your template, and then view the document in Internet Explorer. As you can probably imagine, a form with just these two controls doesn't do much more than allow you to type in a URL and a description of it: