XForms Input Control
- Previous Page XForms XPath
- Next Page XForms Selection
The user interface of XForms uses XForms controls.
XForms controls
User interface elements in XForms are called XForms controls.
The most commonly used control elements are <input> and <submit>.
Each control element has a ref attribute that refers back to the XForms data model.
Controls independent of devices
Understanding the XForms user interface does not precisely describe how XForms controls are displayed is important.
Since XForms is independent of platforms and devices, XForms leaves the right to display these spaces to the browser.
Therefore, XForms can be used on all types of devices, such as personal computers, mobile phones, handheld computers, etc. XForms is also a perfect solution for defining user interfaces for people with disabilities.
Input control
The input control is the most commonly used XForms control. It is used to input a line of text:
<input ref="name/fname"> <label>First Name</label> </input>
Most of the time, the input control will be displayed as such an input field:
Try it yourself
The <label> element
The <label> element is a mandatory child element of all XForms input controls.
The reason for this is to ensure that the form is usable on all types of devices (because labels can be processed in different ways.) For voice software, labels can be read out, and for some handheld devices, labels must follow the input screen by screen.
Secret control
The Secret control is a special variant of the input space, designed for entering passwords or other hidden information:
<secret ref="name/password"> <label>Password:</label> </secret>
Most of the time, the secret control will be displayed as such an input field:
Textarea control
The Textarea control is used for multi-line input:
<textarea ref="message"> <label>Message</label> </textarea>
The textarea control can be displayed as such an input field:
Submit control
The Submit control is used to submit data:
<submit submission="form1"> <label>Submit</label> </submit>
Trigger control
The trigger control is used to trigger an action:
<trigger ref="calculate"> <label>Calculate!</label> </trigger>
Output control:
The output space is used to display XForms data:
<p>First Name: <output ref="name/fname" /></p> <p>Last Name: <output ref="name/lname" /></p>
The example above is only for outputting the content of the <fname> and <lname> nodes in the XForms XML document (XForms instance):
<instance>
<person>
<name>
<fname>David</fname>
<lname>Smith</lname>
</name>
</person>
</instance>
It will be displayed as follows:
First Name: David Last Name: Smith
Try it yourself
Upload Control
The upload control is designed to upload files to the server:
<upload bind="name"> <label>File to upload:</label> <filename bind="file"/> <mediatype bind="media"/> </upload>
- Previous Page XForms XPath
- Next Page XForms Selection
