147 lines
6.3 KiB
HTML
147 lines
6.3 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
<title>Forms</title>
|
|
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
|
|
|
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
|
|
<script type="text/javascript" src="../../ext-all.js"></script>
|
|
|
|
<script type="text/javascript" src="forms.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="forms.css" />
|
|
|
|
<!-- Common Styles for the examples -->
|
|
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
|
|
<h1>Forms</h1>
|
|
<p>The js is not minified so it is readable. See <a href="forms.js">forms.js</a>.</p>
|
|
|
|
<form id="form1" class="x-form">
|
|
<div style="width:400px;">
|
|
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
|
|
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
|
|
<h3 style="margin-bottom:5px;">Ext Live Forms</h3>
|
|
<!-- begin form layout -->
|
|
<div class="x-form-bd" id="container">
|
|
<fieldset>
|
|
<legend>ComboBox Fields</legend>
|
|
|
|
<div class="x-form-item">
|
|
<label for="combo-local">Local Data:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="20" name="combo-local" id="combo-local" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="combo-ajax">Ajax Data:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="20" name="combo-ajax" id="combo-ajax" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="combo-selection">Only Selection:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="20" value="OH" name="combo-selection" id="combo-selection" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="combo-tpl">Item Templates:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="20" name="combo-tpl" id="combo-tpl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="combo-tpl">Unobtrusive:</label>
|
|
<div class="x-form-element">
|
|
<select name="light" id="light">
|
|
<option value="Shade">Shade</option>
|
|
<option value="Mostly Shady">Mostly Shady</option>
|
|
<option value="Sun or Shade">Sun or Shade</option>
|
|
|
|
<option value="Mostly Sunny">Mostly Sunny</option>
|
|
|
|
<option value="Sunny">Sunny</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Component Fields</legend>
|
|
|
|
<div class="x-form-item">
|
|
<label for="markup-date">Date:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="10" value="03/08/03" name="markup-date" id="markup-date" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Live Validation and key filtering</legend>
|
|
|
|
<div class="x-form-item">
|
|
<label for="required">Required:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="24" name="required" id="required" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="alpha">Alpha:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="24" name="alpha" id="alpha" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="alpha2">(No Filter):</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="24" name="alpha2" id="alpha2" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="alphanum">Alphanum:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="24" name="alphanum" id="alphanum" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="email">Email:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="32" name="email" id="email" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="url">URL:</label>
|
|
<div class="x-form-element">
|
|
<input type="text" size="32" name="url" id="url" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="x-form-item">
|
|
<label for="url">Auto grow textareas:</label>
|
|
<div class="x-form-element">
|
|
<textarea name="grow" id="grow" cols="25" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<!-- end form layout -->
|
|
</div></div></div>
|
|
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
|
|
</div>
|
|
</form>
|
|
</body>
|
|
</html>
|