src/cm/media/js/lib/flexible-js-formatting/html-form-input-mask/html-form-input-mask.html
author Yves-Marie Haussonne <ymh.work+github@gmail.com>
Fri, 09 May 2014 18:35:26 +0200
changeset 656 a84519031134
parent 0 40c8f766c9b8
permissions -rw-r--r--
add link to "privacy policy" in the header test

<!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>