semantic-forms 5.3.4 → 5.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,7 +25,7 @@
25
25
  }
26
26
  </style>
27
27
  </head>
28
- <body>
28
+ <body class="no-js">
29
29
  <main>
30
30
  <article>
31
31
  <h1>Semantic Forms</h1>
@@ -35,21 +35,46 @@
35
35
  <summary>Table of Contents</summary>
36
36
 
37
37
  <ul>
38
- <li><a href="#high_flow_styling">High flow (JavaScript enabled) styling</a>
38
+ <li><a href="#form_styling">Form styling</a>
39
39
  <ul>
40
- <li><a href="#inputs">Inputs</a></li>
41
- <li><a href="#selects">Selects</a></li>
42
- <li><a href="#checkboxes">Checkboxes</a></li>
43
- <li><a href="#radios">Radios</a></li>
44
- <li><a href="#other">Other</a></li>
45
- <li><a href="#alignment_classes">Alignment classes</a></li>
46
- <li><a href="#keyboard_shortcuts">Keyboard shortcuts</a></li>
47
- <li><a href="#tables">Tables</a></li>
48
- <li><a href="#nested_fieldsets">Nested fieldsets</a></li>
49
- <li><a href="#details">Detail elements</a></li>
50
- <li><a href="#buttons">Buttons</a></li>
51
- <li><a href="#colspan_classes">Colspan classes</a></li>
52
- <li><a href="#p_tag_elements">P tag elements</a></li>
40
+ <li><a href="#low-flow-cat_inputs" data-section="cat_inputs">Inputs</a>
41
+ <ul>
42
+ <li><a href="#low-flow-basic_inputs" data-section="basic_inputs">Basic inputs</a></li>
43
+ <li><a href="#low-flow-single_field" data-section="single_field">Single field form</a></li>
44
+ <li><a href="#low-flow-content_sized" data-section="content_sized">Content sized fields</a></li>
45
+ <li><a href="#low-flow-inputs" data-section="inputs">Inputs</a></li>
46
+ <li><a href="#low-flow-selects" data-section="selects">Selects</a></li>
47
+ <li><a href="#low-flow-other" data-section="other">Other inputs</a></li>
48
+ <li><a href="#low-flow-p_tag_elements" data-section="p_tag_elements">P tag elements</a></li>
49
+ </ul>
50
+ </li>
51
+ <li><a href="#low-flow-cat_choices" data-section="cat_choices">Checkboxes, radios and switches</a>
52
+ <ul>
53
+ <li><a href="#low-flow-checkboxes" data-section="checkboxes">Checkboxes</a></li>
54
+ <li><a href="#low-flow-radios" data-section="radios">Radios</a></li>
55
+ </ul>
56
+ </li>
57
+ <li><a href="#low-flow-cat_buttons" data-section="cat_buttons">Buttons</a>
58
+ <ul>
59
+ <li><a href="#low-flow-buttons" data-section="buttons">Buttons</a></li>
60
+ </ul>
61
+ </li>
62
+ <li><a href="#low-flow-cat_layout" data-section="cat_layout">Layout</a>
63
+ <ul>
64
+ <li><a href="#low-flow-alignment_classes" data-section="alignment_classes">Alignment classes</a></li>
65
+ <li><a href="#low-flow-colspan_classes" data-section="colspan_classes">Colspan classes</a></li>
66
+ <li><a href="#low-flow-col_classes" data-section="col_classes">Col classes</a></li>
67
+ <li><a href="#low-flow-tabs" data-section="tabs">Tabs</a></li>
68
+ <li><a href="#low-flow-tables" data-section="tables">Tables</a></li>
69
+ <li><a href="#low-flow-nested_fieldsets" data-section="nested_fieldsets">Nested fieldsets</a></li>
70
+ <li><a href="#low-flow-details" data-section="details">Detail elements</a></li>
71
+ </ul>
72
+ </li>
73
+ <li><a href="#low-flow-cat_shortcuts" data-section="cat_shortcuts">Keyboard shortcuts</a>
74
+ <ul>
75
+ <li><a href="#low-flow-keyboard_shortcuts" data-section="keyboard_shortcuts">Keyboard shortcuts</a></li>
76
+ </ul>
77
+ </li>
53
78
  </ul>
54
79
  </li>
55
80
  <li><a href="#semantic_table">Semantic form tables</a>
@@ -59,104 +84,113 @@
59
84
  <li><a href="#table_unstyled">Unstyled table</a></li>
60
85
  </ul>
61
86
  </li>
62
- <li><a href="#low_flow_styling">Low flow (JavaScript disabled) styling</a>
63
- <ul>
64
- <li><a href="#low-flow-inputs">Inputs</a></li>
65
- <li><a href="#low-flow-selects">Selects</a></li>
66
- <li><a href="#low-flow-checkboxes">Checkboxes</a></li>
67
- <li><a href="#low-flow-radios">Radios</a></li>
68
- <li><a href="#low-flow-other">Other</a></li>
69
- <li><a href="#low-flow-alignment_classes">Alignment classes</a></li>
70
- <li><a href="#low-flow-keyboard_shortcuts">Keyboard shortcuts</a></li>
71
- <li><a href="#low-flow-tables">Tables</a></li>
72
- <li><a href="#low-flow-nested_fieldsets">Nested fieldsets</a></li>
73
- <li><a href="#low-flow-details">Detail elements</a></li>
74
- <li><a href="#low-flow-buttons">Buttons</a></li>
75
- <li><a href="#low-flow-colspan_classes">Colspan classes</a></li>
76
- <li><a href="#low-flow-p_tag_elements">P tag elements</a></li>
77
- </ul>
78
- </li>
79
87
  <li><a href="#sample_forms">Sample forms</a></li>
80
88
  <li><a href="#non_form_related_elements">Non-form related HTML elements</a></li>
81
89
  </ul>
82
90
  </details>
83
91
 
84
- <h2 id="high_flow_styling">High flow (JavaScript enabled) styling</h2>
92
+ <h2 id="form_styling">Form styling</h2>
85
93
 
86
- <form action="/somewhere" method="post" class="semanticForms">
94
+ <p>Every widget below is shown two ways: with the JavaScript enhancements applied, and with them switched off. Adding the <code>lowFlow</code> class to a form removes all JS enhancements, which is also what you get when JavaScript is unavailable.</p>
95
+
96
+ <form class="semanticForms" id="flow_toggle">
87
97
  <dl>
88
98
  <div>
89
- <dt><label for="name">Name</label></dt>
90
- <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
99
+ <dt><label for="low_flow_view">Show the JavaScript disabled versions</label></dt>
100
+ <dd><input type="checkbox" switch name="low_flow_view" id="low_flow_view"></dd>
91
101
  </div>
102
+ </dl>
103
+ </form>
92
104
 
93
- <div>
94
- <dt><label for="prefilled">Prefilled field</label></dt>
95
- <dd><input id="prefilled" name="prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
96
- </div>
105
+ <noscript>
106
+ <p><strong>JavaScript is disabled, so the widgets below are the JavaScript disabled versions.</strong> Turn JavaScript on to see the enhanced versions and to switch between the two.</p>
107
+ </noscript>
97
108
 
98
- <div>
99
- <dt><label for="noplaceholder">No placeholder</label></dt>
100
- <dd><input id="noplaceholder" name="noplaceholder" type="text"></dd>
101
- </div>
109
+ <form action="/somewhere" method="post" class="semanticForms" id="high_flow">
110
+ <h3 id="cat_inputs">Inputs</h3>
102
111
 
103
- <div>
104
- <dt><label for="password">Password field</label></dt>
105
- <dd>
106
- <input id="password" name="password" type="password" minlength="8" required>
107
- <p data-invalid-text>Password should be at least 8 characters long.</p>
108
- </dd>
109
- </div>
112
+ <fieldset id="basic_inputs">
113
+ <legend>Basic inputs</legend>
114
+ <dl>
115
+ <div>
116
+ <dt><label for="name">Name</label></dt>
117
+ <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
118
+ </div>
110
119
 
111
- <div>
112
- <dt><label for="dontshow-password">Don't show password field</label></dt>
113
- <dd>
114
- <input id="dontshow-password" name="dontshow-password" type="password" minlength="8" required data-no-reveal>
115
- <p data-invalid-text>Password should be at least 8 characters long.</p>
116
- </dd>
117
- </div>
120
+ <div>
121
+ <dt><label for="prefilled">Prefilled field</label></dt>
122
+ <dd><input id="prefilled" name="prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
123
+ </div>
118
124
 
119
- <div>
120
- <dt><label for="customize-password">Customize clear/show buttons</label></dt>
121
- <dd>
122
- <input id="customize-password" name="customize-password" type="password" minlength="8" required data-clear-field-text="Vaporize this text" data-show-password-text="Reveal this password" data-hide-password-text="omg no hide it again!">
123
- <p data-invalid-text>Password should be at least 8 characters long.</p>
124
- </dd>
125
- </div>
125
+ <div>
126
+ <dt><label for="noplaceholder">No placeholder</label></dt>
127
+ <dd><input id="noplaceholder" name="noplaceholder" type="text"></dd>
128
+ </div>
126
129
 
127
- <div>
128
- <dt><label for="input-button-1">Input with button</label></dt>
129
- <dd>
130
- <input type="text" id="input-button-1" name="input-button-1" placeholder="This input has a button">
131
- <button type="button">Go</button>
132
- </dd>
133
- </div>
134
- </dl>
130
+ <div>
131
+ <dt><label for="password">Password field</label></dt>
132
+ <dd>
133
+ <input id="password" name="password" type="password" minlength="8" required>
134
+ <p data-invalid-text>Password should be at least 8 characters long.</p>
135
+ </dd>
136
+ </div>
135
137
 
136
- <dl>
137
- <div>
138
- <dt><label for="single-input">Single form input</label></dt>
139
- <dd><input type="text" name="single-input" id="single-input"></dd>
140
- </div>
141
- </dl>
138
+ <div>
139
+ <dt><label for="dontshow-password">Don't show password field</label></dt>
140
+ <dd>
141
+ <input id="dontshow-password" name="dontshow-password" type="password" minlength="8" required data-no-reveal>
142
+ <p data-invalid-text>Password should be at least 8 characters long.</p>
143
+ </dd>
144
+ </div>
142
145
 
143
- <dl class="colspan-1">
144
- <div>
145
- <dt><label for="max-content-input"><code>data-max-content</code> text input</label></dt>
146
- <dd><input type="text" name="max-content-input" id="max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
147
- </div>
146
+ <div>
147
+ <dt><label for="customize-password">Customize buttons</label></dt>
148
+ <dd>
149
+ <input id="customize-password" name="customize-password" type="password" minlength="8" required data-clear-field-text="Vaporize this text" data-show-password-text="Reveal this password" data-hide-password-text="omg no hide it again!">
150
+ <p data-invalid-text>Password should be at least 8 characters long.</p>
151
+ </dd>
152
+ </div>
148
153
 
149
- <div>
150
- <dt><label for="max-content-select"><code>data-max-content</code> select</label></dt>
151
- <dd>
152
- <select name="max-content-select" id="max-content-select" data-max-content>
153
- <option>Short</option>
154
- <option>Some really really really really really really really really long text</option>
155
- <option>This is some medium text</option>
156
- </select>
157
- </dd>
158
- </div>
159
- </dl>
154
+ <div>
155
+ <dt><label for="input-button-1">Input with button</label></dt>
156
+ <dd>
157
+ <input type="text" id="input-button-1" name="input-button-1" placeholder="Has a button">
158
+ <button type="button">Go</button>
159
+ </dd>
160
+ </div>
161
+ </dl>
162
+ </fieldset>
163
+
164
+ <fieldset id="single_field">
165
+ <legend>Single field form</legend>
166
+ <dl>
167
+ <div>
168
+ <dt><label for="single-input">Single form input</label></dt>
169
+ <dd><input type="text" name="single-input" id="single-input"></dd>
170
+ </div>
171
+ </dl>
172
+ </fieldset>
173
+
174
+ <fieldset id="content_sized">
175
+ <legend>Content sized fields</legend>
176
+ <dl class="colspan-1">
177
+ <div>
178
+ <dt><label for="max-content-input"><code>data-max-content</code> text input</label></dt>
179
+ <dd><input type="text" name="max-content-input" id="max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
180
+ </div>
181
+
182
+ <div>
183
+ <dt><label for="max-content-select"><code>data-max-content</code> select</label></dt>
184
+ <dd>
185
+ <select name="max-content-select" id="max-content-select" data-max-content>
186
+ <option>Short</option>
187
+ <option>Some really really really really really really really really long text</option>
188
+ <option>This is some medium text</option>
189
+ </select>
190
+ </dd>
191
+ </div>
192
+ </dl>
193
+ </fieldset>
160
194
 
