UNPKG

32.7 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en-gb" dir="ltr">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Form - UIkit tests</title>
8 <script src="js/test.js"></script>
9 </head>
10
11 <body>
12
13 <div class="uk-container">
14
15 <h1>Form</h1>
16
17 <div uk-grid>
18 <div class="uk-width-2-3@s">
19
20 <h2>Horizontal</h2>
21
22 <form class="uk-form-horizontal">
23
24 <div class="uk-margin">
25 <label class="uk-form-label" for="form-h-text">Text</label>
26 <div class="uk-form-controls">
27 <input class="uk-input uk-form-width-large" id="form-h-text" type="text" placeholder="Some text...">
28 </div>
29 </div>
30
31 <div class="uk-margin">
32 <label class="uk-form-label" for="form-h-select">Select</label>
33 <div class="uk-form-controls">
34 <select class="uk-select uk-form-width-large" id="form-h-select">
35 <option>Option 01</option>
36 <option>Option 02</option>
37 </select>
38 </div>
39 </div>
40
41 <div class="uk-margin">
42 <label class="uk-form-label" for="form-h-datalist">Datalist</label>
43 <div class="uk-form-controls">
44 <input class="uk-input uk-form-width-large" id="form-h-datalist" list="datalist" type="text" placeholder="Some text...">
45 <datalist id="datalist">
46 <option value="Chrome">
47 <option value="Edge">
48 <option value="Firefox">
49 <option value="Safari">
50 </datalist>
51 </div>
52 </div>
53
54 <div class="uk-margin">
55 <label class="uk-form-label" for="form-h-textarea">Textarea</label>
56 <div class="uk-form-controls">
57 <textarea class="uk-textarea uk-form-width-large" id="form-h-textarea" rows="5" placeholder="Some text..."></textarea>
58 </div>
59 </div>
60
61 <div class="uk-margin">
62 <span class="uk-form-label">Radio</span>
63 <div class="uk-form-controls uk-form-controls-text">
64 <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
65 <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
66 <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
67 <label><input class="uk-radio" type="radio" name="radio2"> A</label>
68 <label><input class="uk-radio" type="radio" name="radio2"> B</label>
69 <label><input class="uk-radio" type="radio" name="radio2"> C</label>
70 <label><input class="uk-radio" type="radio" name="radio2"> D</label>
71 </div>
72 </div>
73 </div>
74
75 <div class="uk-margin">
76 <span class="uk-form-label">Checkbox</span>
77 <div class="uk-form-controls uk-form-controls-text">
78 <label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
79 <label><input class="uk-checkbox" type="checkbox"> Option 02</label>
80 <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
81 <label><input class="uk-checkbox" type="checkbox"> A</label>
82 <label><input class="uk-checkbox" type="checkbox"> B</label>
83 <label><input class="uk-checkbox" type="checkbox"> C</label>
84 <label><input class="uk-checkbox" type="checkbox"> D</label>
85 </div>
86 </div>
87 </div>
88
89 <div class="uk-margin">
90 <label class="uk-form-label" for="form-h-multiple">Multiple</label>
91 <div class="uk-form-controls">
92 <select class="uk-select uk-form-width-large" id="form-h-multiple" multiple>
93 <option>Option 01</option>
94 <option>Option 02</option>
95 <option>Option 03</option>
96 <option>Option 04</option>
97 </select>
98 </div>
99 </div>
100
101 <div class="uk-margin">
102 <label class="uk-form-label" for="form-h-range">Range</label>
103 <div class="uk-form-controls uk-form-controls-text">
104 <input class="uk-range uk-form-width-large" id="form-h-range" type="range" value="2" min="0" max="10" step="0.1">
105 </div>
106 </div>
107
108 </form>
109
110 <h2>Sizes</h2>
111
112 <form>
113
114 <div class="uk-margin" uk-margin>
115 <input class="uk-input uk-form-width-small uk-form-large" type="text" placeholder="Some text...">
116 <select class="uk-select uk-form-width-small uk-form-large">
117 <option>Option 01</option>
118 <option>Option 02</option>
119 </select>
120 <button class="uk-button uk-button-default uk-button-large">Button</button>
121 <button class="uk-button uk-button-primary uk-button-large">Button</button>
122 <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
123 </div>
124
125 <div class="uk-margin" uk-margin>
126 <input class="uk-input uk-form-width-small" type="text" placeholder="Some text...">
127 <select class="uk-select uk-form-width-small">
128 <option>Option 01</option>
129 <option>Option 02</option>
130 </select>
131 <button class="uk-button uk-button-default">Button</button>
132 <button class="uk-button uk-button-primary">Button</button>
133 <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
134 </div>
135
136 <div class="uk-margin" uk-margin>
137 <input class="uk-input uk-form-width-small uk-form-small" type="text" placeholder="Some text...">
138 <select class="uk-select uk-form-width-small uk-form-small">
139 <option>Option 01</option>
140 <option>Option 02</option>
141 </select>
142 <button class="uk-button uk-button-default uk-button-small">Button</button>
143 <button class="uk-button uk-button-primary uk-button-small">Button</button>
144 <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
145 </div>
146
147 </form>
148
149 <h2>Widths</h2>
150
151 <form>
152
153 <div class="uk-margin" uk-margin>
154 <input class="uk-input uk-form-width-large" type="text" placeholder="form-width-large">
155 </div>
156
157 <div class="uk-margin" uk-margin>
158 <select class="uk-select uk-form-width-large">
159 <option>form-width-large</option>
160 </select>
161 </div>
162
163 <div class="uk-margin" uk-margin>
164 <textarea class="uk-textarea uk-form-width-large" rows="1" placeholder="form-width-large"></textarea>
165 </div>
166
167 <div class="uk-margin" uk-margin>
168 <input class="uk-input uk-form-width-medium" type="text" placeholder="form-width-medium">
169 <input class="uk-input uk-form-width-small" type="text" placeholder="form-width-small">
170 <input class="uk-input uk-form-width-xsmall" type="text" placeholder="form-width-xsmall">
171 </div>
172
173 <div class="uk-margin" uk-margin>
174 <select class="uk-select uk-form-width-medium">
175 <option>form-width-medium</option>
176 </select>
177 <select class="uk-select uk-form-width-small">
178 <option>form-width-small</option>
179 </select>
180 <select class="uk-select uk-form-width-xsmall">
181 <option>form-width-xsmall</option>
182 </select>
183 </div>
184
185 <div class="uk-margin" uk-margin>
186 <textarea class="uk-textarea uk-form-width-medium" rows="1" placeholder="form-width-medium"></textarea>
187 <textarea class="uk-textarea uk-form-width-small" rows="1" placeholder="form-width-small"></textarea>
188 </div>
189
190 </form>
191
192 <h2>Icon</h2>
193
194 <form class="uk-form-stacked uk-child-width-auto@m" uk-grid>
195 <div>
196
197 <div class="uk-margin">
198
199 <span class="uk-form-label">Not clickable</span>
200
201 <div class="uk-inline">
202 <span class="uk-form-icon" uk-icon="icon: user"></span>
203 <input class="uk-input uk-form-width-medium" type="text">
204 </div>
205
206 </div>
207
208 <div class="uk-margin">
209
210 <div class="uk-inline">
211 <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
212 <input class="uk-input uk-form-width-medium" type="text">
213 </div>
214
215 </div>
216
217 </div>
218 <div>
219
220 <div class="uk-margin">
221
222 <span class="uk-form-label">Clickable</span>
223
224 <div class="uk-inline">
225 <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
226 <input class="uk-input" type="text">
227 </div>
228
229 </div>
230
231 <div class="uk-margin">
232
233 <div class="uk-inline">
234 <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a>
235 <input class="uk-input" type="text">
236 </div>
237
238 </div>
239
240 </div>
241 </form>
242
243 <h2>Select</h2>
244
245 <select class="uk-select uk-form-width-large">
246 <option>Option 01</option>
247 <option>Option 02</option>
248 </select>
249
250 <p class="uk-margin-small">
251 <select class="uk-select uk-form-width-large" disabled>
252 <option>Option 01</option>
253 <option>Option 02</option>
254 </select>
255 </p>
256
257 <p class="uk-margin-small">
258 <select class="uk-select uk-form-width-large" multiple="multiple">
259 <option>Option 01</option>
260 <option>Option 02</option>
261 <option>Option 03</option>
262 <option>Option 04</option>
263 </select>
264 </p>
265
266 <h2>Radio, Checkbox and Select</h2>
267
268 <form class="uk-form-stacked uk-child-width-1-3@m" uk-grid>
269 <div>
270
271 <span class="uk-form-label">Radio</span>
272 <label><input class="uk-radio" type="radio" name="radio1" checked> Checked</label><br>
273 <label><input class="uk-radio" type="radio" name="radio1"> Unchecked</label><br>
274 <label><input class="uk-radio" type="radio" name="radio1"> Unchecked</label><br>
275 <label><input class="uk-radio" type="radio" name="radio2" disabled> Disabled</label><br>
276 <label><input class="uk-radio" type="radio" name="radio2" disabled checked> Disabled Checked</label>
277 <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
278 <label><input class="uk-radio" type="radio" name="radio3" checked> A</label>
279 <label><input class="uk-radio" type="radio" name="radio3"> B</label>
280 <label><input class="uk-radio" type="radio" name="radio4" disabled> C</label>
281 <label><input class="uk-radio" type="radio" name="radio4" disabled checked> D</label>
282 </div>
283
284 </div>
285 <div>
286
287 <span class="uk-form-label">Checkbox</span>
288 <label><input class="uk-checkbox" type="checkbox" checked> Checked</label><br>
289 <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
290 <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
291 <label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
292 <label><input class="uk-checkbox" type="checkbox" disabled checked> Disabled Checked</label><br>
293 <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
294 <label><input class="uk-checkbox" type="checkbox" checked> A</label>
295 <label><input class="uk-checkbox" type="checkbox"> B</label>
296 <label><input class="uk-checkbox" type="checkbox" disabled> C</label>
297 <label><input class="uk-checkbox" type="checkbox" disabled checked> D</label>
298 </div>
299
300 </div>
301 <div>
302
303 <span class="uk-form-label">Checkbox</span>
304 <label><input class="uk-checkbox js-indeterminate" type="checkbox"> Indeterminate</label><br>
305 <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
306 <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
307 <label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
308 <label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> Disabled Indeterminate</label>
309 <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
310 <label><input class="uk-checkbox js-indeterminate" type="checkbox"> A</label>
311 <label><input class="uk-checkbox" type="checkbox"> B</label>
312 <label><input class="uk-checkbox" type="checkbox" disabled> C</label>
313 <label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> D</label>
314 </div>
315
316 <script>UIkit.util.$$('.js-indeterminate').forEach(function (el) { el.indeterminate = true; })</script>
317
318 </div>
319
320 </form>
321
322 <h2>Custom Controls</h2>
323
324 <form class="uk-form-stacked uk-child-width-1-2@m" uk-grid>
325 <div>
326
327 <h3>File</h3>
328
329 <div class="uk-margin">
330
331 <div uk-form-custom>
332 <input type="file">
333 <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
334 </div>
335
336 </div>
337
338 <div class="uk-margin">
339 <span class="uk-text-middle">Here is a text</span>
340 <div uk-form-custom>
341 <input type="file">
342 <span class="uk-link">upload</span>
343 </div>
344 </div>
345
346 <div class="uk-margin" uk-margin>
347
348 <div uk-form-custom="target: true">
349 <input type="file">
350 <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
351 </div>
352
353 <button class="uk-button uk-button-default">Submit</button>
354
355 </div>
356
357 </div>
358 <div>
359
360 <h3>Select</h3>
361
362 <div class="uk-margin">
363
364 <div uk-form-custom="target: true">
365 <select>
366 <option value="1">Option 01</option>
367 <option value="2">Option 02</option>
368 <option value="3">Option 03</option>
369 <option value="4">Option 04</option>
370 </select>
371 <span></span>
372 </div>
373
374 </div>
375
376 <div class="uk-margin">
377
378 <div uk-form-custom="target: > * > span:last-child">
379 <select>
380 <option value="1">Option 01</option>
381 <option value="2">Option 02</option>
382 <option value="3">Option 03</option>
383 <option value="4">Option 04</option>
384 </select>
385 <span class="uk-link">
386 <span uk-icon="icon: pencil"></span>
387 <span></span>
388 </span>
389 </div>
390
391 </div>
392
393 <div class="uk-margin">
394
395 <div uk-form-custom="target: > * > span:first-child">
396 <select>
397 <option value="">Please select...</option>
398 <option value="1">Option 01</option>
399 <option value="2">Option 02</option>
400 <option value="3">Option 03</option>
401 <option value="4">Option 04</option>
402 </select>
403 <button class="uk-button uk-button-default" type="button" tabindex="-1">
404 <span></span>
405 <span uk-icon="icon: chevron-down"></span>
406 </button>
407 </div>
408
409 </div>
410
411 <div class="uk-margin">
412
413 <div uk-form-custom="target: true">
414 <select>
415 <option value="">Please select...</option>
416 <option value="1">Option 01</option>
417 <option value="2">Option 02</option>
418 <option value="3">Option 03</option>
419 <option value="4">Option 04</option>
420 </select>
421 <span class="uk-select uk-form-width-medium"></span>
422 </div>
423
424 </div>
425
426 </div>
427 </form>
428
429 <p><span class="uk-label">Note</span> The hover and focus state for <code>uk-form-custom</code> are not styled by default, but you could use the adjacent sibling selector to do so.</p>
430
431 </div>
432 <form class="uk-form-stacked uk-width-1-3@s">
433
434 <h2>Stacked</h2>
435
436 <div class="uk-margin">
437 <span class="uk-form-label">States and styles</span>
438 <div class="uk-margin-small uk-grid-small uk-child-width-1-2" uk-grid>
439 <div>
440 <input class="uk-input" type="text" placeholder=":disabled" disabled>
441 </div>
442 <div>
443 <input class="uk-input" type="text" placeholder=":disabled" value="Some text..." disabled>
444 </div>
445 </div>
446 <div class="uk-margin-small uk-grid-small" uk-grid>
447 <div class="uk-width-expand">
448 <input class="uk-input" type="text" placeholder=":focus" autofocus required>
449 </div>
450 <div class="uk-width-auto">
451 <button class="uk-button uk-button-default uk-width-1-1">Required</button>
452 </div>
453 </div>
454 <div class="uk-margin-small">
455 <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
456 </div>
457 <div class="uk-margin-small">
458 <input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
459 </div>
460 <div class="uk-margin-small">
461 <input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
462 </div>
463 </div>
464
465 <fieldset class="uk-fieldset">
466
467 <legend class="uk-legend">Legend</legend>
468
469 <div class="uk-margin">
470 <label class="uk-form-label" for="form-s-text">Text</label>
471 <input class="uk-input" id="form-s-text" type="text" placeholder="Some text...">
472 </div>
473
474 <div class="uk-margin">
475 <label class="uk-form-label" for="form-s-select">Select</label>
476 <select class="uk-select" id="form-s-select">
477 <option>Option 01</option>
478 <option>Option 02</option>
479 </select>
480 </div>
481
482 <div class="uk-margin">
483 <label class="uk-form-label" for="form-s-textarea">Textarea</label>
484 <textarea class="uk-textarea" id="form-s-textarea" rows="5" placeholder="Some text..."></textarea>
485 </div>
486
487 <div class="uk-margin">
488 <span class="uk-form-label">Radio</span>
489 <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
490 <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
491 <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
492 <label><input class="uk-radio" type="radio" name="radio2"> A</label>
493 <label><input class="uk-radio" type="radio" name="radio2"> B</label>
494 <label><input class="uk-radio" type="radio" name="radio2"> C</label>
495 <label><input class="uk-radio" type="radio" name="radio2"> D</label>
496 </div>
497 </div>
498
499 <div class="uk-margin">
500 <span class="uk-form-label">Checkbox</span>
501 <label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
502 <label><input class="uk-checkbox" type="checkbox"> Option 02</label>
503 <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
504 <label><input class="uk-checkbox" type="checkbox"> A</label>
505 <label><input class="uk-checkbox" type="checkbox"> B</label>
506 <label><input class="uk-checkbox" type="checkbox"> C</label>
507 <label><input class="uk-checkbox" type="checkbox"> D</label>
508 </div>
509 </div>
510
511 <div class="uk-margin">
512 <label class="uk-form-label" for="form-s-multiple">Multiple</label>
513 <select class="uk-select" id="form-s-multiple" multiple>
514 <option>Option 01</option>
515 <option>Option 02</option>
516 <option>Option 03</option>
517 <option>Option 04</option>
518 </select>
519 </div>
520
521 <div class="uk-margin">
522 <label class="uk-form-label" for="form-s-range">Range</label>
523 <input class="uk-range" id="form-s-range" type="range" value="2" min="0" max="10" step="0.1">
524 </div>
525
526 <div class="uk-margin">
527 <label class="uk-form-label" for="form-s-number">Number</label>
528 <input class="uk-input" id="form-s-number" type="number" min="0" max="10" value="5">
529 </div>
530
531 <div class="uk-margin">
532 <label class="uk-form-label" for="form-s-password">Password</label>
533 <input class="uk-input" id="form-s-password" type="password" placeholder="Password">
534 </div>
535
536 <div class="uk-margin">
537 <label class="uk-form-label" for="form-s-email">Email</label>
538 <input class="uk-input" id="form-s-email" type="email" placeholder="name@domain.com">
539 </div>
540
541 <div class="uk-margin">
542 <label class="uk-form-label" for="form-s-search">Search</label>
543 <input class="uk-input" id="form-s-search" type="search" placeholder="Search...">
544 </div>
545
546 <div class="uk-margin">
547 <label class="uk-form-label" for="form-s-tel">Tel</label>
548 <input class="uk-input" id="form-s-tel" type="tel" placeholder="+49 555 123456">
549 </div>
550
551 <div class="uk-margin">
552 <label class="uk-form-label" for="form-s-url">URL</label>
553 <input class="uk-input" id="form-s-url" type="url" placeholder="http://">
554 </div>
555
556 <div class="uk-margin">
557 <label class="uk-form-label" for="form-s-file">File</label>
558 <input class="uk-width-1-1" id="form-s-file" type="file">
559 </div>
560
561 <div class="uk-margin">
562 <label class="uk-form-label" for="form-s-color">Color</label>
563 <input class="uk-input" id="form-s-color" type="color" placeholder="#000000">
564 </div>
565
566 <div class="uk-margin">
567 <label class="uk-form-label" for="form-s-date">Date</label>
568 <input class="uk-input" id="form-s-date" type="date" placeholder="1970-01-01">
569 </div>
570
571 <div class="uk-margin">
572 <label class="uk-form-label" for="form-s-month">Month</label>
573 <input class="uk-input" id="form-s-month" type="month" placeholder="1970-01">
574 </div>
575
576 <div class="uk-margin">
577 <label class="uk-form-label" for="form-s-week">Week</label>
578 <input class="uk-input" id="form-s-week" type="week" placeholder="1970-W01">
579 </div>
580
581 <div class="uk-margin">
582 <label class="uk-form-label" for="form-s-time">Time</label>
583 <input class="uk-input" id="form-s-time" type="time" placeholder="00:00:00">
584 </div>
585
586 <div class="uk-margin">
587 <label class="uk-form-label" for="form-s-datetime">Datetime</label>
588 <input class="uk-input" id="form-s-datetime" type="datetime" placeholder="1970-01-01T00:00:00Z">
589 </div>
590
591 <div class="uk-margin">
592 <label class="uk-form-label" for="form-s-datetimelocal">Datetime local</label>
593 <input class="uk-input" id="form-s-datetimelocal" type="datetime-local" placeholder="1970-01-01T00:00">
594 </div>
595
596 </fieldset>
597
598 </form>
599 </div>
600
601 <h2>JavaScript Options</h2>
602
603 <div class="uk-overflow-auto">
604 <table class="uk-table uk-table-striped">
605 <thead>
606 <tr>
607 <th>Option</th>
608 <th>Value</th>
609 <th>Default</th>
610 <th>Description</th>
611 </tr>
612 </thead>
613 <tbody>
614 <tr>
615 <td><code>target</code></td>
616 <td>CSS selector | Boolean</td>
617 <td>false</td>
618 <td>Value display target.</td>
619 </tr>
620 </tbody>
621 </table>
622 </div>
623
624 </div>
625
626 </body>
627</html>