<?xml version="1.0" encoding="ISO-8859-1"?><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 xmlns:bu="http://apache.org/cocoon/browser-update/1.0" class="samplesGroup">Widget sampler: one form divided in multiple pages</h4>
  <title>Sample multipage form with Ajax updates</title>
  <script type="text/javascript">
	  //cocoon.ajax.BrowserUpdater.highlight = cocoon.ajax.Fader.fade;
  </script>
  <content>
    
      
      
        <fi:form-template ajax="true" action="257b6f15654d4b1a02253818455e3c3528092166.continue" method="POST">
        
        
        
      <div style="width: 70%; margin: 10px 50px 50px 50px;">
      	
        <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" 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 xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="page2"><fi:placeholder id="page2"/></bu:replace>
    
         
         <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" 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>