161
195
  <fieldset id="inputs" class="colspan-full">
162
196
  <legend>Inputs</legend>
@@ -205,7 +239,7 @@
205
239
  </div>
206
240
 
207
241
  <div>
208
- <dt><label for="label-required-help-icon" data-show-help-icon>Required input with help icon</label></dt>
242
+ <dt><label for="label-required-help-icon" data-show-help-icon>Required with help icon</label></dt>
209
243
  <dd><input id="label-required-help-icon" name="label-required-help-icon" type="text" title="Some more help text." placeholder="Hover over the icon" required></dd>
210
244
  </div>
211
245
 
@@ -282,7 +316,7 @@
282
316
  <div>
283
317
  <dt><label for="input-button-2">Input with button</label></dt>
284
318
  <dd>
285
- <input type="text" id="input-button-2" name="input-button-2" placeholder="This input has a button" value="John Doe">
319
+ <input type="text" id="input-button-2" name="input-button-2" placeholder="Has a button" value="John Doe">
286
320
  <label for="input-button-2">Some help text that should span the entire width of the input/button combo.</label>
287
321
  <input type="submit" value="Submit">
288
322
  </dd>
@@ -295,7 +329,17 @@
295
329
 
296
330
  <div>
297
331
  <dt><label for="rangeValue">Range value</label></dt>
298
- <dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
332
+ <dd><input id="rangeValue" name="rangeValue" type="range" data-display-value></dd>
333
+ </div>
334
+
335
+ <div>
336
+ <dt><label for="readonly-field">Readonly field</label></dt>
337
+ <dd><input id="readonly-field" name="readonly-field" type="text" value="This field is readonly" readonly></dd>
338
+ </div>
339
+
340
+ <div>
341
+ <dt><label for="readonly-textarea">Readonly textarea</label></dt>
342
+ <dd><textarea id="readonly-textarea" name="readonly-textarea" readonly>This textarea is readonly</textarea></dd>
299
343
  </div>
300
344
  </dl>
301
345
  </fieldset>
@@ -376,6 +420,74 @@
376
420
  </dl>
377
421
  </fieldset>
378
422
 
423
+ <fieldset id="other">
424
+ <legend>Other inputs</legend>
425
+ <dl>
426
+ <div>
427
+ <dt><label for="textarea">Textarea</label></dt>
428
+ <dd><textarea id="textarea" name="textarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
429
+ </div>
430
+
431
+ <div>
432
+ <dt><label for="prefilledtextarea">Textarea (prefilled)</label></dt>
433
+ <dd>
434
+ <textarea id="prefilledtextarea" name="prefilledtextarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
435
+ <label for="prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
436
+ </dd>
437
+ </div>
438
+
439
+ <div>
440
+ <dt><label for="textarea-max-rows">Textarea</label></dt>
441
+ <dd>
442
+ <textarea id="textarea-max-rows" name="textarea-max-rows" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-max-rows="3">Row 1&#10;Row 2&#10;Row 3&#10;Row 4</textarea>
443
+ <label for="textarea-max-rows">This <code>textarea</code> has the <code>data-max-rows</code> set to 3, so the textarea will not expand past 3 rows.</label>
444
+ </dd>
445
+ </div>
446
+
447
+ <div>
448
+ <dt><label for="disable-autosize-textarea">Disabled autosize textarea</label></dt>
449
+ <dd>
450
+ <textarea name="disable-autosize-textarea" id="disable-autosize-textarea" rows="5" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-disable-autosize>Row 1&#10;Row 2&#10;Row 3&#10;Row 4&#10;Row 5&#10;Row 6</textarea>
451
+ <label for="disable-autosize-textarea">This <code>textarea</code> element has the <code>data-disable-autosize</code> attribute applied, and has <code>rows</code> set to 5.</label>
452
+ </dd>
453
+ </div>
454
+
455
+ <div>
456
+ <dt><label for="auto-grow-textarea">Auto-grow textarea</label></dt>
457
+ <dd><textarea name="auto-grow-textarea" id="auto-grow-textarea" data-auto-grow>Start typing to see me grow</textarea></dd>
458
+ </div>
459
+
460
+ <div>
461
+ <dt><label for="auto-grow-input">Auto-grow input</label></dt>
462
+ <dd><input type="text" name="auto-grow-input" id="auto-grow-input" value="Start typing to see me grow" data-auto-grow></dd>
463
+ </div>
464
+ </dl>
465
+ </fieldset>
466
+
467
+ <fieldset id="p_tag_elements">
468
+ <legend>P tag elements</legend>
469
+ <p>
470
+ <input type="checkbox" name="p-tag-checkbox" id="p-tag-checkbox">
471
+ <label for="p-tag-checkbox">Checkbox</label>
472
+ </p>
473
+ <p>
474
+ <label for="p-tag-input">Text input</label>
475
+ <input type="text" name="p-tag-input" id="p-tag-input">
476
+ </p>
477
+ <p>
478
+ <label for="p-tag-textarea">Textarea</label>
479
+ <textarea name="p-tag-textarea" id="p-tag-textarea"></textarea>
480
+ </p>
481
+ <p>
482
+ <button type="button" name="p-tag-button" id="p-tag-button">Button</button>
483
+ </p>
484
+ <p>
485
+ Some regular text with <strong>other elements</strong> <span>inside of it</span>
486
+ </p>
487
+ </fieldset>
488
+
489
+ <h3 id="cat_choices">Checkboxes, radios and switches</h3>
490
+
379
491
  <fieldset id="checkboxes">
380
492
  <legend>Checkboxes</legend>
381
493
  <dl>
@@ -462,6 +574,21 @@
462
574
  <label for="additional-text-checkbox">This is some additional text.</label>
463
575
  </dd>
464
576
  </div>
577
+
578
+ <div>
579
+ <dt><label for="switch">Switch</label></dt>
580
+ <dd><input type="checkbox" switch name="switch-field" id="switch"></dd>
581
+ </div>
582
+
583
+ <div>
584
+ <dt><label for="switch-checked">Switch (on by default)</label></dt>
585
+ <dd><input type="checkbox" switch name="switch-checked-field" id="switch-checked" checked></dd>
586
+ </div>
587
+
588
+ <div>
589
+ <dt><label for="switch-disabled">Switch (disabled)</label></dt>
590
+ <dd><input type="checkbox" switch name="switch-disabled-field" id="switch-disabled" disabled></dd>
591
+ </div>
465
592
  </dl>
466
593
  </fieldset>
467
594
 
@@ -542,50 +669,48 @@
542
669
  </dl>
543
670
  </fieldset>
544
671
 
545
- <fieldset id="other">
546
- <legend>Other inputs</legend>
547
- <dl>
548
- <div>
549
- <dt><label for="textarea">Textarea</label></dt>
550
- <dd><textarea id="textarea" name="textarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
551
- </div>
552
-
553
- <div>
554
- <dt><label for="prefilledtextarea">Textarea (prefilled)</label></dt>
555
- <dd>
556
- <textarea id="prefilledtextarea" name="prefilledtextarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
557
- <label for="prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
558
- </dd>
559
- </div>
672
+ <h3 id="cat_buttons">Buttons</h3>
560
673
 
674
+ <fieldset id="buttons">
675
+ <legend>Buttons</legend>
676
+ <dl>
561
677
  <div>
562
- <dt><label for="textarea-max-rows">Textarea</label></dt>
563
- <dd>
564
- <textarea id="textarea-max-rows" name="textarea-max-rows" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-max-rows="3">Row 1&#10;Row 2&#10;Row 3&#10;Row 4</textarea>
565
- <label for="textarea-max-rows">This <code>textarea</code> has the <code>data-max-rows</code> set to 3, so the textarea will not expand past 3 rows.</label>
566
- </dd>
678
+ <dt><label for="button-input1">Standard button</label></dt>
679
+ <dd><button id="button-input1">Standard button</button></dd>
567
680
  </div>
568
681
 
569
682
  <div>
570
- <dt><label for="disable-autosize-textarea">Disabled autosize textarea</label></dt>
571
- <dd>
572
- <textarea name="disable-autosize-textarea" id="disable-autosize-textarea" rows="5" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-disable-autosize>Row 1&#10;Row 2&#10;Row 3&#10;Row 4&#10;Row 5&#10;Row 6</textarea>
573
- <label for="disable-autosize-textarea">This <code>textarea</code> element has the <code>data-disable-autosize</code> attribute applied, and has <code>rows</code> set to 5.</label>
574
- </dd>
683
+ <dt><label for="button-input2">Input button</label></dt>
684
+ <dd><input type="button" id="button-input2" value="Input button"></dd>
575
685
  </div>
576
-
577
686
  <div>
578
- <dt><label for="auto-grow-textarea">Auto-grow textarea</label></dt>
579
- <dd><textarea name="auto-grow-textarea" id="auto-grow-textarea" data-auto-grow>Start typing to see me grow</textarea></dd>
687
+ <dt><label for="button-input3">Submit input</label></dt>
688
+ <dd><input type="submit" id="button-input3" value="Submit input"></dd>
580
689
  </div>
581
-
582
690
  <div>
583
- <dt><label for="auto-grow-input">Auto-grow input</label></dt>
584
- <dd><input type="text" name="auto-grow-input" id="auto-grow-input" value="Start typing to see me grow" data-auto-grow></dd>
691
+ <dt><label for="button-input4">Reset input</label></dt>
692
+ <dd><input type="reset" id="button-input4" value="Reset input"></dd>
585
693
  </div>
586
694
  </dl>
695
+ <input type="button" name="button1" value="Non-grouped button">
696
+ <input type="submit" name="button2" value="Non-grouped submit button">
697
+ <input type="reset" name="button3" value="Non-grouped reset button">
698
+ <a href="/" class="button-link">Button link</a>
699
+ <p>Flexbox button layout pattern with two submit buttons:</p>
700
+ <menu>
701
+ <li><button type="submit" name="button1">Button 1</button></li>
702
+ <li><input type="image" title="an image input element" name="image" alt="Button 2" width="100" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png"></li>
703
+ </menu>
704
+ <p>Flexbox button layout pattern with three submit buttons:</p>
705
+ <menu>
706
+ <li><button type="submit" name="button1">Button 1</button></li>
707
+ <li><button type="reset" name="button2">Button 2</button></li>
708
+ <li><input type="submit" name="button3" value="Button 3"></li>
709
+ </menu>
587
710
  </fieldset>
588
711
 
712
+ <h3 id="cat_layout">Layout</h3>
713
+
589
714
  <fieldset id="alignment_classes">
590
715
  <legend>Alignment classes</legend>
591
716
  <dl class="colspan-3">
@@ -618,71 +743,201 @@
618
743
  </dl>
619
744
  </fieldset>
620
745
 
621
- <fieldset id="keyboard_shortcuts">
622
- <legend>Keyboard shortcuts</legend>
746
+ <fieldset id="colspan_classes">
747
+ <legend>Colspan classes</legend>
623
748
  <dl>
624
- <div>
625
- <dt><label for="custom-focus-input">Default Input focus</label></dt>
626
- <dd><input type="text" name="custom-focus-input" id="custom-focus-input" data-focus-key="P"></dd>
749
+ <div class="colspan-1">
750
+ <dt><label for="colspan-1a">colspan-1</label></dt>
751
+ <dd><input type="text" name="colspan-1a" id="colspan-1a"></dd>
627
752
  </div>
628
-
629
- <div>
630
- <dt><label for="custom-focus-ctrl-input">Ctrl Input focus</label></dt>
631
- <dd><input type="text" name="custom-focus-ctrl-input" id="custom-focus-ctrl-input" data-focus-modifier="ctrl" data-focus-key="P"></dd>
753
+ <div class="colspan-1">
754
+ <dt><label for="colspan-1b">colspan-1</label></dt>
755
+ <dd><input type="text" name="colspan-1b" id="colspan-1b"></dd>
632
756
  </div>
633
-
634
- <div>
635
- <dt><label for="custom-focus-alt-input">Alt Input focus</label></dt>
636
- <dd><input type="text" name="custom-focus-alt-input" id="custom-focus-alt-input" data-focus-modifier="alt" data-focus-key="P"></dd>
757
+ <div class="colspan-2">
758
+ <dt><label for="colspan-2">colspan-2</label></dt>
759
+ <dd><input type="text" name="colspan-2" id="colspan-2"></dd>
637
760
  </div>
638
-
639
- <div>
640
- <dt><label for="custom-focus-meta-input">Meta Input focus</label></dt>
641
- <dd><input type="text" name="custom-focus-meta-input" id="custom-focus-meta-input" data-focus-modifier="meta" data-focus-key="Y"></dd>
761
+ <div class="colspan-4">
762
+ <dt><label for="colspan-4">colspan-4</label></dt>
763
+ <dd><input type="text" name="colspan-4" id="colspan-4"></dd>
642
764
  </div>
