<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ev="http://www.w3.org/2001/xml-events"
   xmlns:xf="http://www.w3.org/2002/xforms"
	 xmlns:sample="http://www.agencexml.com/sample"
	 >
   <head>
      <title>Sample XForms Login</title>
      <style type="text/css">
   @namespace xf url("http://www.w3.org/2002/xforms");
 
  .xforms-group {
     display: table;
   }
 
   .xforms-input, .xforms-secret {
      display: table-row;
   }
 
   .xforms-value {
      text-align: left;
   }
 
  .xforms-label, legend {
      display: table-cell;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      text-align: right;
      width: 100px;
   }
 
</style>
      <xf:model>
         <xf:instance>
            <sample:Login>
               <sample:LoginID />
               <sample:Password />
            </sample:Login>
         </xf:instance>
      </xf:model>
   </head>
   <body>
			<div id="xformControl">
				<span>
					<input type="checkbox" onclick="$('console').style.display = this.checked? 'block' : 'none';"  checked="checked"/> Debug
				</span>
			</div>
      <fieldset>
         <legend>System Login</legend>
      <xf:input ref="sample:LoginID">
         <xf:label>Login: </xf:label>
      </xf:input>
      <br />
      <xf:secret ref="sample:Password">
         <xf:label>Password: </xf:label>
      </xf:secret>
      </fieldset>
			<div id="console"></div>
   </body>
</html>
