<?xml version="1.0" encoding="ISO-8859-1"?><!--
  Copyright 1999-2004 The Apache Software Foundation

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
--><!-- The only difference between this file and the form1_template_flow.xml
     is the value of the action attribute on the ft:form-template element --><page xmlns:fi="http://apache.org/cocoon/forms/1.0#instance" xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
  <h4 class="samplesGroup">Widget sampler (Actions)</h4>
  <title>Sample form</title>
  <content>
    <fi:form-template action="form1" method="POST">
      <div style="width: 90%; margin: 10px 50px 50px 50px;">

        <!-- group with tabs. Each of the children of <items> will constitute a tab -->
        <fi:group>
          <fi:styling type="tabs"/>
          <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>
            <!-- group with automatic two-column layout -->
            <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:datatype type="string"/></fi:field>
                <fi:field id="fourchars" state="active" required="false"><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>
              </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: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: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: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: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>false</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: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.flow">form1 flow page</a> for another way of formatting panels</p>

        <!-- Group of type 'fieldset' will have a surrounding frame -->
        <fi:group>
          <fi:styling type="fieldset" layout="columns"/>
          <fi:label>Misc controls</fi:label>
          <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="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="dieselprice" state="active" required="true"><fi:label>Price for a liter diesel:</fi:label><fi:datatype type="decimal"/></fi:field>
          </fi:items>
        </fi:group>

        <!-- manual layout of fields, without use of a fi:group -->
        <br/>
        <fi:repeater-size id="contacts" state="active" size="2"/>
        
          <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>
            <!-- The contents of the repeater-widget element is a template that will
                 be applied to each row in the repeater. -->
            
              <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 colspan="6" align="right">
                <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>
              </td>
            </tr>
          </table>
        
        <input type="submit"/>
      </div>
    </fi:form-template>
    <p>
      <a href="./">Back to Forms samples</a>
    </p>
  </content>
</page>