643
-
644
- <div>
645
- <dt><label for="custom-focus-number">Number focus</label></dt>
646
- <dd><input type="number" name="custom-focus-number" id="custom-focus-number" data-focus-key="L"></dd>
765
+ <div class="colspan-3">
766
+ <dt><label for="colspan-3">colspan-3</label></dt>
767
+ <dd><input type="text" name="colspan-3" id="colspan-3"></dd>
647
768
  </div>
648
-
649
- <div>
650
- <dt><label for="custom-focus-textarea">Textarea focus</label></dt>
651
- <dd>
652
- <textarea name="custom-focus-textarea" id="custom-focus-textarea" data-focus-key="!"></textarea>
653
- <label for="custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
654
- </dd>
769
+ <div class="colspan-1">
770
+ <dt><label for="colspan-1c">colspan-1</label></dt>
771
+ <dd><input type="text" name="colspan-1c" id="colspan-1c"></dd>
655
772
  </div>
656
-
657
- <div>
658
- <dt><label for="custom-focus-date">Date focus</label></dt>
659
- <dd>
660
- <input type="date" name="custom-focus-date" id="custom-focus-date" data-focus-key="D">
661
- <label for="custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
662
- </dd>
773
+ <div class="colspan-full">
774
+ <dt><label for="colspan-full">colspan-full</label></dt>
775
+ <dd><input type="text" name="colspan-full" id="colspan-full"></dd>
663
776
  </div>
664
-
665
- <div>
666
- <dt><label for="custom-focus-color">Color focus</label></dt>
667
- <dd><input type="color" name="custom-focus-color" id="custom-focus-color" title="This input has a keyboard shortcut!" data-focus-key="$" data-focus-modifier-mac="alt"></dd>
777
+ <div class="colspan-5">
778
+ <dt><label for="colspan-5">colspan-5</label></dt>
779
+ <dd><input type="text" name="colspan-5" id="colspan-5"></dd>
668
780
  </div>
781
+ </dl>
782
+ <fieldset class="colspan-1">
783
+ <legend>colspan-1</legend>
784
+ <dl>
785
+ <div>
786
+ <dt><label for="colspan-1-a">Input A</label></dt>
787
+ <dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
788
+ </div>
789
+ <div>
790
+ <dt><label for="colspan-1-b">Input B</label></dt>
791
+ <dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
792
+ </div>
793
+ <div>
794
+ <dt><label for="colspan-1-c">Input C</label></dt>
795
+ <dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
796
+ </div>
797
+ <div>
798
+ <dt><label for="colspan-1-d">Input D</label></dt>
799
+ <dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
800
+ </div>
801
+ </dl>
802
+ </fieldset>
669
803
 
670
- <div>
671
- <dt><label for="custom-focus-range">Range focus</label></dt>
672
- <dd><input type="range" name="custom-focus-range" id="custom-focus-range" data-focus-key="U"></dd>
673
- </div>
674
804
 
675
- <div>
676
- <dt><label for="custom-focus-select">Select focus</label></dt>
677
- <dd><select name="custom-focus-select" id="custom-focus-select" data-focus-key="K">
678
- <option value="1">Value 1</option>
679
- <option value="2">Value 2</option>
680
- <option value="3">Value 3</option>
681
- </select></dd>
805
+
806
+ <fieldset class="colspan-2">
807
+ <legend>colspan-2</legend>
808
+ <dl>
809
+ <div>
810
+ <dt><label for="colspan-2-a">Input A</label></dt>
811
+ <dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
812
+ </div>
813
+ <div>
814
+ <dt><label for="colspan-2-b">Input B</label></dt>
815
+ <dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
816
+ </div>
817
+ <div>
818
+ <dt><label for="colspan-2-c">Input C</label></dt>
819
+ <dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
820
+ </div>
821
+ <div>
822
+ <dt><label for="colspan-2-d">Input D</label></dt>
823
+ <dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
824
+ </div>
825
+ </dl>
826
+ </fieldset>
827
+ <fieldset>
828
+ <legend>colspan-3</legend>
829
+ <dl class="colspan-3">
830
+ <div>
831
+ <dt><label for="colspan-3-a">Input A</label></dt>
832
+ <dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
833
+ </div>
834
+ <div>
835
+ <dt><label for="colspan-3-b">Input B</label></dt>
836
+ <dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
837
+ </div>
838
+ <div>
839
+ <dt><label for="colspan-3-c">Input C</label></dt>
840
+ <dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
841
+ </div>
842
+ <div>
843
+ <dt><label for="colspan-3-d">Input D</label></dt>
844
+ <dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
845
+ </div>
846
+ </dl>
847
+ </fieldset>
848
+ <fieldset class="colspan-full">
849
+ <legend>colspan-full</legend>
850
+ <dl>
851
+ <div>
852
+ <dt><label for="colspan-full-a">Input A</label></dt>
853
+ <dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
854
+ </div>
855
+ <div>
856
+ <dt><label for="colspan-full-b">Input B</label></dt>
857
+ <dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
858
+ </div>
859
+ <div>
860
+ <dt><label for="colspan-full-c">Input C</label></dt>
861
+ <dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
862
+ </div>
863
+ <div>
864
+ <dt><label for="colspan-full-d">Input D</label></dt>
865
+ <dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
866
+ </div>
867
+ </dl>
868
+ </fieldset>
869
+ </fieldset>
870
+
871
+ <fieldset id="col_classes">
872
+ <legend>Col classes</legend>
873
+ <dl class="colspan-3">
874
+ <div class="col-3">
875
+ <dt><label for="col-3">col-3</label></dt>
876
+ <dd><input type="text" name="col-3" id="col-3"></dd>
877
+ </div>
878
+ <div class="col-1">
879
+ <dt><label for="col-1">col-1</label></dt>
880
+ <dd><input type="text" name="col-1" id="col-1"></dd>
881
+ </div>
882
+ <div class="col-2 colspan-2">
883
+ <dt><label for="col-2-colspan-2">col-2 colspan-2</label></dt>
884
+ <dd><input type="text" name="col-2-colspan-2" id="col-2-colspan-2"></dd>
682
885
  </div>
683
886
  </dl>
684
887
  </fieldset>
685
888
 
889
+ <h4 id="tabs">Tabs</h4>
890
+
891
+ <div class="tabs" id="tab_group">
892
+ <fieldset>
893
+ <legend>Account</legend>
894
+ <dl>
895
+ <div>
896
+ <dt><label for="tab-username">Username</label></dt>
897
+ <dd><input type="text" name="tab-username" id="tab-username"></dd>
898
+ </div>
899
+ <div>
900
+ <dt><label for="tab-email">Email</label></dt>
901
+ <dd><input type="email" name="tab-email" id="tab-email"></dd>
902
+ </div>
903
+ </dl>
904
+ </fieldset>
905
+
906
+ <fieldset>
907
+ <legend>Profile</legend>
908
+ <dl>
909
+ <div>
910
+ <dt><label for="tab-display-name">Display name</label></dt>
911
+ <dd><input type="text" name="tab-display-name" id="tab-display-name"></dd>
912
+ </div>
913
+ <div>
914
+ <dt><label for="tab-bio">Bio</label></dt>
915
+ <dd><textarea name="tab-bio" id="tab-bio"></textarea></dd>
916
+ </div>
917
+ </dl>
918
+ </fieldset>
919
+
920
+ <fieldset>
921
+ <legend>Preferences</legend>
922
+ <dl>
923
+ <div>
924
+ <dt><label for="tab-newsletter">Newsletter</label></dt>
925
+ <dd><input type="checkbox" switch name="tab-newsletter" id="tab-newsletter"></dd>
926
+ </div>
927
+ <div>
928
+ <dt><label for="tab-theme">Theme</label></dt>
929
+ <dd>
930
+ <select name="tab-theme" id="tab-theme">
931
+ <option>System</option>
932
+ <option>Light</option>
933
+ <option>Dark</option>
934
+ </select>
935
+ </dd>
936
+ </div>
937
+ </dl>
938
+ </fieldset>
939
+ </div>
940
+
686
941
  <fieldset id="tables">
687
942
  <legend>Tables</legend>
688
943
  <h4>Table with inputs and buttons</h4>
@@ -943,7 +1198,7 @@
943
1198
  </details>
944
1199
 
945
1200
  <details>
946
- <summary>Another detail element with a nested fieldset</summary>
1201
+ <summary>Another detail element with a nested fieldset and details element</summary>
947
1202
  <dl>
948
1203
  <div>
949
1204
  <dt><label for="another-detail-input-1">Detail input</label></dt>
@@ -961,382 +1216,186 @@
961
1216
  </div>
962
1217
  </dl>
963
1218
  </fieldset>
1219
+
1220
+ <details>
1221
+ <summary>Some details</summary>
1222
+ <dl>
1223
+ <div>
1224
+ <dt><label for="another-detail-input-3">Nested detail input</label></dt>
1225
+ <dd><input type="text" name="another-detail-input-3" id="another-detail-input-3"></dd>
1226
+ </div>
1227
+ </dl>
1228
+ </details>
964
1229
  </details>
965
1230
  </fieldset>
966
1231
 
967
- <fieldset id="buttons">
968
- <legend>Buttons</legend>
1232
+ <details>
1233
+ <summary>Standalone details</summary>
1234
+
969
1235
  <dl>
970
1236
  <div>
971
- <dt><label for="button-input1">Standard button</label></dt>
972
- <dd><button id="button-input1">Standard button</button></dd>
1237
+ <dt><label for="another-detail-input-4">Nested detail input 2</label></dt>
1238
+ <dd><input type="text" name="another-detail-input-4" id="another-detail-input-4"></dd>
973
1239
  </div>
1240
+ </dl>
1241
+ </details>
1242
+
1243
+ <h3 id="cat_shortcuts">Keyboard shortcuts</h3>
974
1244
 
1245
+ <fieldset id="keyboard_shortcuts">
1246
+ <legend>Keyboard shortcuts</legend>
1247
+ <dl>
975
1248
  <div>
976
- <dt><label for="button-input2">Input button</label></dt>
977
- <dd><input type="button" id="button-input2" value="Input button"></dd>
1249
+ <dt><label for="custom-focus-input">Default Input focus</label></dt>
1250
+ <dd><input type="text" name="custom-focus-input" id="custom-focus-input" data-focus-key="P"></dd>
978
1251
  </div>
1252
+
979
1253
  <div>
980
- <dt><label for="button-input3">Submit input</label></dt>
981
- <dd><input type="submit" id="button-input3" value="Submit input"></dd>
1254
+ <dt><label for="custom-focus-ctrl-input">Ctrl Input focus</label></dt>
1255
+ <dd><input type="text" name="custom-focus-ctrl-input" id="custom-focus-ctrl-input" data-focus-modifier="ctrl" data-focus-key="P"></dd>
982
1256
  </div>
1257
+
983
1258
  <div>
984
- <dt><label for="button-input4">Reset input</label></dt>
985
- <dd><input type="reset" id="button-input4" value="Reset input"></dd>
1259
+ <dt><label for="custom-focus-alt-input">Alt Input focus</label></dt>
1260
+ <dd><input type="text" name="custom-focus-alt-input" id="custom-focus-alt-input" data-focus-modifier="alt" data-focus-key="P"></dd>
986
1261
  </div>
987
- </dl>
988
- <input type="button" name="button1" value="Non-grouped button">
989
- <input type="submit" name="button2" value="Non-grouped submit button">
990
- <input type="reset" name="button3" value="Non-grouped reset button">
991
- <a href="/" class="button-link">Button link</a>
992
- <p>Flexbox button layout pattern with two submit buttons:</p>
993
- <menu>
994
- <li><button type="submit" name="button1">Button 1</button></li>
995
- <li><input type="image" title="an image input element" name="image" alt="Button 2" width="100" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png"></li>
996
- </menu>
997
- <p>Flexbox button layout pattern with three submit buttons:</p>
998
- <menu>
999
- <li><button type="submit" name="button1">Button 1</button></li>
1000
- <li><button type="reset" name="button2">Button 2</button></li>
1001
- <li><input type="submit" name="button3" value="Button 3"></li>
1002
- </menu>
1003
- </fieldset>
1004
1262
 
1005
- <fieldset id="colspan_classes">
1006
- <legend>Colspan classes</legend>
1007
- <dl>
1008
- <div class="colspan-1">
1009
- <dt><label for="colspan-1a">colspan-1</label></dt>
1010
- <dd><input type="text" name="colspan-1a" id="colspan-1a"></dd>
1263
+ <div>
1264
+ <dt><label for="custom-focus-meta-input">Meta Input focus</label></dt>
1265
+ <dd><input type="text" name="custom-focus-meta-input" id="custom-focus-meta-input" data-focus-modifier="meta" data-focus-key="Y"></dd>
1011
1266
  </div>
