-<page xmlns:ft="http://apache.org/cocoon/forms/1.0#template" xmlns:fi="http://apache.org/cocoon/forms/1.0#instance" xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<h4 class="samplesGroup" xmlns:bu="http://apache.org/cocoon/browser-update/1.0">Widget sampler (Flowscript)</h4>
<title>Sample form</title>
-<content>
-<fi:form-template action="455b2f3418454c6a3d716d8e2949035828821a77.continue" method="POST">
-<div style="width: 90%; margin: 10px 50px 50px 50px;">
-<fi:group>
<fi:styling type="choice"/>
<fi:label>Choose a panel: </fi:label>
-<fi:state>
-<fi:field id="tab-state" state="active" required="false">
<fi:datatype type="string"/>
</fi:field>
</fi:state>
-<fi:items>
-<fi:group>
<fi:label>String fields</fi:label>
<fi:styling layout="columns"/>
-<fi:items>
-<fi:field id="email" state="active" required="true">
-<fi:help>
An email address must be in
<i>[name]@[domain].[tld]</i>
format.
<br/>
And if you do not know what
<b>email</b>
address is, then well, chances are that you do not have it. However, if you have access to the Internet, you can easily get yourself one!
<br/>
Choose one of the following options:
-<ul>
-<li>
<a href="http://mail.yahoo.com/">Yahoo! Mail</a>
</li>
-<li>
<a href="http://www.hotmail.com/">Hotmail</a>
</li>
</ul>
<small>Anyway, the point of all this was to show a popup help with mixed html content.</small>
</fi:help>
-<fi:label>
Enter an
<b>email</b>
address:
</fi:label>
<fi:value>bar@www.foo.com</fi:value>
<fi:datatype type="string"/>
</fi:field>
-<fi:field id="birthdate" state="active" required="true">
<fi:label>Your birthdate (dd/MM/yyyy):</fi:label>
<fi:value>07/06/2026</fi:value>
-<fi:datatype type="date">
<fi:convertor pattern="dd/MM/yyyy" variant="date"/>
</fi:datatype>
</fi:field>
-<fi:field id="fourchars" state="active" required="false">
<fi:styling list-type="listbox" listbox-size="4"/>
<fi:label>Select something that's 4 characters long:</fi:label>
-<fi:selection-list xmlns:fd="http://apache.org/cocoon/forms/1.0#definition">
-<fi:item value="a">
<fi:label>a</fi:label>
</fi:item>
-<fi:item value="aa">
<fi:label>aa</fi:label>
</fi:item>
-<fi:item value="aaa">
<fi:label>aaa</fi:label>
</fi:item>
-<fi:item value="aaaa">
<fi:label>aaaa</fi:label>
</fi:item>
-<fi:item value="aaaaa">
<fi:label>aaaaa</fi:label>
</fi:item>
</fi:selection-list>
<fi:datatype type="string"/>
</fi:field>
</fi:items>
</fi:group>
-<fi:group>
<fi:label>Number fields</fi:label>
<fi:styling layout="columns"/>
-<fi:items>
-<fi:field id="number1" state="active" listening="true" required="true">
-<fi:label>
Please enter a number
<br/>
<small>(will automatically set a correct value below if needed)</small>
:
</fi:label>
<fi:value>1</fi:value>
<fi:datatype type="long"/>
</fi:field>
-<fi:field id="number2" state="active" required="true">
<fi:label>Enter another number, larger than the other number:</fi:label>
<fi:value>3</fi:value>
<fi:datatype type="long"/>
</fi:field>
-<fi:field id="account" state="active" required="false">
-<fi:label>
Indicate the size of your bank account (in m
<sup>3</sup>
):
</fi:label>
<fi:value>2</fi:value>
-<fi:selection-list>
-<fi:item value="1">
<fi:label>1</fi:label>
</fi:item>
-<fi:item value="2">
<fi:label>2</fi:label>
</fi:item>
-<fi:item value="3">
<fi:label>three</fi:label>
</fi:item>
-<fi:item value="4">
<fi:label>4</fi:label>
</fi:item>
-<fi:item value="5">
<fi:label>5</fi:label>
</fi:item>
</fi:selection-list>
<fi:datatype type="long"/>
</fi:field>
-<fi:field id="cowheight" state="active" required="false">
<fi:label>Indicate your height (in cows):</fi:label>
<fi:value>4</fi:value>
-<fi:selection-list>
-<fi:item value="1">
<fi:label>1</fi:label>
</fi:item>
-<fi:item value="2">
<fi:label>2</fi:label>
</fi:item>
-<fi:item value="3">
<fi:label>three</fi:label>
</fi:item>
-<fi:item value="4">
<fi:label>4</fi:label>
</fi:item>
-<fi:item value="5">
<fi:label>5</fi:label>
</fi:item>
</fi:selection-list>
<fi:datatype type="long"/>
<fi:styling list-type="radio"/>
</fi:field>
</fi:items>
</fi:group>
-<fi:group>
<fi:styling layout="columns"/>
<fi:label>Boolean fields</fi:label>
-<fi:items>
-<fi:booleanfield id="somebool" state="active" true-value="true">
-<fi:label>
Put me
<em>on</em>
or
<em>off</em>
.
</fi:label>
<fi:value>true</fi:value>
</fi:booleanfield>
</fi:items>
</fi:group>
-<fi:group>
<fi:styling layout="columns"/>
<fi:label>Multivalue fields</fi:label>
-<fi:items>
-<fi:multivaluefield id="drinks" state="active">
<fi:label>Indicate which 2 of the following drinks you'd like to receive:</fi:label>
-<fi:values>
<fi:value>Jupiler</fi:value>
<fi:value>Coca Cola</fi:value>
</fi:values>
-<fi:selection-list>
-<fi:item value="Maes">
<fi:label>Maes</fi:label>
</fi:item>
-<fi:item value="Jupiler">
<fi:label>Jupiler</fi:label>
</fi:item>
-<fi:item value="Leffe">
<fi:label>Leffe</fi:label>
</fi:item>
-<fi:item value="Hoegaarden">
<fi:label>Hoegaarden</fi:label>
</fi:item>
-<fi:item value="Coca Cola">
<fi:label>Coca Cola</fi:label>
</fi:item>
</fi:selection-list>
-<fi:styling list-type="double-listbox">
<fi:available-label>Available drinks</fi:available-label>
<fi:selected-label>Your selection</fi:selected-label>
</fi:styling>
</fi:multivaluefield>
-<fi:multivaluefield id="freemv" state="active">
<fi:label>Here you can enter values freely:</fi:label>
<fi:values/>
</fi:multivaluefield>
</fi:items>
</fi:group>
</fi:items>
</fi:group>
-<p>
Checkout the
<a href="form1">form1 action page</a>
for another way of formatting panels
</p>
-<fi:group>
<fi:styling layout="columns"/>
-<fi:items>
-<fi:aggregatefield id="visa" state="active" required="false">
-<fi:help>
Use a fake number if
<a href="http://cocoon.apache.org">Cocoon</a>
is not running on your local computer
</fi:help>
-<fi:label>
Enter your (16-digit) visa number (without spaces)
<br/>
Your credit card will be billed.
<br/>
<small>Valid test number is: 4111111111111111</small>
</fi:label>
<fi:datatype type="string"/>
</fi:aggregatefield>
-<fi:field id="ipaddress" state="active" required="true">
<fi:label>Please enter your IP address</fi:label>
<fi:datatype type="string"/>
</fi:field>
-<fi:field id="altbirthdate" state="active" required="true">
<fi:label>Select a date on which you'd rather had been born:</fi:label>
-<fi:selection-list>
-<fi:item value="Wednesday, July 11, 1302">
<fi:label>Wednesday, July 11, 1302</fi:label>
</fi:item>
-<fi:item value="Sunday, June 23, 1912">
<fi:label>Sunday, June 23, 1912</fi:label>
</fi:item>
-<fi:item value="Monday, July 21, 1969">
<fi:label>Monday, July 21, 1969</fi:label>
</fi:item>
-<fi:item value="Wednesday, May 6, 1970">
<fi:label>Wednesday, May 6, 1970</fi:label>
</fi:item>
-<fi:item value="Saturday, October 14, 1978">
<fi:label>Saturday, October 14, 1978</fi:label>
</fi:item>
-<fi:item value="Tuesday, September 11, 2001">
<fi:label>Tuesday, September 11, 2001</fi:label>
</fi:item>
</fi:selection-list>
-<fi:datatype type="date">
<fi:convertor pattern="EEEE, MMMM d, yyyy" variant="date"/>
</fi:datatype>
</fi:field>
-<fi:field id="altbirthdate2" state="active" required="true">
<fi:label>Select another date on which you'd rather had been born:</fi:label>
-<fi:selection-list>
-<fi:item value="Wednesday, January 1, 2003">
<fi:label>Wednesday, January 1, 2003</fi:label>
</fi:item>
-<fi:item value="Thursday, January 1, 2004">
<fi:label>Thursday, January 1, 2004</fi:label>
</fi:item>
-<fi:item value="Wednesday, May 6, 2026">
<fi:label>Wednesday, May 6, 2026</fi:label>
</fi:item>
</fi:selection-list>
-<fi:datatype type="date">
<fi:convertor pattern="EEEE, MMMM d, yyyy" variant="date"/>
</fi:datatype>
</fi:field>
-<fi:field id="dieselprice" state="active" required="true">
<fi:label>Price for a liter diesel:</fi:label>
<fi:datatype type="decimal"/>
</fi:field>
</fi:items>
</fi:group>
<br/>
<fi:repeater-size id="contacts" state="active" size="3"/>
-<table border="1">
-<tr>
<th>Firstname </th>
<th>Lastname </th>
<th>Phone </th>
<th>Email </th>
<th>Birthdate (dd/MM/yyyy): </th>
<th>Select </th>
</tr>
-<tr>
-<td>
-<fi:field id="contacts.0.firstname" state="active" required="false">
<fi:label>Firstname</fi:label>
<fi:value>Jules</fi:value>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.0.lastname" state="active" required="false">
<fi:label>Lastname</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.0.phone" state="active" required="false">
<fi:label>Phone</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.0.email" state="active" required="false">
<fi:label>Email</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.0.birthdate" state="active" required="false">
<fi:label>Birthdate (dd/MM/yyyy):</fi:label>
-<fi:datatype type="date">
<fi:convertor pattern="dd/MM/yyyy" variant="date"/>
</fi:datatype>
</fi:field>
</td>
-<td>
-<fi:booleanfield id="contacts.0.select" state="active" true-value="true">
<fi:label>Select</fi:label>
<fi:value>false</fi:value>
</fi:booleanfield>
</td>
</tr>
-<tr>
-<td>
-<fi:field id="contacts.1.firstname" state="active" required="false">
<fi:label>Firstname</fi:label>
<fi:value>Lucien</fi:value>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.1.lastname" state="active" required="false">
<fi:label>Lastname</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.1.phone" state="active" required="false">
<fi:label>Phone</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.1.email" state="active" required="false">
<fi:label>Email</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.1.birthdate" state="active" required="false">
<fi:label>Birthdate (dd/MM/yyyy):</fi:label>
-<fi:datatype type="date">
<fi:convertor pattern="dd/MM/yyyy" variant="date"/>
</fi:datatype>
</fi:field>
</td>
-<td>
-<fi:booleanfield id="contacts.1.select" state="active" true-value="true">
<fi:label>Select</fi:label>
<fi:value>false</fi:value>
</fi:booleanfield>
</td>
</tr>
-<tr>
-<td>
-<fi:field id="contacts.2.firstname" state="active" required="false">
<fi:label>Firstname</fi:label>
<fi:value>Chris</fi:value>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.2.lastname" state="active" required="false">
<fi:label>Lastname</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.2.phone" state="active" required="false">
<fi:label>Phone</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.2.email" state="active" required="false">
<fi:label>Email</fi:label>
<fi:datatype type="string"/>
</fi:field>
</td>
-<td>
-<fi:field id="contacts.2.birthdate" state="active" required="false">
<fi:label>Birthdate (dd/MM/yyyy):</fi:label>
-<fi:datatype type="date">
<fi:convertor pattern="dd/MM/yyyy" variant="date"/>
</fi:datatype>
</fi:field>
</td>
-<td>
-<fi:booleanfield id="contacts.2.select" state="active" true-value="true">
<fi:label>Select</fi:label>
<fi:value>false</fi:value>
</fi:booleanfield>
</td>
</tr>
-<tr>
-<td colspan="6">
-<fi:action id="addtwocontacts" state="active">
<fi:label>Add two contacts</fi:label>
</fi:action>
-<fi:action id="addcontact" state="active">
<fi:label>Add contact</fi:label>
</fi:action>
-<fi:action id="removecontacts" state="active">
<fi:label>Remove selected contacts</fi:label>
</fi:action>
<br/>
<small>Hint: remove all contacts to see how dynamic form templates can change their layout depending on widget values</small>
</td>
</tr>
</table>
<input type="submit"/>
</div>
</fi:form-template>
-<p>
<a href="./">Back to Forms samples</a>
</p>
</content>
</page>