G Complete XForms Examples (Non-Normative)

This section presents complete XForms examples. These and additional examples are maintained at http://www.w3.org/MarkUp/Forms/2002/Examples.

G.1 XForms in XHTML

<!--$Id: sliceG.html,v 1.1 2002/11/06 16:02:54 tvraman Exp $-->
<html xmlns="http://www.w3.org/2002/06/xhtml2" xmlns:xforms="http://www.w3.org/2002/xforms/cr" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:my="http://commerce.example.com/payment">
  
<head>
    
<title xml:lang="fr">XForms en XHTML</title>

    
<xforms:model schema="payschema.xsd">
      
<xforms:instance>
        
<my:payment as="credit">
          
<my:cc />
          
<my:exp />
        
</my:payment>
      
</xforms:instance>
      
<xforms:submission action="http://www.example.com/buy.rb" method="post" id="s00" />
      
<xforms:bind nodeset="my:cc" relevant="../@as='credit'" required="true()" />
      
<xforms:bind nodeset="my:exp" relevant="../@as='credit'" required="true()" />
    
</xforms:model>
  
</head>
  
<body>
    ...
    
<group xmlns="http://www.w3.org/2002/xforms/cr">
      
<trigger>
        
<label>Français</label>
        
<toggle case="fr" ev:event="xforms-activate" />
      
</trigger>
      
<trigger>
        
<label>English</label>
        
<toggle case="en" ev:event="xforms-activate" />
      
</trigger>
    
</group>
    
    
<switch xmlns="http://www.w3.org/2002/xforms/cr">
      
<case id="fr">
        
<select1 ref="@as">
          
<label xml:lang="fr">Choisissez un mode de paiement</label>
          
<choices>
            
<item>
              
<label xml:lang="fr">Comptant</label>
              
<value>cash</value>
              
<message level="modeless" ev:event="xforms-select" xml:lang="fr">
                         Ne pas envoyer d'argent comptant par la poste.
</message>
            
</item>
            
<item>
              
<label xml:lang="fr">Carte bancaire</label>
              
<value>credit</value>
            
</item>
          
</choices>
        
</select1>

        
<input ref="my:cc">
          
<label xml:lang="fr">Numéro de carte bancaire</label>
          