1012
- <div class="colspan-1">
1013
- <dt><label for="colspan-1b">colspan-1</label></dt>
1014
- <dd><input type="text" name="colspan-1b" id="colspan-1b"></dd>
1267
+
1268
+ <div>
1269
+ <dt><label for="custom-focus-number">Number focus</label></dt>
1270
+ <dd><input type="number" name="custom-focus-number" id="custom-focus-number" data-focus-key="L"></dd>
1015
1271
  </div>
1016
- <div class="colspan-2">
1017
- <dt><label for="colspan-2">colspan-2</label></dt>
1018
- <dd><input type="text" name="colspan-2" id="colspan-2"></dd>
1272
+
1273
+ <div>
1274
+ <dt><label for="custom-focus-textarea">Textarea focus</label></dt>
1275
+ <dd>
1276
+ <textarea name="custom-focus-textarea" id="custom-focus-textarea" data-focus-key="!"></textarea>
1277
+ <label for="custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
1278
+ </dd>
1019
1279
  </div>
1020
- <div class="colspan-4">
1021
- <dt><label for="colspan-4">colspan-4</label></dt>
1022
- <dd><input type="text" name="colspan-4" id="colspan-4"></dd>
1280
+
1281
+ <div>
1282
+ <dt><label for="custom-focus-date">Date focus</label></dt>
1283
+ <dd>
1284
+ <input type="date" name="custom-focus-date" id="custom-focus-date" data-focus-key="D">
1285
+ <label for="custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
1286
+ </dd>
1023
1287
  </div>
1024
- <div class="colspan-3">
1025
- <dt><label for="colspan-3">colspan-3</label></dt>
1026
- <dd><input type="text" name="colspan-3" id="colspan-3"></dd>
1288
+
1289
+ <div>
1290
+ <dt><label for="custom-focus-color">Color focus</label></dt>
1291
+ <dd><input type="color" name="custom-focus-color" id="custom-focus-color" title="This input has a keyboard shortcut!" data-focus-key="$" data-focus-modifier-mac="alt"></dd>
1027
1292
  </div>
1028
- <div class="colspan-1">
1029
- <dt><label for="colspan-1c">colspan-1</label></dt>
1030
- <dd><input type="text" name="colspan-1c" id="colspan-1c"></dd>
1293
+
1294
+ <div>
1295
+ <dt><label for="custom-focus-range">Range focus</label></dt>
1296
+ <dd><input type="range" name="custom-focus-range" id="custom-focus-range" data-focus-key="U"></dd>
1031
1297
  </div>
1032
- <div class="colspan-full">
1033
- <dt><label for="colspan-full">colspan-full</label></dt>
1034
- <dd><input type="text" name="colspan-full" id="colspan-full"></dd>
1035
- </div>
1036
- <div class="colspan-5">
1037
- <dt><label for="colspan-5">colspan-5</label></dt>
1038
- <dd><input type="text" name="colspan-5" id="colspan-5"></dd>
1298
+
1299
+ <div>
1300
+ <dt><label for="custom-focus-select">Select focus</label></dt>
1301
+ <dd><select name="custom-focus-select" id="custom-focus-select" data-focus-key="K">
1302
+ <option value="1">Value 1</option>
1303
+ <option value="2">Value 2</option>
1304
+ <option value="3">Value 3</option>
1305
+ </select></dd>
1039
1306
  </div>
1040
1307
  </dl>
1041
- <fieldset class="colspan-1">
1042
- <legend>colspan-1</legend>
1043
- <dl>
1044
- <div>
1045
- <dt><label for="colspan-1-a">Input A</label></dt>
1046
- <dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
1047
- </div>
1048
- <div>
1049
- <dt><label for="colspan-1-b">Input B</label></dt>
1050
- <dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
1051
- </div>
1052
- <div>
1053
- <dt><label for="colspan-1-c">Input C</label></dt>
1054
- <dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
1055
- </div>
1056
- <div>
1057
- <dt><label for="colspan-1-d">Input D</label></dt>
1058
- <dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
1059
- </div>
1060
- </dl>
1061
- </fieldset>
1062
- <fieldset class="colspan-2">
1063
- <legend>colspan-2</legend>
1064
- <dl>
1065
- <div>
1066
- <dt><label for="colspan-2-a">Input A</label></dt>
1067
- <dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
1068
- </div>
1069
- <div>
1070
- <dt><label for="colspan-2-b">Input B</label></dt>
1071
- <dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
1072
- </div>
1073
- <div>
1074
- <dt><label for="colspan-2-c">Input C</label></dt>
1075
- <dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
1076
- </div>
1077
- <div>
1078
- <dt><label for="colspan-2-d">Input D</label></dt>
1079
- <dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
1080
- </div>
1081
- </dl>
1082
- </fieldset>
1083
- <fieldset>
1084
- <legend>colspan-3</legend>
1085
- <dl class="colspan-3">
1086
- <div>
1087
- <dt><label for="colspan-3-a">Input A</label></dt>
1088
- <dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
1089
- </div>
1090
- <div>
1091
- <dt><label for="colspan-3-b">Input B</label></dt>
1092
- <dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
1093
- </div>
1094
- <div>
1095
- <dt><label for="colspan-3-c">Input C</label></dt>
1096
- <dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
1097
- </div>
1098
- <div>
1099
- <dt><label for="colspan-3-d">Input D</label></dt>
1100
- <dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
1101
- </div>
1102
- </dl>
1103
- </fieldset>
1104
- <fieldset class="colspan-full">
1105
- <legend>colspan-full</legend>
1106
- <dl>
1107
- <div>
1108
- <dt><label for="colspan-full-a">Input A</label></dt>
1109
- <dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
1110
- </div>
1111
- <div>
1112
- <dt><label for="colspan-full-b">Input B</label></dt>
1113
- <dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
1114
- </div>
1115
- <div>
1116
- <dt><label for="colspan-full-c">Input C</label></dt>
1117
- <dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
1118
- </div>
1119
- <div>
1120
- <dt><label for="colspan-full-d">Input D</label></dt>
1121
- <dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
1122
- </div>
1123
- </dl>
1124
- </fieldset>
1125
1308
  </fieldset>
1126
1309
 
1127
- <fieldset id="p_tag_elements">
1128
- <legend>P tag elements</legend>
1129
- <p>
1130
- <input type="checkbox" name="p-tag-checkbox" id="p-tag-checkbox">
1131
- <label for="p-tag-checkbox">Checkbox</label>
1132
- </p>
1133
- <p>
1134
- <label for="p-tag-input">Text input</label>
1135
- <input type="text" name="p-tag-input" id="p-tag-input">
1136
- </p>
1137
- <p>
1138
- <label for="p-tag-textarea">Textarea</label>
1139
- <textarea name="p-tag-textarea" id="p-tag-textarea"></textarea>
1140
- </p>
1141
- <p>
1142
- <button type="button" name="p-tag-button" id="p-tag-button">Button</button>
1143
- </p>
1144
- <p>
1145
- Some regular text with <strong>other elements</strong> <span>inside of it</span>
1146
- </p>
1147
- </fieldset>
1148
1310
  </form>
1149
1311
 
1150
1312
  <hr>
1151
1313
 
1152
- <h2 id="semantic_table">Semantic form tables</h2>
1314
+ <form action="/somewhere" method="post" class="semanticForms lowFlow" id="low_flow">
1315
+ <h3 id="low-flow-cat_inputs">Inputs</h3>
1153
1316
 
1154
- <section>
1155
- <h3 id="table_semantic_form_class">Table with <code>semanticForms</code> class</h3>
1156
- <table class="semanticForms">
1157
- <thead>
1158
- <tr class="title">
1159
- <th colspan="3">Table Title</th>
1160
- </tr>
1161
- <tr>
1162
- <th>Column 1</th>
1163
- <th>Column 2</th>
1164
- <th>Column 3</th>
1165
- </tr>
1166
- </thead>
1167
- <tbody>
1168
- <tr>
1169
- <td>1</td>
1170
- <td>
1171
- <input type="text" name="table-text-1C" id="table-text-1C" placeholder="A text input in a table">
1172
- </td>
1173
- <td>
1174
- <menu>
1175
- <li><button type="button">Button 1</button></li>
1176
- <li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
1177
- </menu>
1178
- </td>
1179
- </tr>
1180
- <tr>
1181
- <td>2</td>
1182
- <td>
1183
- <input type="text" name="table-text-2C" id="table-text-2C" placeholder="A text input in a table">
1184
- </td>
1185
- <td>
1186
- <menu>
1187
- <li><button type="button">Button 2</button></li>
1188
- <li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
1189
- </menu>
1190
- </td>
1191
- </tr>
1192
- <tr>
1193
- <td>3</td>
1194
- <td>
1195
- <input type="text" name="table-text-3C" id="table-text-3C" placeholder="A text input in a table">
1196
- </td>
1197
- <td>
1198
- <menu>
1199
- <li><button type="button">Button 3</button></li>
1200
- <li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
1201
- </menu>
1202
- </td>
1203
- </tr>
1204
- </tbody>
1205
- </table>
1206
- <h3 id="table_form_in_cell">Table with a <code>form</code> in a cell</h3>
1207
- <table class="semanticForms">
1208
- <thead>
1209
- <tr class="title">
1210
- <th colspan="2">Table Title</th>
1211
- </tr>
1212
- <tr>
1213
- <th>Column 1</th>
1214
- <th>Column 2</th>
1215
- </tr>
1216
- </thead>
1217
- <tbody>
1218
- <tr>
1219
- <td>Some text</td>
1220
- <td>
1221
- <form action="/somewhere" class="semanticForms">
1222
- <menu>
1223
- <li><button type="submit">Submit button</button></li>
1224
- </menu>
1225
- </form>
1226
- </td>
1227
- </tr>
1228
- </tbody>
1229
- </table>
1230
- <h3 id="table_unstyled">Unstyled table</h3>
1231
- <table>
1232
- <thead>
1233
- <tr class="title">
1234
- <th colspan="3">Table Title</th>
1235
- </tr>
1236
- <tr>
1237
- <th>Column 1</th>
1238
- <th>Column 2</th>
1239
- <th>Column 3</th>
1240
- </tr>
1241
- </thead>
1242
- <tbody>
1243
- <tr>
1244
- <td>1</td>
1245
- <td>A</td>
1246
- <td>a</td>
1247
- </tr>
1248
- <tr>
1249
- <td>2</td>
1250
- <td>B</td>
1251
- <td>b</td>
1252
- </tr>
1253
- <tr>
1254
- <td>3</td>
1255
- <td>C</td>
1256
- <td>c</td>
1257
- </tr>
1258
- </tbody>
1259
- </table>
1260
- </section>
1261
-
1262
- <hr>
1263
-
1264
- <h2 id="low_flow_styling">Low flow (JavaScript disabled) styling</h2>
1265
- <p>Adding the <code>lowFlow</code> class to the form element removes all JS enhancements.</p>
1266
- <form action="/somewhere" method="post" class="semanticForms lowFlow">
1267
- <dl>
1268
- <div>
1269
- <dt><label for="low-flow-name">Name</label></dt>
1270
- <dd><input id="low-flow-name" name="low-flow-name" type="text" placeholder="e.g. John Smith"></dd>
1271
- </div>
1317
+ <fieldset id="low-flow-basic_inputs">
1318
+ <legend>Basic inputs</legend>
1319
+ <dl>
1320
+ <div>
1321
+ <dt><label for="low-flow-name">Name</label></dt>
1322
+ <dd><input id="low-flow-name" name="low-flow-name" type="text" placeholder="e.g. John Smith"></dd>
1323
+ </div>
1272
1324
 
1273
- <div>
1274
- <dt><label for="low-flow-prefilled">Prefilled field</label></dt>
1275
- <dd><input id="low-flow-prefilled" name="low-flow-prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
1276
- </div>
1325
+ <div>
1326
+ <dt><label for="low-flow-prefilled">Prefilled field</label></dt>
1327
+ <dd><input id="low-flow-prefilled" name="low-flow-prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
1328
+ </div>
1277
1329
 
1278
- <div>
1279
- <dt><label for="low-flow-noplaceholder">No placeholder</label></dt>
1280
- <dd><input id="low-flow-noplaceholder" name="low-flow-noplaceholder" type="text"></dd>
1281
- </div>
1330
+ <div>
1331
+ <dt><label for="low-flow-noplaceholder">No placeholder</label></dt>
1332
+ <dd><input id="low-flow-noplaceholder" name="low-flow-noplaceholder" type="text"></dd>
1333
+ </div>
1282
1334
 
