-<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: one form divided in multiple pages</h4>

<title>Sample multipage form with Ajax updates</title>

-<content>

-<fi:form-template ajax="true" action="38041457682c422a7a8319164a508e41397b6e2a.continue" method="POST">

-<div style="width: 70%; margin: 10px 50px 50px 50px;">

-<bu:replace id="page1">

-<fi:group id="page1">

-<div id="page1">

-<fi:group>

<fi:label>String fields</fi:label>

<fi:styling type="fieldset" layout="columns"/>

-<fi:items>

-<bu:replace id="page1.email">

-<fi:field id="page1.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:datatype type="string"/>

</fi:field>

</bu:replace>

-<bu:replace id="page1.birthdate">

-<fi:field id="page1.birthdate" state="active" required="true">

<fi:label>Your birthdate (dd/MM/yyyy):</fi:label>

-<fi:datatype type="date">

<fi:convertor pattern="dd/MM/yyyy" variant="date"/>

</fi:datatype>

</fi:field>

</bu:replace>

-<bu:replace id="page1.fourchars">

-<fi:field id="page1.fourchars" state="active" required="true">

<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:styling list-type="listbox" listbox-size="4"/>

</fi:field>

</bu:replace>

</fi:items>

</fi:group>

<br/>

-<bu:replace id="page1.next">

-<fi:action id="page1.next" state="active">

<fi:label>Next</fi:label>

</fi:action>

</bu:replace>

</div>

</fi:group>

</bu:replace>

-<bu:replace id="page2">

<fi:placeholder id="page2"/>

</bu:replace>

-<bu:replace id="page3">

<fi:placeholder id="page3"/>

</bu:replace>

</div>

</fi:form-template>

<a href="do-multipage.flow">Restart this sample</a>

<a href="./">Back to Forms samples</a>

</content>

</page>