git.roojs.org Git - roojs1/blob - examples/form/forms.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   5 <title>Forms</title>
   6    <link rel="stylesheet" type="text/css" href="../../cssX/roojs-all.css"/>
   7     <link rel="stylesheet" type="text/css" href="../../cssX/xtheme-slate.css"/>
   8
   9      <script type="text/javascript" src="../../roojs-all.js"></script>
  10
  11 <script type="text/javascript" src="forms.js"></script>
  12 <link rel="stylesheet" type="text/css" href="forms.css" />
  13
  14 <!-- Common Styles for the examples -->
  15 <link rel="stylesheet" type="text/css" href="../examples.css" />
  16 </head>
  17 <body>
  18 <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
  19 <h1>Forms</h1>
  20 <p>The js is not minified so it is readable. See <a href="forms.js">forms.js</a>.</p>
  21
  22 <form id="form1" class="x-form">
  23     <div style="width:400px;">
  24         <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
  25         <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
  26             <h3 style="margin-bottom:5px;">Ext Live Forms</h3>
  27             <!-- begin form layout -->
  28             <div class="x-form-bd" id="container">
  29                 <fieldset>
  30                     <legend>ComboBox Fields</legend>
  31
  32                     <div class="x-form-item">
  33                         <label for="combo-local">Local Data:</label>
  34                         <div class="x-form-element">
  35                             <input type="text" size="20" name="combo-local" id="combo-local" />
  36                         </div>
  37                     </div>
  38
  39                     <div class="x-form-item">
  40                         <label for="combo-ajax">Ajax Data:</label>
  41                         <div class="x-form-element">
  42                             <input type="text" size="20" name="combo-ajax" id="combo-ajax" />
  43                         </div>
  44                     </div>
  45
  46                     <div class="x-form-item">
  47                         <label for="combo-selection">Only Selection:</label>
  48                         <div class="x-form-element">
  49                             <input type="text" size="20" value="OH" name="combo-selection" id="combo-selection" />
  50                         </div>
  51                     </div>
  52
  53                     <div class="x-form-item">
  54                         <label for="combo-tpl">Item Templates:</label>
  55                         <div class="x-form-element">
  56                             <input type="text" size="20" name="combo-tpl" id="combo-tpl" />
  57                         </div>
  58                     </div>
  59
  60                     <div class="x-form-item">
  61                         <label for="combo-tpl">Unobtrusive:</label>
  62                         <div class="x-form-element">
  63                             <select name="light" id="light">
  64                                 <option value="Shade">Shade</option>
  65                                 <option value="Mostly Shady">Mostly Shady</option>
  66                                 <option value="Sun or Shade">Sun or Shade</option>
  67
  68                                 <option value="Mostly Sunny">Mostly Sunny</option>
  69
  70                                 <option value="Sunny">Sunny</option>
  71                             </select>
  72                         </div>
  73                     </div>
  74
  75                 </fieldset>
  76
  77                 <fieldset>
  78                     <legend>Component Fields</legend>
  79
  80                     <div class="x-form-item">
  81                         <label for="markup-date">Date:</label>
  82                         <div class="x-form-element">
  83                             <input type="text" size="10" value="03/08/03" name="markup-date" id="markup-date" />
  84                         </div>
  85                     </div>
  86                 </fieldset>
  87
  88                 <fieldset>
  89                     <legend>Live Validation and key filtering</legend>
  90
  91                     <div class="x-form-item">
  92                         <label for="required">Required:</label>
  93                         <div class="x-form-element">
  94                             <input type="text" size="24" name="required" id="required" />
  95                         </div>
  96                     </div>
  97
  98                     <div class="x-form-item">
  99                         <label for="alpha">Alpha:</label>
 100                         <div class="x-form-element">
 101                             <input type="text" size="24" name="alpha" id="alpha" />
 102                         </div>
 103                     </div>
 104
 105                     <div class="x-form-item">
 106                         <label for="alpha2">(No Filter):</label>
 107                         <div class="x-form-element">
 108                             <input type="text" size="24" name="alpha2" id="alpha2" />
 109                         </div>
 110                     </div>
 111
 112                     <div class="x-form-item">
 113                         <label for="alphanum">Alphanum:</label>
 114                         <div class="x-form-element">
 115                             <input type="text" size="24" name="alphanum" id="alphanum" />
 116                         </div>
 117                     </div>
 118
 119                     <div class="x-form-item">
 120                         <label for="email">Email:</label>
 121                         <div class="x-form-element">
 122                             <input type="text" size="32" name="email" id="email" />
 123                         </div>
 124                     </div>
 125
 126                     <div class="x-form-item">
 127                         <label for="url">URL:</label>
 128                         <div class="x-form-element">
 129                             <input type="text" size="32" name="url" id="url" />
 130                         </div>
 131                     </div>
 132
 133                     <div class="x-form-item">
 134                         <label for="url">Auto grow textareas:</label>
 135                         <div class="x-form-element">
 136                             <textarea name="grow" id="grow" cols="25" rows="3"></textarea>
 137                         </div>
 138                     </div>
 139                 </fieldset>
 140             </div>
 141             <!-- end form layout -->
 142         </div></div></div>
 143         <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
 144     </div>
 145 </form>
 146 </body>
 147 </html>