<alert xml:lang="fr">Saississez un numéro de carte bancaire en cours
           (séparez par un espace ou un trait d'union chaque groupe de chiffres)
</alert>
        
</input>

        
<input ref="my:exp">
          
<label xml:lang="fr">Date d'échéance</label>
        
</input>

        
<submit submission="s00">
          
<label xml:lang="fr">Achetez</label>
        
</submit>
      
</case>
      
<case id="en">
        
<select1 ref="@as">
          
<label xml:lang="en">Select Payment Method</label>
          
<choices>
            
<item>
              
<label xml:lang="en">Cash</label>
              
<value>cash</value>
              
<message level="modeless" ev:event="xforms-select" xml:lang="en">
              Please do not mail cash.
</message>
            
</item>
            
<item>
              
<label xml:lang="en">Credit</label>
              
<value>credit</value>
            
</item>
          
</choices>
        
</select1>

        
<input ref="my:cc">
          
<label xml:lang="en">Credit Card Number</label>
          
<alert xml:lang="en">Please specify a valid credit card number
            (use spaces or hyphens between digit groups)
</alert>
        
</input>

        
<input ref="my:exp">
          
<label xml:lang="en">Expiration Date</label>
        
</input>

        
<submit submission="s00">
          
<label xml:lang="en">Buy</label>
        
</submit>
      
</case>
    
</switch>
    ...
  
</body>
</html>

Schema file payschema.xsd:

<!-- payschema.xsd -->
<xsd:schema xmlns:my="http://commerce.example.com/payment" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://commerce.example.com/payment" elementFormDefault="qualified">

  
<xsd:element name="payment">
    
<xsd:complexType name="payment">
      
<xsd:sequence minOccurs="0" maxOccurs="unbounded">
        
<xsd:choice>    
          
<xsd:element ref="my:cc" />
          
<xsd:element ref="my:exp" />
        
</xsd:choice>
      
</xsd:sequence>
      
<xsd:attribute name="as" type="my:paymentAs" />
    
</xsd:complexType>
  
</xsd:element>
  
<xsd:element name="cc" type="my:cc" />
  
<xsd:element name="exp" type="xsd:gYearMonth" />

  
<xsd:simpleType name="cc">
    
<xsd:restriction base="xsd:string">
      
<xsd:pattern value="\s*((\d+)[-\s])+([\d]+)\s*" />
    
</xsd:restriction>
  
</xsd:simpleType>

  
<xsd:simpleType name="paymentAs">
    
<xsd:restriction base="xsd:string">
      
<xsd:enumeration value="cash" />
      
<xsd:enumeration value="credit" />
    
</xsd:restriction>
  
</xsd:simpleType>
</xsd:schema>

G.2 Editing Hierarchical Bookmarks Using XForms

<html xmlns="http://www.w3.org/2002/06/xhtml2" xmlns:xforms="http://www.w3.org/2002/xforms/cr" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:my="http://commerce.example.com/payment" xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en">
  
<head>
<style type="text/css">
xforms|input.editField {
 font-weight:bold; font-size:20px; width:500px
}
xforms|label.sectionLabel {
  font-weight:bold; color:white; background-color:blue
}
xforms|submit {
  font-family: Arial; font-size: 20px; font-style: bold; color: red
}
</style>
    
<title>Editing Hierarchical Bookmarks In X-Smiles </title>
    
<xforms:model id="bookmarks">
      
<xforms:instance src="bookmarks.xml" />
      
<xforms:submission id="s01" method="post" action="http://examples.com/" />
    
</xforms:model>
  
</head>
  
<body>
    
<xforms:repeat nodeset="section" id="repeatSections">
      
<xforms:input ref="@name" class="editField">
        
<xforms:label class="sectionLabel">Section</xforms:label>
      
</xforms:input>
<!-- BOOKMARK REPEAT START -->
      
<xforms:repeat nodeset="bookmark" id="repeatBookmarks">
        
<xforms:input ref="@name">
          
<xforms:label>Bookmark name</xforms:label>
        
</xforms:input>
        
<xforms:input ref="@href">
          
<xforms:label>URL</xforms:label>
        
</xforms:input>
      
</xforms:repeat>
    
</xforms:repeat>
    
<p>
<!-- INSERT BOOKMARK BUTTON -->
      
<xforms:trigger id="insertbutton">
        
<xforms:label>Insert bookmark</xforms:label>
        
<xforms:insert nodeset="section[index('repeatSections')]/bookmark" at="index('repeatBookmarks')" position="after" ev:event="xforms-activate" />
      
</xforms:trigger>
<!-- DELETE BOOKMARK BUTTON -->
      
<xforms:trigger id="delete">
        
<xforms:label>Delete bookmark</xforms:label>
        
<xforms:delete nodeset="section[index('repeatSections')]/bookmark" at="index('repeatBookmarks')" ev:event="xforms-activate" />
      
</xforms:trigger>
    
</p>
    
<p>
<!-- INSERT SECTION BUTTON -->
      
<xforms:trigger id="insertsectionbutton">
        
<xforms:label>Insert section</xforms:label>
        
<xforms:insert nodeset="section" at="index('repeatSections')" position="after" ev:event="xforms-activate" />
      
</xforms:trigger>
<!-- DELETE SECTION BUTTON -->
      
<xforms:trigger id="deletesectionbutton">
        
<xforms:label>Delete section</xforms:label>
        
<xforms:delete nodeset="section" at="index('repeatSections')" ev:event="xforms-activate" />
      
</xforms:trigger>
    
</p>
<!-- SUBMIT BUTTON -->
    
<xforms:submit submission="s01">
      
<xforms:label>Save</xforms:label>
      
<xforms:hint>Click to submit</xforms:hint>
    
</xforms:submit>
  
</body>
</html>

Initial instance file bookmarks.xml:

<!--This is the bookmarks.xml file -->
<bookmarks>
  
<section name="main">
    
<bookmark href="http://www.example.com/xforms.xml" name="Main page" />
  
</section>
  
<section name="demos">
    
<bookmark href="http://www.example.com/demo/images.fo" name="images" />
    
<bookmark href="http://www.example.com/demo/xf-ecma.xml" name="ecma" />
    
<bookmark href="http://www.example.com/demo/sip.fo" name="sip" />
  
</section>
  
<section name="XForms">
    
<bookmark href="file:///C/source/xmlevents.xml" name="XML events" />
    
<bookmark href="file:///C/source/model3.xml" name="model3" />
    
<bookmark href="file:///C/source/repeat.fo" name="repeat" />
  
</section>
</bookmarks>

G.3 Survey Using XForms and SVG

<!-- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd"> 
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xforms="http://www.w3.org/2002/01/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:s="http://example.com/survey" width="700px" height="600px" viewBox="0 0 700 600">
  
<defs>
    
<polygon id="bullet" points="-30,-30, -10,-10, -20,10" fill="#007138" />
    
<xforms:model id="form1" schema="surveyschema.xsd">
      
<xforms:instance id="instance1">
        
<s:survey xmlns="http://example.com/survey">
          
<s:drink>none</s:drink>
          
<s:espressoPrefs>
            
<s:numberPerWeek>0</s:numberPerWeek>
            
<s:sugar>0</s:sugar>
            
<s:lemon>Always</s:lemon>
          
</s:espressoPrefs>
        
</s:survey>
      
</xforms:instance>
      
<xforms:submission id="submit1" method="post" action="http://www.example.org/surveyhandler" />
    
</xforms:model>
  
</defs>
  
<title>Espresso survey</title>
  
<desc>Sample SVG and XForms - espresso customer survey</desc>
  
<g>
    
<text x="50" y="70" font-size="40" font-family="Arial Black, sans-serif" font-weight="900">Customer Survey: Espresso</text>
    
<g font-family="Arial, Helvetica, sans-serif" font-size="18">
      
<foreignObject x="80" y="150" width="250" height="40">
        
<xforms:select1 appearance="minimal" model="form1" ref="s:drink">
          
<xforms:label>
            
<g transform="translate(80, 140)">
              
<use xlink:href="#bullet" />
              
<text>Your usual coffee drink is:</text>
            
</g>
          
</xforms:label>
          
<xforms:item>
            
<xforms:label>Rich, dark espresso</xforms:label>
            
<xforms:value>espresso</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Creamy cappuccino</xforms:label>
            
<xforms:value>cappuccino</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Long, milky latté</xforms:label>
            
<xforms:value>latté</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Don't like coffee!</xforms:label>
            
<xforms:value>none</xforms:value>
          
</xforms:item>
        
</xforms:select1>
      
</foreignObject>
      
<foreignObject x="80" y="240" width="250" height="40">
        
<xforms:range model="form1" start="0" end="30" step="5" ref="s:espressoPrefs/s:numberPerWeek">
          
<xforms:label>
            
<g transform="translate(80, 230)">
              
<use xlink:href="#bullet" />
              
<text>Shots of espresso per week:</text>
            
</g>
          
</xforms:label>
        
</xforms:range>
      
</foreignObject>
      
<foreignObject x="80" y="350" width="250" height="40">
        
<xforms:select model="form1" ref="s:espressoPrefs/s:sugar">
          
<xforms:label>
            
<g transform="translate(80, 340)">
              
<use xlink:href="#bullet" />
              
<text>Sugar?</text>
            
</g>
          
</xforms:label>
          
<xforms:item>
            
<xforms:label>Yes</xforms:label>
            
<xforms:value>X</xforms:value>
          
</xforms:item>
        
</xforms:select>
      
</foreignObject>
      
<foreignObject x="80" y="420" width="250" height="90">
        
<xforms:select1 appearance="full" model="form1" ref="s:espressoPrefs/s:lemon">
          
<xforms:label>
            
<g transform="translate(80, 410)">
              
<use xlink:href="#bullet" />
              
<text>Lemon?</text>
            
</g>
          
</xforms:label>
          
<xforms:item>
            
<xforms:label>Required for the full experience</xforms:label>
            
<xforms:value>Always</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Whatever</xforms:label>
            
<xforms:value>Indifferent</xforms:value>
          
</xforms:item>
          
<xforms:item>
            
<xforms:label>Keep that citrus to yourself</xforms:label>
            
<xforms:value>Never</xforms:value>
          
</xforms:item>
        
</xforms:select1>
      
</foreignObject>
    
</g>
    
<use xlink:href="#bullet" x="101" y="64" transform="scale(7,3)" />
    
<foreignObject y="150" x="500" height="60" width="100">
      
<xforms:submit model="form1">
        
<xforms:label>Send survey</xforms:label>
      
</xforms:submit>
    
</foreignObject>
    
<!--- keep the graphics data out of this example listing -->
    
<image xlink:href="espresso.svg" x="400" y="230" width="280" height="270" />
  
</g>
</svg>