<?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 (Flowscript)</h4>
  <title>Sample form</title>
  <content>
    
      
      
        <fi:form-template action="660a748b414c74386b3a134012502c68764c167e.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>