semantic-forms 5.3.5 → 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.
- package/CHANGELOG.md +20 -0
- package/CONTRIBUTING.md +39 -7
- package/dist/semantic-forms.cjs +119 -52
- package/dist/semantic-forms.cjs.map +1 -1
- package/dist/semantic-forms.css +497 -177
- package/dist/semantic-forms.css.map +1 -1
- package/dist/semantic-forms.js +153 -80
- package/dist/semantic-forms.js.map +1 -1
- package/dist/semantic-forms.min.js +1 -1
- package/dist/semantic-forms.min.js.map +1 -1
- package/dist/semantic-forms.min.mjs +1 -1
- package/dist/semantic-forms.min.mjs.map +1 -1
- package/dist/semantic-forms.mjs +120 -53
- package/dist/semantic-forms.mjs.map +1 -1
- package/docs/statics/css/semantic-forms-styles.scss +14 -1
- package/docs/statics/js/semantic-forms-demo.js +16 -0
- package/docs/statics/js/semantic-forms-main.js +3 -2
- package/docs/statics/pages/buttons.html +98 -0
- package/docs/statics/pages/checkboxes.html +130 -0
- package/docs/statics/pages/fullDemo.html +1078 -821
- package/docs/statics/pages/inputs.html +384 -0
- package/docs/statics/pages/layout.html +521 -0
- package/docs/statics/pages/layouts/main.html +9 -1
- package/docs/statics/pages/theming.html +39 -0
- package/docs/statics/pages/usage.html +17 -799
- package/package.json +27 -13
- package/semanticForms.js +33 -8
- package/semanticForms.scss +13 -4
|
@@ -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="#
|
|
38
|
+
<li><a href="#form_styling">Form styling</a>
|
|
39
39
|
<ul>
|
|
40
|
-
<li><a href="#
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<li><a href="#
|
|
52
|
-
|
|
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="
|
|
92
|
+
<h2 id="form_styling">Form styling</h2>
|
|
85
93
|
|
|
86
|
-
<form
|
|
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="
|
|
90
|
-
<dd><input
|
|
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
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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
|
-
|
|
99
|
-
|
|
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
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
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
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
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
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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
|
|
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="
|
|
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"
|
|
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 Row 2 Row 3 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 Row 2 Row 3 Row 4 Row 5 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
|
-
<
|
|
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="
|
|
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 Row 2 Row 3 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="
|
|
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 Row 2 Row 3 Row 4 Row 5 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="
|
|
579
|
-
<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="
|
|
584
|
-
<dd><input type="
|
|
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="
|
|
622
|
-
<legend>
|
|
746
|
+
<fieldset id="colspan_classes">
|
|
747
|
+
<legend>Colspan classes</legend>
|
|
623
748
|
<dl>
|
|
624
|
-
<div>
|
|
625
|
-
<dt><label for="
|
|
626
|
-
<dd><input type="text" name="
|
|
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
|
-
|
|
630
|
-
<
|
|
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
|
-
|
|
635
|
-
<
|
|
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
|
-
|
|
640
|
-
<
|
|
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
|
-
|
|
645
|
-
<
|
|
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
|
-
|
|
650
|
-
<
|
|
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
|
-
|
|
658
|
-
<
|
|
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
|
-
|
|
666
|
-
<
|
|
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
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
<
|
|
681
|
-
|
|
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>
|
|
@@ -985,379 +1240,162 @@
|
|
|
985
1240
|
</dl>
|
|
986
1241
|
</details>
|
|
987
1242
|
|
|
988
|
-
<
|
|
989
|
-
|
|
1243
|
+
<h3 id="cat_shortcuts">Keyboard shortcuts</h3>
|
|
1244
|
+
|
|
1245
|
+
<fieldset id="keyboard_shortcuts">
|
|
1246
|
+
<legend>Keyboard shortcuts</legend>
|
|
990
1247
|
<dl>
|
|
991
1248
|
<div>
|
|
992
|
-
<dt><label for="
|
|
993
|
-
<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>
|
|
994
1251
|
</div>
|
|
995
1252
|
|
|
996
1253
|
<div>
|
|
997
|
-
<dt><label for="
|
|
998
|
-
<dd><input type="
|
|
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>
|
|
999
1256
|
</div>
|
|
1257
|
+
|
|
1000
1258
|
<div>
|
|
1001
|
-
<dt><label for="
|
|
1002
|
-
<dd><input type="
|
|
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>
|
|
1003
1261
|
</div>
|
|
1262
|
+
|
|
1004
1263
|
<div>
|
|
1005
|
-
<dt><label for="
|
|
1006
|
-
<dd><input type="
|
|
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>
|
|
1007
1266
|
</div>
|
|
1008
|
-
</dl>
|
|
1009
|
-
<input type="button" name="button1" value="Non-grouped button">
|
|
1010
|
-
<input type="submit" name="button2" value="Non-grouped submit button">
|
|
1011
|
-
<input type="reset" name="button3" value="Non-grouped reset button">
|
|
1012
|
-
<a href="/" class="button-link">Button link</a>
|
|
1013
|
-
<p>Flexbox button layout pattern with two submit buttons:</p>
|
|
1014
|
-
<menu>
|
|
1015
|
-
<li><button type="submit" name="button1">Button 1</button></li>
|
|
1016
|
-
<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>
|
|
1017
|
-
</menu>
|
|
1018
|
-
<p>Flexbox button layout pattern with three submit buttons:</p>
|
|
1019
|
-
<menu>
|
|
1020
|
-
<li><button type="submit" name="button1">Button 1</button></li>
|
|
1021
|
-
<li><button type="reset" name="button2">Button 2</button></li>
|
|
1022
|
-
<li><input type="submit" name="button3" value="Button 3"></li>
|
|
1023
|
-
</menu>
|
|
1024
|
-
</fieldset>
|
|
1025
1267
|
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
<div class="colspan-1">
|
|
1030
|
-
<dt><label for="colspan-1a">colspan-1</label></dt>
|
|
1031
|
-
<dd><input type="text" name="colspan-1a" id="colspan-1a"></dd>
|
|
1032
|
-
</div>
|
|
1033
|
-
<div class="colspan-1">
|
|
1034
|
-
<dt><label for="colspan-1b">colspan-1</label></dt>
|
|
1035
|
-
<dd><input type="text" name="colspan-1b" id="colspan-1b"></dd>
|
|
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>
|
|
1036
1271
|
</div>
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
<
|
|
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>
|
|
1040
1279
|
</div>
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
<
|
|
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>
|
|
1044
1287
|
</div>
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
<
|
|
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>
|
|
1048
1292
|
</div>
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
<
|
|
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>
|
|
1052
1297
|
</div>
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
<
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
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>
|
|
1060
1306
|
</div>
|
|
1061
1307
|
</dl>
|
|
1062
|
-
<fieldset class="colspan-1">
|
|
1063
|
-
<legend>colspan-1</legend>
|
|
1064
|
-
<dl>
|
|
1065
|
-
<div>
|
|
1066
|
-
<dt><label for="colspan-1-a">Input A</label></dt>
|
|
1067
|
-
<dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
|
|
1068
|
-
</div>
|
|
1069
|
-
<div>
|
|
1070
|
-
<dt><label for="colspan-1-b">Input B</label></dt>
|
|
1071
|
-
<dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
|
|
1072
|
-
</div>
|
|
1073
|
-
<div>
|
|
1074
|
-
<dt><label for="colspan-1-c">Input C</label></dt>
|
|
1075
|
-
<dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
|
|
1076
|
-
</div>
|
|
1077
|
-
<div>
|
|
1078
|
-
<dt><label for="colspan-1-d">Input D</label></dt>
|
|
1079
|
-
<dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
|
|
1080
|
-
</div>
|
|
1081
|
-
</dl>
|
|
1082
|
-
</fieldset>
|
|
1083
|
-
<fieldset class="colspan-2">
|
|
1084
|
-
<legend>colspan-2</legend>
|
|
1085
|
-
<dl>
|
|
1086
|
-
<div>
|
|
1087
|
-
<dt><label for="colspan-2-a">Input A</label></dt>
|
|
1088
|
-
<dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
|
|
1089
|
-
</div>
|
|
1090
|
-
<div>
|
|
1091
|
-
<dt><label for="colspan-2-b">Input B</label></dt>
|
|
1092
|
-
<dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
|
|
1093
|
-
</div>
|
|
1094
|
-
<div>
|
|
1095
|
-
<dt><label for="colspan-2-c">Input C</label></dt>
|
|
1096
|
-
<dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
|
|
1097
|
-
</div>
|
|
1098
|
-
<div>
|
|
1099
|
-
<dt><label for="colspan-2-d">Input D</label></dt>
|
|
1100
|
-
<dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
|
|
1101
|
-
</div>
|
|
1102
|
-
</dl>
|
|
1103
|
-
</fieldset>
|
|
1104
|
-
<fieldset>
|
|
1105
|
-
<legend>colspan-3</legend>
|
|
1106
|
-
<dl class="colspan-3">
|
|
1107
|
-
<div>
|
|
1108
|
-
<dt><label for="colspan-3-a">Input A</label></dt>
|
|
1109
|
-
<dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
|
|
1110
|
-
</div>
|
|
1111
|
-
<div>
|
|
1112
|
-
<dt><label for="colspan-3-b">Input B</label></dt>
|
|
1113
|
-
<dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
|
|
1114
|
-
</div>
|
|
1115
|
-
<div>
|
|
1116
|
-
<dt><label for="colspan-3-c">Input C</label></dt>
|
|
1117
|
-
<dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
|
|
1118
|
-
</div>
|
|
1119
|
-
<div>
|
|
1120
|
-
<dt><label for="colspan-3-d">Input D</label></dt>
|
|
1121
|
-
<dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
|
|
1122
|
-
</div>
|
|
1123
|
-
</dl>
|
|
1124
|
-
</fieldset>
|
|
1125
|
-
<fieldset class="colspan-full">
|
|
1126
|
-
<legend>colspan-full</legend>
|
|
1127
|
-
<dl>
|
|
1128
|
-
<div>
|
|
1129
|
-
<dt><label for="colspan-full-a">Input A</label></dt>
|
|
1130
|
-
<dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
|
|
1131
|
-
</div>
|
|
1132
|
-
<div>
|
|
1133
|
-
<dt><label for="colspan-full-b">Input B</label></dt>
|
|
1134
|
-
<dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
|
|
1135
|
-
</div>
|
|
1136
|
-
<div>
|
|
1137
|
-
<dt><label for="colspan-full-c">Input C</label></dt>
|
|
1138
|
-
<dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
|
|
1139
|
-
</div>
|
|
1140
|
-
<div>
|
|
1141
|
-
<dt><label for="colspan-full-d">Input D</label></dt>
|
|
1142
|
-
<dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
|
|
1143
|
-
</div>
|
|
1144
|
-
</dl>
|
|
1145
|
-
</fieldset>
|
|
1146
1308
|
</fieldset>
|
|
1147
1309
|
|
|
1148
|
-
<fieldset id="p_tag_elements">
|
|
1149
|
-
<legend>P tag elements</legend>
|
|
1150
|
-
<p>
|
|
1151
|
-
<input type="checkbox" name="p-tag-checkbox" id="p-tag-checkbox">
|
|
1152
|
-
<label for="p-tag-checkbox">Checkbox</label>
|
|
1153
|
-
</p>
|
|
1154
|
-
<p>
|
|
1155
|
-
<label for="p-tag-input">Text input</label>
|
|
1156
|
-
<input type="text" name="p-tag-input" id="p-tag-input">
|
|
1157
|
-
</p>
|
|
1158
|
-
<p>
|
|
1159
|
-
<label for="p-tag-textarea">Textarea</label>
|
|
1160
|
-
<textarea name="p-tag-textarea" id="p-tag-textarea"></textarea>
|
|
1161
|
-
</p>
|
|
1162
|
-
<p>
|
|
1163
|
-
<button type="button" name="p-tag-button" id="p-tag-button">Button</button>
|
|
1164
|
-
</p>
|
|
1165
|
-
<p>
|
|
1166
|
-
Some regular text with <strong>other elements</strong> <span>inside of it</span>
|
|
1167
|
-
</p>
|
|
1168
|
-
</fieldset>
|
|
1169
1310
|
</form>
|
|
1170
1311
|
|
|
1171
1312
|
<hr>
|
|
1172
1313
|
|
|
1173
|
-
<
|
|
1314
|
+
<form action="/somewhere" method="post" class="semanticForms lowFlow" id="low_flow">
|
|
1315
|
+
<h3 id="low-flow-cat_inputs">Inputs</h3>
|
|
1174
1316
|
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
<
|
|
1181
|
-
</
|
|
1182
|
-
<tr>
|
|
1183
|
-
<th>Column 1</th>
|
|
1184
|
-
<th>Column 2</th>
|
|
1185
|
-
<th>Column 3</th>
|
|
1186
|
-
</tr>
|
|
1187
|
-
</thead>
|
|
1188
|
-
<tbody>
|
|
1189
|
-
<tr>
|
|
1190
|
-
<td>1</td>
|
|
1191
|
-
<td>
|
|
1192
|
-
<input type="text" name="table-text-1C" id="table-text-1C" placeholder="A text input in a table">
|
|
1193
|
-
</td>
|
|
1194
|
-
<td>
|
|
1195
|
-
<menu>
|
|
1196
|
-
<li><button type="button">Button 1</button></li>
|
|
1197
|
-
<li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
|
|
1198
|
-
</menu>
|
|
1199
|
-
</td>
|
|
1200
|
-
</tr>
|
|
1201
|
-
<tr>
|
|
1202
|
-
<td>2</td>
|
|
1203
|
-
<td>
|
|
1204
|
-
<input type="text" name="table-text-2C" id="table-text-2C" placeholder="A text input in a table">
|
|
1205
|
-
</td>
|
|
1206
|
-
<td>
|
|
1207
|
-
<menu>
|
|
1208
|
-
<li><button type="button">Button 2</button></li>
|
|
1209
|
-
<li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
|
|
1210
|
-
</menu>
|
|
1211
|
-
</td>
|
|
1212
|
-
</tr>
|
|
1213
|
-
<tr>
|
|
1214
|
-
<td>3</td>
|
|
1215
|
-
<td>
|
|
1216
|
-
<input type="text" name="table-text-3C" id="table-text-3C" placeholder="A text input in a table">
|
|
1217
|
-
</td>
|
|
1218
|
-
<td>
|
|
1219
|
-
<menu>
|
|
1220
|
-
<li><button type="button">Button 3</button></li>
|
|
1221
|
-
<li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
|
|
1222
|
-
</menu>
|
|
1223
|
-
</td>
|
|
1224
|
-
</tr>
|
|
1225
|
-
</tbody>
|
|
1226
|
-
</table>
|
|
1227
|
-
<h3 id="table_form_in_cell">Table with a <code>form</code> in a cell</h3>
|
|
1228
|
-
<table class="semanticForms">
|
|
1229
|
-
<thead>
|
|
1230
|
-
<tr class="title">
|
|
1231
|
-
<th colspan="2">Table Title</th>
|
|
1232
|
-
</tr>
|
|
1233
|
-
<tr>
|
|
1234
|
-
<th>Column 1</th>
|
|
1235
|
-
<th>Column 2</th>
|
|
1236
|
-
</tr>
|
|
1237
|
-
</thead>
|
|
1238
|
-
<tbody>
|
|
1239
|
-
<tr>
|
|
1240
|
-
<td>Some text</td>
|
|
1241
|
-
<td>
|
|
1242
|
-
<form action="/somewhere" class="semanticForms">
|
|
1243
|
-
<menu>
|
|
1244
|
-
<li><button type="submit">Submit button</button></li>
|
|
1245
|
-
</menu>
|
|
1246
|
-
</form>
|
|
1247
|
-
</td>
|
|
1248
|
-
</tr>
|
|
1249
|
-
</tbody>
|
|
1250
|
-
</table>
|
|
1251
|
-
<h3 id="table_unstyled">Unstyled table</h3>
|
|
1252
|
-
<table>
|
|
1253
|
-
<thead>
|
|
1254
|
-
<tr class="title">
|
|
1255
|
-
<th colspan="3">Table Title</th>
|
|
1256
|
-
</tr>
|
|
1257
|
-
<tr>
|
|
1258
|
-
<th>Column 1</th>
|
|
1259
|
-
<th>Column 2</th>
|
|
1260
|
-
<th>Column 3</th>
|
|
1261
|
-
</tr>
|
|
1262
|
-
</thead>
|
|
1263
|
-
<tbody>
|
|
1264
|
-
<tr>
|
|
1265
|
-
<td>1</td>
|
|
1266
|
-
<td>A</td>
|
|
1267
|
-
<td>a</td>
|
|
1268
|
-
</tr>
|
|
1269
|
-
<tr>
|
|
1270
|
-
<td>2</td>
|
|
1271
|
-
<td>B</td>
|
|
1272
|
-
<td>b</td>
|
|
1273
|
-
</tr>
|
|
1274
|
-
<tr>
|
|
1275
|
-
<td>3</td>
|
|
1276
|
-
<td>C</td>
|
|
1277
|
-
<td>c</td>
|
|
1278
|
-
</tr>
|
|
1279
|
-
</tbody>
|
|
1280
|
-
</table>
|
|
1281
|
-
</section>
|
|
1282
|
-
|
|
1283
|
-
<hr>
|
|
1284
|
-
|
|
1285
|
-
<h2 id="low_flow_styling">Low flow (JavaScript disabled) styling</h2>
|
|
1286
|
-
<p>Adding the <code>lowFlow</code> class to the form element removes all JS enhancements.</p>
|
|
1287
|
-
<form action="/somewhere" method="post" class="semanticForms lowFlow">
|
|
1288
|
-
<dl>
|
|
1289
|
-
<div>
|
|
1290
|
-
<dt><label for="low-flow-name">Name</label></dt>
|
|
1291
|
-
<dd><input id="low-flow-name" name="low-flow-name" type="text" placeholder="e.g. John Smith"></dd>
|
|
1292
|
-
</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>
|
|
1293
1324
|
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
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>
|
|
1298
1329
|
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
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>
|
|
1303
1334
|
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
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>
|
|
1311
1342
|
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
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>
|
|
1319
1350
|
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
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>
|
|
1327
1358
|
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
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>
|
|
1336
1368
|
|
|
1337
|
-
<
|
|
1338
|
-
<
|
|
1339
|
-
|
|
1340
|
-
<
|
|
1341
|
-
|
|
1342
|
-
|
|
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>
|
|
1343
1378
|
|
|
1344
|
-
<
|
|
1345
|
-
<
|
|
1346
|
-
|
|
1347
|
-
<
|
|
1348
|
-
|
|
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>
|
|
1349
1386
|
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
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>
|
|
1361
1399
|
|
|
1362
1400
|
<fieldset id="low-flow-inputs" class="colspan-full">
|
|
1363
1401
|
<legend>Inputs</legend>
|
|
@@ -1406,7 +1444,7 @@
|
|
|
1406
1444
|
</div>
|
|
1407
1445
|
|
|
1408
1446
|
<div>
|
|
1409
|
-
<dt><label for="low-flow-label-required-help-icon" data-show-help-icon>Required
|
|
1447
|
+
<dt><label for="low-flow-label-required-help-icon" data-show-help-icon>Required with help icon</label></dt>
|
|
1410
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>
|
|
1411
1449
|
</div>
|
|
1412
1450
|
|
|
@@ -1483,7 +1521,7 @@
|
|
|
1483
1521
|
<div>
|
|
1484
1522
|
<dt><label for="low-flow-input-button-2">Input with button</label></dt>
|
|
1485
1523
|
<dd>
|
|
1486
|
-
<input type="text" id="low-flow-input-button-2" name="low-flow-input-button-2" placeholder="
|
|
1524
|
+
<input type="text" id="low-flow-input-button-2" name="low-flow-input-button-2" placeholder="Has a button" value="John Doe">
|
|
1487
1525
|
<label for="low-flow-input-button-2">Some help text that should span the entire width of the input/button combo.</label>
|
|
1488
1526
|
<input type="submit" value="Submit">
|
|
1489
1527
|
</dd>
|
|
@@ -1498,6 +1536,16 @@
|
|
|
1498
1536
|
<dt><label for="low-flow-range-value">Range value</label></dt>
|
|
1499
1537
|
<dd><input id="low-flow-range-value" name="low-flow-range-value" type="range" class="displayValue"></dd>
|
|
1500
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>
|
|
1501
1549
|
</dl>
|
|
1502
1550
|
</fieldset>
|
|
1503
1551
|
|
|
@@ -1577,6 +1625,74 @@
|
|
|
1577
1625
|
</dl>
|
|
1578
1626
|
</fieldset>
|
|
1579
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 Row 2 Row 3 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 Row 2 Row 3 Row 4 Row 5 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
|
+
|
|
1580
1696
|
<fieldset id="low-flow-checkboxes">
|
|
1581
1697
|
<legend>Checkboxes</legend>
|
|
1582
1698
|
<dl>
|
|
@@ -1663,6 +1779,21 @@
|
|
|
1663
1779
|
<label for="low-flow-additional-text-checkbox">This is some additional text.</label>
|
|
1664
1780
|
</dd>
|
|
1665
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>
|
|
1666
1797
|
</dl>
|
|
1667
1798
|
</fieldset>
|
|
1668
1799
|
|
|
@@ -1743,50 +1874,48 @@
|
|
|
1743
1874
|
</dl>
|
|
1744
1875
|
</fieldset>
|
|
1745
1876
|
|
|
1746
|
-
<
|
|
1747
|
-
<legend>Other inputs</legend>
|
|
1748
|
-
<dl>
|
|
1749
|
-
<div>
|
|
1750
|
-
<dt><label for="low-flow-textarea">Textarea</label></dt>
|
|
1751
|
-
<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>
|
|
1752
|
-
</div>
|
|
1753
|
-
|
|
1754
|
-
<div>
|
|
1755
|
-
<dt><label for="low-flow-prefilledtextarea">Textarea (prefilled)</label></dt>
|
|
1756
|
-
<dd>
|
|
1757
|
-
<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>
|
|
1758
|
-
<label for="low-flow-prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
|
|
1759
|
-
</dd>
|
|
1760
|
-
</div>
|
|
1877
|
+
<h3 id="low-flow-cat_buttons">Buttons</h3>
|
|
1761
1878
|
|
|
1879
|
+
<fieldset id="low-flow-buttons">
|
|
1880
|
+
<legend>Buttons</legend>
|
|
1881
|
+
<dl>
|
|
1762
1882
|
<div>
|
|
1763
|
-
<dt><label for="low-flow-
|
|
1764
|
-
<dd>
|
|
1765
|
-
<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 Row 2 Row 3 Row 4</textarea>
|
|
1766
|
-
<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>
|
|
1767
|
-
</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>
|
|
1768
1885
|
</div>
|
|
1769
1886
|
|
|
1770
1887
|
<div>
|
|
1771
|
-
<dt><label for="low-flow-
|
|
1772
|
-
<dd>
|
|
1773
|
-
<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 Row 2 Row 3 Row 4 Row 5 Row 6</textarea>
|
|
1774
|
-
<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>
|
|
1775
|
-
</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>
|
|
1776
1890
|
</div>
|
|
1777
|
-
|
|
1778
1891
|
<div>
|
|
1779
|
-
<dt><label for="low-flow-
|
|
1780
|
-
<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>
|
|
1781
1894
|
</div>
|
|
1782
|
-
|
|
1783
1895
|
<div>
|
|
1784
|
-
<dt><label for="low-flow-
|
|
1785
|
-
<dd><input type="
|
|
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>
|
|
1786
1898
|
</div>
|
|
1787
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>
|
|
1788
1915
|
</fieldset>
|
|
1789
1916
|
|
|
1917
|
+
<h3 id="low-flow-cat_layout">Layout</h3>
|
|
1918
|
+
|
|
1790
1919
|
<fieldset id="low-flow-alignment_classes">
|
|
1791
1920
|
<legend>Alignment classes</legend>
|
|
1792
1921
|
<dl class="colspan-3">
|
|
@@ -1819,70 +1948,200 @@
|
|
|
1819
1948
|
</dl>
|
|
1820
1949
|
</fieldset>
|
|
1821
1950
|
|
|
1822
|
-
<fieldset id="low-flow-
|
|
1823
|
-
<legend>
|
|
1824
|
-
<dl>
|
|
1825
|
-
<div>
|
|
1826
|
-
<dt><label for="low-flow-
|
|
1827
|
-
<dd><input type="text" name="low-flow-
|
|
1828
|
-
</div>
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
<
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
<
|
|
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>
|
|
1843
2082
|
</div>
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
<
|
|
1847
|
-
<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>
|
|
1848
2086
|
</div>
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
<
|
|
1852
|
-
<dd>
|
|
1853
|
-
<textarea name="low-flow-custom-focus-textarea" id="low-flow-custom-focus-textarea" data-focus-key="!"></textarea>
|
|
1854
|
-
<label for="low-flow-custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
|
|
1855
|
-
</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>
|
|
1856
2090
|
</div>
|
|
2091
|
+
</dl>
|
|
2092
|
+
</fieldset>
|
|
1857
2093
|
|
|
1858
|
-
|
|
1859
|
-
<dt><label for="low-flow-custom-focus-date">Date focus</label></dt>
|
|
1860
|
-
<dd>
|
|
1861
|
-
<input type="date" name="low-flow-custom-focus-date" id="low-flow-custom-focus-date" data-focus-key="D">
|
|
1862
|
-
<label for="low-flow-custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
|
|
1863
|
-
</dd>
|
|
1864
|
-
</div>
|
|
2094
|
+
<h4 id="low-flow-tabs">Tabs</h4>
|
|
1865
2095
|
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
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>
|
|
1870
2110
|
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
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>
|
|
1875
2124
|
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
<
|
|
1881
|
-
<
|
|
1882
|
-
</
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
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>
|
|
1886
2145
|
|
|
1887
2146
|
<fieldset id="low-flow-tables">
|
|
1888
2147
|
<legend>Tables</legend>
|
|
@@ -2117,239 +2376,237 @@
|
|
|
2117
2376
|
</fieldset>
|
|
2118
2377
|
|
|
2119
2378
|
<fieldset id="low-flow-details">
|
|
2120
|
-
<legend>Detail elements</legend>
|
|
2121
|
-
<details>
|
|
2122
|
-
<summary>Detail element</summary>
|
|
2123
|
-
<dl>
|
|
2124
|
-
<div>
|
|
2125
|
-
<dt><label for="low-flow-detail-input-1">Detail input</label></dt>
|
|
2126
|
-
<dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1" value="Some input..."></dd>
|
|
2127
|
-
</div>
|
|
2128
|
-
|
|
2129
|
-
<div>
|
|
2130
|
-
<dt><label for="low-flow-detail-input-2">Detail input</label></dt>
|
|
2131
|
-
<dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
|
|
2132
|
-
</div>
|
|
2133
|
-
|
|
2134
|
-
<div>
|
|
2135
|
-
<dt><label for="low-flow-detail-input-3">Detail input</label></dt>
|
|
2136
|
-
<dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
|
|
2137
|
-
</div>
|
|
2138
|
-
|
|
2139
|
-
<div>
|
|
2140
|
-
<dt><label for="low-flow-detail-input-4">Detail input</label></dt>
|
|
2141
|
-
<dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
|
|
2142
|
-
</div>
|
|
2143
|
-
</dl>
|
|
2144
|
-
</details>
|
|
2145
|
-
|
|
2146
|
-
<details>
|
|
2147
|
-
<summary>Another detail element with a nested fieldset</summary>
|
|
2148
|
-
<dl>
|
|
2149
|
-
<div>
|
|
2150
|
-
<dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
|
|
2151
|
-
<dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
|
|
2152
|
-
</div>
|
|
2153
|
-
</dl>
|
|
2154
|
-
|
|
2155
|
-
<fieldset>
|
|
2156
|
-
<legend>Nested fieldset</legend>
|
|
2157
|
-
|
|
2158
|
-
<dl>
|
|
2159
|
-
<div>
|
|
2160
|
-
<dt><label for="low-flow-another-detail-input-2">Nested fieldset input</label></dt>
|
|
2161
|
-
<dd><input type="text" name="low-flow-another-detail-input-2" id="low-flow-another-detail-input-2"></dd>
|
|
2162
|
-
</div>
|
|
2163
|
-
</dl>
|
|
2164
|
-
</fieldset>
|
|
2165
|
-
</details>
|
|
2166
|
-
</fieldset>
|
|
2167
|
-
|
|
2168
|
-
<fieldset id="low-flow-buttons">
|
|
2169
|
-
<legend>Buttons</legend>
|
|
2170
|
-
<dl>
|
|
2171
|
-
<div>
|
|
2172
|
-
<dt><label for="low-flow-button-input1">Standard button</label></dt>
|
|
2173
|
-
<dd><button id="low-flow-button-input1">Standard button</button></dd>
|
|
2174
|
-
</div>
|
|
2175
|
-
|
|
2176
|
-
<div>
|
|
2177
|
-
<dt><label for="low-flow-button-input2">Input button</label></dt>
|
|
2178
|
-
<dd><input type="button" id="low-flow-button-input2" value="Input button"></dd>
|
|
2179
|
-
</div>
|
|
2180
|
-
<div>
|
|
2181
|
-
<dt><label for="low-flow-button-input3">Submit input</label></dt>
|
|
2182
|
-
<dd><input type="submit" id="low-flow-button-input3" value="Submit input"></dd>
|
|
2183
|
-
</div>
|
|
2184
|
-
<div>
|
|
2185
|
-
<dt><label for="low-flow-button-input4">Reset input</label></dt>
|
|
2186
|
-
<dd><input type="reset" id="low-flow-button-input4" value="Reset input"></dd>
|
|
2187
|
-
</div>
|
|
2188
|
-
</dl>
|
|
2189
|
-
<input type="button" name="button1" value="Non-grouped button">
|
|
2190
|
-
<input type="submit" name="button2" value="Non-grouped submit button">
|
|
2191
|
-
<input type="reset" name="button3" value="Non-grouped reset button">
|
|
2192
|
-
<a href="/" class="button-link">Button link</a>
|
|
2193
|
-
<p>Flexbox button layout pattern with two submit buttons:</p>
|
|
2194
|
-
<menu>
|
|
2195
|
-
<li><button type="submit" name="button1">Button 1</button></li>
|
|
2196
|
-
<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>
|
|
2197
|
-
</menu>
|
|
2198
|
-
<p>Flexbox button layout pattern with three submit buttons:</p>
|
|
2199
|
-
<menu>
|
|
2200
|
-
<li><button type="submit" name="button1">Button 1</button></li>
|
|
2201
|
-
<li><button type="reset" name="button2">Button 2</button></li>
|
|
2202
|
-
<li><input type="submit" name="button3" value="Button 3"></li>
|
|
2203
|
-
</menu>
|
|
2204
|
-
</fieldset>
|
|
2205
|
-
|
|
2206
|
-
<fieldset id="low-flow-colspan_classes">
|
|
2207
|
-
<legend>Colspan classes</legend>
|
|
2208
|
-
<dl>
|
|
2209
|
-
<div class="colspan-1">
|
|
2210
|
-
<dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
|
|
2211
|
-
<dd><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
|
|
2212
|
-
</div>
|
|
2213
|
-
<div class="colspan-1">
|
|
2214
|
-
<dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
|
|
2215
|
-
<dd><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
|
|
2216
|
-
</div>
|
|
2217
|
-
<div class="colspan-2">
|
|
2218
|
-
<dt><label for="low-flow-colspan-2">colspan-2</label></dt>
|
|
2219
|
-
<dd><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
|
|
2220
|
-
</div>
|
|
2221
|
-
<div class="colspan-4">
|
|
2222
|
-
<dt><label for="low-flow-colspan-4">colspan-4</label></dt>
|
|
2223
|
-
<dd><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
|
|
2224
|
-
</div>
|
|
2225
|
-
<div class="colspan-3">
|
|
2226
|
-
<dt><label for="low-flow-colspan-3">colspan-3</label></dt>
|
|
2227
|
-
<dd><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
|
|
2228
|
-
</div>
|
|
2229
|
-
<div class="colspan-1">
|
|
2230
|
-
<dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
|
|
2231
|
-
<dd><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
|
|
2232
|
-
</div>
|
|
2233
|
-
<div class="colspan-full">
|
|
2234
|
-
<dt><label for="low-flow-colspan-full">colspan-full</label></dt>
|
|
2235
|
-
<dd><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
|
|
2236
|
-
</div>
|
|
2237
|
-
<div class="colspan-5">
|
|
2238
|
-
<dt><label for="low-flow-colspan-5">colspan-5</label></dt>
|
|
2239
|
-
<dd><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
|
|
2240
|
-
</div>
|
|
2241
|
-
</dl>
|
|
2242
|
-
<fieldset class="colspan-1">
|
|
2243
|
-
<legend>colspan-1</legend>
|
|
2244
|
-
<dl>
|
|
2245
|
-
<div>
|
|
2246
|
-
<dt><label for="low-flow-colspan-1-a">Input A</label></dt>
|
|
2247
|
-
<dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a" placeholder="Some interesting placeholder text"></dd>
|
|
2248
|
-
</div>
|
|
2249
|
-
<div>
|
|
2250
|
-
<dt><label for="low-flow-colspan-1-b">Input B</label></dt>
|
|
2251
|
-
<dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b" placeholder="Some interesting placeholder text"></dd>
|
|
2252
|
-
</div>
|
|
2253
|
-
<div>
|
|
2254
|
-
<dt><label for="low-flow-colspan-1-c">Input C</label></dt>
|
|
2255
|
-
<dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c" placeholder="Some interesting placeholder text"></dd>
|
|
2256
|
-
</div>
|
|
2257
|
-
<div>
|
|
2258
|
-
<dt><label for="low-flow-colspan-1-d">Input D</label></dt>
|
|
2259
|
-
<dd><input type="text" id="low-flow-colspan-1-d" name="low-flow-colspan-1-d" placeholder="Some interesting placeholder text"></dd>
|
|
2260
|
-
</div>
|
|
2261
|
-
</dl>
|
|
2262
|
-
</fieldset>
|
|
2263
|
-
<fieldset class="colspan-2">
|
|
2264
|
-
<legend>colspan-2</legend>
|
|
2265
|
-
<dl>
|
|
2266
|
-
<div>
|
|
2267
|
-
<dt><label for="low-flow-colspan-2-a">Input A</label></dt>
|
|
2268
|
-
<dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a" placeholder="Some interesting placeholder text"></dd>
|
|
2269
|
-
</div>
|
|
2270
|
-
<div>
|
|
2271
|
-
<dt><label for="low-flow-colspan-2-b">Input B</label></dt>
|
|
2272
|
-
<dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b" placeholder="Some interesting placeholder text"></dd>
|
|
2273
|
-
</div>
|
|
2274
|
-
<div>
|
|
2275
|
-
<dt><label for="low-flow-colspan-2-c">Input C</label></dt>
|
|
2276
|
-
<dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c" placeholder="Some interesting placeholder text"></dd>
|
|
2277
|
-
</div>
|
|
2278
|
-
<div>
|
|
2279
|
-
<dt><label for="low-flow-colspan-2-d">Input D</label></dt>
|
|
2280
|
-
<dd><input type="text" id="low-flow-colspan-2-d" name="low-flow-colspan-2-d" placeholder="Some interesting placeholder text"></dd>
|
|
2281
|
-
</div>
|
|
2282
|
-
</dl>
|
|
2283
|
-
</fieldset>
|
|
2284
|
-
<fieldset>
|
|
2285
|
-
<legend>colspan-3</legend>
|
|
2286
|
-
<dl class="colspan-3">
|
|
2379
|
+
<legend>Detail elements</legend>
|
|
2380
|
+
<details>
|
|
2381
|
+
<summary>Detail element</summary>
|
|
2382
|
+
<dl>
|
|
2287
2383
|
<div>
|
|
2288
|
-
<dt><label for="low-flow-
|
|
2289
|
-
<dd><input type="text"
|
|
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>
|
|
2290
2386
|
</div>
|
|
2387
|
+
|
|
2291
2388
|
<div>
|
|
2292
|
-
<dt><label for="low-flow-
|
|
2293
|
-
<dd><input type="text"
|
|
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>
|
|
2294
2391
|
</div>
|
|
2392
|
+
|
|
2295
2393
|
<div>
|
|
2296
|
-
<dt><label for="low-flow-
|
|
2297
|
-
<dd><input type="text"
|
|
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>
|
|
2298
2396
|
</div>
|
|
2397
|
+
|
|
2299
2398
|
<div>
|
|
2300
|
-
<dt><label for="low-flow-
|
|
2301
|
-
<dd><input type="text"
|
|
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>
|
|
2302
2401
|
</div>
|
|
2303
2402
|
</dl>
|
|
2304
|
-
</
|
|
2305
|
-
|
|
2306
|
-
|
|
2403
|
+
</details>
|
|
2404
|
+
|
|
2405
|
+
<details>
|
|
2406
|
+
<summary>Another detail element with a nested fieldset</summary>
|
|
2307
2407
|
<dl>
|
|
2308
2408
|
<div>
|
|
2309
|
-
<dt><label for="low-flow-
|
|
2310
|
-
<dd><input type="text"
|
|
2311
|
-
</div>
|
|
2312
|
-
<div>
|
|
2313
|
-
<dt><label for="low-flow-colspan-full-b">Input B</label></dt>
|
|
2314
|
-
<dd><input type="text" id="low-flow-colspan-full-b" name="low-flow-colspan-full-b" placeholder="Some interesting placeholder text"></dd>
|
|
2315
|
-
</div>
|
|
2316
|
-
<div>
|
|
2317
|
-
<dt><label for="low-flow-colspan-full-c">Input C</label></dt>
|
|
2318
|
-
<dd><input type="text" id="low-flow-colspan-full-c" name="low-flow-colspan-full-c" placeholder="Some interesting placeholder text"></dd>
|
|
2319
|
-
</div>
|
|
2320
|
-
<div>
|
|
2321
|
-
<dt><label for="low-flow-colspan-full-d">Input D</label></dt>
|
|
2322
|
-
<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>
|
|
2323
2411
|
</div>
|
|
2324
2412
|
</dl>
|
|
2325
|
-
|
|
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>
|
|
2326
2425
|
</fieldset>
|
|
2327
2426
|
|
|
2328
|
-
<
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
<
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
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>
|
|
2348
2492
|
</fieldset>
|
|
2493
|
+
|
|
2349
2494
|
</form>
|
|
2350
2495
|
|
|
2351
2496
|
<hr>
|
|
2352
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
|
+
|
|
2353
2610
|
<h2 id="sample_forms">Sample forms</h2>
|
|
2354
2611
|
|
|
2355
2612
|
<section style="display: flex; flex-wrap: wrap; gap: 20px;">
|