Skip to content
Newer
Older
100644 215 lines (215 sloc) 6.2 KB
6fd523a Added support for YUI 3.x. Also, pointed all JS library references to…
Nathan Smith authored
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>Formalize CSS</title>
0c348af @nathansmith For consistency across other peojects, renamed /stylesheets and /java…
authored
6 <link rel="stylesheet" href="assets/css/demo.css" />
79ba265 @nathansmith Pointing to the latest version(s) of the CDN'd JS libraries.
authored
7 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
0c348af @nathansmith For consistency across other peojects, renamed /stylesheets and /java…
authored
8 <script src="assets/js/dojo.formalize.js"></script>
6fd523a Added support for YUI 3.x. Also, pointed all JS library references to…
Nathan Smith authored
9 </head>
10 <body>
11 <div id="wrapper">
54fc31b @nathansmith Just fixing some indentation.
authored
12 <h1>
13 Example of all form elements
14 </h1>
403f744 @nathansmith Just minor tweaks to the HTML demo files. No big deal.
authored
15 <form action="#" method="post" enctype="multipart/form-data" onsubmit="return false">
54fc31b @nathansmith Just fixing some indentation.
authored
16 <p>
17 <input type="checkbox" id="test_checkbox_1" name="test_checkbox_1" />
18 <label for="test_checkbox_1">
19 Test checkbox 1
20 </label>
21 &nbsp;
22 &nbsp;
23 <input type="checkbox" id="test_checkbox_2" name="test_checkbox_2" />
24 <label for="test_checkbox_2">
25 Test checkbox 2
26 </label>
27 &nbsp;
28 &nbsp;
29 <input type="checkbox" id="test_checkbox_3" name="test_checkbox_3" />
30 <label for="test_checkbox_3">
31 Test checkbox 3
32 </label>
33 </p>
34 <p>
35 <input type="radio" id="test_radio_1" name="test_radio_group" />
36 <label for="test_radio_1">
37 Test radio 1
38 </label>
39 &nbsp;
40 &nbsp;
41 <input type="radio" id="test_radio_2" name="test_radio_group" />
42 <label for="test_radio_2">
43 Test radio 2
44 </label>
45 &nbsp;
46 &nbsp;
47 <input type="radio" id="test_radio_3" name="test_radio_group" />
48 <label for="test_radio_3">
49 Test radio 3
50 </label>
51 </p>
52 <p>
53 <label for="select_dd">
54 Select drop-down
55 </label>
56 <br />
57 <select id="select_dd" name="select_dd">
58 <optgroup label="Group 1">
59 <option value="1">Some text goes here</option>
60 <option value="2">Another choice could be here</option>
61 <option value="3">Yet another item to be chosen</option>
62 </optgroup>
63 <optgroup label="Group 2">
64 <option value="4">Some text goes here</option>
65 <option value="5">Another choice could be here</option>
66 <option value="6">Yet another item to be chosen</option>
67 </optgroup>
68 <optgroup label="Group 3">
69 <option value="7">Some text goes here</option>
70 <option value="8">Another choice could be here</option>
71 <option value="9">Yet another item to be chosen</option>
72 </optgroup>
73 </select>
74 <input type="text" id="text_inline" name="text_inline" />
7b038c6 @nathansmith Adding the ability to have a link button: <a class="button">
authored
75 <input type="button" value="Input Button" />
76 <button>Button Tag</button>
77 <a href="#" class="button">Link Button</a>
54fc31b @nathansmith Just fixing some indentation.
authored
78 </p>
79 <p>
80 <label for="select_multi">
81 Select multiple
82 </label>
83 <br />
84 <select id="select_multi" name="select_multi" multiple="multiple" size="10">
85 <optgroup label="Group 1">
86 <option value="1">Some text goes here</option>
87 <option value="2">Another choice could be here</option>
88 <option value="3">Yet another item to be chosen</option>
89 </optgroup>
90 <optgroup label="Group 2">
91 <option value="4">Some text goes here</option>
92 <option value="5">Another choice could be here</option>
93 <option value="6">Yet another item to be chosen</option>
94 </optgroup>
95 <optgroup label="Group 3">
96 <option value="7">Some text goes here</option>
97 <option value="8">Another choice could be here</option>
98 <option value="9">Yet another item to be chosen</option>
99 </optgroup>
100 </select>
101 </p>
102 <p>
103 <label for="textarea">
104 Textarea
105 </label>
106 <br />
107 <textarea id="textarea" name="textarea" rows="5" placeholder="This is an example of HTML5 placeholder text."></textarea>
108 </p>
109 <table class="horiz">
110 <tr>
111 <td>
112 <label for="url">
113 URL + Autofocus
114 </label>
115 <br />
116 <input type="url" id="url" name="url" value="http://" autofocus="autofocus" />
117 </td>
118 <td>
119 <label for="email">
120 Email
121 </label>
122 <br />
123 <input type="email" id="email" name="email" placeholder="name@example.com" />
124 </td>
125 <td>
0e12ea7 @nathansmith Killing faux placeholder support for <input type="password"> since it…
authored
126 <label for="password">
127 Password
54fc31b @nathansmith Just fixing some indentation.
authored
128 </label>
129 <br />
0e12ea7 @nathansmith Killing faux placeholder support for <input type="password"> since it…
authored
130 <input type="password" id="password" name="password" placeholder="Alphanumeric123!" />
54fc31b @nathansmith Just fixing some indentation.
authored
131 </td>
132 </tr>
133 <tr>
134 <td>
135 <label for="datetime-local">
136 Datetime local
137 </label>
138 <br />
139 <input type="datetime-local" id="datetime-local" name="datetime-local" />
140 </td>
141 <td>
142 <label for="number">
143 Number
144 </label>
145 <br />
859a36e @nathansmith Added min, max, step to input type="number" - to make it clear how to…
authored
146 <input type="number" id="number" name="number" min="0" max="999" step="1" />
54fc31b @nathansmith Just fixing some indentation.
authored
147 </td>
148 <td>
149 <label for="tel">
150 Tel (phone)
151 </label>
152 <br />
153 <input type="tel" id="tel" name="tel" />
154 </td>
155 </tr>
156 <tr>
157 <td>
158 <label for="datetime">
159 Datetime
160 </label>
161 <br />
162 <input type="datetime" id="datetime" name="datetime" />
163 </td>
164 <td>
165 <label for="date">
166 Date
167 </label>
168 <br />
169 <input type="date" id="date" name="date" />
170 </td>
171 <td>
172 <label for="month">
173 Month
174 </label>
175 <br />
176 <input type="month" id="month" name="month" />
177 </td>
178 </tr>
179 <tr>
180 <td>
181 <label for="search">
182 Search
183 </label>
184 <br />
185 <input type="search" id="search" name="search" />
186 </td>
187 <td>
188 <label for="range">
189 Range
190 </label>
191 <br />
192 <input type="range" id="range" name="range" />
193 </td>
194 <td>
195 <label for="file">
196 File upload
197 </label>
198 <br />
199 <input type="file" id="file" name="file" />
200 </td>
201 </tr>
202 </table>
203 <p>
204 <input type="submit" value="Input - Submit" />
205 &nbsp;
206 <input type="button" value="Input - Button" />
207 &nbsp;
208 <input type="reset" value="Input - Reset" />
209 &nbsp;
210 <button>Button tag</button>
211 </p>
212 </form>
6fd523a Added support for YUI 3.x. Also, pointed all JS library references to…
Nathan Smith authored
213 </div>
214 </body>
215 </html>
Something went wrong with that request. Please try again.