First up, the definition of the XForms model: unlike the previous example, I've defined the instance data tree in a separate file and imported it via the "src" attribute.


<!-- form model -->
<xforms:model id="immigration">
 <xforms:instance src="immigration.xml" />
</xforms:model>
<basefont face="Arial">



Here's what "immigration.xml" looks like:


<?xml version="1.0" encoding="iso-8859-1"

You've already seen how to use an <xforms:input> element in previous examples, so I won't go into the details again. Do note, however, my usage of the <xforms:label> and <xforms:hint> elements within it. These come in handy to provide descriptive human-readable information about the control.


 <xforms:input id="txtname" model="immigration" 
ref="/immigrant/name">
  <xforms:label>Name</xforms:label>
  <xforms:hint>
  Enter your name here
  </xforms:hint>
 </xforms:input>



The <xforms:select1> element allows the user to select one item from a series of options:


 <xforms:select1 model="immigration" 
 ref="/immigrant/purpose" appearance="full">
  <xforms:label>Purpose of visit</xforms:label>
  <xforms:hint>
  Please state the purpose of your visit
  </xforms:hint>
  <xforms:item>
   <xforms:label>Business</xforms:label>
   <xforms:value>B</xforms:value>
  </xforms:item>
  <xforms:item>
   <xforms:label>Pleasure</xforms:label>
   <xforms:value>P</xforms:value>
  </xforms:item>
  <xforms:item>
   <xforms:label>Other</xforms:label>
   <xforms:value>O</xforms:value>
  </xforms:item>
 </xforms:select1>



Within the <xforms:select1> element, the list of available choices is defined via one or more <xforms:item> elements, each of which must have a label and value; the former is displayed to the user and the latter is passed to the server on submission.

A special "appearance" attribute in the <xforms:select1> element can be used to control the display of the element in the browser ("full" for a list of all values, "minimal" for a minimum number of values, and "compact" for a scrollable list).

Similar, though not identical to the above, is the <xforms:select> element, which allows the user to select more than one value from the options available.


 <xforms:select model="immigration" 
 ref="/immigrant/immunization" appearance="full">
  <xforms:label>Immunization</xforms:label>
  <xforms:hint>
  Please select the diseases that 
  you have been immunized against
  </xforms:hint>
  <xforms:item>
   <xforms:label>Smallpox</xforms:label>
   <xforms:value>100</xforms:value>
  </xforms:item>
  <xforms:item>
   <xforms:label>Malaria</xforms:label>
   <xforms:value>113</xforms:value>
  </xforms:item>
  <xforms:item>
   <xforms:label>Yellow fever</xforms:label>
   <xforms:value>56</xforms:value>
  </xforms:item>
  <xforms:item>
   <xforms:label>Typhoid</xforms:label>
   <xforms:value>174</xforms:value>
  </xforms:item>
 </xforms:select>



As before, the choices are defined via a series of <xforms:label> and <xforms:value> elements, while the "appearance" attribute can be used to control the appearance of the control ("full" for a list of all values, "minimal" for a minimum number of values, and "compact" for a scrollable list).

Finally, the <xforms:textarea> element is used to display a multi-line text entry box, suitable for use with large blocks of text.


 <xforms:textarea model="immigration" 
 ref="/immigrant/address">
  <xforms:label>
  Address in home country
  </xforms:label>
 </xforms:textarea>



And here's what it all looks like:

Now, all this is fine and dandy, but how about submitting the form and actually doing something with the user's data?

Well, that's a whole new kettle of fish, one which involves jumping through a complicated series of hoops involving the <xsd:submission> element. I don't plan to discuss it now. Instead, I'm going to defer it to the second segment of this tutorial and encourage you to spend the interim playing with the various form controls to understand how they work. Each control comes with specific properties that can be used to customize its behavior, so take a look at the specification, get comfortable with them, try out a couple of implementations, and come back next week to take the next step in our XForms journey!

Note: Examples are illustrative only, and are not meant for a production environment. Melonfire provides no warranties or support for the source code described in this article.