1283
- <div>
1284
- <dt><label for="low-flow-password">Password field</label></dt>
1285
- <dd>
1286
- <input id="low-flow-password" name="low-flow-password" type="password" minlength="8" required>
1287
- <p data-invalid-text>Password should be at least 8 characters long.</p>
1288
- </dd>
1289
- </div>
1335
+ <div>
1336
+ <dt><label for="low-flow-password">Password field</label></dt>
1337
+ <dd>
1338
+ <input id="low-flow-password" name="low-flow-password" type="password" minlength="8" required>
1339
+ <p data-invalid-text>Password should be at least 8 characters long.</p>
1340
+ </dd>
1341
+ </div>
1290
1342
 
1291
- <div>
1292
- <dt><label for="low-flow-dontshow-password">Don't show password field</label></dt>
1293
- <dd>
1294
- <input id="low-flow-dontshow-password" name="low-flow-dontshow-password" type="password" minlength="8" required data-no-reveal>
1295
- <p data-invalid-text>Password should be at least 8 characters long.</p>
1296
- </dd>
1297
- </div>
1343
+ <div>
1344
+ <dt><label for="low-flow-dontshow-password">Don't show password field</label></dt>
1345
+ <dd>
1346
+ <input id="low-flow-dontshow-password" name="low-flow-dontshow-password" type="password" minlength="8" required data-no-reveal>
1347
+ <p data-invalid-text>Password should be at least 8 characters long.</p>
1348
+ </dd>
1349
+ </div>
1298
1350
 
1299
- <div>
1300
- <dt><label for="low-flow-customize-password">Customize clear/show buttons</label></dt>
1301
- <dd>
1302
- <input id="low-flow-customize-password" name="low-flow-customize-password" type="password" minlength="8" required data-clear-field-text="Vaporize this text" data-show-password-text="Reveal this password" data-hide-password-text="omg no hide it again!">
1303
- <p data-invalid-text>Password should be at least 8 characters long.</p>
1304
- </dd>
1305
- </div>
1351
+ <div>
1352
+ <dt><label for="low-flow-customize-password">Customize buttons</label></dt>
1353
+ <dd>
1354
+ <input id="low-flow-customize-password" name="low-flow-customize-password" type="password" minlength="8" required data-clear-field-text="Vaporize this text" data-show-password-text="Reveal this password" data-hide-password-text="omg no hide it again!">
1355
+ <p data-invalid-text>Password should be at least 8 characters long.</p>
1356
+ </dd>
1357
+ </div>
1306
1358
 
1307
- <div>
1308
- <dt><label for="low-flow-input-button-1">Input with button</label></dt>
1309
- <dd>
1310
- <input type="text" id="low-flow-input-button-1" name="low-flow-input-button-1" placeholder="This input has a button">
1311
- <button type="button">Go</button>
1312
- </dd>
1313
- </div>
1314
- </dl>
1359
+ <div>
1360
+ <dt><label for="low-flow-input-button-1">Input with button</label></dt>
1361
+ <dd>
1362
+ <input type="text" id="low-flow-input-button-1" name="low-flow-input-button-1" placeholder="Has a button">
1363
+ <button type="button">Go</button>
1364
+ </dd>
1365
+ </div>
1366
+ </dl>
1367
+ </fieldset>
1315
1368
 
1316
- <dl>
1317
- <div>
1318
- <dt><label for="low-flow-single-input">Single form input</label></dt>
1319
- <dd><input type="text" name="low-flow-single-input" id="low-flow-single-input"></dd>
1320
- </div>
1321
- </dl>
1369
+ <fieldset id="low-flow-single_field">
1370
+ <legend>Single field form</legend>
1371
+ <dl>
1372
+ <div>
1373
+ <dt><label for="low-flow-single-input">Single form input</label></dt>
1374
+ <dd><input type="text" name="low-flow-single-input" id="low-flow-single-input"></dd>
1375
+ </div>
1376
+ </dl>
1377
+ </fieldset>
1322
1378
 
1323
- <dl class="colspan-1">
1324
- <div>
1325
- <dt><label for="low-flow-max-content-input"><code>data-max-content</code> text input</label></dt>
1326
- <dd><input type="text" name="low-flow-max-content-input" id="low-flow-max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
1327
- </div>
1379
+ <fieldset id="low-flow-content_sized">
1380
+ <legend>Content sized fields</legend>
1381
+ <dl class="colspan-1">
1382
+ <div>
1383
+ <dt><label for="low-flow-max-content-input"><code>data-max-content</code> text input</label></dt>
1384
+ <dd><input type="text" name="low-flow-max-content-input" id="low-flow-max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
1385
+ </div>
1328
1386
 
1329
- <div>
1330
- <dt><label for="low-flow-max-content-select"><code>data-max-content</code> select</label></dt>
1331
- <dd>
1332
- <select name="low-flow-max-content-select" id="low-flow-max-content-select" data-max-content>
1333
- <option>Short</option>
1334
- <option>Some really really really really really really really really long text</option>
1335
- <option>This is some medium text</option>
1336
- </select>
1337
- </dd>
1338
- </div>
1339
- </dl>
1387
+ <div>
1388
+ <dt><label for="low-flow-max-content-select"><code>data-max-content</code> select</label></dt>
1389
+ <dd>
1390
+ <select name="low-flow-max-content-select" id="low-flow-max-content-select" data-max-content>
1391
+ <option>Short</option>
1392
+ <option>Some really really really really really really really really long text</option>
1393
+ <option>This is some medium text</option>
1394
+ </select>
1395
+ </dd>
1396
+ </div>
1397
+ </dl>
1398
+ </fieldset>
1340
1399
 
1341
1400
  <fieldset id="low-flow-inputs" class="colspan-full">
1342
1401
  <legend>Inputs</legend>
@@ -1385,7 +1444,7 @@
1385
1444
  </div>
1386
1445
 
1387
1446
  <div>
1388
- <dt><label for="low-flow-label-required-help-icon" data-show-help-icon>Required input with help icon</label></dt>
1447
+ <dt><label for="low-flow-label-required-help-icon" data-show-help-icon>Required with help icon</label></dt>
1389
1448
  <dd><input id="low-flow-label-required-help-icon" name="low-flow-label-required-help-icon" type="text" title="Some more help text." placeholder="Hover over the icon" required></dd>
1390
1449
  </div>
1391
1450
 
@@ -1462,7 +1521,7 @@
1462
1521
  <div>
1463
1522
  <dt><label for="low-flow-input-button-2">Input with button</label></dt>
1464
1523
  <dd>
1465
- <input type="text" id="low-flow-input-button-2" name="low-flow-input-button-2" placeholder="This input has a button" value="John Doe">
1524
+ <input type="text" id="low-flow-input-button-2" name="low-flow-input-button-2" placeholder="Has a button" value="John Doe">
1466
1525
  <label for="low-flow-input-button-2">Some help text that should span the entire width of the input/button combo.</label>
1467
1526
  <input type="submit" value="Submit">
1468
1527
  </dd>
@@ -1477,6 +1536,16 @@
1477
1536
  <dt><label for="low-flow-range-value">Range value</label></dt>
1478
1537
  <dd><input id="low-flow-range-value" name="low-flow-range-value" type="range" class="displayValue"></dd>
1479
1538
  </div>
1539
+
1540
+ <div>
1541
+ <dt><label for="low-flow-readonly-field">Readonly field</label></dt>
1542
+ <dd><input id="low-flow-readonly-field" name="low-flow-readonly-field" type="text" value="This field is readonly" readonly></dd>
1543
+ </div>
1544
+
1545
+ <div>
1546
+ <dt><label for="low-flow-readonly-textarea">Readonly textarea</label></dt>
1547
+ <dd><textarea id="low-flow-readonly-textarea" name="low-flow-readonly-textarea" readonly>This textarea is readonly</textarea></dd>
1548
+ </div>
1480
1549
  </dl>
1481
1550
  </fieldset>
1482
1551
 
@@ -1556,6 +1625,74 @@
1556
1625
  </dl>
1557
1626
  </fieldset>
1558
1627
 
1628
+ <fieldset id="low-flow-other">
1629
+ <legend>Other inputs</legend>
1630
+ <dl>
1631
+ <div>
1632
+ <dt><label for="low-flow-textarea">Textarea</label></dt>
1633
+ <dd><textarea id="low-flow-textarea" name="low-flow-textarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
1634
+ </div>
1635
+
1636
+ <div>
1637
+ <dt><label for="low-flow-prefilledtextarea">Textarea (prefilled)</label></dt>
1638
+ <dd>
1639
+ <textarea id="low-flow-prefilledtextarea" name="low-flow-prefilledtextarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
1640
+ <label for="low-flow-prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
1641
+ </dd>
1642
+ </div>
1643
+
1644
+ <div>
1645
+ <dt><label for="low-flow-textarea-max-rows">Textarea</label></dt>
1646
+ <dd>
1647
+ <textarea id="low-flow-textarea-max-rows" name="low-flow-textarea-max-rows" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-max-rows="3">Row 1&#10;Row 2&#10;Row 3&#10;Row 4</textarea>
1648
+ <label for="low-flow-textarea-max-rows">This <code>textarea</code> has the <code>data-max-rows</code> set to 3, so the textarea will not expand past 3 rows.</label>
1649
+ </dd>
1650
+ </div>
1651
+
1652
+ <div>
1653
+ <dt><label for="low-flow-disable-autosize-textarea">Disabled autosize textarea</label></dt>
1654
+ <dd>
1655
+ <textarea name="low-flow-disable-autosize-textarea" id="low-flow-disable-autosize-textarea" rows="5" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-disable-autosize>Row 1&#10;Row 2&#10;Row 3&#10;Row 4&#10;Row 5&#10;Row 6</textarea>
1656
+ <label for="low-flow-disable-autosize-textarea">This <code>textarea</code> element has the <code>data-disable-autosize</code> attribute applied, and has <code>rows</code> set to 5.</label>
1657
+ </dd>
1658
+ </div>
1659
+
1660
+ <div>
1661
+ <dt><label for="low-flow-auto-grow-textarea">Auto-grow textarea</label></dt>
1662
+ <dd><textarea name="low-flow-auto-grow-textarea" id="low-flow-auto-grow-textarea" data-auto-grow>Start typing to see me grow</textarea></dd>
1663
+ </div>
1664
+
1665
+ <div>
1666
+ <dt><label for="low-flow-auto-grow-input">Auto-grow input</label></dt>
1667
+ <dd><input type="text" name="low-flow-auto-grow-input" id="low-flow-auto-grow-input" value="Start typing to see me grow" data-auto-grow></dd>
1668
+ </div>
1669
+ </dl>
1670
+ </fieldset>
1671
+
1672
+ <fieldset id="low-flow-p_tag_elements">
1673
+ <legend>P tag elements</legend>
1674
+ <p>
1675
+ <input type="checkbox" name="low-flow-p-tag-checkbox" id="low-flow-p-tag-checkbox">
1676
+ <label for="low-flow-p-tag-checkbox">Checkbox</label>
1677
+ </p>
1678
+ <p>
1679
+ <label for="low-flow-p-tag-input">Text input</label>
1680
+ <input type="text" name="low-flow-p-tag-input" id="low-flow-p-tag-input">
1681
+ </p>
1682
+ <p>
1683
+ <label for="low-flow-p-tag-textarea">Textarea</label>
1684
+ <textarea name="low-flow-p-tag-textarea" id="low-flow-p-tag-textarea"></textarea>
1685
+ </p>
1686
+ <p>
1687
+ <button type="button" name="low-flow-p-tag-button" id="low-flow-p-tag-button">Button</button>
1688
+ </p>
1689
+ <p>
1690
+ Some regular text with <strong>other elements</strong> <span>inside of it</span>
1691
+ </p>
1692
+ </fieldset>
1693
+
1694
+ <h3 id="low-flow-cat_choices">Checkboxes, radios and switches</h3>
1695
+
1559
1696
  <fieldset id="low-flow-checkboxes">
1560
1697
  <legend>Checkboxes</legend>
1561
1698
  <dl>
@@ -1642,6 +1779,21 @@
1642
1779
  <label for="low-flow-additional-text-checkbox">This is some additional text.</label>
1643
1780
  </dd>
1644
1781
  </div>
1782
+
1783
+ <div>
1784
+ <dt><label for="low-flow-switch">Switch</label></dt>
1785
+ <dd><input type="checkbox" switch name="low-flow-switch-field" id="low-flow-switch"></dd>
1786
+ </div>
1787
+
1788
+ <div>
1789
+ <dt><label for="low-flow-switch-checked">Switch (on by default)</label></dt>
1790
+ <dd><input type="checkbox" switch name="low-flow-switch-checked-field" id="low-flow-switch-checked" checked></dd>
1791
+ </div>
1792
+
1793
+ <div>
1794
+ <dt><label for="low-flow-switch-disabled">Switch (disabled)</label></dt>
1795
+ <dd><input type="checkbox" switch name="low-flow-switch-disabled-field" id="low-flow-switch-disabled" disabled></dd>
1796
+ </div>
1645
1797
  </dl>
