|
Forms in HTML are used to group other HTML controls together. A user basically interacts with a system through these input controls placed inside a form.
XForms allows us to create forms in XML. Some of the features of XForms include:
- Platform independent
- Separates the presentation from the model
- Values are submitted in XML format
- Univerally accepted
We will look into these topics in more details as we go along.
XForms Architecture
The architecture of XForms is divided into two parts :
- XForm Model
- XForm User Interface
XForm Model defines the the contents for the form and what it should do.
XForm User Interface creates the User Interface
The XForms Model
The XForm model describes the data and the form action. Lets look at an example :
<model>
<instance>
<employee>
<empId/>
<name/>
</employee>
</instance>
<submission id="form1" action="submit.asp" method="get"/>
</model>
In the above example we have defined the data model. The instance element defines the data which we will be the part of the XForms user interface. The submission element describes the action to take on form submission. It basically describes the server side page which will process the form data by setting the value for action attribute. It also sets the value for the method attribute which describes the request method.
The important thing to note here is that in the model we do not include any details of how to display the controls in the browser. Here we just take care of defining the data and the action.
The XForms User Interface
The XForms User Interface is used to design the user interface and it in turn is used to collect data from the user. For e.g:
<input ref="empId"><label>Employee Id</label></input>
<input ref="name"><label>Name</input>
<submit submission="form1"><label>Submit</label></submit>
In the example above we see two input elements. The input element is used to define input text fields. The input element has an attribute element called ref. The value in the ref element refer to the elements defined in the model. The submit element is the submit button. It has a submission attribute which is set to the value form1. The value refers to the submission element in the model.
Now lets join the model and the user interface together :
<xforms>
<model>
<instance>
<employee>
<empId/>
<name/>
</employee>
</instance>
<submission id="form1" action="submit.asp" method="get"/>
</model>
<input ref="empId"><label>Employee Id</label></input>
<input ref="name"><label>Name</label></input>
<submit submission="form1"><label>Submit</label></submit>
</xforms>
Output
The output of this XForm will be two text fields and a submit button. The two fields receive value for employee id and the employee name.
If the user enters values in the fields and clicks on the submit button the form value submitted is in XML format. For e.g :
<employee>
<empId>145234</empId>
<name>Hedge</name>
</employee>
The XForms Namespace
The official namespace for XForms is http://www.w3.org/2002/xforms. If one wants to use XForms in HTML then we should declare all XForm elements with an XForms namespace. For e.g :
<html xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<xf:model>
<xf:instance>
<employee>
<empId/>
<name/>
</employee>
</xf:instance>
<xf:submission id="form1" method="get"
action="submit.asp"/>
</xf:model>
</head>
<body>
<xf:input ref="empId">
<xf:label>Employee Id</xf:label></xf:input>
<br />
<xf:input ref="name">
<xf:label>Employee name</xf:label></xf:input>
<br />
<br />
<xf:submit submission="form1">
<xf:label>Submit</xf:label></xf:submit>
</body>
</html>
Input Controls in XForms
Input Control: The input control element is the most commonly used XForm element and we have seen how to use in the earlier example.
Secret Control: The secret control is used to input passwords or other sensitive information. For e.g:
<secret ref="password">
<label>Password:</label>
</secret>
TextArea Conrol: The textarea control is used for multi line output
<textarea ref="message">
<label>Feedback</label>
</textarea>
Trigger Control:The trigger control is used to trigger an action
<trigger ref="average">
<label>Average</label>
</trigger>
Output Control:The output control is used to output form data
<p>Employee Id: <output ref="empId" /></p>
<p>Employee Name: <output ref="name" /></p>
Select1 Control:The select1 contol is used to select one item from a list of items
<select1 ref="status">
<label>Status:</label>
<item>
<label>SingleMale</label>
<value>Single</value>
</item>
<item>
<label>Married</label>
<value>Married</value>
</item>
</select1>
Select Control:The select control is used to select one or more items from a list of controls
<select ref="languages">
<label>Qualifications</label>
<item>
<label>MCA</label>
<value>MCA</value>
</item>
<item>
<label>BCA</label>
<value>BCA</value>
</item>
<item>
<label>MS</label>
<value>MS</value>
</item>
<item>
<label>MBA</label>
<value>MBA</value>
</item>
</select>
Range Control:The range control is used to select values from a range
<range ref="age" start="5" end="100" step="5">
<label>Age:</label>
</range>
Upload Contol:The upload control is used for uploading files
Submit Control:The submit control is a button which is used to submit form data
XForms Data Type
XForms provides support for XML schema data types. To use the data types we need to declare the the XML schema namespace to the XML document. For e.g:
<html
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
Once we have declared the namespace we can use the datatypes as follows :
<xf:instance>
<employee xmlns="">
<empId xsi:type="xsd:string"/>
<name xsi:type="xsd:string"/>
<age xsi:type="xsd:integer"/>
<salary xsi:type="xsd:integer"/>
</employee>
</xf:instance>
XForm Properties
XForm properties are used to validate the values received by the input controls. We can set certain restrictions for the input controls via these properties. The input control are validated against the restrictions set. XForm properties reduces the effort to write scripting code. For e.g:
<model>
<instance>
<employee>
<empId/>
<name/>
</employee>
</instance>
<bind nodeset="employee/empId" required="true()"/>
</model>
XFrom Properties:
| calculate |
Defines a calculation to be performed on the data item |
| constraint |
Creates a constraint for the data item |
| p3ptype |
Defines a P3P data type for the item |
| readonly |
It defines whether the data item is readonly or editable |
| relevant |
It defines how relevant the data is (for display or submission) |
| required |
It specifies that the data item is required (cannot be blank) |
| type |
It defines the data type for the item |
XForms Action
Message Action
The message action element defines the message to display in the user interface. For e.g:
<input ref="name">
<label>Name</label>
<message level="ephemeral" event="DOMFocusIn">Enter Your Name</message>
</input>
In the above example the message is displayed as a tool tip when the focus is on the input field
SetValue Action
The setvalue action sets a new value in response to an action. For e.g:
<input ref="width">
<label>Width</label>
<setvalue value="500" event="xforms-ready"/>
</input>
In the above example the variable width is set to 500 when the form loads.
|
