|
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public |
|
2 - License, v. 2.0. If a copy of the MPL was not distributed with this |
|
3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> |
|
4 |
|
5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
6 "http://www.w3.org/TR/html4/strict.dtd"> |
|
7 |
|
8 <html lang="en"> |
|
9 <head> |
|
10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
11 <title>Blueprint Forms Tests</title> |
|
12 |
|
13 <!-- Framework CSS --> |
|
14 <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection"> |
|
15 <link rel="stylesheet" href="print.css" type="text/css" media="print"> |
|
16 <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]--> |
|
17 </head> |
|
18 <body> |
|
19 |
|
20 <div class="container showgrid"> |
|
21 <h1>Forms</h1> |
|
22 <hr> |
|
23 |
|
24 <div class="span-12"> |
|
25 |
|
26 <form id="dummy" action="" method="post"> |
|
27 |
|
28 <fieldset> |
|
29 <legend>Simple sample form</legend> |
|
30 |
|
31 <p><label for="dummy0">Text input (title)</label><br> |
|
32 <input type="text" class="title" name="dummy0" id="dummy0" value="Field with class .title"></p> |
|
33 |
|
34 <p><label for="dummy1">Another field</label><br> |
|
35 <input type="text" class="text" id="dummy1" name="dummy1" value="Field with class .text"></p> |
|
36 |
|
37 <p><label for="dummy2">Textarea</label><br> |
|
38 <textarea name="dummy2" id="dummy2" rows="5" cols="20"></textarea></p> |
|
39 |
|
40 <p><input type="submit" value="Submit"> |
|
41 <input type="reset" value="Reset"></p> |
|
42 |
|
43 </fieldset> |
|
44 </form> |
|
45 |
|
46 </div> |
|
47 <div class="span-12 last"> |
|
48 |
|
49 <div class="error"> |
|
50 This is a <div> with the class <strong>.error</strong>. <a href="#">Link</a>. |
|
51 </div> |
|
52 <div class="notice"> |
|
53 This is a <div> with the class <strong>.notice</strong>. <a href="#">Link</a>. |
|
54 </div> |
|
55 <div class="success"> |
|
56 This is a <div> with the class <strong>.success</strong>. <a href="#">Link</a>. |
|
57 </div> |
|
58 |
|
59 <fieldset> |
|
60 <legend>Select, checkboxes, lists</legend> |
|
61 |
|
62 <p><label for="dummy3">Select field</label><br> |
|
63 <select id="dummy3" name="dummy3"> |
|
64 <option value="1">Ottawa</option> |
|
65 <option value="2">Calgary</option> |
|
66 <option value="3">Moosejaw</option> |
|
67 </select></p> |
|
68 |
|
69 <p><label for="dummy4">Select with groups</label><br> |
|
70 <select id="dummy4" name="dummy4"> |
|
71 <option>Favorite pet</option> |
|
72 <optgroup label="mammals"> |
|
73 <option>dog</option> |
|
74 <option>cat</option> |
|
75 <option>rabbit</option> |
|
76 <option>horse</option> |
|
77 </optgroup> |
|
78 <optgroup label="reptiles"> |
|
79 <option>iguana</option> |
|
80 <option>snake</option> |
|
81 </optgroup> |
|
82 </select></p> |
|
83 |
|
84 <p><label>Radio buttons</label><br> |
|
85 <input type="radio" name="example"> Radio one<br> |
|
86 <input type="radio" name="example"> Radio two<br> |
|
87 <input type="radio" name="example"> Radio three<br></p> |
|
88 |
|
89 <p><label>Checkboxes</label><br> |
|
90 <input type="checkbox"> Check one<br> |
|
91 <input type="checkbox"> Check two<br> |
|
92 <input type="checkbox"> Check three<br></p> |
|
93 |
|
94 </fieldset> |
|
95 |
|
96 </div> |
|
97 <hr> |
|
98 |
|
99 <p><a href="http://validator.w3.org/check?uri=referer"> |
|
100 <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p> |
|
101 |
|
102 </div> |
|
103 </body> |
|
104 </html> |