|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
2 "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <title>JavaScript form input mask demonstration</title> |
|
6 <meta name="description" content="Demonstrates how unobtrusive JavaScript can implement input masks in HTML form elements" /> |
|
7 <script type="text/javascript" language="javascript" src="../files/prototype.js" ></script> |
|
8 <script type="text/javascript" language="javascript" src="html-form-input-mask.js"></script> |
|
9 <style type="text/css"> |
|
10 input.text, textarea, select { |
|
11 font-size: 1.1em; |
|
12 line-height: 1.3em; |
|
13 border-color: #7C7C7C #C3C3C3 #DDD; |
|
14 border-style: solid; |
|
15 border-width: 1px; |
|
16 background: #FFF url(../files/fieldbg.gif) repeat-x top; |
|
17 } |
|
18 label { |
|
19 width: 400px; |
|
20 display: block; |
|
21 text-align: right; |
|
22 } |
|
23 </style> |
|
24 </head> |
|
25 |
|
26 <body onload="Xaprb.InputMask.setupElementMasks()" > |
|
27 |
|
28 <h1>JavaScript form input mask demonstration</h1> |
|
29 |
|
30 <p>The following form fields use unobtrusive JavaScript to implement "input |
|
31 masks." The maximum field length is automatically limited to the length of |
|
32 the mask. The characters you can enter into the fields are constrained, and |
|
33 separators are automatically added, but no actual value checking is done. For |
|
34 example, the date input is constrained to the general format for a date, but |
|
35 you can enter an invalid date into the field.</p> |
|
36 |
|
37 <form action="" method="get"> |
|
38 |
|
39 <label for="input_date">Date (US format) |
|
40 <input id="input_date" type="text" class="text input_mask mask_date_us" /> |
|
41 </label> |
|
42 <label for="input_time">Time |
|
43 <input id="input_time" type="text" class="text input_mask mask_time" /> |
|
44 </label> |
|
45 <label for="input_phone">Phone number |
|
46 <input id="input_phone" type="text" class="text input_mask mask_phone" /> |
|
47 </label> |
|
48 |
|
49 </form> |
|
50 |
|
51 </body> |
|
52 </html> |