[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
05122024
/
htdocs
/
simpeg
/
zapatec
/
zpform
/
zpform
/
demo
/
[
Home
]
File: basic.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" The form is a standard HTML form. You can specify the data types and validation of fields by adding classes to them. See variations on zpForm for the INPUT class. The form indicates what fields are required. See zpFormRequired for the INPUT class. The form provides real time feedback on the validation process as the user enters data. CSS controls the look and feel of the form. Fields are validated when user moves out of them, and if necessary the form displays error messages. On submit the form is checked, focus moves to the first field containing an error, and appropriate error messages are displayed. See showErrorsOnSubmit: true AND submitErrorFunc: testErrOutput "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Form Widget - Basic Forms</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type='text/javascript' src='../src/form.js'></script> <script type='text/javascript' src='demo.js'></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <!-- Theme css --> <link href="../themes/winxp.css" rel="stylesheet" type="text/css"> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Basic Forms</div> This form demonstrates some of the basic capabilities of the Zapatec AJAX forms. <div class='zpCalDemoText'> <ul> <li>This demo uses the <b>winxp theme</b>.</li> <li>The form is a standard HTML form.</li> <li>You can specify the data types and validation of fields by adding classes to them.<br /> <i>See variations on zpForm for the INPUT class.</i></li> <li>The form indicates what fields are required.<br /> <i>See zpFormRequired for the INPUT class. </i></li> <li>The form provides real time feedback on the validation process as the user enters data.</li> <li>CSS controls the look and feel of the form.</li> <li>Fields are validated when user moves out of them, and if necessary the form displays error messages. </li> <li>On submit the form is checked, focus moves to the first field containing an error, and appropriate error messages are displayed.<br /> <i>See showErrorsOnSubmit: true AND submitErrorFunc: testErrOutput</i></li> </ul> </div> <form action="basic.html" id='userForm' method="post"> <div id='errOutput' class="errOutput"></div> <div class="zpFormContent"> <fieldset> <legend>Personal information</legend> <label class='zpFormLabel'>Name</label> <input class='zpFormRequired' value="" size="40" name="name" type="text" > <br /> <label class='zpFormLabel'>Address</label> <input class='zpFormRequired' value="" size="40" name="address" type="text" > <br /> <label class='zpFormLabel'>Date of Birth</label> <input value="" size="23" name="dob" type="text" class='zpFormDate zpFormMask="00\/00\/0000"'> <br /> <label class='zpFormLabel'>Date of Birth(d.m.y)</label> <input value="" size="23" name="dob" type="text" class='zpFormDate="%d.%m.%y" zpFormMask="00\.00\.0000"'> <br /> <br /> <label class='zpFormLabel'>Zip</label> <input value="" class='zpFormRequired zpFormUSZip zpFormMask="00000"' size="10" name="zip" type="text" > <br /> <label class='zpFormLabel'>US Phone</label> <input value="" size="23" name="usnumber" type="text" class='zpFormUSPhone zpFormMask="\(000\)\ 000\-0000"'> <br /> <label class='zpFormLabel'>International phone</label> <input value="" size="23" name="international_number" type="text" class='zpFormInternationalPhone'> <br /> <br /> <label class='zpFormLabel'>Resume</label> <textarea name="resume" cols="40" rows="10" class="zpFormRequired"></textarea> <br /> </fieldset> <fieldset> <legend>Online Information</legend> <label class='zpFormLabel'>Email</label> <input value="" size="40" name="email" type="text" class='zpFormEmail'> <br /> <label class='zpFormLabel'>Alternate Email</label> <input value="" size="40" name="alternate_email" type="text" class='zpFormRequired zpFormEmail'> <br /> <label class='zpFormLabel'>URL</label> <input value="" size="40" name="url" class='zpFormUrl' type="text" > <br /> <div style="line-height: 1px; clear: both;"> </div> </fieldset> </div> <div class="zpFormButtons"> <input value="Submit" name="Submit" onclick="" type="submit" class="button"> <input value="Clear" name="Clear" onclick="" type="reset" class="button"> </div> </form> <script type="text/javascript"> // Run this to auto-activate all "zpForm" class forms in the document. new Zapatec.Form({ form: 'userForm', showErrors: 'afterField', showErrorsOnSubmit: true, submitErrorFunc: testErrOutput, theme: "WinXP" }); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Form Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>