source: ether_2012/web/resources/css/blueprint-css/tests/parts/forms.html @ 319

Last change on this file since 319 was 319, checked in by vmipsl, 12 years ago

Import du projet Ether pour le nouveau look 2012
File size: 6.2 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2"http://www.w3.org/TR/html4/strict.dtd">
3
4<html lang="en">
5  <head>
6    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7    <title>Blueprint Forms Tests</title>
8
9    <!-- Framework CSS -->
10    <link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection">
11    <link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print">
12    <!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
13  </head>
14  <body>
15    <div class="container showgrid">
16      <h1>Forms</h1>
17      <hr>
18
19      <div class="span-12">
20
21        <form id="dummy" action="" method="post">
22
23          <fieldset>
24            <legend>Simple sample form</legend>
25            <p>
26              <label for="dummy0">Text input (title)</label><br>
27              <input type="text" class="title" name="dummy0" id="dummy0" value="Field with class .title">
28            </p>
29
30            <p>
31              <label for="dummy1">Another field</label><br>
32              <input type="text" class="text" id="dummy1" name="dummy1" value="Field with class .text">
33            </p>
34
35            <p>
36              <label for="dummy2">Textarea</label><br>
37              <textarea name="dummy2" id="dummy2" rows="5" cols="20"></textarea>
38            </p>
39
40            <p>
41              <label for="dummy3">A password field</label><br>
42              <input type="password" class="text" id="dummy3" name="dummy3" value="Password field with class .text">
43            </p>
44
45            <p>
46              <input type="submit" value="Submit">
47              <input type="reset" value="Reset">
48            </p>
49
50          </fieldset>
51        </form>
52
53      </div>
54      <div class="span-12 last">
55
56        <div class="error">
57          This is a &lt;div&gt; with the class <strong>.error</strong>. <a href="#">Link</a>.
58        </div>
59        <div class="notice">
60          This is a &lt;div&gt; with the class <strong>.notice</strong>. <a href="#">Link</a>.
61        </div>
62        <div class="info">
63          This is a &lt;div&gt; with the class <strong>.info</strong>. <a href="#">Link</a>.
64        </div>
65        <div class="success">
66          This is a &lt;div&gt; with the class <strong>.success</strong>. <a href="#">Link</a>.
67        </div>
68
69        <fieldset>
70          <legend>Select, checkboxes, lists</legend>
71
72          <p>
73            <label for="dummy3">Select field</label><br>
74            <select id="dummy3" name="dummy3">
75              <option value="1">Ottawa</option>
76              <option value="2">Calgary</option>
77              <option value="3">Moosejaw</option>
78            </select>
79          </p>
80
81          <p>
82            <label for="dummy4">Select with groups</label><br>
83            <select id="dummy4" name="dummy4">
84              <option>Favorite pet</option>
85              <optgroup label="mammals">
86                <option>dog</option>
87                <option>cat</option>
88                <option>rabbit</option>
89                <option>horse</option>
90              </optgroup>
91              <optgroup label="reptiles">
92                <option>iguana</option>
93                <option>snake</option>
94              </optgroup>
95            </select>
96          </p>
97
98          <p><label>Radio buttons</label><br>
99            <input type="radio" name="example"> Radio one<br>
100            <input type="radio" name="example"> Radio two<br>
101            <input type="radio" name="example"> Radio three<br>
102          </p>
103
104          <p><label>Checkboxes</label><br>
105            <input type="checkbox"> Check one<br>
106            <input type="checkbox"> Check two<br>
107            <input type="checkbox"> Check three<br>
108          </p>
109
110        </fieldset>
111
112      </div>
113
114      <div class="span-24 last">
115
116        <fieldset>
117          <legend>Alignment</legend>
118
119          <p>
120            <label for="dummy5">Select field</label>
121            <select id="dummy5" name="dummy5">
122              <option value="1">Ottawa</option>
123              <option value="2">Calgary</option>
124              <option value="3">Moosejaw</option>
125            </select>
126          </p>
127
128          <p>
129            <label for="dummy6">Text input (title)</label>
130            <input type="text" class="title" name="dummy6" id="dummy6" value="Field with class .title">
131          </p>
132
133          <p>
134            <label for="dummy7">Select field</label>
135            <select id="dummy7" name="dummy7">
136              <option value="1">Ottawa</option>
137              <option value="2">Calgary</option>
138              <option value="3">Moosejaw</option>
139            </select>
140            <label for="dummy8">Another field</label>
141            <input type="text" class="text" id="dummy8" name="dummy8" value="Field with class .text">
142          </p>
143
144        </fieldset>
145
146      </div>
147
148      <div class="span-24 last">
149        <form action="" method="post" class="inline">
150          <fieldset>
151            <legend>A form with class "inline"</legend>
152            <div class="span-3">
153              <label for="a">Label A:</label>
154              <select id="a" name="a" >
155                <option value="0">All</option>
156              </select>
157            </div>
158            <div class="span-2">
159              some text
160            </div>
161            <div class="span-3">
162              <input type="checkbox" id="o" name="o" value="true" checked="checked" class="checkbox">checkbox one
163            </div>
164            <div class="span-3">
165              <label for="b">Label B:</label>
166              <select id="b" name="b" >
167                <option value="0">All</option>
168              </select>
169            </div>
170            <div class="span-2">
171              <a href="#">A Hyperlink</a>
172            </div>
173            <div class="span-8">
174              <input type="text" class="text" id="q" name="q" value="Field with class .text">
175            </div>
176            <div class="span-2 last">
177              <input type="submit" value="submit" class="button">
178            </div>
179          </fieldset>
180
181        </form>
182
183      </div>
184
185      <hr>
186
187      <p>
188        <a href="http://validator.w3.org/check?uri=referer">
189        <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a>
190      </p>
191
192    </div>
193  </body>
194</html>
Note: See TracBrowser for help on using the repository browser.