Up to this point, we have only considered two kinds of Web form fields: text entry fields and action buttons. Since most Web forms offer more convenient ways of entering certain kinds of data, we shall now investigate multiple-choice fields as an example of how XSLForms handles more complicated types of fields.
We shall revise our form data structure to be the following:
<?xml version="1.0"?>
<structure>
<item value="some value">
<type value="some type"/>
<subitem subvalue="some other value"/>
</item>
</structure>
Whilst HTML offers types of form fields where users can select one or many values presented in a list or menu, we shall first consider the case where only a single value can be chosen from such a selection.
From the item type list only one value may be selected.Taking the example HTML code from before, we can add a definition of this new list to the template to produce something like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:template="http://www.boddie.org.uk/ns/xmltools/template">
<head>
<title>Example</title>
</head>
<body template:element="structure">
<form action="" method="POST">
<!-- Template text between the start and the interesting part. -->
<div template:element="item">
<p>
Some item: <input template:attribute="value" name="{template:field-name()}" type="text" value="{$this-value}" />
<input name="remove={template:this-position()}" type="submit" value="Remove" />
</p>
<p>
Item type:
<select template:element="type" name="{template:new-field('value')}">
<option template:element="type-enum" template:expr="@value = ../@value" template:expr-attr="selected"
template:value="@value" value="{@value}" />
</select>
</p>
<p>
Itself containing more items:
</p>
<p template:element="subitem">
Sub-item: <input template:attribute="subvalue" name="{template:field-name()}" type="text" value="{$this-value}" />
<input name="remove2={template:this-position()}" type="submit" value="Remove" />
</p>
<p>
<input name="add2={template:this-position()}" type="submit" value="Add subitem" />
</p>
</div>
<p>
<input name="add={template:this-position()}" type="submit" value="Add item" />
</p>
<!-- Template text between the interesting part and the end. -->
</form>
</body>
</html>
There are a lot of details here that need to be explained. Here is what was done:
select
element was added.select
element is mapped onto the type
element in the form data structure. However, HTML fields must produce
values and it makes no sense to interpret a textual value as an
element. Therefore, we indicate in the name of the select
element that the value submitted maps onto the value
attribute of the type
element in the form data
structure.select
element, we include an option
element which defines the values which will be presented to users
of the form. Note that the option
element maps onto
a type-enum
element which is not mentioned in our
revised form data structure above; this will be discussed below.Although we revised the form data structure above, and whilst the revised structure can describe form data submitted by users of our application, it is unfortunately not sufficient to define the form data that is to be presented. Consider the multiple-choice values that shall be presented to users: such values are not defined in our revised structure. Therefore, we shall define an output form data structure as follows:
<?xml version="1.0"?>
<structure>
<item value="some value">
<type value="some type">
<type-enum value="choice #n"/>
</type>
<subitem subvalue="some other value"/>
</item>
</structure>
But since we will receive a structure resembling that defined earlier, yet need to present a structure like the one above, we will need to find a way of merging the range of allowed values into the user-edited form data before presenting that data using our template.