XForms Basics - Welcome to Nowhere (
Page 5 of 6 )
The previous example demonstrated two of the form controls available in XForms. However, there are lots more. Here's a brief list:
- <xforms:input>
A single-line text entry field.
- <xforms:secret>
A single-line text entry field which masks user input, good for passwords.
- <xforms:select>
A list field allowing multiple selection.
- <xforms:select1>
A list field allowing selection of only a single item from the list.
- <xforms:textarea>
A multi-line text entry field
- <xforms:upload>
A file upload field.
- <xforms:range>
A field which restricts entry to a range of values.
- <xforms:submit>
A form submission field.
- <xforms:output>
A field for displaying values from the instance data.
In addition, the XForms specification also defines the following elements which may be attached to the controls above:
- <xforms:label>
Descriptive information for the corresponding control.
- <xforms:help>
Help information for the corresponding control.
- <xforms:hint>
Brief usage information for the corresponding control.
Here's an example demonstrating some of them in action:
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:xforms="http://www.w3.org/2002/xforms/cr">
<head>
<!-- form model -->
<xforms:model id="immigration">
<xforms:instance src="immigration.xml" />
</xforms:model>
<basefont face="Arial">
</head>
<body>
<!-- define interface controls -->
<table cellspacing="5" cellpadding="5"
border="0">
<tr>
<td colspan="2" align="center">
<font color="red" size="4">
Welcome to Immigration
</font></td>
</tr>
<tr>
<td>
<xforms:input id="txtname" model="immigration"
ref="/immigrant/name">
<xforms:label>Name</xforms:label>
<xforms:hint>
Enter your name here
</xforms:hint>
</xforms:input>
</td>
</tr>
<tr>
<td>
<xforms:input id="txtcitizenship" model="immigration"
ref="/immigrant/citizenship">
<xforms:label>Citizenship</xforms:label>
<xforms:hint>
Enter your country of origin here
</xforms:hint>
</xforms:input>
</td>
</tr>
<tr>
<td align="left">
<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>
</td>
</tr>
<tr>
<td align="left">
<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>
</tr>
<tr>
<td align="left">
<xforms:textarea model="immigration"
ref="/immigrant/address">
<xforms:label>
Address in home country
</xforms:label>
</xforms:textarea>
</td>
</tr>
</table>
</body>
</html>
/ 41 
