test.html - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
test.html (3038B)
---
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>jsdatalist</title>
6 <link rel="stylesheet" type="text/css" href="datalist.css" />
7 </head>
8 <body>
9
10 <br/>
11 <br/>
12 <br/><br/>
13 <br/>
14 <br/>
15 <br/>
16 <br/>
17 <br/>
18 <br/>
19 <br/>
20 <br/>
21 <br/>
22
23 <form method="post" action="">
24
25 <label for="os">OS: </label>
26 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
27
28 <datalist class="datalist" id="list">
29 <option>DragonflyBSD</option>
30 <option>GNU/Hurd</option>
31 <option>GNU/Linux</option>
32 <option>FreeBSD</option>
33 <option>MS-DOS 6.11</option>
34 <option>OpenBSD</option>
35 <option>OpenSolaris</option>
36 <option>NetBSD</option>
37 <option>Plan9</option>
38 <option>Windows</option>
39 </datalist>
40
41 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
42
43 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" style="position: absolute; top: 100px;right: 20px" /><br/>
44
45 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" style="position: fixed; top: 200px;right: 20px" /><br/>
46
47 <div style="position: absolute;top: 300px; right: 20px">
48 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
49 </div>
50
51 <div style="position: fixed;top: 400px; right: 20px">
52 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
53 </div>
54
55 <div style="position: absolute;top: 1000px; left: 400px">
56 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
57 </div>
58
59
60 <div style="position: absolute;top: 1300px; right: 20px">
61 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
62 </div>
63
64
65 <table>
66 <tr><td>
67 Test:
68 </td><td></td></tr>
69 <tr><td></td><td>
70 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
71 </td></tr>
72 </table>
73
74 <table style="float:right">
75 <tr><td>
76 Test float style:
77 </td><td></td></tr>
78 <tr><td></td><td>
79 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
80 </td></tr>
81 </table>
82
83 <br/>
84
85 <label>Test: using value, but showing the label:</label>
86 <input type="text" placeholder="Select OS..." value="" list="listlabel" name="oslabel" id="oslabel" class="datalist" /><br/>
87 <datalist class="datalist" id="listlabel">
88 <option value="">Empty value: use ""</option>
89 <option>No value attribute: just use label</option>
90 <option data-value="3">data-value set: use 3</option>
91 <option data-value="">data-value set but empty: use ""</option>
92 <option value="4">Value attribute set: use 4</option>
93 </datalist>
94
95 </form>
96
97 <script type="text/javascript" src="datalist.js"></script>
98
99 </body>
100 </html>