1646
1798
  </fieldset>
1647
1799
 
@@ -1722,50 +1874,48 @@
1722
1874
  </dl>
1723
1875
  </fieldset>
1724
1876
 
1725
- <fieldset id="low-flow-other">
1726
- <legend>Other inputs</legend>
1727
- <dl>
1728
- <div>
1729
- <dt><label for="low-flow-textarea">Textarea</label></dt>
1730
- <dd><textarea id="low-flow-textarea" name="low-flow-textarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
1731
- </div>
1732
-
1733
- <div>
1734
- <dt><label for="low-flow-prefilledtextarea">Textarea (prefilled)</label></dt>
1735
- <dd>
1736
- <textarea id="low-flow-prefilledtextarea" name="low-flow-prefilledtextarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
1737
- <label for="low-flow-prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
1738
- </dd>
1739
- </div>
1877
+ <h3 id="low-flow-cat_buttons">Buttons</h3>
1740
1878
 
1879
+ <fieldset id="low-flow-buttons">
1880
+ <legend>Buttons</legend>
1881
+ <dl>
1741
1882
  <div>
1742
- <dt><label for="low-flow-textarea-max-rows">Textarea</label></dt>
1743
- <dd>
1744
- <textarea id="low-flow-textarea-max-rows" name="low-flow-textarea-max-rows" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-max-rows="3">Row 1&#10;Row 2&#10;Row 3&#10;Row 4</textarea>
1745
- <label for="low-flow-textarea-max-rows">This <code>textarea</code> has the <code>data-max-rows</code> set to 3, so the textarea will not expand past 3 rows.</label>
1746
- </dd>
1883
+ <dt><label for="low-flow-button-input1">Standard button</label></dt>
1884
+ <dd><button id="low-flow-button-input1">Standard button</button></dd>
1747
1885
  </div>
1748
1886
 
1749
1887
  <div>
1750
- <dt><label for="low-flow-disable-autosize-textarea">Disabled autosize textarea</label></dt>
1751
- <dd>
1752
- <textarea name="low-flow-disable-autosize-textarea" id="low-flow-disable-autosize-textarea" rows="5" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-disable-autosize>Row 1&#10;Row 2&#10;Row 3&#10;Row 4&#10;Row 5&#10;Row 6</textarea>
1753
- <label for="low-flow-disable-autosize-textarea">This <code>textarea</code> element has the <code>data-disable-autosize</code> attribute applied, and has <code>rows</code> set to 5.</label>
1754
- </dd>
1888
+ <dt><label for="low-flow-button-input2">Input button</label></dt>
1889
+ <dd><input type="button" id="low-flow-button-input2" value="Input button"></dd>
1755
1890
  </div>
1756
-
1757
1891
  <div>
1758
- <dt><label for="low-flow-auto-grow-textarea">Auto-grow textarea</label></dt>
1759
- <dd><textarea name="low-flow-auto-grow-textarea" id="low-flow-auto-grow-textarea" data-auto-grow>Start typing to see me grow</textarea></dd>
1892
+ <dt><label for="low-flow-button-input3">Submit input</label></dt>
1893
+ <dd><input type="submit" id="low-flow-button-input3" value="Submit input"></dd>
1760
1894
  </div>
1761
-
1762
1895
  <div>
1763
- <dt><label for="low-flow-auto-grow-input">Auto-grow input</label></dt>
1764
- <dd><input type="text" name="low-flow-auto-grow-input" id="low-flow-auto-grow-input" value="Start typing to see me grow" data-auto-grow></dd>
1896
+ <dt><label for="low-flow-button-input4">Reset input</label></dt>
1897
+ <dd><input type="reset" id="low-flow-button-input4" value="Reset input"></dd>
1765
1898
  </div>
1766
1899
  </dl>
1900
+ <input type="button" name="button1" value="Non-grouped button">
1901
+ <input type="submit" name="button2" value="Non-grouped submit button">
1902
+ <input type="reset" name="button3" value="Non-grouped reset button">
1903
+ <a href="/" class="button-link">Button link</a>
1904
+ <p>Flexbox button layout pattern with two submit buttons:</p>
1905
+ <menu>
1906
+ <li><button type="submit" name="button1">Button 1</button></li>
1907
+ <li><input type="image" title="an image input element" name="image" alt="Button 2" width="100" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png"></li>
1908
+ </menu>
1909
+ <p>Flexbox button layout pattern with three submit buttons:</p>
1910
+ <menu>
1911
+ <li><button type="submit" name="button1">Button 1</button></li>
1912
+ <li><button type="reset" name="button2">Button 2</button></li>
1913
+ <li><input type="submit" name="button3" value="Button 3"></li>
1914
+ </menu>
1767
1915
  </fieldset>
1768
1916
 
1917
+ <h3 id="low-flow-cat_layout">Layout</h3>
1918
+
1769
1919
  <fieldset id="low-flow-alignment_classes">
1770
1920
  <legend>Alignment classes</legend>
1771
1921
  <dl class="colspan-3">
@@ -1798,70 +1948,200 @@
1798
1948
  </dl>
1799
1949
  </fieldset>
1800
1950
 
1801
- <fieldset id="low-flow-keyboard_shortcuts">
1802
- <legend>Keyboard shortcuts</legend>
1803
- <dl>
1804
- <div>
1805
- <dt><label for="low-flow-custom-focus-input">Default Input focus</label></dt>
1806
- <dd><input type="text" name="low-flow-custom-focus-input" id="low-flow-custom-focus-input" data-focus-key="P"></dd>
1807
- </div>
1808
-
1809
- <div>
1810
- <dt><label for="low-flow-custom-focus-ctrl-input">Ctrl Input focus</label></dt>
1811
- <dd><input type="text" name="low-flow-custom-focus-ctrl-input" id="low-flow-custom-focus-ctrl-input" data-focus-modifier="ctrl" data-focus-key="P"></dd>
1812
- </div>
1813
-
1814
- <div>
1815
- <dt><label for="low-flow-custom-focus-alt-input">Alt Input focus</label></dt>
1816
- <dd><input type="text" name="low-flow-custom-focus-alt-input" id="low-flow-custom-focus-alt-input" data-focus-modifier="alt" data-focus-key="P"></dd>
1817
- </div>
1818
-
1819
- <div>
1820
- <dt><label for="low-flow-custom-focus-meta-input">Meta Input focus</label></dt>
1821
- <dd><input type="text" name="low-flow-custom-focus-meta-input" id="low-flow-custom-focus-meta-input" data-focus-modifier="meta" data-focus-key="Y"></dd>
1951
+ <fieldset id="low-flow-colspan_classes">
1952
+ <legend>Colspan classes</legend>
1953
+ <dl>
1954
+ <div class="colspan-1">
1955
+ <dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
1956
+ <dd><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
1957
+ </div>
1958
+ <div class="colspan-1">
1959
+ <dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
1960
+ <dd><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
1961
+ </div>
1962
+ <div class="colspan-2">
1963
+ <dt><label for="low-flow-colspan-2">colspan-2</label></dt>
1964
+ <dd><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
1965
+ </div>
1966
+ <div class="colspan-4">
1967
+ <dt><label for="low-flow-colspan-4">colspan-4</label></dt>
1968
+ <dd><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
1969
+ </div>
1970
+ <div class="colspan-3">
1971
+ <dt><label for="low-flow-colspan-3">colspan-3</label></dt>
1972
+ <dd><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
1973
+ </div>
1974
+ <div class="colspan-1">
1975
+ <dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
1976
+ <dd><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
1977
+ </div>
1978
+ <div class="colspan-full">
1979
+ <dt><label for="low-flow-colspan-full">colspan-full</label></dt>
1980
+ <dd><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
1981
+ </div>
1982
+ <div class="colspan-5">
1983
+ <dt><label for="low-flow-colspan-5">colspan-5</label></dt>
1984
+ <dd><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
1985
+ </div>
1986
+ </dl>
1987
+ <fieldset class="colspan-1">
1988
+ <legend>colspan-1</legend>
1989
+ <dl>
1990
+ <div>
1991
+ <dt><label for="low-flow-colspan-1-a">Input A</label></dt>
1992
+ <dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a" placeholder="Some interesting placeholder text"></dd>
1993
+ </div>
1994
+ <div>
1995
+ <dt><label for="low-flow-colspan-1-b">Input B</label></dt>
1996
+ <dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b" placeholder="Some interesting placeholder text"></dd>
1997
+ </div>
1998
+ <div>
1999
+ <dt><label for="low-flow-colspan-1-c">Input C</label></dt>
2000
+ <dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c" placeholder="Some interesting placeholder text"></dd>
2001
+ </div>
2002
+ <div>
2003
+ <dt><label for="low-flow-colspan-1-d">Input D</label></dt>
2004
+ <dd><input type="text" id="low-flow-colspan-1-d" name="low-flow-colspan-1-d" placeholder="Some interesting placeholder text"></dd>
2005
+ </div>
2006
+ </dl>
2007
+ </fieldset>
2008
+
2009
+
2010
+
2011
+ <fieldset class="colspan-2">
2012
+ <legend>colspan-2</legend>
2013
+ <dl>
2014
+ <div>
2015
+ <dt><label for="low-flow-colspan-2-a">Input A</label></dt>
2016
+ <dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a" placeholder="Some interesting placeholder text"></dd>
2017
+ </div>
2018
+ <div>
2019
+ <dt><label for="low-flow-colspan-2-b">Input B</label></dt>
2020
+ <dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b" placeholder="Some interesting placeholder text"></dd>
2021
+ </div>
2022
+ <div>
2023
+ <dt><label for="low-flow-colspan-2-c">Input C</label></dt>
2024
+ <dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c" placeholder="Some interesting placeholder text"></dd>
2025
+ </div>
2026
+ <div>
2027
+ <dt><label for="low-flow-colspan-2-d">Input D</label></dt>
2028
+ <dd><input type="text" id="low-flow-colspan-2-d" name="low-flow-colspan-2-d" placeholder="Some interesting placeholder text"></dd>
2029
+ </div>
2030
+ </dl>
2031
+ </fieldset>
2032
+ <fieldset>
2033
+ <legend>colspan-3</legend>
2034
+ <dl class="colspan-3">
2035
+ <div>
2036
+ <dt><label for="low-flow-colspan-3-a">Input A</label></dt>
2037
+ <dd><input type="text" id="low-flow-colspan-3-a" name="low-flow-colspan-3-a" placeholder="Some interesting placeholder text"></dd>
2038
+ </div>
2039
+ <div>
2040
+ <dt><label for="low-flow-colspan-3-b">Input B</label></dt>
2041
+ <dd><input type="text" id="low-flow-colspan-3-b" name="low-flow-colspan-3-b" placeholder="Some interesting placeholder text"></dd>
2042
+ </div>
2043
+ <div>
2044
+ <dt><label for="low-flow-colspan-3-c">Input C</label></dt>
2045
+ <dd><input type="text" id="low-flow-colspan-3-c" name="low-flow-colspan-3-c" placeholder="Some interesting placeholder text"></dd>
2046
+ </div>
2047
+ <div>
2048
+ <dt><label for="low-flow-colspan-3-d">Input D</label></dt>
2049
+ <dd><input type="text" id="low-flow-colspan-3-d" name="low-flow-colspan-3-d" placeholder="Some interesting placeholder text"></dd>
2050
+ </div>
2051
+ </dl>
2052
+ </fieldset>
2053
+ <fieldset class="colspan-full">
2054
+ <legend>colspan-full</legend>
2055
+ <dl>
2056
+ <div>
2057
+ <dt><label for="low-flow-colspan-full-a">Input A</label></dt>
2058
+ <dd><input type="text" id="low-flow-colspan-full-a" name="low-flow-colspan-full-a" placeholder="Some interesting placeholder text"></dd>
2059
+ </div>
2060
+ <div>
2061
+ <dt><label for="low-flow-colspan-full-b">Input B</label></dt>
2062
+ <dd><input type="text" id="low-flow-colspan-full-b" name="low-flow-colspan-full-b" placeholder="Some interesting placeholder text"></dd>
2063
+ </div>
2064
+ <div>
2065
+ <dt><label for="low-flow-colspan-full-c">Input C</label></dt>
2066
+ <dd><input type="text" id="low-flow-colspan-full-c" name="low-flow-colspan-full-c" placeholder="Some interesting placeholder text"></dd>
2067
+ </div>
2068
+ <div>
2069
+ <dt><label for="low-flow-colspan-full-d">Input D</label></dt>
2070
+ <dd><input type="text" id="low-flow-colspan-full-d" name="low-flow-colspan-full-d" placeholder="Some interesting placeholder text"></dd>
2071
+ </div>
2072
+ </dl>
2073
+ </fieldset>
2074
+ </fieldset>
2075
+
2076
+ <fieldset id="low-flow-col_classes">
2077
+ <legend>Col classes</legend>
2078
+ <dl class="colspan-3">
2079
+ <div class="col-3">
2080
+ <dt><label for="low-flow-col-3">col-3</label></dt>
2081
+ <dd><input type="text" name="low-flow-col-3" id="low-flow-col-3"></dd>
1822
2082
  </div>
