src/cm/media/js/lib/flexible-js-formatting/html-form-input-mask/html-form-input-mask.html
changeset 0 40c8f766c9b8
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/flexible-js-formatting/html-form-input-mask/html-form-input-mask.html	Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
+"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+   <title>JavaScript form input mask demonstration</title>
+   <meta name="description" content="Demonstrates how unobtrusive JavaScript can implement input masks in HTML form elements" />
+   <script type="text/javascript" language="javascript" src="../files/prototype.js" ></script>
+   <script type="text/javascript" language="javascript" src="html-form-input-mask.js"></script>
+   <style type="text/css">
+   input.text, textarea, select {
+      font-size:    1.1em;
+      line-height:  1.3em;
+      border-color: #7C7C7C #C3C3C3 #DDD;
+      border-style: solid;
+      border-width: 1px;
+      background:   #FFF url(../files/fieldbg.gif) repeat-x top;
+   }
+   label {
+      width:      400px;
+      display:    block;
+      text-align: right;
+   }
+   </style>
+</head>
+
+<body onload="Xaprb.InputMask.setupElementMasks()" >
+
+<h1>JavaScript form input mask demonstration</h1>
+
+<p>The following form fields use unobtrusive JavaScript to implement "input
+masks."  The maximum field length is automatically limited to the length of
+the mask.  The characters you can enter into the fields are constrained, and
+separators are automatically added, but no actual value checking is done.  For
+example, the date input is constrained to the general format for a date, but
+you can enter an invalid date into the field.</p>
+
+<form action="" method="get">
+
+<label for="input_date">Date (US format)
+   <input id="input_date" type="text" class="text input_mask mask_date_us" />
+</label>
+<label for="input_time">Time
+   <input id="input_time" type="text" class="text input_mask mask_time" />
+</label>
+<label for="input_phone">Phone number
+   <input id="input_phone" type="text" class="text input_mask mask_phone" />
+</label>
+
+</form>
+
+</body>
+</html>