semantic-forms 5.3.1 → 5.3.3
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 +9 -0
- package/dist/semantic-forms.cjs +9 -10
- package/dist/semantic-forms.cjs.map +1 -1
- package/dist/semantic-forms.css +54 -21
- package/dist/semantic-forms.css.map +1 -1
- package/dist/semantic-forms.js +9 -10
- 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 +9 -10
- package/dist/semantic-forms.mjs.map +1 -1
- package/docs/statics/pages/fullDemo.html +831 -186
- package/package.json +4 -4
- package/semanticForms.scss +12 -4
|
@@ -61,12 +61,19 @@
|
|
|
61
61
|
</li>
|
|
62
62
|
<li><a href="#low_flow_styling">Low flow (JavaScript disabled) styling</a>
|
|
63
63
|
<ul>
|
|
64
|
-
<li><a href="#
|
|
65
|
-
<li><a href="#
|
|
66
|
-
<li><a href="#
|
|
67
|
-
<li><a href="#
|
|
68
|
-
<li><a href="#
|
|
69
|
-
<li><a href="#
|
|
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>
|
|
70
77
|
</ul>
|
|
71
78
|
</li>
|
|
72
79
|
<li><a href="#non_form_related_elements">Non-form related HTML elements</a></li>
|
|
@@ -611,6 +618,7 @@
|
|
|
611
618
|
</fieldset>
|
|
612
619
|
|
|
613
620
|
<fieldset id="keyboard_shortcuts">
|
|
621
|
+
<legend>Keyboard shortcuts</legend>
|
|
614
622
|
<dl>
|
|
615
623
|
<div>
|
|
616
624
|
<dt><label for="custom-focus-input">Default Input focus</label></dt>
|
|
@@ -798,63 +806,111 @@
|
|
|
798
806
|
</dl>
|
|
799
807
|
|
|
800
808
|
<fieldset>
|
|
801
|
-
<legend>Fieldset
|
|
809
|
+
<legend>Fieldset 2A</legend>
|
|
802
810
|
|
|
803
811
|
<dl>
|
|
804
812
|
<div>
|
|
805
|
-
<dt><label for="
|
|
813
|
+
<dt><label for="fieldset-2a-input-1">Input 1</label></dt>
|
|
806
814
|
<dd>
|
|
807
|
-
<input type="text" id="
|
|
808
|
-
placeholder="Some interesting placeholder text">
|
|
815
|
+
<input type="text" id="fieldset-2a-input-1" name="fieldset-2a-input-1" placeholder="Some interesting placeholder text">
|
|
809
816
|
</dd>
|
|
810
817
|
</div>
|
|
811
818
|
|
|
812
819
|
<div>
|
|
813
|
-
<dt><label for="
|
|
814
|
-
<dd><input type="text" id="
|
|
815
|
-
placeholder="Some interesting placeholder text"></dd>
|
|
820
|
+
<dt><label for="fieldset-2a-input-2">Input 2</label></dt>
|
|
821
|
+
<dd><input type="text" id="fieldset-2a-input-2" name="fieldset-2a-input-2" placeholder="Some interesting placeholder text"></dd>
|
|
816
822
|
</div>
|
|
817
823
|
|
|
818
824
|
<div>
|
|
819
|
-
<dt><label for="
|
|
825
|
+
<dt><label for="fieldset-2a-select">Select</label></dt>
|
|
820
826
|
<dd>
|
|
821
|
-
<select id="
|
|
827
|
+
<select id="fieldset-2a-select" name="fieldset-2a-select">
|
|
822
828
|
<option value="value">Value</option>
|
|
823
829
|
</select>
|
|
824
830
|
</dd>
|
|
825
831
|
</div>
|
|
826
832
|
</dl>
|
|
827
833
|
|
|
834
|
+
<fieldset>
|
|
835
|
+
<legend>Fieldset 3A</legend>
|
|
836
|
+
|
|
837
|
+
<dl>
|
|
838
|
+
<div>
|
|
839
|
+
<dt><label for="fieldset-3a-input-a">Input A</label></dt>
|
|
840
|
+
<dd><input type="text" id="fieldset-3a-input-a" name="fieldset-3a-input-a" placeholder="Some interesting placeholder text"></dd>
|
|
841
|
+
</div>
|
|
842
|
+
|
|
843
|
+
<div>
|
|
844
|
+
<dt><label for="fieldset-3a-input-b">Input B</label></dt>
|
|
845
|
+
<dd><input type="text" id="fieldset-3a-input-b" name="fieldset-3a-input-b" placeholder="Some interesting placeholder text"></dd>
|
|
846
|
+
</div>
|
|
847
|
+
|
|
848
|
+
<div>
|
|
849
|
+
<dt><label for="fieldset-3a-input-c">Input C</label></dt>
|
|
850
|
+
<dd><input type="text" id="fieldset-3a-input-c" name="fieldset-3a-input-c" placeholder="Some interesting placeholder text"></dd>
|
|
851
|
+
</div>
|
|
852
|
+
|
|
853
|
+
<div>
|
|
854
|
+
<dt><label for="fieldset-3a-input-d">Input D</label></dt>
|
|
855
|
+
<dd><input type="text" id="fieldset-3a-input-d" name="fieldset-3a-input-d" placeholder="Some interesting placeholder text"></dd>
|
|
856
|
+
</div>
|
|
857
|
+
</dl>
|
|
858
|
+
</fieldset>
|
|
859
|
+
|
|
828
860
|
<fieldset>
|
|
829
861
|
<legend>Fieldset 3</legend>
|
|
830
862
|
|
|
831
863
|
<dl>
|
|
832
864
|
<div>
|
|
833
|
-
<dt><label for="
|
|
834
|
-
<dd><input type="text" id="
|
|
835
|
-
placeholder="Some interesting placeholder text"></dd>
|
|
865
|
+
<dt><label for="fieldset-3b-input-a">Input A</label></dt>
|
|
866
|
+
<dd><input type="text" id="fieldset-3b-input-a" name="fieldset-3b-input-a" placeholder="Some interesting placeholder text"></dd>
|
|
836
867
|
</div>
|
|
837
868
|
|
|
838
869
|
<div>
|
|
839
|
-
<dt><label for="
|
|
840
|
-
<dd><input type="text" id="
|
|
841
|
-
placeholder="Some interesting placeholder text"></dd>
|
|
870
|
+
<dt><label for="fieldset-3b-input-b">Input B</label></dt>
|
|
871
|
+
<dd><input type="text" id="fieldset-3b-input-b" name="fieldset-3b-input-b" placeholder="Some interesting placeholder text"></dd>
|
|
842
872
|
</div>
|
|
843
873
|
|
|
844
874
|
<div>
|
|
845
|
-
<dt><label for="
|
|
846
|
-
<dd><input type="text" id="
|
|
847
|
-
placeholder="Some interesting placeholder text"></dd>
|
|
875
|
+
<dt><label for="fieldset-3b-input-c">Input C</label></dt>
|
|
876
|
+
<dd><input type="text" id="fieldset-3b-input-c" name="fieldset-3b-input-c" placeholder="Some interesting placeholder text"></dd>
|
|
848
877
|
</div>
|
|
849
878
|
|
|
850
879
|
<div>
|
|
851
|
-
<dt><label for="
|
|
852
|
-
<dd><input type="text" id="
|
|
853
|
-
placeholder="Some interesting placeholder text"></dd>
|
|
880
|
+
<dt><label for="fieldset-3b-input-d">Input D</label></dt>
|
|
881
|
+
<dd><input type="text" id="fieldset-3b-input-d" name="fieldset-3b-input-d" placeholder="Some interesting placeholder text"></dd>
|
|
854
882
|
</div>
|
|
855
883
|
</dl>
|
|
856
884
|
</fieldset>
|
|
857
885
|
</fieldset>
|
|
886
|
+
|
|
887
|
+
<fieldset>
|
|
888
|
+
<legend>Fieldset 2B</legend>
|
|
889
|
+
<dl>
|
|
890
|
+
<div>
|
|
891
|
+
<dt><label for="fieldset-2b-input-1">Input 1</label></dt>
|
|
892
|
+
<dd>
|
|
893
|
+
<input type="text" id="fieldset-2b-input-1" name="fieldset-2b-input-1"
|
|
894
|
+
placeholder="Some interesting placeholder text">
|
|
895
|
+
</dd>
|
|
896
|
+
</div>
|
|
897
|
+
|
|
898
|
+
<div>
|
|
899
|
+
<dt><label for="fieldset-2b-input-2">Input 2</label></dt>
|
|
900
|
+
<dd><input type="text" id="fieldset-2b-input-2" name="fieldset-2b-input-2"
|
|
901
|
+
placeholder="Some interesting placeholder text"></dd>
|
|
902
|
+
</div>
|
|
903
|
+
|
|
904
|
+
<div>
|
|
905
|
+
<dt><label for="fieldset-2b-select">Select</label></dt>
|
|
906
|
+
<dd>
|
|
907
|
+
<select id="fieldset-2b-select" name="fieldset-2b-select">
|
|
908
|
+
<option value="value">Value</option>
|
|
909
|
+
</select>
|
|
910
|
+
</dd>
|
|
911
|
+
</div>
|
|
912
|
+
</dl>
|
|
913
|
+
</fieldset>
|
|
858
914
|
</fieldset>
|
|
859
915
|
</fieldset>
|
|
860
916
|
|
|
@@ -1230,6 +1286,30 @@
|
|
|
1230
1286
|
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
1231
1287
|
</dd>
|
|
1232
1288
|
</div>
|
|
1289
|
+
|
|
1290
|
+
<div>
|
|
1291
|
+
<dt><label for="low-flow-dontshow-password">Don't show password field</label></dt>
|
|
1292
|
+
<dd>
|
|
1293
|
+
<input id="low-flow-dontshow-password" name="low-flow-dontshow-password" type="password" minlength="8" required data-no-reveal>
|
|
1294
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
1295
|
+
</dd>
|
|
1296
|
+
</div>
|
|
1297
|
+
|
|
1298
|
+
<div>
|
|
1299
|
+
<dt><label for="low-flow-customize-password">Customize clear/show buttons</label></dt>
|
|
1300
|
+
<dd>
|
|
1301
|
+
<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!">
|
|
1302
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
1303
|
+
</dd>
|
|
1304
|
+
</div>
|
|
1305
|
+
|
|
1306
|
+
<div>
|
|
1307
|
+
<dt><label for="low-flow-input-button-1">Input with button</label></dt>
|
|
1308
|
+
<dd>
|
|
1309
|
+
<input type="text" id="low-flow-input-button-1" name="low-flow-input-button-1" placeholder="This input has a button">
|
|
1310
|
+
<button type="button">Go</button>
|
|
1311
|
+
</dd>
|
|
1312
|
+
</div>
|
|
1233
1313
|
</dl>
|
|
1234
1314
|
|
|
1235
1315
|
<dl>
|
|
@@ -1239,10 +1319,26 @@
|
|
|
1239
1319
|
</div>
|
|
1240
1320
|
</dl>
|
|
1241
1321
|
|
|
1242
|
-
<
|
|
1243
|
-
<
|
|
1322
|
+
<dl class="colspan-1">
|
|
1323
|
+
<div>
|
|
1324
|
+
<dt><label for="low-flow-max-content-input"><code>data-max-content</code> text input</label></dt>
|
|
1325
|
+
<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>
|
|
1326
|
+
</div>
|
|
1327
|
+
|
|
1328
|
+
<div>
|
|
1329
|
+
<dt><label for="low-flow-max-content-select"><code>data-max-content</code> select</label></dt>
|
|
1330
|
+
<dd>
|
|
1331
|
+
<select name="low-flow-max-content-select" id="low-flow-max-content-select" data-max-content>
|
|
1332
|
+
<option>Short</option>
|
|
1333
|
+
<option>Some really really really really really really really really long text</option>
|
|
1334
|
+
<option>This is some medium text</option>
|
|
1335
|
+
</select>
|
|
1336
|
+
</dd>
|
|
1337
|
+
</div>
|
|
1338
|
+
</dl>
|
|
1244
1339
|
|
|
1245
|
-
|
|
1340
|
+
<fieldset id="low-flow-inputs" class="colspan-full">
|
|
1341
|
+
<legend>Inputs</legend>
|
|
1246
1342
|
<dl>
|
|
1247
1343
|
<div>
|
|
1248
1344
|
<dt><label for="low-flow-email">Email field</label></dt>
|
|
@@ -1260,8 +1356,13 @@
|
|
|
1260
1356
|
</div>
|
|
1261
1357
|
|
|
1262
1358
|
<div>
|
|
1263
|
-
<dt><label for="low-flow-search">Search field</label></dt>
|
|
1264
|
-
<dd><input id="low-flow-search" name="low-flow-search" type="search" placeholder="e.g. cats"></dd>
|
|
1359
|
+
<dt><label for="low-flow-search-field">Search field</label></dt>
|
|
1360
|
+
<dd><input id="low-flow-search-field" name="low-flow-search-field" type="search" placeholder="e.g. cats"></dd>
|
|
1361
|
+
</div>
|
|
1362
|
+
|
|
1363
|
+
<div>
|
|
1364
|
+
<dt><label for="low-flow-search-no-float">No float label</label></dt>
|
|
1365
|
+
<dd><input id="low-flow-search-no-float" name="low-flow-search-no-float" type="search" placeholder="e.g. cats" class="no-float-label"></dd>
|
|
1265
1366
|
</div>
|
|
1266
1367
|
|
|
1267
1368
|
<div>
|
|
@@ -1277,9 +1378,19 @@
|
|
|
1277
1378
|
</dd>
|
|
1278
1379
|
</div>
|
|
1279
1380
|
|
|
1381
|
+
<div>
|
|
1382
|
+
<dt><label for="low-flow-label-help-icon" data-show-help-icon>Input with help icon</label></dt>
|
|
1383
|
+
<dd><input id="low-flow-label-help-icon" name="low-flow-label-help-icon" type="text" title="Some more help text." placeholder="Hover over the icon"></dd>
|
|
1384
|
+
</div>
|
|
1385
|
+
|
|
1386
|
+
<div>
|
|
1387
|
+
<dt><label for="low-flow-label-required-help-icon" data-show-help-icon>Required input with help icon</label></dt>
|
|
1388
|
+
<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>
|
|
1389
|
+
</div>
|
|
1390
|
+
|
|
1280
1391
|
<div>
|
|
1281
1392
|
<dt><label for="low-flow-invalid-field">Invalid field</label></dt>
|
|
1282
|
-
<dd><input id="low-flow-invalid-field" class="invalid" name="low-flow-invalid-
|
|
1393
|
+
<dd><input id="low-flow-invalid-field" class="invalid" name="low-flow-invalid-field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
|
|
1283
1394
|
</div>
|
|
1284
1395
|
|
|
1285
1396
|
<div>
|
|
@@ -1289,50 +1400,27 @@
|
|
|
1289
1400
|
|
|
1290
1401
|
<div>
|
|
1291
1402
|
<dt><label for="low-flow-required-field">Required field</label></dt>
|
|
1292
|
-
<dd><input id="low-flow-required-field" name="low-flow-required-field" type="
|
|
1403
|
+
<dd><input id="low-flow-required-field" name="low-flow-required-field" type="text" required></dd>
|
|
1293
1404
|
</div>
|
|
1294
1405
|
|
|
1295
1406
|
<div>
|
|
1296
|
-
<dt><label for="low-flow-
|
|
1297
|
-
<dd>
|
|
1298
|
-
<select id="low-flow-selectbox" name="low-flow-selectbox">
|
|
1299
|
-
<option value="1">Item one</option>
|
|
1300
|
-
<option value="2">Item two</option>
|
|
1301
|
-
<option value="3">Item three</option>
|
|
1302
|
-
<option value="4">Item four</option>
|
|
1303
|
-
<option value="5">Item five</option>
|
|
1304
|
-
<option value="6">Item six</option>
|
|
1305
|
-
<option value="7">Item seven</option>
|
|
1306
|
-
</select>
|
|
1307
|
-
<label for="low-flow-selectbox">Some help text regarding the select box</label>
|
|
1308
|
-
</dd>
|
|
1407
|
+
<dt><label for="low-flow-required-field-no-asterisk" data-no-asterisk>Required field (no asterisk)</label></dt>
|
|
1408
|
+
<dd><input id="low-flow-required-field-no-asterisk" name="low-flow-required-field-no-asterisk" type="text" required></dd>
|
|
1309
1409
|
</div>
|
|
1310
1410
|
|
|
1311
1411
|
<div>
|
|
1312
|
-
<dt><label
|
|
1313
|
-
<dd
|
|
1314
|
-
<ul id="low-flow-checkboxes">
|
|
1315
|
-
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_one"> <label for="low-flow-checkboxes_one">One</label></li>
|
|
1316
|
-
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_two"> <label for="low-flow-checkboxes_two">Two</label></li>
|
|
1317
|
-
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_three"> <label for="low-flow-checkboxes_three">Three</label></li>
|
|
1318
|
-
</ul>
|
|
1319
|
-
</dd>
|
|
1412
|
+
<dt><label for="low-flow-required-field-custom-title" data-asterisk-text="This is a custom title.">Required field (custom title)</label></dt>
|
|
1413
|
+
<dd><input id="low-flow-required-field-custom-title" name="low-flow-required-field-custom-title" type="text" required></dd>
|
|
1320
1414
|
</div>
|
|
1321
1415
|
|
|
1322
1416
|
<div>
|
|
1323
|
-
<dt><label for="low-flow-
|
|
1324
|
-
<dd><input
|
|
1417
|
+
<dt><label for="low-flow-disabled-input">Disabled input</label></dt>
|
|
1418
|
+
<dd><input id="low-flow-disabled-input" name="low-flow-disabled-input" type="text" placeholder="e.g. foo" disabled></dd>
|
|
1325
1419
|
</div>
|
|
1326
1420
|
|
|
1327
1421
|
<div>
|
|
1328
|
-
<dt><label
|
|
1329
|
-
<dd
|
|
1330
|
-
<ul id="low-flow-radios">
|
|
1331
|
-
<li><input type="radio" name="low-flow-radios" id="low-flow-r_one"> <label for="low-flow-r_one">One</label></li>
|
|
1332
|
-
<li><input type="radio" name="low-flow-radios" id="low-flow-r_two"> <label for="low-flow-r_two">Two</label></li>
|
|
1333
|
-
<li><input type="radio" name="low-flow-radios" id="low-flow-r_three"> <label for="low-flow-r_three">Three</label></li>
|
|
1334
|
-
</ul>
|
|
1335
|
-
</dd>
|
|
1422
|
+
<dt><label for="low-flow-disabled-input-value">Disabled input w/ value</label></dt>
|
|
1423
|
+
<dd><input id="low-flow-disabled-input-value" name="low-flow-disabled-input-value" type="text" placeholder="e.g. foo" value="some value" disabled></dd>
|
|
1336
1424
|
</div>
|
|
1337
1425
|
|
|
1338
1426
|
<div>
|
|
@@ -1370,99 +1458,650 @@
|
|
|
1370
1458
|
<dd><input id="low-flow-file" name="low-flow-file" type="file"></dd>
|
|
1371
1459
|
</div>
|
|
1372
1460
|
|
|
1461
|
+
<div>
|
|
1462
|
+
<dt><label for="low-flow-input-button-2">Input with button</label></dt>
|
|
1463
|
+
<dd>
|
|
1464
|
+
<input type="text" id="low-flow-input-button-2" name="low-flow-input-button-2" placeholder="This input has a button" value="John Doe">
|
|
1465
|
+
<label for="low-flow-input-button-2">Some help text that should span the entire width of the input/button combo.</label>
|
|
1466
|
+
<input type="submit" value="Submit">
|
|
1467
|
+
</dd>
|
|
1468
|
+
</div>
|
|
1469
|
+
|
|
1373
1470
|
<div>
|
|
1374
1471
|
<dt><label for="low-flow-range">Range field</label></dt>
|
|
1375
1472
|
<dd><input id="low-flow-range" name="low-flow-range" type="range"></dd>
|
|
1376
1473
|
</div>
|
|
1377
1474
|
|
|
1378
1475
|
<div>
|
|
1379
|
-
<dt><label for="low-flow-
|
|
1380
|
-
<dd><
|
|
1476
|
+
<dt><label for="low-flow-range-value">Range value</label></dt>
|
|
1477
|
+
<dd><input id="low-flow-range-value" name="low-flow-range-value" type="range" class="displayValue"></dd>
|
|
1381
1478
|
</div>
|
|
1479
|
+
</dl>
|
|
1480
|
+
</fieldset>
|
|
1382
1481
|
|
|
1482
|
+
<fieldset id="low-flow-selects">
|
|
1483
|
+
<legend>Selects</legend>
|
|
1484
|
+
<dl>
|
|
1383
1485
|
<div>
|
|
1384
|
-
<dt><label for="low-flow-
|
|
1486
|
+
<dt><label for="low-flow-selectbox">Select box</label></dt>
|
|
1385
1487
|
<dd>
|
|
1386
|
-
<
|
|
1387
|
-
|
|
1488
|
+
<select id="low-flow-selectbox" name="low-flow-selectbox">
|
|
1489
|
+
<option value="1">Item one</option>
|
|
1490
|
+
<option value="2">Item two</option>
|
|
1491
|
+
<option value="3">Item three</option>
|
|
1492
|
+
<option value="4">Item four</option>
|
|
1493
|
+
<option value="5">Item five</option>
|
|
1494
|
+
<option value="6">Item six</option>
|
|
1495
|
+
<option value="7">Item seven</option>
|
|
1496
|
+
</select>
|
|
1497
|
+
<label for="low-flow-selectbox">Some help text regarding the select box</label>
|
|
1388
1498
|
</dd>
|
|
1389
1499
|
</div>
|
|
1390
|
-
</dl>
|
|
1391
1500
|
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1501
|
+
<div>
|
|
1502
|
+
<dt><label for="low-flow-required-selectbox">Required select box</label></dt>
|
|
1503
|
+
<dd>
|
|
1504
|
+
<select id="low-flow-required-selectbox" name="low-flow-required-selectbox" required>
|
|
1505
|
+
<option value="">Make a selection</option>
|
|
1506
|
+
<option value="1">Item one</option>
|
|
1507
|
+
<option value="2">Item two</option>
|
|
1508
|
+
<option value="3">Item three</option>
|
|
1509
|
+
<option value="4">Item four</option>
|
|
1510
|
+
<option value="5">Item five</option>
|
|
1511
|
+
<option value="6">Item six</option>
|
|
1512
|
+
<option value="7">Item seven</option>
|
|
1513
|
+
</select>
|
|
1514
|
+
</dd>
|
|
1515
|
+
</div>
|
|
1395
1516
|
|
|
1396
|
-
<
|
|
1397
|
-
<
|
|
1398
|
-
|
|
1399
|
-
<
|
|
1400
|
-
<
|
|
1401
|
-
<
|
|
1402
|
-
|
|
1403
|
-
|
|
1517
|
+
<div>
|
|
1518
|
+
<dt><label for="low-flow-required-selectbox-hide" data-no-asterisk>Required select box (no asterisk)</label></dt>
|
|
1519
|
+
<dd>
|
|
1520
|
+
<select id="low-flow-required-selectbox-hide" name="low-flow-required-selectbox-hide" required>
|
|
1521
|
+
<option value="">Make a selection</option>
|
|
1522
|
+
<option value="1">Item one</option>
|
|
1523
|
+
<option value="2">Item two</option>
|
|
1524
|
+
<option value="3">Item three</option>
|
|
1525
|
+
<option value="4">Item four</option>
|
|
1526
|
+
<option value="5">Item five</option>
|
|
1527
|
+
<option value="6">Item six</option>
|
|
1528
|
+
<option value="7">Item seven</option>
|
|
1529
|
+
</select>
|
|
1530
|
+
</dd>
|
|
1531
|
+
</div>
|
|
1404
1532
|
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
<
|
|
1410
|
-
|
|
1411
|
-
|
|
1533
|
+
<div>
|
|
1534
|
+
<dt><label for="low-flow-select-button">Select with button</label></dt>
|
|
1535
|
+
<dd>
|
|
1536
|
+
<select id="low-flow-select-button" name="low-flow-select-button">
|
|
1537
|
+
<option value="1">Option 1</option>
|
|
1538
|
+
<option value="2">Option 2</option>
|
|
1539
|
+
<option value="3">Option 3</option>
|
|
1540
|
+
</select>
|
|
1541
|
+
<button type="submit">Pick</button>
|
|
1542
|
+
</dd>
|
|
1543
|
+
</div>
|
|
1412
1544
|
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
</
|
|
1419
|
-
|
|
1545
|
+
<div>
|
|
1546
|
+
<dt><label for="low-flow-multiple-select">Multiple select</label></dt>
|
|
1547
|
+
<dd><select name="low-flow-multiple-select" id="low-flow-multiple-select" multiple>
|
|
1548
|
+
<option value="1">Option 1</option>
|
|
1549
|
+
<option value="2" selected>Option 2</option>
|
|
1550
|
+
<option value="3" selected>Option 3</option>
|
|
1551
|
+
<option value="4">Option 4</option>
|
|
1552
|
+
<option value="5">Option 5</option>
|
|
1553
|
+
</select></dd>
|
|
1554
|
+
</div>
|
|
1555
|
+
</dl>
|
|
1556
|
+
</fieldset>
|
|
1420
1557
|
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1558
|
+
<fieldset id="low-flow-checkboxes">
|
|
1559
|
+
<legend>Checkboxes</legend>
|
|
1560
|
+
<dl>
|
|
1561
|
+
<div>
|
|
1562
|
+
<dt><label data-for="low-flow-basic_checkboxes">Checkboxes</label></dt>
|
|
1563
|
+
<dd class="checkboxes">
|
|
1564
|
+
<ul id="low-flow-basic_checkboxes">
|
|
1565
|
+
<li><input type="checkbox" name="some_field_name" id="low-flow-checkboxes_one" checked> <label for="low-flow-checkboxes_one">One</label></li>
|
|
1566
|
+
<li><input type="checkbox" name="some_field_name" id="low-flow-checkboxes_two"> <label for="low-flow-checkboxes_two">Two</label></li>
|
|
1567
|
+
<li><input type="checkbox" name="some_field_name" id="low-flow-checkboxes_three"> <label for="low-flow-checkboxes_three">Three</label></li>
|
|
1568
|
+
</ul>
|
|
1569
|
+
</dd>
|
|
1570
|
+
</div>
|
|
1430
1571
|
|
|
1431
|
-
<
|
|
1432
|
-
<
|
|
1572
|
+
<div>
|
|
1573
|
+
<dt><label data-for="low-flow-required-checkboxes" data-asterisk-text="Custom checkbox title text.">Required checkboxes</label></dt>
|
|
1574
|
+
<dd class="checkboxes">
|
|
1575
|
+
<ul id="low-flow-required-checkboxes">
|
|
1576
|
+
<li>
|
|
1577
|
+
<input type="checkbox" name="required-field" id="low-flow-required-checkboxes_one" checked required> <label for="low-flow-required-checkboxes_one">One</label>
|
|
1578
|
+
</li>
|
|
1579
|
+
<li>
|
|
1580
|
+
<input type="checkbox" name="required-field" id="low-flow-required-checkboxes_two"> <label for="low-flow-required-checkboxes_two">Two</label>
|
|
1581
|
+
</li>
|
|
1582
|
+
<li>
|
|
1583
|
+
<input type="checkbox" name="required-field" id="low-flow-required-checkboxes_three" checked> <label for="low-flow-required-checkboxes_three">Three</label>
|
|
1584
|
+
</li>
|
|
1585
|
+
</ul>
|
|
1586
|
+
</dd>
|
|
1587
|
+
</div>
|
|
1433
1588
|
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1589
|
+
<div>
|
|
1590
|
+
<dt><label data-for="low-flow-help-text-checkboxes" title="Here is some helpful text." data-show-help-icon>Checkboxes w/ help text</label></dt>
|
|
1591
|
+
<dd class="checkboxes">
|
|
1592
|
+
<ul id="low-flow-help-text-checkboxes">
|
|
1593
|
+
<li><input type="checkbox" name="some_field_name" id="low-flow-help-text-checkboxes_one" checked> <label for="low-flow-help-text-checkboxes_one">One</label></li>
|
|
1594
|
+
<li><input type="checkbox" name="some_field_name" id="low-flow-help-text-checkboxes_two"> <label for="low-flow-help-text-checkboxes_two">Two</label></li>
|
|
1595
|
+
<li><input type="checkbox" name="some_field_name" id="low-flow-help-text-checkboxes_three"> <label for="low-flow-help-text-checkboxes_three">Three</label></li>
|
|
1596
|
+
</ul>
|
|
1597
|
+
</dd>
|
|
1598
|
+
</div>
|
|
1439
1599
|
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1600
|
+
<div>
|
|
1601
|
+
<dt><label data-for="low-flow-extra-text-checkboxes">Checkboxes w/ additional text</label></dt>
|
|
1602
|
+
<dd class="checkboxes">
|
|
1603
|
+
<ul id="low-flow-extra-text-checkboxes">
|
|
1604
|
+
<li>
|
|
1605
|
+
<input type="checkbox" name="extra-text-field" id="low-flow-extra-text-checkboxes_one" checked>
|
|
1606
|
+
<label for="low-flow-extra-text-checkboxes_one">One</label>
|
|
1607
|
+
</li>
|
|
1608
|
+
<li>
|
|
1609
|
+
<input type="checkbox" name="extra-text-field" id="low-flow-extra-text-checkboxes_two">
|
|
1610
|
+
<label for="low-flow-extra-text-checkboxes_two">Two</label>
|
|
1611
|
+
</li>
|
|
1612
|
+
<li>
|
|
1613
|
+
<input type="checkbox" name="extra-text-field" id="low-flow-extra-text-checkboxes_three" checked>
|
|
1614
|
+
<label for="low-flow-extra-text-checkboxes_three">Three</label></li>
|
|
1615
|
+
</ul>
|
|
1616
|
+
<label data-for="low-flow-extra-text-checkboxes">This is some additional text.</label>
|
|
1617
|
+
</dd>
|
|
1618
|
+
</div>
|
|
1619
|
+
</dl>
|
|
1446
1620
|
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
</
|
|
1457
|
-
|
|
1621
|
+
<dl>
|
|
1622
|
+
<div>
|
|
1623
|
+
<dt><label for="low-flow-checkbox">Checkbox</label></dt>
|
|
1624
|
+
<dd><input name="low-flow-checkbox-field" id="low-flow-checkbox" type="checkbox"></dd>
|
|
1625
|
+
</div>
|
|
1626
|
+
|
|
1627
|
+
<div>
|
|
1628
|
+
<dt><label for="low-flow-required-checkbox">Checkbox (required)</label></dt>
|
|
1629
|
+
<dd><input type="checkbox" name="low-flow-required-checkbox-field" id="low-flow-required-checkbox" required></dd>
|
|
1630
|
+
</div>
|
|
1631
|
+
|
|
1632
|
+
<div>
|
|
1633
|
+
<dt><label for="low-flow-help-icon-checkbox" title="Single checkboxes can have help text too!" data-show-help-icon>Checkbox w/ help text</label></dt>
|
|
1634
|
+
<dd><input type="checkbox" name="low-flow-help-icon-checkbox-field" id="low-flow-help-icon-checkbox"></dd>
|
|
1635
|
+
</div>
|
|
1636
|
+
|
|
1637
|
+
<div>
|
|
1638
|
+
<dt><label for="low-flow-additional-text-checkbox">Checkbox w/ additional text</label></dt>
|
|
1639
|
+
<dd>
|
|
1640
|
+
<input type="checkbox" name="low-flow-extra-text-checkbox-field" id="low-flow-additional-text-checkbox">
|
|
1641
|
+
<label for="low-flow-additional-text-checkbox">This is some additional text.</label>
|
|
1642
|
+
</dd>
|
|
1643
|
+
</div>
|
|
1644
|
+
</dl>
|
|
1645
|
+
</fieldset>
|
|
1646
|
+
|
|
1647
|
+
<fieldset id="low-flow-radios">
|
|
1648
|
+
<legend>Radios</legend>
|
|
1649
|
+
<dl>
|
|
1650
|
+
<div>
|
|
1651
|
+
<dt><label data-for="low-flow-basic_radios">Radios</label></dt>
|
|
1652
|
+
<dd class="radios">
|
|
1653
|
+
<ul id="low-flow-basic_radios">
|
|
1654
|
+
<li><input type="radio" name="radios" id="low-flow-r_one"> <label for="low-flow-r_one">One</label></li>
|
|
1655
|
+
<li><input type="radio" name="radios" id="low-flow-r_two"> <label for="low-flow-r_two">Two</label></li>
|
|
1656
|
+
<li><input type="radio" name="radios" id="low-flow-r_three"> <label for="low-flow-r_three">Three</label></li>
|
|
1657
|
+
</ul>
|
|
1658
|
+
</dd>
|
|
1659
|
+
</div>
|
|
1660
|
+
<div>
|
|
1661
|
+
<dt><label data-for="low-flow-required-radios" data-asterisk-text="Custom radio title text.">Required radios</label></dt>
|
|
1662
|
+
<dd class="radios">
|
|
1663
|
+
<ul id="low-flow-required-radios">
|
|
1664
|
+
<li><input type="radio" name="required-field" id="low-flow-required-radios_one" checked required> <label for="low-flow-required-radios_one">One</label></li>
|
|
1665
|
+
<li><input type="radio" name="required-field" id="low-flow-required-radios_two"> <label for="low-flow-required-radios_two">Two</label></li>
|
|
1666
|
+
<li><input type="radio" name="required-field" id="low-flow-required-radios_three" checked> <label for="low-flow-required-radios_three">Three</label></li>
|
|
1667
|
+
</ul>
|
|
1668
|
+
</dd>
|
|
1669
|
+
</div>
|
|
1670
|
+
<div>
|
|
1671
|
+
<dt><label data-for="low-flow-help-text-radios" title="Here is some helpful text." data-show-help-icon>Radios w/ help text</label></dt>
|
|
1672
|
+
<dd class="radios">
|
|
1673
|
+
<ul id="low-flow-help-text-radios">
|
|
1674
|
+
<li><input type="radio" name="some_field_name" id="low-flow-help-text-radios_one" checked> <label for="low-flow-help-text-radios_one">One</label></li>
|
|
1675
|
+
<li><input type="radio" name="some_field_name" id="low-flow-help-text-radios_two"> <label for="low-flow-help-text-radios_two">Two</label></li>
|
|
1676
|
+
<li><input type="radio" name="some_field_name" id="low-flow-help-text-radios_three"> <label for="low-flow-help-text-radios_three">Three</label></li>
|
|
1677
|
+
</ul>
|
|
1678
|
+
</dd>
|
|
1679
|
+
</div>
|
|
1680
|
+
<div>
|
|
1681
|
+
<dt><label data-for="low-flow-radios-with-additional-text">Radios w/ additional text</label></dt>
|
|
1682
|
+
<dd class="radios">
|
|
1683
|
+
<ul id="low-flow-radios-with-additional-text">
|
|
1684
|
+
<li>
|
|
1685
|
+
<input type="radio" name="low-flow-radios-with-additional-text" id="low-flow-a_r_one">
|
|
1686
|
+
<label for="low-flow-a_r_one">One</label>
|
|
1687
|
+
</li>
|
|
1688
|
+
<li>
|
|
1689
|
+
<input type="radio" name="low-flow-radios-with-additional-text" id="low-flow-a_r_two">
|
|
1690
|
+
<label for="low-flow-a_r_two">Two</label>
|
|
1691
|
+
</li>
|
|
1692
|
+
<li>
|
|
1693
|
+
<input type="radio" name="low-flow-radios-with-additional-text" id="low-flow-a_r_three">
|
|
1694
|
+
<label for="low-flow-a_r_three">Three</label>
|
|
1695
|
+
</li>
|
|
1696
|
+
</ul>
|
|
1697
|
+
<label data-for="low-flow-radios-with-additional-text">This is some additional text.</label>
|
|
1698
|
+
</dd>
|
|
1699
|
+
</div>
|
|
1700
|
+
</dl>
|
|
1701
|
+
<dl>
|
|
1702
|
+
<div>
|
|
1703
|
+
<dt><label for="low-flow-radio">Radio</label></dt>
|
|
1704
|
+
<dd><input type="radio" name="low-flow-radio" id="low-flow-radio"></dd>
|
|
1705
|
+
</div>
|
|
1706
|
+
<div>
|
|
1707
|
+
<dt><label for="low-flow-required-radio">Radio (required)</label></dt>
|
|
1708
|
+
<dd><input type="radio" name="low-flow-required-radio" id="low-flow-required-radio" required></dd>
|
|
1709
|
+
</div>
|
|
1710
|
+
<div>
|
|
1711
|
+
<dt><label for="low-flow-help-icon-radio" title="Single radios can have help text too!" data-show-help-icon>Radio w/ help text</label></dt>
|
|
1712
|
+
<dd><input type="radio" name="low-flow-help-icon-radio-field" id="low-flow-help-icon-radio"></dd>
|
|
1713
|
+
</div>
|
|
1714
|
+
<div>
|
|
1715
|
+
<dt><label for="low-flow-extra-text-radio">Radio w/ additional text</label></dt>
|
|
1716
|
+
<dd>
|
|
1717
|
+
<input type="radio" name="low-flow-extra-text-radio" id="low-flow-extra-text-radio">
|
|
1718
|
+
<label for="low-flow-extra-text-radio">This is some additional text.</label>
|
|
1719
|
+
</dd>
|
|
1720
|
+
</div>
|
|
1721
|
+
</dl>
|
|
1722
|
+
</fieldset>
|
|
1723
|
+
|
|
1724
|
+
<fieldset id="low-flow-other">
|
|
1725
|
+
<legend>Other inputs</legend>
|
|
1726
|
+
<dl>
|
|
1727
|
+
<div>
|
|
1728
|
+
<dt><label for="low-flow-textarea">Textarea</label></dt>
|
|
1729
|
+
<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>
|
|
1730
|
+
</div>
|
|
1731
|
+
|
|
1732
|
+
<div>
|
|
1733
|
+
<dt><label for="low-flow-prefilledtextarea">Textarea (prefilled)</label></dt>
|
|
1734
|
+
<dd>
|
|
1735
|
+
<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>
|
|
1736
|
+
<label for="low-flow-prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
|
|
1737
|
+
</dd>
|
|
1738
|
+
</div>
|
|
1739
|
+
|
|
1740
|
+
<div>
|
|
1741
|
+
<dt><label for="low-flow-textarea-max-rows">Textarea</label></dt>
|
|
1742
|
+
<dd>
|
|
1743
|
+
<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>
|
|
1744
|
+
<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>
|
|
1745
|
+
</dd>
|
|
1746
|
+
</div>
|
|
1747
|
+
|
|
1748
|
+
<div>
|
|
1749
|
+
<dt><label for="low-flow-disable-autosize-textarea">Disabled autosize textarea</label></dt>
|
|
1750
|
+
<dd>
|
|
1751
|
+
<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>
|
|
1752
|
+
<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>
|
|
1753
|
+
</dd>
|
|
1754
|
+
</div>
|
|
1755
|
+
|
|
1756
|
+
<div>
|
|
1757
|
+
<dt><label for="low-flow-auto-grow-textarea">Auto-grow textarea</label></dt>
|
|
1758
|
+
<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>
|
|
1759
|
+
</div>
|
|
1760
|
+
|
|
1761
|
+
<div>
|
|
1762
|
+
<dt><label for="low-flow-auto-grow-input">Auto-grow input</label></dt>
|
|
1763
|
+
<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>
|
|
1764
|
+
</div>
|
|
1765
|
+
</dl>
|
|
1766
|
+
</fieldset>
|
|
1767
|
+
|
|
1768
|
+
<fieldset id="low-flow-alignment_classes">
|
|
1769
|
+
<legend>Alignment classes</legend>
|
|
1770
|
+
<dl class="colspan-3">
|
|
1771
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
1772
|
+
<dt><label for="low-flow-align-start-input"><code>align-start</code></label></dt>
|
|
1773
|
+
<dd class="align-start"><input type="text" name="low-flow-align-start-input" id="low-flow-align-start-input"></dd>
|
|
1774
|
+
</div>
|
|
1775
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
1776
|
+
<dt><label for="low-flow-align-center-input"><code>align-center</code></label></dt>
|
|
1777
|
+
<dd class="align-center"><input type="text" name="low-flow-align-center-input" id="low-flow-align-center-input"></dd>
|
|
1778
|
+
</div>
|
|
1779
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
1780
|
+
<dt><label for="low-flow-align-end-input"><code>align-end</code></label></dt>
|
|
1781
|
+
<dd class="align-end"><input type="text" name="low-flow-align-end-input" id="low-flow-align-end-input"></dd>
|
|
1782
|
+
</div>
|
|
1783
|
+
</dl>
|
|
1784
|
+
<dl class="colspan-3">
|
|
1785
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
1786
|
+
<dt><label for="low-flow-align-start-button"><code>align-start</code></label></dt>
|
|
1787
|
+
<dd class="align-start"><input type="button" value="align-start" id="low-flow-align-start-button" data-max-content></dd>
|
|
1788
|
+
</div>
|
|
1789
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
1790
|
+
<dt><label for="low-flow-align-center-button"><code>align-center</code></label></dt>
|
|
1791
|
+
<dd class="align-center"><input type="button" value="align-center" id="low-flow-align-center-button" data-max-content></dd>
|
|
1792
|
+
</div>
|
|
1793
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
1794
|
+
<dt><label for="low-flow-align-end-button"><code>align-end</code></label></dt>
|
|
1795
|
+
<dd class="align-end"><input type="button" value="align-end" id="low-flow-align-end-button" data-max-content></dd>
|
|
1796
|
+
</div>
|
|
1797
|
+
</dl>
|
|
1798
|
+
</fieldset>
|
|
1799
|
+
|
|
1800
|
+
<fieldset id="low-flow-keyboard_shortcuts">
|
|
1801
|
+
<legend>Keyboard shortcuts</legend>
|
|
1802
|
+
<dl>
|
|
1803
|
+
<div>
|
|
1804
|
+
<dt><label for="low-flow-custom-focus-input">Default Input focus</label></dt>
|
|
1805
|
+
<dd><input type="text" name="low-flow-custom-focus-input" id="low-flow-custom-focus-input" data-focus-key="P"></dd>
|
|
1806
|
+
</div>
|
|
1807
|
+
|
|
1808
|
+
<div>
|
|
1809
|
+
<dt><label for="low-flow-custom-focus-ctrl-input">Ctrl Input focus</label></dt>
|
|
1810
|
+
<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>
|
|
1811
|
+
</div>
|
|
1812
|
+
|
|
1813
|
+
<div>
|
|
1814
|
+
<dt><label for="low-flow-custom-focus-alt-input">Alt Input focus</label></dt>
|
|
1815
|
+
<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>
|
|
1816
|
+
</div>
|
|
1817
|
+
|
|
1818
|
+
<div>
|
|
1819
|
+
<dt><label for="low-flow-custom-focus-meta-input">Meta Input focus</label></dt>
|
|
1820
|
+
<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>
|
|
1821
|
+
</div>
|
|
1822
|
+
|
|
1823
|
+
<div>
|
|
1824
|
+
<dt><label for="low-flow-custom-focus-number">Number focus</label></dt>
|
|
1825
|
+
<dd><input type="number" name="low-flow-custom-focus-number" id="low-flow-custom-focus-number" data-focus-key="L"></dd>
|
|
1826
|
+
</div>
|
|
1827
|
+
|
|
1828
|
+
<div>
|
|
1829
|
+
<dt><label for="low-flow-custom-focus-textarea">Textarea focus</label></dt>
|
|
1830
|
+
<dd>
|
|
1831
|
+
<textarea name="low-flow-custom-focus-textarea" id="low-flow-custom-focus-textarea" data-focus-key="!"></textarea>
|
|
1832
|
+
<label for="low-flow-custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
|
|
1833
|
+
</dd>
|
|
1834
|
+
</div>
|
|
1835
|
+
|
|
1836
|
+
<div>
|
|
1837
|
+
<dt><label for="low-flow-custom-focus-date">Date focus</label></dt>
|
|
1838
|
+
<dd>
|
|
1839
|
+
<input type="date" name="low-flow-custom-focus-date" id="low-flow-custom-focus-date" data-focus-key="D">
|
|
1840
|
+
<label for="low-flow-custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
|
|
1841
|
+
</dd>
|
|
1842
|
+
</div>
|
|
1843
|
+
|
|
1844
|
+
<div>
|
|
1845
|
+
<dt><label for="low-flow-custom-focus-color">Color focus</label></dt>
|
|
1846
|
+
<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>
|
|
1847
|
+
</div>
|
|
1848
|
+
|
|
1849
|
+
<div>
|
|
1850
|
+
<dt><label for="low-flow-custom-focus-range">Range focus</label></dt>
|
|
1851
|
+
<dd><input type="range" name="low-flow-custom-focus-range" id="low-flow-custom-focus-range" data-focus-key="U"></dd>
|
|
1852
|
+
</div>
|
|
1853
|
+
|
|
1854
|
+
<div>
|
|
1855
|
+
<dt><label for="low-flow-custom-focus-select">Select focus</label></dt>
|
|
1856
|
+
<dd><select name="low-flow-custom-focus-select" id="low-flow-custom-focus-select" data-focus-key="K">
|
|
1857
|
+
<option value="1">Value 1</option>
|
|
1858
|
+
<option value="2">Value 2</option>
|
|
1859
|
+
<option value="3">Value 3</option>
|
|
1860
|
+
</select></dd>
|
|
1861
|
+
</div>
|
|
1862
|
+
</dl>
|
|
1863
|
+
</fieldset>
|
|
1864
|
+
|
|
1865
|
+
<fieldset id="low-flow-tables">
|
|
1866
|
+
<legend>Tables</legend>
|
|
1867
|
+
<h4>Table with inputs and buttons</h4>
|
|
1868
|
+
|
|
1869
|
+
<table>
|
|
1870
|
+
<thead>
|
|
1871
|
+
<tr class="title">
|
|
1872
|
+
<th colspan="3">Table Title</th>
|
|
1873
|
+
</tr>
|
|
1874
|
+
<tr>
|
|
1875
|
+
<th>Column 1</th>
|
|
1876
|
+
<th>Column 2</th>
|
|
1877
|
+
<th>Column 3</th>
|
|
1878
|
+
</tr>
|
|
1879
|
+
</thead>
|
|
1880
|
+
<tbody>
|
|
1881
|
+
<tr>
|
|
1882
|
+
<td>1</td>
|
|
1883
|
+
<td>
|
|
1884
|
+
<input type="text" name="low-flow-table-text-1A" id="low-flow-table-text-1A" placeholder="A text input in a table">
|
|
1885
|
+
</td>
|
|
1886
|
+
<td>
|
|
1887
|
+
<menu>
|
|
1888
|
+
<li><button type="button">Button 1</button></li>
|
|
1889
|
+
<li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
|
|
1890
|
+
</menu>
|
|
1891
|
+
</td>
|
|
1892
|
+
</tr>
|
|
1893
|
+
<tr>
|
|
1894
|
+
<td>2</td>
|
|
1895
|
+
<td>
|
|
1896
|
+
<input type="text" name="low-flow-table-text-2A" id="low-flow-table-text-2A" placeholder="A text input in a table">
|
|
1897
|
+
</td>
|
|
1898
|
+
<td>
|
|
1899
|
+
<menu>
|
|
1900
|
+
<li><button type="button">Button 2</button></li>
|
|
1901
|
+
<li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
|
|
1902
|
+
</menu>
|
|
1903
|
+
</td>
|
|
1904
|
+
</tr>
|
|
1905
|
+
<tr>
|
|
1906
|
+
<td>3</td>
|
|
1907
|
+
<td>
|
|
1908
|
+
<input type="text" name="low-flow-table-text-3A" id="low-flow-table-text-3A" placeholder="A text input in a table">
|
|
1909
|
+
</td>
|
|
1910
|
+
<td>
|
|
1911
|
+
<menu>
|
|
1912
|
+
<li><button type="button">Button 3</button></li>
|
|
1913
|
+
<li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
|
|
1914
|
+
</menu>
|
|
1915
|
+
</td>
|
|
1916
|
+
</tr>
|
|
1917
|
+
</tbody>
|
|
1918
|
+
</table>
|
|
1919
|
+
|
|
1920
|
+
<h4>Table using <code>colgroups</code> to define column width</h4>
|
|
1921
|
+
<table>
|
|
1922
|
+
<colgroup>
|
|
1923
|
+
<col span="1" style="width: 20%">
|
|
1924
|
+
<col span="1" style="width: 50%">
|
|
1925
|
+
<col span="1" style="width: 30%">
|
|
1926
|
+
</colgroup>
|
|
1927
|
+
<thead>
|
|
1928
|
+
<tr class="title">
|
|
1929
|
+
<th colspan="3">Table Title</th>
|
|
1930
|
+
</tr>
|
|
1931
|
+
<tr>
|
|
1932
|
+
<th>Column 1</th>
|
|
1933
|
+
<th>Column 2</th>
|
|
1934
|
+
<th>Column 3</th>
|
|
1935
|
+
</tr>
|
|
1936
|
+
</thead>
|
|
1937
|
+
<tbody>
|
|
1938
|
+
<tr>
|
|
1939
|
+
<td>20%</td>
|
|
1940
|
+
<td>50%</td>
|
|
1941
|
+
<td>30%</td>
|
|
1942
|
+
</tr>
|
|
1943
|
+
</tbody>
|
|
1944
|
+
</table>
|
|
1945
|
+
</fieldset>
|
|
1946
|
+
|
|
1947
|
+
<fieldset id="low-flow-nested_fieldsets">
|
|
1948
|
+
<legend>Nested fieldsets</legend>
|
|
1949
|
+
<fieldset>
|
|
1950
|
+
<legend>Fieldset 1</legend>
|
|
1951
|
+
|
|
1952
|
+
<dl>
|
|
1953
|
+
<div>
|
|
1954
|
+
<dt><label for="low-flow-nested-input-1">Input</label></dt>
|
|
1955
|
+
<dd>
|
|
1956
|
+
<input type="text" id="low-flow-nested-input-1" name="low-flow-nested-input-1" value="a value"
|
|
1957
|
+
placeholder="Some interesting placeholder text">
|
|
1958
|
+
<p>Here is some subtext.</p>
|
|
1959
|
+
</dd>
|
|
1960
|
+
</div>
|
|
1458
1961
|
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1962
|
+
<div>
|
|
1963
|
+
<dt><label for="low-flow-nested-input-2">Input 2</label></dt>
|
|
1964
|
+
<dd>
|
|
1965
|
+
<input type="text" id="low-flow-nested-input-2" name="low-flow-nested-input-2" placeholder="Some interesting placeholder text">
|
|
1966
|
+
<p><small>Here's some small subtext.</small></p>
|
|
1967
|
+
</dd>
|
|
1968
|
+
</div>
|
|
1969
|
+
|
|
1970
|
+
<div>
|
|
1971
|
+
<dt><label for="low-flow-nested-input-3">Input 3</label></dt>
|
|
1972
|
+
<dd>
|
|
1973
|
+
<input type="text" id="low-flow-nested-input-3" name="low-flow-nested-input-3" placeholder="Some interesting placeholder text">
|
|
1974
|
+
<p><strong>Here's some bold subtext.</strong></p>
|
|
1975
|
+
</dd>
|
|
1976
|
+
</div>
|
|
1977
|
+
|
|
1978
|
+
<div>
|
|
1979
|
+
<dt><label for="low-flow-nested-input-4">Input 4</label></dt>
|
|
1980
|
+
<dd>
|
|
1981
|
+
<input type="text" id="low-flow-nested-input-4" name="low-flow-nested-input-4" placeholder="Some interesting placeholder text">
|
|
1982
|
+
<p>Here is some subtext.</p>
|
|
1983
|
+
<p>Here is some more subtext.</p>
|
|
1984
|
+
</dd>
|
|
1985
|
+
</div>
|
|
1986
|
+
</dl>
|
|
1987
|
+
|
|
1988
|
+
<fieldset>
|
|
1989
|
+
<legend>Fieldset 2A</legend>
|
|
1990
|
+
|
|
1991
|
+
<dl>
|
|
1992
|
+
<div>
|
|
1993
|
+
<dt><label for="low-flow-fieldset-2a-input-1">Input 1</label></dt>
|
|
1994
|
+
<dd>
|
|
1995
|
+
<input type="text" id="low-flow-fieldset-2a-input-1" name="low-flow-fieldset-2a-input-1" placeholder="Some interesting placeholder text">
|
|
1996
|
+
</dd>
|
|
1997
|
+
</div>
|
|
1998
|
+
|
|
1999
|
+
<div>
|
|
2000
|
+
<dt><label for="low-flow-fieldset-2a-input-2">Input 2</label></dt>
|
|
2001
|
+
<dd><input type="text" id="low-flow-fieldset-2a-input-2" name="low-flow-fieldset-2a-input-2" placeholder="Some interesting placeholder text"></dd>
|
|
2002
|
+
</div>
|
|
2003
|
+
|
|
2004
|
+
<div>
|
|
2005
|
+
<dt><label for="low-flow-fieldset-2a-select">Select</label></dt>
|
|
2006
|
+
<dd>
|
|
2007
|
+
<select id="low-flow-fieldset-2a-select" name="low-flow-fieldset-2a-select">
|
|
2008
|
+
<option value="value">Value</option>
|
|
2009
|
+
</select>
|
|
2010
|
+
</dd>
|
|
2011
|
+
</div>
|
|
2012
|
+
</dl>
|
|
2013
|
+
|
|
2014
|
+
<fieldset>
|
|
2015
|
+
<legend>Fieldset 3A</legend>
|
|
2016
|
+
|
|
2017
|
+
<dl>
|
|
2018
|
+
<div>
|
|
2019
|
+
<dt><label for="low-flow-fieldset-3a-input-a">Input A</label></dt>
|
|
2020
|
+
<dd><input type="text" id="low-flow-fieldset-3a-input-a" name="low-flow-fieldset-3a-input-a" placeholder="Some interesting placeholder text"></dd>
|
|
2021
|
+
</div>
|
|
2022
|
+
|
|
2023
|
+
<div>
|
|
2024
|
+
<dt><label for="low-flow-fieldset-3a-input-b">Input B</label></dt>
|
|
2025
|
+
<dd><input type="text" id="low-flow-fieldset-3a-input-b" name="low-flow-fieldset-3a-input-b" placeholder="Some interesting placeholder text"></dd>
|
|
2026
|
+
</div>
|
|
2027
|
+
|
|
2028
|
+
<div>
|
|
2029
|
+
<dt><label for="low-flow-fieldset-3a-input-c">Input C</label></dt>
|
|
2030
|
+
<dd><input type="text" id="low-flow-fieldset-3a-input-c" name="low-flow-fieldset-3a-input-c" placeholder="Some interesting placeholder text"></dd>
|
|
2031
|
+
</div>
|
|
2032
|
+
|
|
2033
|
+
<div>
|
|
2034
|
+
<dt><label for="low-flow-fieldset-3a-input-d">Input D</label></dt>
|
|
2035
|
+
<dd><input type="text" id="low-flow-fieldset-3a-input-d" name="low-flow-fieldset-3a-input-d" placeholder="Some interesting placeholder text"></dd>
|
|
2036
|
+
</div>
|
|
2037
|
+
</dl>
|
|
2038
|
+
</fieldset>
|
|
2039
|
+
|
|
2040
|
+
<fieldset>
|
|
2041
|
+
<legend>Fieldset 3</legend>
|
|
2042
|
+
|
|
2043
|
+
<dl>
|
|
2044
|
+
<div>
|
|
2045
|
+
<dt><label for="low-flow-fieldset-3b-input-a">Input A</label></dt>
|
|
2046
|
+
<dd><input type="text" id="low-flow-fieldset-3b-input-a" name="low-flow-fieldset-3b-input-a" placeholder="Some interesting placeholder text"></dd>
|
|
2047
|
+
</div>
|
|
2048
|
+
|
|
2049
|
+
<div>
|
|
2050
|
+
<dt><label for="low-flow-fieldset-3b-input-b">Input B</label></dt>
|
|
2051
|
+
<dd><input type="text" id="low-flow-fieldset-3b-input-b" name="low-flow-fieldset-3b-input-b" placeholder="Some interesting placeholder text"></dd>
|
|
2052
|
+
</div>
|
|
2053
|
+
|
|
2054
|
+
<div>
|
|
2055
|
+
<dt><label for="low-flow-fieldset-3b-input-c">Input C</label></dt>
|
|
2056
|
+
<dd><input type="text" id="low-flow-fieldset-3b-input-c" name="low-flow-fieldset-3b-input-c" placeholder="Some interesting placeholder text"></dd>
|
|
2057
|
+
</div>
|
|
2058
|
+
|
|
2059
|
+
<div>
|
|
2060
|
+
<dt><label for="low-flow-fieldset-3b-input-d">Input D</label></dt>
|
|
2061
|
+
<dd><input type="text" id="low-flow-fieldset-3b-input-d" name="low-flow-fieldset-3b-input-d" placeholder="Some interesting placeholder text"></dd>
|
|
2062
|
+
</div>
|
|
2063
|
+
</dl>
|
|
2064
|
+
</fieldset>
|
|
2065
|
+
</fieldset>
|
|
2066
|
+
|
|
2067
|
+
<fieldset>
|
|
2068
|
+
<legend>Fieldset 2B</legend>
|
|
2069
|
+
<dl>
|
|
2070
|
+
<div>
|
|
2071
|
+
<dt><label for="low-flow-fieldset-2b-input-1">Input 1</label></dt>
|
|
2072
|
+
<dd>
|
|
2073
|
+
<input type="text" id="low-flow-fieldset-2b-input-1" name="low-flow-fieldset-2b-input-1"
|
|
2074
|
+
placeholder="Some interesting placeholder text">
|
|
2075
|
+
</dd>
|
|
2076
|
+
</div>
|
|
2077
|
+
|
|
2078
|
+
<div>
|
|
2079
|
+
<dt><label for="low-flow-fieldset-2b-input-2">Input 2</label></dt>
|
|
2080
|
+
<dd><input type="text" id="low-flow-fieldset-2b-input-2" name="low-flow-fieldset-2b-input-2"
|
|
2081
|
+
placeholder="Some interesting placeholder text"></dd>
|
|
2082
|
+
</div>
|
|
2083
|
+
|
|
2084
|
+
<div>
|
|
2085
|
+
<dt><label for="low-flow-fieldset-2b-select">Select</label></dt>
|
|
2086
|
+
<dd>
|
|
2087
|
+
<select id="low-flow-fieldset-2b-select" name="low-flow-fieldset-2b-select">
|
|
2088
|
+
<option value="value">Value</option>
|
|
2089
|
+
</select>
|
|
2090
|
+
</dd>
|
|
2091
|
+
</div>
|
|
2092
|
+
</dl>
|
|
2093
|
+
</fieldset>
|
|
2094
|
+
</fieldset>
|
|
2095
|
+
</fieldset>
|
|
2096
|
+
|
|
2097
|
+
<fieldset id="low-flow-details">
|
|
2098
|
+
<legend>Detail elements</legend>
|
|
2099
|
+
<details>
|
|
2100
|
+
<summary>Detail element</summary>
|
|
2101
|
+
<dl>
|
|
1463
2102
|
<div>
|
|
1464
2103
|
<dt><label for="low-flow-detail-input-1">Detail input</label></dt>
|
|
1465
|
-
<dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1"></dd>
|
|
2104
|
+
<dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1" value="Some input..."></dd>
|
|
1466
2105
|
</div>
|
|
1467
2106
|
|
|
1468
2107
|
<div>
|
|
@@ -1483,165 +2122,189 @@
|
|
|
1483
2122
|
</details>
|
|
1484
2123
|
|
|
1485
2124
|
<details>
|
|
1486
|
-
<summary>Another
|
|
2125
|
+
<summary>Another detail element with a nested fieldset</summary>
|
|
1487
2126
|
<dl>
|
|
1488
2127
|
<div>
|
|
1489
2128
|
<dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
|
|
1490
2129
|
<dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
|
|
1491
2130
|
</div>
|
|
1492
2131
|
</dl>
|
|
2132
|
+
|
|
2133
|
+
<fieldset>
|
|
2134
|
+
<legend>Nested fieldset</legend>
|
|
2135
|
+
|
|
2136
|
+
<dl>
|
|
2137
|
+
<div>
|
|
2138
|
+
<dt><label for="low-flow-another-detail-input-2">Nested fieldset input</label></dt>
|
|
2139
|
+
<dd><input type="text" name="low-flow-another-detail-input-2" id="low-flow-another-detail-input-2"></dd>
|
|
2140
|
+
</div>
|
|
2141
|
+
</dl>
|
|
2142
|
+
</fieldset>
|
|
1493
2143
|
</details>
|
|
2144
|
+
</fieldset>
|
|
2145
|
+
|
|
2146
|
+
<fieldset id="low-flow-buttons">
|
|
2147
|
+
<legend>Buttons</legend>
|
|
2148
|
+
<dl>
|
|
2149
|
+
<div>
|
|
2150
|
+
<dt><label for="low-flow-button-input1">Standard button</label></dt>
|
|
2151
|
+
<dd><button id="low-flow-button-input1">Standard button</button></dd>
|
|
2152
|
+
</div>
|
|
1494
2153
|
|
|
1495
|
-
|
|
2154
|
+
<div>
|
|
2155
|
+
<dt><label for="low-flow-button-input2">Input button</label></dt>
|
|
2156
|
+
<dd><input type="button" id="low-flow-button-input2" value="Input button"></dd>
|
|
2157
|
+
</div>
|
|
2158
|
+
<div>
|
|
2159
|
+
<dt><label for="low-flow-button-input3">Submit input</label></dt>
|
|
2160
|
+
<dd><input type="submit" id="low-flow-button-input3" value="Submit input"></dd>
|
|
2161
|
+
</div>
|
|
2162
|
+
<div>
|
|
2163
|
+
<dt><label for="low-flow-button-input4">Reset input</label></dt>
|
|
2164
|
+
<dd><input type="reset" id="low-flow-button-input4" value="Reset input"></dd>
|
|
2165
|
+
</div>
|
|
2166
|
+
</dl>
|
|
2167
|
+
<input type="button" name="button1" value="Non-grouped button">
|
|
2168
|
+
<input type="submit" name="button2" value="Non-grouped submit button">
|
|
2169
|
+
<input type="reset" name="button3" value="Non-grouped reset button">
|
|
2170
|
+
<a href="/" class="button-link">Button link</a>
|
|
2171
|
+
<p>Flexbox button layout pattern with two submit buttons:</p>
|
|
2172
|
+
<menu>
|
|
2173
|
+
<li><button type="submit" name="button1">Button 1</button></li>
|
|
2174
|
+
<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>
|
|
2175
|
+
</menu>
|
|
2176
|
+
<p>Flexbox button layout pattern with three submit buttons:</p>
|
|
2177
|
+
<menu>
|
|
2178
|
+
<li><button type="submit" name="button1">Button 1</button></li>
|
|
2179
|
+
<li><button type="reset" name="button2">Button 2</button></li>
|
|
2180
|
+
<li><input type="submit" name="button3" value="Button 3"></li>
|
|
2181
|
+
</menu>
|
|
2182
|
+
</fieldset>
|
|
1496
2183
|
|
|
2184
|
+
<fieldset id="low-flow-colspan_classes">
|
|
2185
|
+
<legend>Colspan classes</legend>
|
|
1497
2186
|
<dl>
|
|
1498
2187
|
<div class="colspan-1">
|
|
1499
2188
|
<dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
|
|
1500
2189
|
<dd><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
|
|
1501
2190
|
</div>
|
|
1502
|
-
|
|
1503
2191
|
<div class="colspan-1">
|
|
1504
2192
|
<dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
|
|
1505
2193
|
<dd><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
|
|
1506
2194
|
</div>
|
|
1507
|
-
|
|
1508
2195
|
<div class="colspan-2">
|
|
1509
2196
|
<dt><label for="low-flow-colspan-2">colspan-2</label></dt>
|
|
1510
2197
|
<dd><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
|
|
1511
2198
|
</div>
|
|
1512
|
-
|
|
1513
2199
|
<div class="colspan-4">
|
|
1514
2200
|
<dt><label for="low-flow-colspan-4">colspan-4</label></dt>
|
|
1515
2201
|
<dd><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
|
|
1516
2202
|
</div>
|
|
1517
|
-
|
|
1518
2203
|
<div class="colspan-3">
|
|
1519
2204
|
<dt><label for="low-flow-colspan-3">colspan-3</label></dt>
|
|
1520
2205
|
<dd><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
|
|
1521
2206
|
</div>
|
|
1522
|
-
|
|
1523
2207
|
<div class="colspan-1">
|
|
1524
2208
|
<dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
|
|
1525
2209
|
<dd><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
|
|
1526
2210
|
</div>
|
|
1527
|
-
|
|
1528
2211
|
<div class="colspan-full">
|
|
1529
2212
|
<dt><label for="low-flow-colspan-full">colspan-full</label></dt>
|
|
1530
2213
|
<dd><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
|
|
1531
2214
|
</div>
|
|
1532
|
-
|
|
1533
2215
|
<div class="colspan-5">
|
|
1534
2216
|
<dt><label for="low-flow-colspan-5">colspan-5</label></dt>
|
|
1535
2217
|
<dd><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
|
|
1536
2218
|
</div>
|
|
1537
2219
|
</dl>
|
|
1538
|
-
|
|
1539
2220
|
<fieldset class="colspan-1">
|
|
1540
2221
|
<legend>colspan-1</legend>
|
|
1541
|
-
|
|
1542
2222
|
<dl>
|
|
1543
2223
|
<div>
|
|
1544
2224
|
<dt><label for="low-flow-colspan-1-a">Input A</label></dt>
|
|
1545
2225
|
<dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a" placeholder="Some interesting placeholder text"></dd>
|
|
1546
2226
|
</div>
|
|
1547
|
-
|
|
1548
2227
|
<div>
|
|
1549
2228
|
<dt><label for="low-flow-colspan-1-b">Input B</label></dt>
|
|
1550
2229
|
<dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b" placeholder="Some interesting placeholder text"></dd>
|
|
1551
2230
|
</div>
|
|
1552
|
-
|
|
1553
2231
|
<div>
|
|
1554
2232
|
<dt><label for="low-flow-colspan-1-c">Input C</label></dt>
|
|
1555
2233
|
<dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c" placeholder="Some interesting placeholder text"></dd>
|
|
1556
2234
|
</div>
|
|
1557
|
-
|
|
1558
2235
|
<div>
|
|
1559
2236
|
<dt><label for="low-flow-colspan-1-d">Input D</label></dt>
|
|
1560
2237
|
<dd><input type="text" id="low-flow-colspan-1-d" name="low-flow-colspan-1-d" placeholder="Some interesting placeholder text"></dd>
|
|
1561
2238
|
</div>
|
|
1562
2239
|
</dl>
|
|
1563
2240
|
</fieldset>
|
|
1564
|
-
|
|
1565
2241
|
<fieldset class="colspan-2">
|
|
1566
2242
|
<legend>colspan-2</legend>
|
|
1567
|
-
|
|
1568
2243
|
<dl>
|
|
1569
2244
|
<div>
|
|
1570
2245
|
<dt><label for="low-flow-colspan-2-a">Input A</label></dt>
|
|
1571
2246
|
<dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a" placeholder="Some interesting placeholder text"></dd>
|
|
1572
2247
|
</div>
|
|
1573
|
-
|
|
1574
2248
|
<div>
|
|
1575
2249
|
<dt><label for="low-flow-colspan-2-b">Input B</label></dt>
|
|
1576
2250
|
<dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b" placeholder="Some interesting placeholder text"></dd>
|
|
1577
2251
|
</div>
|
|
1578
|
-
|
|
1579
2252
|
<div>
|
|
1580
2253
|
<dt><label for="low-flow-colspan-2-c">Input C</label></dt>
|
|
1581
2254
|
<dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c" placeholder="Some interesting placeholder text"></dd>
|
|
1582
2255
|
</div>
|
|
1583
|
-
|
|
1584
2256
|
<div>
|
|
1585
2257
|
<dt><label for="low-flow-colspan-2-d">Input D</label></dt>
|
|
1586
2258
|
<dd><input type="text" id="low-flow-colspan-2-d" name="low-flow-colspan-2-d" placeholder="Some interesting placeholder text"></dd>
|
|
1587
2259
|
</div>
|
|
1588
2260
|
</dl>
|
|
1589
2261
|
</fieldset>
|
|
1590
|
-
|
|
1591
2262
|
<fieldset>
|
|
1592
2263
|
<legend>colspan-3</legend>
|
|
1593
|
-
|
|
1594
2264
|
<dl class="colspan-3">
|
|
1595
2265
|
<div>
|
|
1596
2266
|
<dt><label for="low-flow-colspan-3-a">Input A</label></dt>
|
|
1597
2267
|
<dd><input type="text" id="low-flow-colspan-3-a" name="low-flow-colspan-3-a" placeholder="Some interesting placeholder text"></dd>
|
|
1598
2268
|
</div>
|
|
1599
|
-
|
|
1600
2269
|
<div>
|
|
1601
|
-
<dt><label for="colspan-3-b">Input B</label></dt>
|
|
2270
|
+
<dt><label for="low-flow-colspan-3-b">Input B</label></dt>
|
|
1602
2271
|
<dd><input type="text" id="low-flow-colspan-3-b" name="low-flow-colspan-3-b" placeholder="Some interesting placeholder text"></dd>
|
|
1603
2272
|
</div>
|
|
1604
|
-
|
|
1605
2273
|
<div>
|
|
1606
|
-
<dt><label for="colspan-3-c">Input C</label></dt>
|
|
2274
|
+
<dt><label for="low-flow-colspan-3-c">Input C</label></dt>
|
|
1607
2275
|
<dd><input type="text" id="low-flow-colspan-3-c" name="low-flow-colspan-3-c" placeholder="Some interesting placeholder text"></dd>
|
|
1608
2276
|
</div>
|
|
1609
|
-
|
|
1610
2277
|
<div>
|
|
1611
|
-
<dt><label for="colspan-3-d">Input D</label></dt>
|
|
2278
|
+
<dt><label for="low-flow-colspan-3-d">Input D</label></dt>
|
|
1612
2279
|
<dd><input type="text" id="low-flow-colspan-3-d" name="low-flow-colspan-3-d" placeholder="Some interesting placeholder text"></dd>
|
|
1613
2280
|
</div>
|
|
1614
2281
|
</dl>
|
|
1615
2282
|
</fieldset>
|
|
1616
|
-
|
|
1617
2283
|
<fieldset class="colspan-full">
|
|
1618
2284
|
<legend>colspan-full</legend>
|
|
1619
|
-
|
|
1620
2285
|
<dl>
|
|
1621
2286
|
<div>
|
|
1622
2287
|
<dt><label for="low-flow-colspan-full-a">Input A</label></dt>
|
|
1623
2288
|
<dd><input type="text" id="low-flow-colspan-full-a" name="low-flow-colspan-full-a" placeholder="Some interesting placeholder text"></dd>
|
|
1624
2289
|
</div>
|
|
1625
|
-
|
|
1626
2290
|
<div>
|
|
1627
2291
|
<dt><label for="low-flow-colspan-full-b">Input B</label></dt>
|
|
1628
2292
|
<dd><input type="text" id="low-flow-colspan-full-b" name="low-flow-colspan-full-b" placeholder="Some interesting placeholder text"></dd>
|
|
1629
2293
|
</div>
|
|
1630
|
-
|
|
1631
2294
|
<div>
|
|
1632
2295
|
<dt><label for="low-flow-colspan-full-c">Input C</label></dt>
|
|
1633
2296
|
<dd><input type="text" id="low-flow-colspan-full-c" name="low-flow-colspan-full-c" placeholder="Some interesting placeholder text"></dd>
|
|
1634
2297
|
</div>
|
|
1635
|
-
|
|
1636
2298
|
<div>
|
|
1637
2299
|
<dt><label for="low-flow-colspan-full-d">Input D</label></dt>
|
|
1638
2300
|
<dd><input type="text" id="low-flow-colspan-full-d" name="low-flow-colspan-full-d" placeholder="Some interesting placeholder text"></dd>
|
|
1639
2301
|
</div>
|
|
1640
2302
|
</dl>
|
|
1641
2303
|
</fieldset>
|
|
2304
|
+
</fieldset>
|
|
1642
2305
|
|
|
1643
|
-
|
|
1644
|
-
|
|
2306
|
+
<fieldset id="low-flow-p_tag_elements">
|
|
2307
|
+
<legend>P tag elements</legend>
|
|
1645
2308
|
<p>
|
|
1646
2309
|
<input type="checkbox" name="low-flow-p-tag-checkbox" id="low-flow-p-tag-checkbox">
|
|
1647
2310
|
<label for="low-flow-p-tag-checkbox">Checkbox</label>
|
|
@@ -1660,24 +2323,6 @@
|
|
|
1660
2323
|
<p>
|
|
1661
2324
|
Some regular text with <strong>other elements</strong> <span>inside of it</span>
|
|
1662
2325
|
</p>
|
|
1663
|
-
|
|
1664
|
-
<h3 id="low_flow_buttons">Buttons</h3>
|
|
1665
|
-
<input type="submit" name="button1" value="Non-grouped submit button">
|
|
1666
|
-
<input type="reset" name="reset" value="Another one">
|
|
1667
|
-
<a href="/" class="button-link">Button link</a>
|
|
1668
|
-
|
|
1669
|
-
<p>Flexbox button layout pattern with two submit buttons:</p>
|
|
1670
|
-
<menu>
|
|
1671
|
-
<li><button type="submit" name="button1">Button 1</button></li>
|
|
1672
|
-
<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>
|
|
1673
|
-
</menu>
|
|
1674
|
-
|
|
1675
|
-
<p>Flexbox button layout pattern with three submit buttons:</p>
|
|
1676
|
-
<menu>
|
|
1677
|
-
<li><button type="submit" name="button1">Button 1</button></li>
|
|
1678
|
-
<li><button type="reset" name="button2">Button 2</button></li>
|
|
1679
|
-
<li><input type="submit" name="button3" value="Button 3"></li>
|
|
1680
|
-
</menu>
|
|
1681
2326
|
</fieldset>
|
|
1682
2327
|
</form>
|
|
1683
2328
|
|