1823
-
1824
- <div>
1825
- <dt><label for="low-flow-custom-focus-number">Number focus</label></dt>
1826
- <dd><input type="number" name="low-flow-custom-focus-number" id="low-flow-custom-focus-number" data-focus-key="L"></dd>
2083
+ <div class="col-1">
2084
+ <dt><label for="low-flow-col-1">col-1</label></dt>
2085
+ <dd><input type="text" name="low-flow-col-1" id="low-flow-col-1"></dd>
1827
2086
  </div>
1828
-
1829
- <div>
1830
- <dt><label for="low-flow-custom-focus-textarea">Textarea focus</label></dt>
1831
- <dd>
1832
- <textarea name="low-flow-custom-focus-textarea" id="low-flow-custom-focus-textarea" data-focus-key="!"></textarea>
1833
- <label for="low-flow-custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
1834
- </dd>
2087
+ <div class="col-2 colspan-2">
2088
+ <dt><label for="low-flow-col-2-colspan-2">col-2 colspan-2</label></dt>
2089
+ <dd><input type="text" name="low-flow-col-2-colspan-2" id="low-flow-col-2-colspan-2"></dd>
1835
2090
  </div>
2091
+ </dl>
2092
+ </fieldset>
1836
2093
 
1837
- <div>
1838
- <dt><label for="low-flow-custom-focus-date">Date focus</label></dt>
1839
- <dd>
1840
- <input type="date" name="low-flow-custom-focus-date" id="low-flow-custom-focus-date" data-focus-key="D">
1841
- <label for="low-flow-custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
1842
- </dd>
1843
- </div>
2094
+ <h4 id="low-flow-tabs">Tabs</h4>
1844
2095
 
1845
- <div>
1846
- <dt><label for="low-flow-custom-focus-color">Color focus</label></dt>
1847
- <dd><input type="color" name="low-flow-custom-focus-color" id="low-flow-custom-focus-color" title="This input has a keyboard shortcut!" data-focus-key="$" data-focus-modifier-mac="alt"></dd>
1848
- </div>
2096
+ <div class="tabs" id="low-flow-tab_group">
2097
+ <fieldset>
2098
+ <legend>Account</legend>
2099
+ <dl>
2100
+ <div>
2101
+ <dt><label for="low-flow-tab-username">Username</label></dt>
2102
+ <dd><input type="text" name="low-flow-tab-username" id="low-flow-tab-username"></dd>
2103
+ </div>
2104
+ <div>
2105
+ <dt><label for="low-flow-tab-email">Email</label></dt>
2106
+ <dd><input type="email" name="low-flow-tab-email" id="low-flow-tab-email"></dd>
2107
+ </div>
2108
+ </dl>
2109
+ </fieldset>
1849
2110
 
1850
- <div>
1851
- <dt><label for="low-flow-custom-focus-range">Range focus</label></dt>
1852
- <dd><input type="range" name="low-flow-custom-focus-range" id="low-flow-custom-focus-range" data-focus-key="U"></dd>
1853
- </div>
2111
+ <fieldset>
2112
+ <legend>Profile</legend>
2113
+ <dl>
2114
+ <div>
2115
+ <dt><label for="low-flow-tab-display-name">Display name</label></dt>
2116
+ <dd><input type="text" name="low-flow-tab-display-name" id="low-flow-tab-display-name"></dd>
2117
+ </div>
2118
+ <div>
2119
+ <dt><label for="low-flow-tab-bio">Bio</label></dt>
2120
+ <dd><textarea name="low-flow-tab-bio" id="low-flow-tab-bio"></textarea></dd>
2121
+ </div>
2122
+ </dl>
2123
+ </fieldset>
1854
2124
 
1855
- <div>
1856
- <dt><label for="low-flow-custom-focus-select">Select focus</label></dt>
1857
- <dd><select name="low-flow-custom-focus-select" id="low-flow-custom-focus-select" data-focus-key="K">
1858
- <option value="1">Value 1</option>
1859
- <option value="2">Value 2</option>
1860
- <option value="3">Value 3</option>
1861
- </select></dd>
1862
- </div>
1863
- </dl>
1864
- </fieldset>
2125
+ <fieldset>
2126
+ <legend>Preferences</legend>
2127
+ <dl>
2128
+ <div>
2129
+ <dt><label for="low-flow-tab-newsletter">Newsletter</label></dt>
2130
+ <dd><input type="checkbox" switch name="low-flow-tab-newsletter" id="low-flow-tab-newsletter"></dd>
2131
+ </div>
2132
+ <div>
2133
+ <dt><label for="low-flow-tab-theme">Theme</label></dt>
2134
+ <dd>
2135
+ <select name="low-flow-tab-theme" id="low-flow-tab-theme">
2136
+ <option>System</option>
2137
+ <option>Light</option>
2138
+ <option>Dark</option>
2139
+ </select>
2140
+ </dd>
2141
+ </div>
2142
+ </dl>
2143
+ </fieldset>
2144
+ </div>
1865
2145
 
1866
2146
  <fieldset id="low-flow-tables">
1867
2147
  <legend>Tables</legend>
@@ -2096,239 +2376,237 @@
2096
2376
  </fieldset>
2097
2377
 
2098
2378
  <fieldset id="low-flow-details">
2099
- <legend>Detail elements</legend>
2100
- <details>
2101
- <summary>Detail element</summary>
2102
- <dl>
2103
- <div>
2104
- <dt><label for="low-flow-detail-input-1">Detail input</label></dt>
2105
- <dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1" value="Some input..."></dd>
2106
- </div>
2107
-
2108
- <div>
2109
- <dt><label for="low-flow-detail-input-2">Detail input</label></dt>
2110
- <dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
2111
- </div>
2112
-
2113
- <div>
2114
- <dt><label for="low-flow-detail-input-3">Detail input</label></dt>
2115
- <dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
2116
- </div>
2117
-
2118
- <div>
2119
- <dt><label for="low-flow-detail-input-4">Detail input</label></dt>
2120
- <dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
2121
- </div>
2122
- </dl>
2123
- </details>
2124
-
2125
- <details>
2126
- <summary>Another detail element with a nested fieldset</summary>
2127
- <dl>
2128
- <div>
2129
- <dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
2130
- <dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
2131
- </div>
2132
- </dl>
2133
-
2134
- <fieldset>
2135
- <legend>Nested fieldset</legend>
2136
-
2137
- <dl>
2138
- <div>
2139
- <dt><label for="low-flow-another-detail-input-2">Nested fieldset input</label></dt>
2140
- <dd><input type="text" name="low-flow-another-detail-input-2" id="low-flow-another-detail-input-2"></dd>
2141
- </div>
2142
- </dl>
2143
- </fieldset>
2144
- </details>
2145
- </fieldset>
2146
-
2147
- <fieldset id="low-flow-buttons">
2148
- <legend>Buttons</legend>
2149
- <dl>
2150
- <div>
2151
- <dt><label for="low-flow-button-input1">Standard button</label></dt>
2152
- <dd><button id="low-flow-button-input1">Standard button</button></dd>
2153
- </div>
2154
-
2155
- <div>
2156
- <dt><label for="low-flow-button-input2">Input button</label></dt>
2157
- <dd><input type="button" id="low-flow-button-input2" value="Input button"></dd>
2158
- </div>
2159
- <div>
2160
- <dt><label for="low-flow-button-input3">Submit input</label></dt>
2161
- <dd><input type="submit" id="low-flow-button-input3" value="Submit input"></dd>
2162
- </div>
2163
- <div>
2164
- <dt><label for="low-flow-button-input4">Reset input</label></dt>
2165
- <dd><input type="reset" id="low-flow-button-input4" value="Reset input"></dd>
2166
- </div>
2167
- </dl>
2168
- <input type="button" name="button1" value="Non-grouped button">
2169
- <input type="submit" name="button2" value="Non-grouped submit button">
2170
- <input type="reset" name="button3" value="Non-grouped reset button">
2171
- <a href="/" class="button-link">Button link</a>
2172
- <p>Flexbox button layout pattern with two submit buttons:</p>
2173
- <menu>
2174
- <li><button type="submit" name="button1">Button 1</button></li>
2175
- <li><input type="image" title="an image input element" name="image" alt="Button 2" width="100" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png"></li>
2176
- </menu>
2177
- <p>Flexbox button layout pattern with three submit buttons:</p>
2178
- <menu>
2179
- <li><button type="submit" name="button1">Button 1</button></li>
2180
- <li><button type="reset" name="button2">Button 2</button></li>
2181
- <li><input type="submit" name="button3" value="Button 3"></li>
2182
- </menu>
2183
- </fieldset>
2184
-
2185
- <fieldset id="low-flow-colspan_classes">
2186
- <legend>Colspan classes</legend>
2187
- <dl>
2188
- <div class="colspan-1">
2189
- <dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
2190
- <dd><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
2191
- </div>
2192
- <div class="colspan-1">
2193
- <dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
2194
- <dd><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
2195
- </div>
2196
- <div class="colspan-2">
2197
- <dt><label for="low-flow-colspan-2">colspan-2</label></dt>
2198
- <dd><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
2199
- </div>
2200
- <div class="colspan-4">
2201
- <dt><label for="low-flow-colspan-4">colspan-4</label></dt>
2202
- <dd><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
2203
- </div>
2204
- <div class="colspan-3">
2205
- <dt><label for="low-flow-colspan-3">colspan-3</label></dt>
2206
- <dd><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
2207
- </div>
2208
- <div class="colspan-1">
2209
- <dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
2210
- <dd><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
2211
- </div>
2212
- <div class="colspan-full">
2213
- <dt><label for="low-flow-colspan-full">colspan-full</label></dt>
2214
- <dd><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
2215
- </div>
2216
- <div class="colspan-5">
2217
- <dt><label for="low-flow-colspan-5">colspan-5</label></dt>
2218
- <dd><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
2219
- </div>
2220
- </dl>
2221
- <fieldset class="colspan-1">
2222
- <legend>colspan-1</legend>
2223
- <dl>
2224
- <div>
2225
- <dt><label for="low-flow-colspan-1-a">Input A</label></dt>
2226
- <dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a" placeholder="Some interesting placeholder text"></dd>
2227
- </div>
2228
- <div>
2229
- <dt><label for="low-flow-colspan-1-b">Input B</label></dt>
2230
- <dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b" placeholder="Some interesting placeholder text"></dd>
2231
- </div>
2232
- <div>
2233
- <dt><label for="low-flow-colspan-1-c">Input C</label></dt>
2234
- <dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c" placeholder="Some interesting placeholder text"></dd>
2235
- </div>
2236
- <div>
2237
- <dt><label for="low-flow-colspan-1-d">Input D</label></dt>
2238
- <dd><input type="text" id="low-flow-colspan-1-d" name="low-flow-colspan-1-d" placeholder="Some interesting placeholder text"></dd>
2239
- </div>
2240
- </dl>
2241
- </fieldset>
2242
- <fieldset class="colspan-2">
2243
- <legend>colspan-2</legend>
2244
- <dl>
2245
- <div>
2246
- <dt><label for="low-flow-colspan-2-a">Input A</label></dt>
2247
- <dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a" placeholder="Some interesting placeholder text"></dd>
2248
- </div>
2249
- <div>
2250
- <dt><label for="low-flow-colspan-2-b">Input B</label></dt>
2251
- <dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b" placeholder="Some interesting placeholder text"></dd>
2252
- </div>
2253
- <div>
2254
- <dt><label for="low-flow-colspan-2-c">Input C</label></dt>
2255
- <dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c" placeholder="Some interesting placeholder text"></dd>
2256
- </div>
2257
- <div>
2258
- <dt><label for="low-flow-colspan-2-d">Input D</label></dt>
2259
- <dd><input type="text" id="low-flow-colspan-2-d" name="low-flow-colspan-2-d" placeholder="Some interesting placeholder text"></dd>
2260
- </div>
2261
- </dl>
2262
- </fieldset>
2263
- <fieldset>
2264
- <legend>colspan-3</legend>
2265
- <dl class="colspan-3">
2379
+ <legend>Detail elements</legend>
2380
+ <details>
2381
+ <summary>Detail element</summary>
2382
+ <dl>
2266
2383
  <div>
