semantic-forms 5.2.1 → 5.3.0
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 +12 -0
- package/dist/semantic-forms.cjs +93 -69
- package/dist/semantic-forms.cjs.map +1 -1
- package/dist/semantic-forms.css +874 -2781
- package/dist/semantic-forms.css.map +1 -1
- package/dist/semantic-forms.js +66 -51
- 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 +93 -69
- package/dist/semantic-forms.mjs.map +1 -1
- package/docs/statics/pages/fullDemo.html +1283 -866
- package/docs/statics/pages/usage.html +388 -190
- package/package.json +4 -4
- package/semanticForms.js +14 -567
- package/semanticForms.scss +167 -1570
|
@@ -42,21 +42,27 @@
|
|
|
42
42
|
|
|
43
43
|
<p>The float label input pattern is notoriously difficult to implement in a fashion that doesn't degrade HTML semantics or accessibility. This pattern library implements a solution that solves that problem. Your label doesn't need to be a sibling of your input like with other implementations. This implementation also has a custom clear button for each input.</p>
|
|
44
44
|
|
|
45
|
+
<p>Note: Although wrapping the input and label elements in a <code><!--#<div>--></code> is not required, it is highly recommended as it reduces <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content"><abbr>FOUC</abbr></a>.</p>
|
|
46
|
+
|
|
45
47
|
<h5 id="floatlabelex">Example</h5>
|
|
46
48
|
|
|
47
49
|
<pre><code class='language-html' lang='html'><escape>
|
|
48
50
|
<form class="semanticForms">
|
|
49
51
|
<dl>
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
+
<div>
|
|
53
|
+
<dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
|
|
54
|
+
<dt><label for="name">Name</label></dt>
|
|
55
|
+
</div>
|
|
52
56
|
</dl>
|
|
53
57
|
</form>
|
|
54
58
|
</escape></code></pre>
|
|
55
59
|
|
|
56
60
|
<form class="semanticForms">
|
|
57
61
|
<dl>
|
|
58
|
-
<
|
|
59
|
-
|
|
62
|
+
<div>
|
|
63
|
+
<dt><label for="name">Name</label></dt>
|
|
64
|
+
<dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
|
|
65
|
+
</div>
|
|
60
66
|
</dl>
|
|
61
67
|
</form>
|
|
62
68
|
|
|
@@ -65,16 +71,20 @@
|
|
|
65
71
|
<pre><code class='language-html' lang='html'><escape>
|
|
66
72
|
<form class="semanticForms">
|
|
67
73
|
<dl>
|
|
68
|
-
<
|
|
69
|
-
|
|
74
|
+
<div>
|
|
75
|
+
<dt><label for="textarea">Textarea</label></dt>
|
|
76
|
+
<dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
|
|
77
|
+
</div>
|
|
70
78
|
</dl>
|
|
71
79
|
</form>
|
|
72
80
|
</escape></code></pre>
|
|
73
81
|
|
|
74
82
|
<form class="semanticForms">
|
|
75
83
|
<dl>
|
|
76
|
-
<
|
|
77
|
-
|
|
84
|
+
<div>
|
|
85
|
+
<dt><label for="textarea">Textarea</label></dt>
|
|
86
|
+
<dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
|
|
87
|
+
</div>
|
|
78
88
|
</dl>
|
|
79
89
|
</form>
|
|
80
90
|
|
|
@@ -87,22 +97,26 @@
|
|
|
87
97
|
<pre><code class='language-html' lang='html'><escape>
|
|
88
98
|
<form class="semanticForms" method="post">
|
|
89
99
|
<dl>
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
100
|
+
<div>
|
|
101
|
+
<dt><label for="password">Password</label></dt>
|
|
102
|
+
<dd>
|
|
103
|
+
<input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
|
|
104
|
+
<label for="password">Must be at least 8 characters long.</label>
|
|
105
|
+
</dd>
|
|
106
|
+
</div>
|
|
95
107
|
</dl>
|
|
96
108
|
</form>
|
|
97
109
|
</escape></code></pre>
|
|
98
110
|
|
|
99
111
|
<form class="semanticForms" method="post">
|
|
100
112
|
<dl>
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
|
|
113
|
+
<div>
|
|
114
|
+
<dt><label for="password">Password</label></dt>
|
|
115
|
+
<dd>
|
|
116
|
+
<input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
|
|
117
|
+
<label for="password">Must be at least 8 characters long.</label>
|
|
118
|
+
</dd>
|
|
119
|
+
</div>
|
|
106
120
|
</dl>
|
|
107
121
|
</form>
|
|
108
122
|
|
|
@@ -113,22 +127,26 @@
|
|
|
113
127
|
<pre><code class='language-html' lang='html'><escape>
|
|
114
128
|
<form class="semanticForms" method="post">
|
|
115
129
|
<dl>
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
130
|
+
<div>
|
|
131
|
+
<dt><label for="email">Email address</label></dt>
|
|
132
|
+
<dd>
|
|
133
|
+
<input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
|
|
134
|
+
<button type="submit">Sign up</button>
|
|
135
|
+
</dd>
|
|
136
|
+
</div>
|
|
121
137
|
</dl>
|
|
122
138
|
</form>
|
|
123
139
|
</escape></code></pre>
|
|
124
140
|
|
|
125
141
|
<form class="semanticForms" method="post">
|
|
126
142
|
<dl>
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
143
|
+
<div>
|
|
144
|
+
<dt><label for="email">Email address</label></dt>
|
|
145
|
+
<dd>
|
|
146
|
+
<input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
|
|
147
|
+
<button type="submit">Sign up!</button>
|
|
148
|
+
</dd>
|
|
149
|
+
</div>
|
|
132
150
|
</dl>
|
|
133
151
|
</form>
|
|
134
152
|
|
|
@@ -139,32 +157,44 @@
|
|
|
139
157
|
<pre><code class='language-html' lang='html'><escape>
|
|
140
158
|
<form class="semanticForms" method="post">
|
|
141
159
|
<dl>
|
|
142
|
-
<
|
|
143
|
-
|
|
160
|
+
<div>
|
|
161
|
+
<dt><label for="focus-1">Focus me!</label></dt>
|
|
162
|
+
<dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
|
|
163
|
+
</div>
|
|
144
164
|
|
|
145
165
|
<!-- change the modifier -->
|
|
146
|
-
<
|
|
147
|
-
|
|
166
|
+
<div>
|
|
167
|
+
<dt><label for="focus-2">Focus me!</label></dt>
|
|
168
|
+
<dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
|
|
169
|
+
</div>
|
|
148
170
|
|
|
149
171
|
<!-- specify modifier by OS -->
|
|
150
|
-
<
|
|
151
|
-
|
|
172
|
+
<div>
|
|
173
|
+
<dt><label for="focus-2">Focus me!</label></dt>
|
|
174
|
+
<dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-mac="cmd"></dd>
|
|
175
|
+
</div>
|
|
152
176
|
</dl>
|
|
153
177
|
</form>
|
|
154
178
|
</escape></code></pre>
|
|
155
179
|
|
|
156
180
|
<form class="semanticForms" method="post">
|
|
157
181
|
<dl>
|
|
158
|
-
<
|
|
159
|
-
|
|
182
|
+
<div>
|
|
183
|
+
<dt><label for="focus-1">Focus me!</label></dt>
|
|
184
|
+
<dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
|
|
185
|
+
</div>
|
|
160
186
|
|
|
161
187
|
<!-- change the modifier -->
|
|
162
|
-
<
|
|
163
|
-
|
|
188
|
+
<div>
|
|
189
|
+
<dt><label for="focus-2">Focus me!</label></dt>
|
|
190
|
+
<dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
|
|
191
|
+
</div>
|
|
164
192
|
|
|
165
193
|
<!-- specify modifier by OS -->
|
|
166
|
-
<
|
|
167
|
-
|
|
194
|
+
<div>
|
|
195
|
+
<dt><label for="focus-3">Focus me!</label></dt>
|
|
196
|
+
<dd><input id="focus-3" name="focus-3" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-max="cmd"></dd>
|
|
197
|
+
</div>
|
|
168
198
|
</dl>
|
|
169
199
|
</form>
|
|
170
200
|
|
|
@@ -209,16 +239,20 @@
|
|
|
209
239
|
<pre><code class='language-html' lang='html'><escape>
|
|
210
240
|
<form class="semanticForms">
|
|
211
241
|
<dl>
|
|
212
|
-
<
|
|
213
|
-
|
|
242
|
+
<div>
|
|
243
|
+
<dt><label for="search-field">Search</label></dt>
|
|
244
|
+
<dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
|
|
245
|
+
</div>
|
|
214
246
|
</dl>
|
|
215
247
|
</form>
|
|
216
248
|
</escape></code></pre>
|
|
217
249
|
|
|
218
250
|
<form class="semanticForms">
|
|
219
251
|
<dl>
|
|
220
|
-
<
|
|
221
|
-
|
|
252
|
+
<div>
|
|
253
|
+
<dt><label for="search-field">Search</label></dt>
|
|
254
|
+
<dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
|
|
255
|
+
</div>
|
|
222
256
|
</dl>
|
|
223
257
|
</form>
|
|
224
258
|
|
|
@@ -233,30 +267,42 @@
|
|
|
233
267
|
<pre><code class='language-html' lang='html'><escape>
|
|
234
268
|
<form class="semanticForms">
|
|
235
269
|
<dl class="colspan-2">
|
|
236
|
-
<
|
|
237
|
-
|
|
270
|
+
<div>
|
|
271
|
+
<dt><label for="input-a">Input A</label></dt>
|
|
272
|
+
<dd><input type="text" id="input-a" name="input-a"></dd>
|
|
273
|
+
</div>
|
|
238
274
|
|
|
239
|
-
<
|
|
240
|
-
|
|
275
|
+
<div>
|
|
276
|
+
<dt><label for="input-b">Input B</label></dt>
|
|
277
|
+
<dd><input type="text" id="input-b" name="input-b"></dd>
|
|
278
|
+
</div>
|
|
241
279
|
|
|
242
280
|
<!-- wraps to the next row -->
|
|
243
|
-
<
|
|
244
|
-
|
|
281
|
+
<div>
|
|
282
|
+
<dt><label for="input-c">Input C</label></dt>
|
|
283
|
+
<dd><input type="text" id="input-c" name="input-c"></dd>
|
|
284
|
+
</div>
|
|
245
285
|
</dl>
|
|
246
286
|
</form>
|
|
247
287
|
</escape></code></pre>
|
|
248
288
|
|
|
249
289
|
<form class="semanticForms">
|
|
250
290
|
<dl class="colspan-2">
|
|
251
|
-
<
|
|
252
|
-
|
|
291
|
+
<div>
|
|
292
|
+
<dt><label for="input-a">Input A</label></dt>
|
|
293
|
+
<dd><input type="text" id="input-a" name="input-a"></dd>
|
|
294
|
+
</div>
|
|
253
295
|
|
|
254
|
-
<
|
|
255
|
-
|
|
296
|
+
<div>
|
|
297
|
+
<dt><label for="input-b">Input B</label></dt>
|
|
298
|
+
<dd><input type="text" id="input-b" name="input-b"></dd>
|
|
299
|
+
</div>
|
|
256
300
|
|
|
257
301
|
<!-- wraps to the next row -->
|
|
258
|
-
<
|
|
259
|
-
|
|
302
|
+
<div>
|
|
303
|
+
<dt><label for="input-c">Input C</label></dt>
|
|
304
|
+
<dd><input type="text" id="input-c" name="input-c"></dd>
|
|
305
|
+
</div>
|
|
260
306
|
</dl>
|
|
261
307
|
</form>
|
|
262
308
|
|
|
@@ -267,26 +313,38 @@
|
|
|
267
313
|
<fieldset class="colspan-3">
|
|
268
314
|
<!-- inherits 3 column class -->
|
|
269
315
|
<dl>
|
|
270
|
-
<
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
316
|
+
<div>
|
|
317
|
+
<dt><label for="f-ex-input-a">Input A</label></dt>
|
|
318
|
+
<dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
|
|
319
|
+
</div>
|
|
320
|
+
|
|
321
|
+
<div>
|
|
322
|
+
<dt><label for="f-ex-input-b">Input B</label></dt>
|
|
323
|
+
<dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
<div>
|
|
327
|
+
<dt><label for="f-ex-input-c">Input C</label></dt>
|
|
328
|
+
<dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
|
|
329
|
+
</div>
|
|
278
330
|
</dl>
|
|
279
331
|
|
|
280
332
|
<!-- has 4 columns -->
|
|
281
333
|
<dl class="colspan-4">
|
|
282
|
-
<
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
334
|
+
<div>
|
|
335
|
+
<dt><label for="f-ex-input-d">Input D</label></dt>
|
|
336
|
+
<dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div>
|
|
340
|
+
<dt><label for="f-ex-input-e">Input E</label></dt>
|
|
341
|
+
<dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
|
|
342
|
+
</div>
|
|
343
|
+
|
|
344
|
+
<div>
|
|
345
|
+
<dt><label for="f-ex-input-f">Input F</label></dt>
|
|
346
|
+
<dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
|
|
347
|
+
</div>
|
|
290
348
|
</dl>
|
|
291
349
|
</fieldset>
|
|
292
350
|
</form>
|
|
@@ -296,26 +354,38 @@
|
|
|
296
354
|
<fieldset class="colspan-3">
|
|
297
355
|
<!-- inherits 3 column class -->
|
|
298
356
|
<dl>
|
|
299
|
-
<
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
357
|
+
<div>
|
|
358
|
+
<dt><label for="f-ex-input-a">Input A</label></dt>
|
|
359
|
+
<dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
|
|
360
|
+
</div>
|
|
361
|
+
|
|
362
|
+
<div>
|
|
363
|
+
<dt><label for="f-ex-input-b">Input B</label></dt>
|
|
364
|
+
<dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
<div>
|
|
368
|
+
<dt><label for="f-ex-input-c">Input C</label></dt>
|
|
369
|
+
<dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
|
|
370
|
+
</div>
|
|
307
371
|
</dl>
|
|
308
372
|
|
|
309
373
|
<!-- has 4 columns -->
|
|
310
374
|
<dl class="colspan-4">
|
|
311
|
-
<
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
375
|
+
<div>
|
|
376
|
+
<dt><label for="f-ex-input-d">Input D</label></dt>
|
|
377
|
+
<dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
|
|
378
|
+
</div>
|
|
379
|
+
|
|
380
|
+
<div>
|
|
381
|
+
<dt><label for="f-ex-input-e">Input E</label></dt>
|
|
382
|
+
<dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
|
|
383
|
+
</div>
|
|
384
|
+
|
|
385
|
+
<div>
|
|
386
|
+
<dt><label for="f-ex-input-f">Input F</label></dt>
|
|
387
|
+
<dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
|
|
388
|
+
</div>
|
|
319
389
|
</dl>
|
|
320
390
|
</fieldset>
|
|
321
391
|
</form>
|
|
@@ -328,17 +398,23 @@
|
|
|
328
398
|
<form class="semanticForms">
|
|
329
399
|
<fieldset>
|
|
330
400
|
<dl>
|
|
331
|
-
<
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
<
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
401
|
+
<div>
|
|
402
|
+
<dt><label for="cspan-ex-input-a">Input A</label></dt>
|
|
403
|
+
<!-- 1 column -->
|
|
404
|
+
<dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<div>
|
|
408
|
+
<dt><label for="cspan-ex-input-b">Input B</label></dt>
|
|
409
|
+
<!-- 2 columns -->
|
|
410
|
+
<dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
|
|
411
|
+
</div>
|
|
412
|
+
|
|
413
|
+
<div>
|
|
414
|
+
<dt><label for="cspan-ex-input-c">Input C</label></dt>
|
|
415
|
+
<!-- 5 columns (max) -->
|
|
416
|
+
<dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
|
|
417
|
+
</div>
|
|
342
418
|
</dl>
|
|
343
419
|
</fieldset>
|
|
344
420
|
</form>
|
|
@@ -347,17 +423,23 @@
|
|
|
347
423
|
<form class="semanticForms">
|
|
348
424
|
<fieldset>
|
|
349
425
|
<dl>
|
|
350
|
-
<
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
<
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
426
|
+
<div>
|
|
427
|
+
<dt><label for="cspan-ex-input-a">Input A</label></dt>
|
|
428
|
+
<!-- 1 column -->
|
|
429
|
+
<dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
|
|
430
|
+
</div>
|
|
431
|
+
|
|
432
|
+
<div>
|
|
433
|
+
<dt><label for="cspan-ex-input-b">Input B</label></dt>
|
|
434
|
+
<!-- 2 columns -->
|
|
435
|
+
<dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
|
|
436
|
+
</div>
|
|
437
|
+
|
|
438
|
+
<div>
|
|
439
|
+
<dt><label for="cspan-ex-input-c">Input C</label></dt>
|
|
440
|
+
<!-- 5 columns (max) -->
|
|
441
|
+
<dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
|
|
442
|
+
</div>
|
|
361
443
|
</dl>
|
|
362
444
|
</fieldset>
|
|
363
445
|
</form>
|
|
@@ -368,17 +450,23 @@
|
|
|
368
450
|
<form class="semanticForms">
|
|
369
451
|
<fieldset>
|
|
370
452
|
<dl>
|
|
371
|
-
<
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
<
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
453
|
+
<div>
|
|
454
|
+
<dt><label for="cspanfull-ex-input-a">Input A</label></dt>
|
|
455
|
+
<!-- this spans 2 columns on row 1 -->
|
|
456
|
+
<dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
|
|
457
|
+
</div>
|
|
458
|
+
|
|
459
|
+
<div>
|
|
460
|
+
<dt><label for="cspanfull-ex-input-b">Input B</label></dt>
|
|
461
|
+
<!-- this spans the full width of row 2 -->
|
|
462
|
+
<dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
|
|
463
|
+
</div>
|
|
464
|
+
|
|
465
|
+
<div>
|
|
466
|
+
<!-- this spans 1 column on row 3 -->
|
|
467
|
+
<dt><label for="cspanfull-ex-input-c">Input C</label></dt>
|
|
468
|
+
<dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
|
|
469
|
+
</div>
|
|
382
470
|
</dl>
|
|
383
471
|
</fieldset>
|
|
384
472
|
</form>
|
|
@@ -387,21 +475,71 @@
|
|
|
387
475
|
<form class="semanticForms">
|
|
388
476
|
<fieldset>
|
|
389
477
|
<dl>
|
|
390
|
-
<
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
<
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
478
|
+
<div>
|
|
479
|
+
<dt><label for="cspanfull-ex-input-a">Input A</label></dt>
|
|
480
|
+
<!-- this spans 2 columns on row 1 -->
|
|
481
|
+
<dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<div>
|
|
485
|
+
<dt><label for="cspanfull-ex-input-b">Input B</label></dt>
|
|
486
|
+
<!-- this spans the full width of row 2 -->
|
|
487
|
+
<dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
|
|
488
|
+
</div>
|
|
489
|
+
|
|
490
|
+
<div>
|
|
491
|
+
<!-- this spans 1 column on row 3 -->
|
|
492
|
+
<dt><label for="cspanfull-ex-input-c">Input C</label></dt>
|
|
493
|
+
<dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
|
|
494
|
+
</div>
|
|
401
495
|
</dl>
|
|
402
496
|
</fieldset>
|
|
403
497
|
</form>
|
|
404
498
|
|
|
499
|
+
<h5>Align elements within the responsive grid</h5>
|
|
500
|
+
|
|
501
|
+
<p>Use classes to align an element at the start, center, or end of its available space. Available classes are <code>align-start</code>, <code>align-center</code>, and <code>align-end</code>.</p>
|
|
502
|
+
|
|
503
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
504
|
+
<form class="semanticForms" method="post">
|
|
505
|
+
<dl class="colspan-3">
|
|
506
|
+
<div>
|
|
507
|
+
<dt><label for="align-start">align-start</label></dt>
|
|
508
|
+
<dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
<div>
|
|
512
|
+
<dt><label for="align-center">align-center</label></dt>
|
|
513
|
+
<dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
|
|
514
|
+
</div>
|
|
515
|
+
|
|
516
|
+
<div>
|
|
517
|
+
<dt><label for="align-end">align-end</label></dt>
|
|
518
|
+
<dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
|
|
519
|
+
</div>
|
|
520
|
+
</dl>
|
|
521
|
+
</form>
|
|
522
|
+
</escape></code></pre>
|
|
523
|
+
|
|
524
|
+
<form class="semanticForms" method="post">
|
|
525
|
+
<dl class="colspan-3">
|
|
526
|
+
<div>
|
|
527
|
+
<dt><label for="align-start">align-start</label></dt>
|
|
528
|
+
<dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<div>
|
|
532
|
+
<dt><label for="align-center">align-center</label></dt>
|
|
533
|
+
<dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
|
|
534
|
+
</div>
|
|
535
|
+
|
|
536
|
+
<div>
|
|
537
|
+
<dt><label for="align-end">align-end</label></dt>
|
|
538
|
+
<dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
|
|
539
|
+
</div>
|
|
540
|
+
</dl>
|
|
541
|
+
</form>
|
|
542
|
+
|
|
405
543
|
<h4 id="buttongroups">Button groups</h4>
|
|
406
544
|
|
|
407
545
|
<p>You can align buttons side-by-side, or in left/right/center groups.</p>
|
|
@@ -458,6 +596,38 @@
|
|
|
458
596
|
</menu>
|
|
459
597
|
</form>
|
|
460
598
|
|
|
599
|
+
<p>Buttons may also be integrated into the responsive grid by treating it like a standard form input.</p>
|
|
600
|
+
|
|
601
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
602
|
+
<form class="semanticForms" method="post">
|
|
603
|
+
<dl>
|
|
604
|
+
<div>
|
|
605
|
+
<dt><label for="inline-btn-input">Some input</label></dt>
|
|
606
|
+
<dd><input type="text" name="inline-btn-input" id="inline-btn-input"></dd>
|
|
607
|
+
</div>
|
|
608
|
+
|
|
609
|
+
<div>
|
|
610
|
+
<dt><label for="inline-btn">Inline button</label></dt>
|
|
611
|
+
<dd><button id="inline-btn">Inline button</button></dd>
|
|
612
|
+
</div>
|
|
613
|
+
</dl>
|
|
614
|
+
</form>
|
|
615
|
+
</escape></code></pre>
|
|
616
|
+
|
|
617
|
+
<form class="semanticForms" method="post">
|
|
618
|
+
<dl>
|
|
619
|
+
<div>
|
|
620
|
+
<dt><label for="inline-btn-input">Some input</label></dt>
|
|
621
|
+
<dd><input type="text" name="inline-btn-input" id="inline-btn-input"></dd>
|
|
622
|
+
</div>
|
|
623
|
+
|
|
624
|
+
<div>
|
|
625
|
+
<dt><label for="inline-btn">Inline button</label></dt>
|
|
626
|
+
<dd><button id="inline-btn">Inline button</button></dd>
|
|
627
|
+
</div>
|
|
628
|
+
</dl>
|
|
629
|
+
</form>
|
|
630
|
+
|
|
461
631
|
<p>You can also style a link like a Semantic Forms button by applying a class of <code>button-link</code> to it.</p>
|
|
462
632
|
|
|
463
633
|
<h4 id="checkboxesandradios">Checkboxes and radio buttons</h4>
|
|
@@ -471,16 +641,20 @@
|
|
|
471
641
|
<pre><code class='language-html' lang='html'><escape>
|
|
472
642
|
<form class="semanticForms">
|
|
473
643
|
<dl>
|
|
474
|
-
<
|
|
475
|
-
|
|
644
|
+
<div>
|
|
645
|
+
<dt><label for="some_field_name">Single checkbox</label></dt>
|
|
646
|
+
<dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
|
|
647
|
+
</div>
|
|
476
648
|
</dl>
|
|
477
649
|
</form>
|
|
478
650
|
</escape></code></pre>
|
|
479
651
|
|
|
480
652
|
<form class="semanticForms">
|
|
481
653
|
<dl>
|
|
482
|
-
<
|
|
483
|
-
|
|
654
|
+
<div>
|
|
655
|
+
<dt><label for="some_field_name">Single checkbox</label></dt>
|
|
656
|
+
<dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
|
|
657
|
+
</div>
|
|
484
658
|
</dl>
|
|
485
659
|
</form>
|
|
486
660
|
|
|
@@ -489,28 +663,32 @@
|
|
|
489
663
|
<pre><code class='language-html' lang='html'><escape>
|
|
490
664
|
<form class="semanticForms">
|
|
491
665
|
<dl>
|
|
492
|
-
<
|
|
493
|
-
|
|
494
|
-
<
|
|
495
|
-
<
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
666
|
+
<div>
|
|
667
|
+
<dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
|
|
668
|
+
<dd class="checkboxes">
|
|
669
|
+
<ul id="some_checkboxes">
|
|
670
|
+
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
|
|
671
|
+
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
|
|
672
|
+
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
|
|
673
|
+
</ul>
|
|
674
|
+
</dd>
|
|
675
|
+
</div>
|
|
500
676
|
</dl>
|
|
501
677
|
</form>
|
|
502
678
|
</escape></code></pre>
|
|
503
679
|
|
|
504
680
|
<form class="semanticForms">
|
|
505
681
|
<dl>
|
|
506
|
-
<
|
|
507
|
-
|
|
508
|
-
<
|
|
509
|
-
<
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
682
|
+
<div>
|
|
683
|
+
<dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
|
|
684
|
+
<dd class="checkboxes">
|
|
685
|
+
<ul id="some_checkboxes">
|
|
686
|
+
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
|
|
687
|
+
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
|
|
688
|
+
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
|
|
689
|
+
</ul>
|
|
690
|
+
</dd>
|
|
691
|
+
</div>
|
|
514
692
|
</dl>
|
|
515
693
|
</form>
|
|
516
694
|
|
|
@@ -519,28 +697,32 @@
|
|
|
519
697
|
<pre><code class='language-html' lang='html'><escape>
|
|
520
698
|
<form class="semanticForms">
|
|
521
699
|
<dl>
|
|
522
|
-
<
|
|
523
|
-
|
|
524
|
-
<
|
|
525
|
-
<
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
700
|
+
<div>
|
|
701
|
+
<dt><label data-for="some_radios">Radios:</label></dt>
|
|
702
|
+
<dd class="radios">
|
|
703
|
+
<ul id="some_radios">
|
|
704
|
+
<li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
|
|
705
|
+
<li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
|
|
706
|
+
<li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
|
|
707
|
+
</ul>
|
|
708
|
+
</dd>
|
|
709
|
+
</div>
|
|
530
710
|
</dl>
|
|
531
711
|
</form>
|
|
532
712
|
</escape></code></pre>
|
|
533
713
|
|
|
534
714
|
<form class="semanticForms">
|
|
535
715
|
<dl>
|
|
536
|
-
<
|
|
537
|
-
|
|
538
|
-
<
|
|
539
|
-
<
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
716
|
+
<div>
|
|
717
|
+
<dt><label data-for="some_radios">Radios:</label></dt>
|
|
718
|
+
<dd class="radios">
|
|
719
|
+
<ul id="some_radios">
|
|
720
|
+
<li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
|
|
721
|
+
<li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
|
|
722
|
+
<li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
|
|
723
|
+
</ul>
|
|
724
|
+
</dd>
|
|
725
|
+
</div>
|
|
544
726
|
</dl>
|
|
545
727
|
</form>
|
|
546
728
|
|
|
@@ -551,16 +733,20 @@
|
|
|
551
733
|
<pre><code class='language-html' lang='html'><escape>
|
|
552
734
|
<form class="semanticForms">
|
|
553
735
|
<dl>
|
|
554
|
-
<
|
|
555
|
-
|
|
736
|
+
<div>
|
|
737
|
+
<dt><label for="input" data-no-asterisk>Input label</label></dt>
|
|
738
|
+
<dd><input type="text" name="input" id="input" required>
|
|
739
|
+
</div>
|
|
556
740
|
</dl>
|
|
557
741
|
</form>
|
|
558
742
|
</escape></code></pre>
|
|
559
743
|
|
|
560
744
|
<form class="semanticForms">
|
|
561
745
|
<dl>
|
|
562
|
-
<
|
|
563
|
-
|
|
746
|
+
<div>
|
|
747
|
+
<dt><label for="input" data-no-asterisk>Input label</label></dt>
|
|
748
|
+
<dd><input type="text" name="input" id="input" required>
|
|
749
|
+
</div>
|
|
564
750
|
</dl>
|
|
565
751
|
</form>
|
|
566
752
|
|
|
@@ -569,22 +755,26 @@
|
|
|
569
755
|
<pre><code class='language-html' lang='html'><escape>
|
|
570
756
|
<form class="semanticForms" method="post">
|
|
571
757
|
<dl>
|
|
572
|
-
<
|
|
573
|
-
|
|
574
|
-
<
|
|
575
|
-
|
|
576
|
-
|
|
758
|
+
<div>
|
|
759
|
+
<dt><label for="password_validation">Password label</label></dt>
|
|
760
|
+
<dd>
|
|
761
|
+
<input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
|
|
762
|
+
<p data-invalid-text>Password must be at least 8 characters long.</p>
|
|
763
|
+
</dd>
|
|
764
|
+
</div>
|
|
577
765
|
</dl>
|
|
578
766
|
</form>
|
|
579
767
|
</escape></code></pre>
|
|
580
768
|
|
|
581
769
|
<form class="semanticForms" method="post">
|
|
582
770
|
<dl>
|
|
583
|
-
<
|
|
584
|
-
|
|
585
|
-
<
|
|
586
|
-
|
|
587
|
-
|
|
771
|
+
<div>
|
|
772
|
+
<dt><label for="password_validation">Password label</label></dt>
|
|
773
|
+
<dd>
|
|
774
|
+
<input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
|
|
775
|
+
<p data-invalid-text>Password must be at least 8 characters long.</p>
|
|
776
|
+
</dd>
|
|
777
|
+
</div>
|
|
588
778
|
</dl>
|
|
589
779
|
</form>
|
|
590
780
|
|
|
@@ -593,16 +783,20 @@
|
|
|
593
783
|
<pre><code class='language-html' lang='html'><escape>
|
|
594
784
|
<form class="semanticForms">
|
|
595
785
|
<dl>
|
|
596
|
-
<
|
|
597
|
-
|
|
786
|
+
<div>
|
|
787
|
+
<dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
|
|
788
|
+
<dd><input type="text" name="input" id="input_validation" required>
|
|
789
|
+
</div>
|
|
598
790
|
</dl>
|
|
599
791
|
</form>
|
|
600
792
|
</escape></code></pre>
|
|
601
793
|
|
|
602
794
|
<form class="semanticForms">
|
|
603
795
|
<dl>
|
|
604
|
-
<
|
|
605
|
-
|
|
796
|
+
<div>
|
|
797
|
+
<dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
|
|
798
|
+
<dd><input type="text" name="input" id="input_validation" required>
|
|
799
|
+
</div>
|
|
606
800
|
</dl>
|
|
607
801
|
</form>
|
|
608
802
|
|
|
@@ -613,16 +807,20 @@
|
|
|
613
807
|
<pre><code class='language-html' lang='html'><escape>
|
|
614
808
|
<form class="semanticForms">
|
|
615
809
|
<dl>
|
|
616
|
-
<
|
|
617
|
-
|
|
810
|
+
<div>
|
|
811
|
+
<dt><label for="rangeValue">Range value</label></dt>
|
|
812
|
+
<dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
|
|
813
|
+
</div>
|
|
618
814
|
</dl>
|
|
619
815
|
</form>
|
|
620
816
|
</escape></code></pre>
|
|
621
817
|
|
|
622
818
|
<form class="semanticForms">
|
|
623
819
|
<dl>
|
|
624
|
-
<
|
|
625
|
-
|
|
820
|
+
<div>
|
|
821
|
+
<dt><label for="rangeValue">Range value</label></dt>
|
|
822
|
+
<dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
|
|
823
|
+
</div>
|
|
626
824
|
</dl>
|
|
627
825
|
</form>
|
|
628
826
|
|