2267
- <dt><label for="low-flow-colspan-3-a">Input A</label></dt>
2268
- <dd><input type="text" id="low-flow-colspan-3-a" name="low-flow-colspan-3-a" placeholder="Some interesting placeholder text"></dd>
2384
+ <dt><label for="low-flow-detail-input-1">Detail input</label></dt>
2385
+ <dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1" value="Some input..."></dd>
2269
2386
  </div>
2387
+
2270
2388
  <div>
2271
- <dt><label for="low-flow-colspan-3-b">Input B</label></dt>
2272
- <dd><input type="text" id="low-flow-colspan-3-b" name="low-flow-colspan-3-b" placeholder="Some interesting placeholder text"></dd>
2389
+ <dt><label for="low-flow-detail-input-2">Detail input</label></dt>
2390
+ <dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
2273
2391
  </div>
2392
+
2274
2393
  <div>
2275
- <dt><label for="low-flow-colspan-3-c">Input C</label></dt>
2276
- <dd><input type="text" id="low-flow-colspan-3-c" name="low-flow-colspan-3-c" placeholder="Some interesting placeholder text"></dd>
2394
+ <dt><label for="low-flow-detail-input-3">Detail input</label></dt>
2395
+ <dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
2277
2396
  </div>
2397
+
2278
2398
  <div>
2279
- <dt><label for="low-flow-colspan-3-d">Input D</label></dt>
2280
- <dd><input type="text" id="low-flow-colspan-3-d" name="low-flow-colspan-3-d" placeholder="Some interesting placeholder text"></dd>
2399
+ <dt><label for="low-flow-detail-input-4">Detail input</label></dt>
2400
+ <dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
2281
2401
  </div>
2282
2402
  </dl>
2283
- </fieldset>
2284
- <fieldset class="colspan-full">
2285
- <legend>colspan-full</legend>
2403
+ </details>
2404
+
2405
+ <details>
2406
+ <summary>Another detail element with a nested fieldset</summary>
2286
2407
  <dl>
2287
2408
  <div>
2288
- <dt><label for="low-flow-colspan-full-a">Input A</label></dt>
2289
- <dd><input type="text" id="low-flow-colspan-full-a" name="low-flow-colspan-full-a" placeholder="Some interesting placeholder text"></dd>
2290
- </div>
2291
- <div>
2292
- <dt><label for="low-flow-colspan-full-b">Input B</label></dt>
2293
- <dd><input type="text" id="low-flow-colspan-full-b" name="low-flow-colspan-full-b" placeholder="Some interesting placeholder text"></dd>
2294
- </div>
2295
- <div>
2296
- <dt><label for="low-flow-colspan-full-c">Input C</label></dt>
2297
- <dd><input type="text" id="low-flow-colspan-full-c" name="low-flow-colspan-full-c" placeholder="Some interesting placeholder text"></dd>
2298
- </div>
2299
- <div>
2300
- <dt><label for="low-flow-colspan-full-d">Input D</label></dt>
2301
- <dd><input type="text" id="low-flow-colspan-full-d" name="low-flow-colspan-full-d" placeholder="Some interesting placeholder text"></dd>
2409
+ <dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
2410
+ <dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
2302
2411
  </div>
2303
2412
  </dl>
2304
- </fieldset>
2413
+
2414
+ <fieldset>
2415
+ <legend>Nested fieldset</legend>
2416
+
2417
+ <dl>
2418
+ <div>
2419
+ <dt><label for="low-flow-another-detail-input-2">Nested fieldset input</label></dt>
2420
+ <dd><input type="text" name="low-flow-another-detail-input-2" id="low-flow-another-detail-input-2"></dd>
2421
+ </div>
2422
+ </dl>
2423
+ </fieldset>
2424
+ </details>
2305
2425
  </fieldset>
2306
2426
 
2307
- <fieldset id="low-flow-p_tag_elements">
2308
- <legend>P tag elements</legend>
2309
- <p>
2310
- <input type="checkbox" name="low-flow-p-tag-checkbox" id="low-flow-p-tag-checkbox">
2311
- <label for="low-flow-p-tag-checkbox">Checkbox</label>
2312
- </p>
2313
- <p>
2314
- <label for="low-flow-p-tag-input">Text input</label>
2315
- <input type="text" name="low-flow-p-tag-input" id="low-flow-p-tag-input">
2316
- </p>
2317
- <p>
2318
- <label for="low-flow-p-tag-textarea">Textarea</label>
2319
- <textarea name="low-flow-p-tag-textarea" id="low-flow-p-tag-textarea"></textarea>
2320
- </p>
2321
- <p>
2322
- <button type="button" name="low-flow-p-tag-button" id="low-flow-p-tag-button">Button</button>
2323
- </p>
2324
- <p>
2325
- Some regular text with <strong>other elements</strong> <span>inside of it</span>
2326
- </p>
2427
+ <h3 id="low-flow-cat_shortcuts">Keyboard shortcuts</h3>
2428
+
2429
+ <fieldset id="low-flow-keyboard_shortcuts">
2430
+ <legend>Keyboard shortcuts</legend>
2431
+ <dl>
2432
+ <div>
2433
+ <dt><label for="low-flow-custom-focus-input">Default Input focus</label></dt>
2434
+ <dd><input type="text" name="low-flow-custom-focus-input" id="low-flow-custom-focus-input" data-focus-key="P"></dd>
2435
+ </div>
2436
+
2437
+ <div>
2438
+ <dt><label for="low-flow-custom-focus-ctrl-input">Ctrl Input focus</label></dt>
2439
+ <dd><input type="text" name="low-flow-custom-focus-ctrl-input" id="low-flow-custom-focus-ctrl-input" data-focus-modifier="ctrl" data-focus-key="P"></dd>
2440
+ </div>
2441
+
2442
+ <div>
2443
+ <dt><label for="low-flow-custom-focus-alt-input">Alt Input focus</label></dt>
2444
+ <dd><input type="text" name="low-flow-custom-focus-alt-input" id="low-flow-custom-focus-alt-input" data-focus-modifier="alt" data-focus-key="P"></dd>
2445
+ </div>
2446
+
2447
+ <div>
2448
+ <dt><label for="low-flow-custom-focus-meta-input">Meta Input focus</label></dt>
2449
+ <dd><input type="text" name="low-flow-custom-focus-meta-input" id="low-flow-custom-focus-meta-input" data-focus-modifier="meta" data-focus-key="Y"></dd>
2450
+ </div>
2451
+
2452
+ <div>
2453
+ <dt><label for="low-flow-custom-focus-number">Number focus</label></dt>
2454
+ <dd><input type="number" name="low-flow-custom-focus-number" id="low-flow-custom-focus-number" data-focus-key="L"></dd>
2455
+ </div>
2456
+
2457
+ <div>
2458
+ <dt><label for="low-flow-custom-focus-textarea">Textarea focus</label></dt>
2459
+ <dd>
2460
+ <textarea name="low-flow-custom-focus-textarea" id="low-flow-custom-focus-textarea" data-focus-key="!"></textarea>
2461
+ <label for="low-flow-custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
2462
+ </dd>
2463
+ </div>
2464
+
2465
+ <div>
2466
+ <dt><label for="low-flow-custom-focus-date">Date focus</label></dt>
2467
+ <dd>
2468
+ <input type="date" name="low-flow-custom-focus-date" id="low-flow-custom-focus-date" data-focus-key="D">
2469
+ <label for="low-flow-custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
2470
+ </dd>
2471
+ </div>
2472
+
2473
+ <div>
2474
+ <dt><label for="low-flow-custom-focus-color">Color focus</label></dt>
2475
+ <dd><input type="color" name="low-flow-custom-focus-color" id="low-flow-custom-focus-color" title="This input has a keyboard shortcut!" data-focus-key="$" data-focus-modifier-mac="alt"></dd>
2476
+ </div>
2477
+
2478
+ <div>
2479
+ <dt><label for="low-flow-custom-focus-range">Range focus</label></dt>
2480
+ <dd><input type="range" name="low-flow-custom-focus-range" id="low-flow-custom-focus-range" data-focus-key="U"></dd>
2481
+ </div>
2482
+
2483
+ <div>
2484
+ <dt><label for="low-flow-custom-focus-select">Select focus</label></dt>
2485
+ <dd><select name="low-flow-custom-focus-select" id="low-flow-custom-focus-select" data-focus-key="K">
2486
+ <option value="1">Value 1</option>
2487
+ <option value="2">Value 2</option>
2488
+ <option value="3">Value 3</option>
2489
+ </select></dd>
2490
+ </div>
2491
+ </dl>
2327
2492
  </fieldset>
2493
+
2328
2494
  </form>
2329
2495
 
2330
2496
  <hr>
2331
2497
 
2498
+ <h2 id="semantic_table">Semantic form tables</h2>
2499
+
2500
+ <section>
2501
+ <h3 id="table_semantic_form_class">Table with <code>semanticForms</code> class</h3>
2502
+ <table class="semanticForms">
2503
+ <thead>
2504
+ <tr class="title">
2505
+ <th colspan="3">Table Title</th>
2506
+ </tr>
2507
+ <tr>
2508
+ <th>Column 1</th>
2509
+ <th>Column 2</th>
2510
+ <th>Column 3</th>
2511
+ </tr>
2512
+ </thead>
2513
+ <tbody>
2514
+ <tr>
2515
+ <td>1</td>
2516
+ <td>
2517
+ <input type="text" name="table-text-1C" id="table-text-1C" placeholder="A text input in a table">
2518
+ </td>
2519
+ <td>
2520
+ <menu>
2521
+ <li><button type="button">Button 1</button></li>
2522
+ <li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
2523
+ </menu>
2524
+ </td>
2525
+ </tr>
2526
+ <tr>
2527
+ <td>2</td>
2528
+ <td>
2529
+ <input type="text" name="table-text-2C" id="table-text-2C" placeholder="A text input in a table">
2530
+ </td>
2531
+ <td>
2532
+ <menu>
2533
+ <li><button type="button">Button 2</button></li>
2534
+ <li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
2535
+ </menu>
2536
+ </td>
2537
+ </tr>
2538
+ <tr>
2539
+ <td>3</td>
2540
+ <td>
2541
+ <input type="text" name="table-text-3C" id="table-text-3C" placeholder="A text input in a table">
2542
+ </td>
2543
+ <td>
2544
+ <menu>
2545
+ <li><button type="button">Button 3</button></li>
2546
+ <li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
2547
+ </menu>
2548
+ </td>
2549
+ </tr>
2550
+ </tbody>
2551
+ </table>
2552
+ <h3 id="table_form_in_cell">Table with a <code>form</code> in a cell</h3>
2553
+ <table class="semanticForms">
2554
+ <thead>
2555
+ <tr class="title">
2556
+ <th colspan="2">Table Title</th>
2557
+ </tr>
2558
+ <tr>
2559
+ <th>Column 1</th>
2560
+ <th>Column 2</th>
2561
+ </tr>
2562
+ </thead>
2563
+ <tbody>
2564
+ <tr>
2565
+ <td>Some text</td>
2566
+ <td>
2567
+ <form action="/somewhere" class="semanticForms">
2568
+ <menu>
2569
+ <li><button type="submit">Submit button</button></li>
2570
+ </menu>
2571
+ </form>
2572
+ </td>
2573
+ </tr>
2574
+ </tbody>
2575
+ </table>
2576
+ <h3 id="table_unstyled">Unstyled table</h3>
2577
+ <table>
2578
+ <thead>
2579
+ <tr class="title">
2580
+ <th colspan="3">Table Title</th>
2581
+ </tr>
2582
+ <tr>
2583
+ <th>Column 1</th>
2584
+ <th>Column 2</th>
2585
+ <th>Column 3</th>
2586
+ </tr>
2587
+ </thead>
2588
+ <tbody>
2589
+ <tr>
2590
+ <td>1</td>
2591
+ <td>A</td>
2592
+ <td>a</td>
2593
+ </tr>
2594
+ <tr>
2595
+ <td>2</td>
2596
+ <td>B</td>
2597
+ <td>b</td>
2598
+ </tr>
2599
+ <tr>
2600
+ <td>3</td>
2601
+ <td>C</td>
2602
+ <td>c</td>
2603
+ </tr>
2604
+ </tbody>
2605
+ </table>
2606
+ </section>
2607
+
2608
+ <hr>
2609
+
2332
2610
  <h2 id="sample_forms">Sample forms</h2>
2333
2611
 
2334
2612
  <section style="display: flex; flex-wrap: wrap; gap: 20px;">