semantic-forms 5.1.1 → 5.1.2
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 +10 -0
- package/dist/semantic-forms.cjs +1 -1
- package/dist/semantic-forms.cjs.map +1 -1
- package/dist/semantic-forms.css +1590 -213
- package/dist/semantic-forms.css.map +1 -1
- package/dist/semantic-forms.js +1 -1
- 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 +1 -1
- package/dist/semantic-forms.mjs.map +1 -1
- package/docs/statics/css/highlight.js.dark.scss +1 -0
- package/docs/statics/css/highlight.js.light.scss +1 -0
- package/docs/statics/css/semantic-forms-styles.scss +57 -0
- package/docs/statics/js/semantic-forms-demo.js +12 -0
- package/docs/statics/js/semantic-forms-main.js +51 -0
- package/docs/statics/pages/fullDemo.html +1274 -0
- package/docs/statics/pages/layouts/main.html +1 -0
- package/docs/statics/pages/usage.html +1 -1
- package/package.json +11 -11
- package/semanticForms.js +8 -0
- package/semanticForms.scss +185 -38
|
@@ -0,0 +1,1274 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
+
<meta name="format-detection" content="telephone=no">
|
|
7
|
+
<meta name="description" content="A pattern library of forms based on semantic HTML enhanced with a modern UX.">
|
|
8
|
+
<title>Semantic Forms</title>
|
|
9
|
+
<link rel="preload" href="/css/semantic-forms-styles.css" as="style">
|
|
10
|
+
<link rel="preload" href="/js/semantic-forms-main.js" as="script">
|
|
11
|
+
<link rel="stylesheet" href="/css/semantic-forms-styles.css">
|
|
12
|
+
<script src="/js/semantic-forms-main.js" defer></script>
|
|
13
|
+
<style>
|
|
14
|
+
body.light {
|
|
15
|
+
background-color: #fff;
|
|
16
|
+
color: #000;
|
|
17
|
+
}
|
|
18
|
+
body.dark {
|
|
19
|
+
background-color: #000;
|
|
20
|
+
color: #fff;
|
|
21
|
+
}
|
|
22
|
+
:where(h1) {
|
|
23
|
+
margin-block: 0.67em;
|
|
24
|
+
font-size: 2em;
|
|
25
|
+
}
|
|
26
|
+
</style>
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
<main>
|
|
30
|
+
<article>
|
|
31
|
+
<h1>Semantic Forms</h1>
|
|
32
|
+
<p>A pattern library of forms based on semantic HTML enhanced with a modern UX.</p>
|
|
33
|
+
|
|
34
|
+
<h2>High flow (JavaScript enabled) styling</h2>
|
|
35
|
+
|
|
36
|
+
<form action="/somewhere" method="post" class="semanticForms">
|
|
37
|
+
<dl>
|
|
38
|
+
<dt><label for="name">Name</label></dt>
|
|
39
|
+
<dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
|
|
40
|
+
|
|
41
|
+
<dt><label for="prefilled">Prefilled field</label></dt>
|
|
42
|
+
<dd><input id="prefilled" name="prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
|
|
43
|
+
|
|
44
|
+
<dt><label for="noplaceholder">No placeholder</label></dt>
|
|
45
|
+
<dd><input id="noplaceholder" name="noplaceholder" type="text"></dd>
|
|
46
|
+
|
|
47
|
+
<dt><label for="password">Password field</label></dt>
|
|
48
|
+
<dd>
|
|
49
|
+
<input id="password" name="password" type="password" minlength="8" required>
|
|
50
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
51
|
+
</dd>
|
|
52
|
+
|
|
53
|
+
<dt><label for="dontshow-password">Don't show password field</label></dt>
|
|
54
|
+
<dd>
|
|
55
|
+
<input id="dontshow-password" name="dontshow-password" type="password" minlength="8" required data-no-reveal>
|
|
56
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
57
|
+
</dd>
|
|
58
|
+
|
|
59
|
+
<dt><label for="customize-password">Customize clear/show buttons</label></dt>
|
|
60
|
+
<dd>
|
|
61
|
+
<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!">
|
|
62
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
63
|
+
</dd>
|
|
64
|
+
</dl>
|
|
65
|
+
|
|
66
|
+
<dl>
|
|
67
|
+
<dt><label for="single-input">Single form input</label></dt>
|
|
68
|
+
<dd><input type="text" name="single-input" id="single-input"></dd>
|
|
69
|
+
</dl>
|
|
70
|
+
|
|
71
|
+
<fieldset class="colspan-full">
|
|
72
|
+
<legend>Fieldset legend</legend>
|
|
73
|
+
|
|
74
|
+
<h3>Inputs</h3>
|
|
75
|
+
<dl>
|
|
76
|
+
<dt><label for="email">Email field</label></dt>
|
|
77
|
+
<dd><input id="email" name="email" type="email" placeholder="e.g. you@email.server"></dd>
|
|
78
|
+
|
|
79
|
+
<dt><label for="tel">Telephone field</label></dt>
|
|
80
|
+
<dd><input id="tel" name="tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
|
|
81
|
+
|
|
82
|
+
<dt><label for="url">URL field</label></dt>
|
|
83
|
+
<dd><input id="url" name="url" type="url" placeholder="e.g. https://github.com"></dd>
|
|
84
|
+
|
|
85
|
+
<dt><label for="search">Search field</label></dt>
|
|
86
|
+
<dd><input id="search" name="search" type="search" placeholder="e.g. cats"></dd>
|
|
87
|
+
|
|
88
|
+
<dt><label for="number">Number</label></dt>
|
|
89
|
+
<dd><input id="number" name="number" type="number" placeholder="e.g. 43"></dd>
|
|
90
|
+
|
|
91
|
+
<dt><label for="label-subtext">Input with label help text</label></dt>
|
|
92
|
+
<dd>
|
|
93
|
+
<input id="label-subtext" name="label-subtext" type="text" placeholder="e.g. John Smith">
|
|
94
|
+
<label for="label-subtext">Some help text</label>
|
|
95
|
+
</dd>
|
|
96
|
+
|
|
97
|
+
<dt><label for="label-help-icon" data-show-help-icon>Input with help icon</label></dt>
|
|
98
|
+
<dd><input id="label-help-icon" name="label-subtext" type="text" title="Some more help text." placeholder="Hover over the icon"></dd>
|
|
99
|
+
|
|
100
|
+
<dt><label for="label-required-help-icon" data-show-help-icon>Required input with help icon</label></dt>
|
|
101
|
+
<dd><input id="label-required-help-icon" name="label-subtext" type="text" title="Some more help text." placeholder="Hover over the icon" required></dd>
|
|
102
|
+
|
|
103
|
+
<dt><label for="invalid-field">Invalid field</label></dt>
|
|
104
|
+
<dd><input id="invalid-field" class="invalid" name="invalid-field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
|
|
105
|
+
|
|
106
|
+
<dt><label for="valid-field">Valid field</label></dt>
|
|
107
|
+
<dd><input id="valid-field" class="valid" name="valid-field" type="number" placeholder="e.g. 43" min="0" value="2"></dd>
|
|
108
|
+
|
|
109
|
+
<dt><label for="required-field">Required field</label></dt>
|
|
110
|
+
<dd><input id="required-field" name="required-field" type="text" required></dd>
|
|
111
|
+
|
|
112
|
+
<dt><label for="required-field-no-asterisk" data-no-asterisk>Required field (no asterisk)</label></dt>
|
|
113
|
+
<dd><input id="required-field-no-asterisk" name="required-field-no-asterisk" type="text" required></dd>
|
|
114
|
+
|
|
115
|
+
<dt><label for="required-field-custom-title" data-asterisk-text="This is a custom title.">Required field (custom title)</label></dt>
|
|
116
|
+
<dd><input id="required-field-custom-title" name="required-field-custom-title" type="text" required></dd>
|
|
117
|
+
|
|
118
|
+
<dt><label for="disabledInput">Disabled input</label></dt>
|
|
119
|
+
<dd><input id="disabledInput" name="disabledInput" type="text" placeholder="e.g. foo" disabled></dd>
|
|
120
|
+
|
|
121
|
+
<dt><label for="disabledInputValue">Disabled input w/ value</label></dt>
|
|
122
|
+
<dd><input id="disabledInputValue" name="disabledInputValue" type="text" placeholder="e.g. foo" value="some value" disabled></dd>
|
|
123
|
+
|
|
124
|
+
<dt><label for="color">Color field</label></dt>
|
|
125
|
+
<dd><input id="color" name="color" type="color"></dd>
|
|
126
|
+
|
|
127
|
+
<dt><label for="date">Date field</label></dt>
|
|
128
|
+
<dd><input id="date" name="date" type="date"></dd>
|
|
129
|
+
|
|
130
|
+
<dt><label for="time">Time field</label></dt>
|
|
131
|
+
<dd><input id="time" name="time" type="time"></dd>
|
|
132
|
+
|
|
133
|
+
<dt><label for="datetime-local">Datetime-local field</label></dt>
|
|
134
|
+
<dd><input id="datetime-local" name="datetime-local" type="datetime-local"></dd>
|
|
135
|
+
|
|
136
|
+
<dt><label for="month">Month field</label></dt>
|
|
137
|
+
<dd><input id="month" name="month" type="month"></dd>
|
|
138
|
+
|
|
139
|
+
<dt><label for="week">Week field</label></dt>
|
|
140
|
+
<dd><input id="week" name="week" type="week"></dd>
|
|
141
|
+
|
|
142
|
+
<dt><label for="file">File field</label></dt>
|
|
143
|
+
<dd><input id="file" name="file" type="file"></dd>
|
|
144
|
+
|
|
145
|
+
<dt><label for="range">Range field</label></dt>
|
|
146
|
+
<dd><input id="range" name="range" type="range"></dd>
|
|
147
|
+
</dl>
|
|
148
|
+
|
|
149
|
+
<h3>Selects</h3>
|
|
150
|
+
<dl>
|
|
151
|
+
<dt><label for="selectbox">Select box</label></dt>
|
|
152
|
+
<dd>
|
|
153
|
+
<select id="selectbox" name="selectbox">
|
|
154
|
+
<option value="1">Item one</option>
|
|
155
|
+
<option value="2">Item two</option>
|
|
156
|
+
<option value="3">Item three</option>
|
|
157
|
+
<option value="4">Item four</option>
|
|
158
|
+
<option value="5">Item five</option>
|
|
159
|
+
<option value="6">Item six</option>
|
|
160
|
+
<option value="7">Item seven</option>
|
|
161
|
+
</select>
|
|
162
|
+
<label for="selectbox">Some help text regarding the select box</label>
|
|
163
|
+
</dd>
|
|
164
|
+
|
|
165
|
+
<dt><label for="required-selectbox">Required select box</label></dt>
|
|
166
|
+
<dd>
|
|
167
|
+
<select id="required-selectbox" name="required-selectbox" required>
|
|
168
|
+
<option value="">Make a selection</option>
|
|
169
|
+
<option value="1">Item one</option>
|
|
170
|
+
<option value="2">Item two</option>
|
|
171
|
+
<option value="3">Item three</option>
|
|
172
|
+
<option value="4">Item four</option>
|
|
173
|
+
<option value="5">Item five</option>
|
|
174
|
+
<option value="6">Item six</option>
|
|
175
|
+
<option value="7">Item seven</option>
|
|
176
|
+
</select>
|
|
177
|
+
</dd>
|
|
178
|
+
|
|
179
|
+
<dt><label for="required-selectbox-hide" data-no-asterisk>Required select box (no asterisk)</label></dt>
|
|
180
|
+
<dd>
|
|
181
|
+
<select id="required-selectbox-hide" name="required-selectbox-hide" required>
|
|
182
|
+
<option value="">Make a selection</option>
|
|
183
|
+
<option value="1">Item one</option>
|
|
184
|
+
<option value="2">Item two</option>
|
|
185
|
+
<option value="3">Item three</option>
|
|
186
|
+
<option value="4">Item four</option>
|
|
187
|
+
<option value="5">Item five</option>
|
|
188
|
+
<option value="6">Item six</option>
|
|
189
|
+
<option value="7">Item seven</option>
|
|
190
|
+
</select>
|
|
191
|
+
</dd>
|
|
192
|
+
|
|
193
|
+
<dt><label for="multiple-select">Multiple select</label></dt>
|
|
194
|
+
<dd><select name="multiple-select" id="multiple-select" multiple>
|
|
195
|
+
<option value="1">Option 1</option>
|
|
196
|
+
<option value="2" selected>Option 2</option>
|
|
197
|
+
<option value="3" selected>Option 3</option>
|
|
198
|
+
<option value="4">Option 4</option>
|
|
199
|
+
<option value="5">Option 5</option>
|
|
200
|
+
</select></dd>
|
|
201
|
+
</dl>
|
|
202
|
+
|
|
203
|
+
<h3>Checkboxes</h3>
|
|
204
|
+
<dl>
|
|
205
|
+
<dt><label data-for="checkboxes">Checkboxes</label></dt>
|
|
206
|
+
<dd class="checkboxes">
|
|
207
|
+
<ul id="checkboxes">
|
|
208
|
+
<li><input type="checkbox" name="some_field_name" id="checkboxes_one" checked> <label for="checkboxes_one">One</label></li>
|
|
209
|
+
<li><input type="checkbox" name="some_field_name" id="checkboxes_two"> <label for="checkboxes_two">Two</label></li>
|
|
210
|
+
<li><input type="checkbox" name="some_field_name" id="checkboxes_three"> <label for="checkboxes_three">Three</label></li>
|
|
211
|
+
</ul>
|
|
212
|
+
</dd>
|
|
213
|
+
|
|
214
|
+
<dt><label data-for="required-checkboxes" data-asterisk-text="Custom checkbox title text.">Required checkboxes</label></dt>
|
|
215
|
+
<dd class="checkboxes">
|
|
216
|
+
<ul id="required-checkboxes">
|
|
217
|
+
<li><input type="checkbox" name="required-field" id="required-checkboxes_one" checked required> <label for="required-checkboxes_one">One</label></li>
|
|
218
|
+
<li><input type="checkbox" name="required-field" id="required-checkboxes_two"> <label for="required-checkboxes_two">Two</label></li>
|
|
219
|
+
<li><input type="checkbox" name="required-field" id="required-checkboxes_three" checked> <label for="required-checkboxes_three">Three</label></li>
|
|
220
|
+
</ul>
|
|
221
|
+
</dd>
|
|
222
|
+
|
|
223
|
+
<dt><label data-for="help-text-checkboxes" title="Here is some helpful text." data-show-help-icon>Checkboxes w/ help text</label></dt>
|
|
224
|
+
<dd class="checkboxes">
|
|
225
|
+
<ul id="help-text-checkboxes">
|
|
226
|
+
<li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_one" checked> <label
|
|
227
|
+
for="help-text-checkboxes_one">One</label></li>
|
|
228
|
+
<li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_two"> <label
|
|
229
|
+
for="help-text-checkboxes_two">Two</label></li>
|
|
230
|
+
<li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_three"> <label
|
|
231
|
+
for="help-text-checkboxes_three">Three</label></li>
|
|
232
|
+
</ul>
|
|
233
|
+
</dd>
|
|
234
|
+
|
|
235
|
+
<dt><label data-for="extra-text-checkboxes">Checkboxes w/ additional text</label></dt>
|
|
236
|
+
<dd class="checkboxes">
|
|
237
|
+
<ul id="extra-text-checkboxes">
|
|
238
|
+
<li>
|
|
239
|
+
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_one" checked>
|
|
240
|
+
<label for="extra-text-checkboxes_one">One</label>
|
|
241
|
+
</li>
|
|
242
|
+
<li>
|
|
243
|
+
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_two">
|
|
244
|
+
<label for="extra-text-checkboxes_two">Two</label>
|
|
245
|
+
</li>
|
|
246
|
+
<li>
|
|
247
|
+
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_three" checked>
|
|
248
|
+
<label for="extra-text-checkboxes_three">Three</label></li>
|
|
249
|
+
</ul>
|
|
250
|
+
<label data-for="extra-text-checkboxes">This is some additional text.</label>
|
|
251
|
+
</dd>
|
|
252
|
+
</dl>
|
|
253
|
+
|
|
254
|
+
<dl>
|
|
255
|
+
<dt><label for="checkbox">Checkbox</label></dt>
|
|
256
|
+
<dd><input type="checkbox" name="checkbox-field" id="checkbox"></dd>
|
|
257
|
+
|
|
258
|
+
<dt><label for="required-checkbox">Checkbox (required)</label></dt>
|
|
259
|
+
<dd><input type="checkbox" name="required-checkbox-field" id="required-checkbox" required></dd>
|
|
260
|
+
|
|
261
|
+
<dt><label for="help-icon-checkbox" title="Single checkboxes can have help text too!" data-show-help-icon>Checkbox w/ help text</label></dt>
|
|
262
|
+
<dd><input type="checkbox" name="help-icon-checkbox-field" id="help-icon-checkbox"></dd>
|
|
263
|
+
|
|
264
|
+
<dt><label for="additional-text-checkbox">Checkbox w/ additional text</label></dt>
|
|
265
|
+
<dd>
|
|
266
|
+
<input type="checkbox" name="extra-text-checkbox-field" id="additional-text-checkbox">
|
|
267
|
+
<label for="additional-text-checkbox">This is some additional text.</label>
|
|
268
|
+
</dd>
|
|
269
|
+
</dl>
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
<h3>Radios</h3>
|
|
273
|
+
<dl>
|
|
274
|
+
<dt><label data-for="radios">Radios</label></dt>
|
|
275
|
+
<dd class="radios">
|
|
276
|
+
<ul id="radios">
|
|
277
|
+
<li><input type="radio" name="radios" id="r_one"> <label for="r_one">One</label></li>
|
|
278
|
+
<li><input type="radio" name="radios" id="r_two"> <label for="r_two">Two</label></li>
|
|
279
|
+
<li><input type="radio" name="radios" id="r_three"> <label for="r_three">Three</label></li>
|
|
280
|
+
</ul>
|
|
281
|
+
</dd>
|
|
282
|
+
|
|
283
|
+
<dt><label data-for="required-radios" data-asterisk-text="Custom radio title text.">Required radios</label></dt>
|
|
284
|
+
<dd class="radios">
|
|
285
|
+
<ul id="required-radios">
|
|
286
|
+
<li><input type="radio" name="required-field" id="required-radios_one" checked required> <label for="required-radios_one">One</label></li>
|
|
287
|
+
<li><input type="radio" name="required-field" id="required-radios_two"> <label for="required-radios_two">Two</label></li>
|
|
288
|
+
<li><input type="radio" name="required-field" id="required-radios_three" checked> <label for="required-radios_three">Three</label></li>
|
|
289
|
+
</ul>
|
|
290
|
+
</dd>
|
|
291
|
+
|
|
292
|
+
<dt><label data-for="help-text-radios" title="Here is some helpful text." data-show-help-icon>Radios w/ help text</label></dt>
|
|
293
|
+
<dd class="radios">
|
|
294
|
+
<ul id="help-text-radios">
|
|
295
|
+
<li><input type="radio" name="some_field_name" id="help-text-radios_one" checked> <label
|
|
296
|
+
for="help-text-radios_one">One</label></li>
|
|
297
|
+
<li><input type="radio" name="some_field_name" id="help-text-radios_two"> <label
|
|
298
|
+
for="help-text-radios_two">Two</label></li>
|
|
299
|
+
<li><input type="radio" name="some_field_name" id="help-text-radios_three"> <label
|
|
300
|
+
for="help-text-radios_three">Three</label></li>
|
|
301
|
+
</ul>
|
|
302
|
+
</dd>
|
|
303
|
+
|
|
304
|
+
<dt><label data-for="radios-with-additional-text">Radios w/ additional text</label></dt>
|
|
305
|
+
<dd class="radios">
|
|
306
|
+
<ul id="radios-with-additional-text">
|
|
307
|
+
<li>
|
|
308
|
+
<input type="radio" name="radios-with-additional-text" id="a_r_one">
|
|
309
|
+
<label for="a_r_one">One</label>
|
|
310
|
+
</li>
|
|
311
|
+
<li>
|
|
312
|
+
<input type="radio" name="radios-with-additional-text" id="a_r_two">
|
|
313
|
+
<label for="a_r_two">Two</label>
|
|
314
|
+
</li>
|
|
315
|
+
<li>
|
|
316
|
+
<input type="radio" name="radios-with-additional-text" id="a_r_three">
|
|
317
|
+
<label for="a_r_three">Three</label>
|
|
318
|
+
</li>
|
|
319
|
+
</ul>
|
|
320
|
+
<label data-for="radios-with-additional-text">This is some additional text.</label>
|
|
321
|
+
</dd>
|
|
322
|
+
</dl>
|
|
323
|
+
|
|
324
|
+
<dl>
|
|
325
|
+
<dt><label for="radio">Radio</label></dt>
|
|
326
|
+
<dd><input type="radio" name="radio" id="radio"></dd>
|
|
327
|
+
|
|
328
|
+
<dt><label for="required-radio">Radio (required)</label></dt>
|
|
329
|
+
<dd><input type="radio" name="required-radio" id="required-radio" required></dd>
|
|
330
|
+
|
|
331
|
+
<dt><label for="help-icon-radio" title="Single radios can have help text too!" data-show-help-icon>Radio w/ help text</label></dt>
|
|
332
|
+
<dd><input type="radio" name="help-icon-radio-field" id="help-icon-radio"></dd>
|
|
333
|
+
|
|
334
|
+
<dt><label for="extra-text-radio">Radio w/ additional text</label></dt>
|
|
335
|
+
<dd>
|
|
336
|
+
<input type="radio" name="extra-text-radio" id="extra-text-radio">
|
|
337
|
+
<label for="extra-text-radio">This is some additional text.</label>
|
|
338
|
+
</dd>
|
|
339
|
+
</dl>
|
|
340
|
+
|
|
341
|
+
<h3>Other</h3>
|
|
342
|
+
<dl>
|
|
343
|
+
<dt><label for="textarea">Textarea</label></dt>
|
|
344
|
+
<dd><textarea id="textarea" name="textarea" rows="5" cols="50" 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>
|
|
345
|
+
|
|
346
|
+
<dt><label for="prefilledtextarea">Textarea (prefilled)</label></dt>
|
|
347
|
+
<dd>
|
|
348
|
+
<textarea id="prefilledtextarea" name="prefilledtextarea" rows="5" cols="50" 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>
|
|
349
|
+
<label for="prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
|
|
350
|
+
</dd>
|
|
351
|
+
</dl>
|
|
352
|
+
|
|
353
|
+
<h3>Tables</h3>
|
|
354
|
+
|
|
355
|
+
<h4>Table with inputs and buttons</h4>
|
|
356
|
+
<table>
|
|
357
|
+
<thead>
|
|
358
|
+
<tr class="title">
|
|
359
|
+
<th colspan="3">Table Title</th>
|
|
360
|
+
</tr>
|
|
361
|
+
<tr>
|
|
362
|
+
<th>Column 1</th>
|
|
363
|
+
<th>Column 2</th>
|
|
364
|
+
<th>Column 3</th>
|
|
365
|
+
</tr>
|
|
366
|
+
</thead>
|
|
367
|
+
<tbody>
|
|
368
|
+
<tr>
|
|
369
|
+
<td>1</td>
|
|
370
|
+
<td>
|
|
371
|
+
<input type="text" name="table-text-1A" id="table-text-1A" placeholder="A text input in a table">
|
|
372
|
+
</td>
|
|
373
|
+
<td>
|
|
374
|
+
<menu>
|
|
375
|
+
<li><button type="button">Button 1</button></li>
|
|
376
|
+
<li><button type="button">Button 2</button></li>
|
|
377
|
+
</menu>
|
|
378
|
+
</td>
|
|
379
|
+
</tr>
|
|
380
|
+
<tr>
|
|
381
|
+
<td>2</td>
|
|
382
|
+
<td>
|
|
383
|
+
<input type="text" name="table-text-2A" id="table-text-2A" placeholder="A text input in a table">
|
|
384
|
+
</td>
|
|
385
|
+
<td>
|
|
386
|
+
<menu>
|
|
387
|
+
<li><button type="button">Button 1</button></li>
|
|
388
|
+
<li><button type="button">Button 2</button></li>
|
|
389
|
+
</menu>
|
|
390
|
+
</td>
|
|
391
|
+
</tr>
|
|
392
|
+
<tr>
|
|
393
|
+
<td>3</td>
|
|
394
|
+
<td>
|
|
395
|
+
<input type="text" name="table-text-3A" id="table-text-3A" placeholder="A text input in a table">
|
|
396
|
+
</td>
|
|
397
|
+
<td>
|
|
398
|
+
<menu>
|
|
399
|
+
<li><button type="button">Button 1</button></li>
|
|
400
|
+
<li><button type="button">Button 2</button></li>
|
|
401
|
+
</menu>
|
|
402
|
+
</td>
|
|
403
|
+
</tr>
|
|
404
|
+
</tbody>
|
|
405
|
+
</table>
|
|
406
|
+
|
|
407
|
+
<h4>Table using <code>colgroups</code> to define column width</h4>
|
|
408
|
+
<table class="semanticForms">
|
|
409
|
+
<colgroup>
|
|
410
|
+
<col span="1" style="width: 20%">
|
|
411
|
+
<col span="1" style="width: 50%">
|
|
412
|
+
<col span="1" style="width: 30%">
|
|
413
|
+
</colgroup>
|
|
414
|
+
<thead>
|
|
415
|
+
<tr class="title">
|
|
416
|
+
<th colspan="3">Table Title</th>
|
|
417
|
+
</tr>
|
|
418
|
+
<tr>
|
|
419
|
+
<th>Column 1</th>
|
|
420
|
+
<th>Column 2</th>
|
|
421
|
+
<th>Column 3</th>
|
|
422
|
+
</tr>
|
|
423
|
+
</thead>
|
|
424
|
+
<tbody>
|
|
425
|
+
<tr>
|
|
426
|
+
<td>20%</td>
|
|
427
|
+
<td>50%</td>
|
|
428
|
+
<td>30%</td>
|
|
429
|
+
</tr>
|
|
430
|
+
</tbody>
|
|
431
|
+
</table>
|
|
432
|
+
|
|
433
|
+
<h3>Nested fieldsets</h3>
|
|
434
|
+
|
|
435
|
+
<fieldset>
|
|
436
|
+
<legend>Fieldset 1</legend>
|
|
437
|
+
|
|
438
|
+
<dl>
|
|
439
|
+
<dt><label for="nested-input-1">Input</label></dt>
|
|
440
|
+
<dd>
|
|
441
|
+
<input type="text" id="nested-input-1" name="nested-input-1" value="a value" placeholder="Some interesting placeholder text">
|
|
442
|
+
<p>Here is some subtext.</p>
|
|
443
|
+
</dd>
|
|
444
|
+
|
|
445
|
+
<dt><label for="nested-input-2">Input 2</label></dt>
|
|
446
|
+
<dd>
|
|
447
|
+
<input type="text" id="nested-input-2" name="nested-input-2" placeholder="Some interesting placeholder text">
|
|
448
|
+
<p><small>Here's some small subtext.</small></p>
|
|
449
|
+
</dd>
|
|
450
|
+
|
|
451
|
+
<dt><label for="nested-input-3">Input 3</label></dt>
|
|
452
|
+
<dd>
|
|
453
|
+
<input type="text" id="nested-input-3" name="nested-input-3" placeholder="Some interesting placeholder text">
|
|
454
|
+
<p><strong>Here's some bold subtext.</strong></p>
|
|
455
|
+
</dd>
|
|
456
|
+
|
|
457
|
+
<dt><label for="nested-input-4">Input 4</label></dt>
|
|
458
|
+
<dd>
|
|
459
|
+
<input type="text" id="nested-input-4" name="nested-input-4" placeholder="Some interesting placeholder text">
|
|
460
|
+
<p>Here is some subtext.</p>
|
|
461
|
+
<p>Here is some more subtext.</p>
|
|
462
|
+
</dd>
|
|
463
|
+
</dl>
|
|
464
|
+
|
|
465
|
+
<fieldset>
|
|
466
|
+
<legend>Fieldset 2</legend>
|
|
467
|
+
|
|
468
|
+
<dl>
|
|
469
|
+
<dt><label for="nested-nested-input-1">Input 1</label></dt>
|
|
470
|
+
<dd>
|
|
471
|
+
<input type="text" id="nested-nested-input-1" name="nested-nested-input-1" placeholder="Some interesting placeholder text">
|
|
472
|
+
</dd>
|
|
473
|
+
|
|
474
|
+
<dt><label for="nested-nested-input-2">Input 2</label></dt>
|
|
475
|
+
<dd>
|
|
476
|
+
<input type="text" id="nested-nested-input-2" name="nested-nested-input-2" placeholder="Some interesting placeholder text">
|
|
477
|
+
</dd>
|
|
478
|
+
|
|
479
|
+
<dt><label for="nested-nested-select">Select</label></dt>
|
|
480
|
+
<dd>
|
|
481
|
+
<select id="nested-nested-select" name="nested-nested-select">
|
|
482
|
+
<option value="jfkdskfs">Hey</option>
|
|
483
|
+
</select>
|
|
484
|
+
</dd>
|
|
485
|
+
</dl>
|
|
486
|
+
|
|
487
|
+
<fieldset>
|
|
488
|
+
<legend>Fieldset 3</legend>
|
|
489
|
+
|
|
490
|
+
<dl>
|
|
491
|
+
<dt><label for="left-nested-input-a">Input A</label></dt>
|
|
492
|
+
<dd>
|
|
493
|
+
<input type="text" id="left-nested-input-a" name="left-nested-input-a" placeholder="Some interesting placeholder text">
|
|
494
|
+
</dd>
|
|
495
|
+
<dt><label for="left-nested-input-b">Input B</label></dt>
|
|
496
|
+
<dd>
|
|
497
|
+
<input type="text" id="left-nested-input-b" name="left-nested-input-b" placeholder="Some interesting placeholder text">
|
|
498
|
+
</dd>
|
|
499
|
+
<dt><label for="left-nested-input-c">Input C</label></dt>
|
|
500
|
+
<dd>
|
|
501
|
+
<input type="text" id="left-nested-input-c" name="left-nested-input-c" placeholder="Some interesting placeholder text">
|
|
502
|
+
</dd>
|
|
503
|
+
<dt><label for="left-nested-input-d">Input D</label></dt>
|
|
504
|
+
<dd>
|
|
505
|
+
<input type="text" id="left-nested-input-d" name="left-nested-input-d" placeholder="Some interesting placeholder text">
|
|
506
|
+
</dd>
|
|
507
|
+
</dl>
|
|
508
|
+
</fieldset>
|
|
509
|
+
</fieldset>
|
|
510
|
+
</fieldset>
|
|
511
|
+
|
|
512
|
+
<fieldset>
|
|
513
|
+
<legend>Colspan classes</legend>
|
|
514
|
+
|
|
515
|
+
<dl>
|
|
516
|
+
<dt><label for="colspan-1a">colspan-1</label></dt>
|
|
517
|
+
<dd class="colspan-1"><input type="text" name="colspan-1a" id="colspan-1a"></dd>
|
|
518
|
+
<dt><label for="colspan-1b">colspan-1</label></dt>
|
|
519
|
+
<dd class="colspan-1"><input type="text" name="colspan-1b" id="colspan-1b"></dd>
|
|
520
|
+
<dt><label for="colspan-2">colspan-2</label></dt>
|
|
521
|
+
<dd class="colspan-2"><input type="text" name="colspan-2" id="colspan-2"></dd>
|
|
522
|
+
<dt><label for="colspan-4">colspan-4</label></dt>
|
|
523
|
+
<dd class="colspan-4"><input type="text" name="colspan-4" id="colspan-4"></dd>
|
|
524
|
+
<dt><label for="colspan-3">colspan-3</label></dt>
|
|
525
|
+
<dd class="colspan-3"><input type="text" name="colspan-3" id="colspan-3"></dd>
|
|
526
|
+
<dt><label for="colspan-1c">colspan-1</label></dt>
|
|
527
|
+
<dd class="colspan-1"><input type="text" name="colspan-1c" id="colspan-1c"></dd>
|
|
528
|
+
<dt><label for="colspan-full">colspan-full</label></dt>
|
|
529
|
+
<dd class="colspan-full"><input type="text" name="colspan-full" id="colspan-full"></dd>
|
|
530
|
+
<dt><label for="colspan-5">colspan-5</label></dt>
|
|
531
|
+
<dd class="colspan-5"><input type="text" name="colspan-5" id="colspan-5"></dd>
|
|
532
|
+
</dl>
|
|
533
|
+
|
|
534
|
+
<fieldset class="colspan-1">
|
|
535
|
+
<legend>colspan-1</legend>
|
|
536
|
+
|
|
537
|
+
<dl>
|
|
538
|
+
<dt><label for="colspan-1-a">Input A</label></dt>
|
|
539
|
+
<dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
|
|
540
|
+
|
|
541
|
+
<dt><label for="colspan-1-b">Input B</label></dt>
|
|
542
|
+
<dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
|
|
543
|
+
|
|
544
|
+
<dt><label for="colspan-1-c">Input C</label></dt>
|
|
545
|
+
<dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
|
|
546
|
+
|
|
547
|
+
<dt><label for="colspan-1-d">Input D</label></dt>
|
|
548
|
+
<dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
|
|
549
|
+
</dl>
|
|
550
|
+
</fieldset>
|
|
551
|
+
|
|
552
|
+
<fieldset class="colspan-2">
|
|
553
|
+
<legend>colspan-2</legend>
|
|
554
|
+
|
|
555
|
+
<dl>
|
|
556
|
+
<dt><label for="colspan-2-a">Input A</label></dt>
|
|
557
|
+
<dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
|
|
558
|
+
|
|
559
|
+
<dt><label for="colspan-2-b">Input B</label></dt>
|
|
560
|
+
<dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
|
|
561
|
+
|
|
562
|
+
<dt><label for="colspan-2-c">Input C</label></dt>
|
|
563
|
+
<dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
|
|
564
|
+
|
|
565
|
+
<dt><label for="colspan-2-d">Input D</label></dt>
|
|
566
|
+
<dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
|
|
567
|
+
</dl>
|
|
568
|
+
</fieldset>
|
|
569
|
+
|
|
570
|
+
<fieldset>
|
|
571
|
+
<legend>colspan-3</legend>
|
|
572
|
+
|
|
573
|
+
<dl class="colspan-3">
|
|
574
|
+
<dt><label for="colspan-3-a">Input A</label></dt>
|
|
575
|
+
<dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
|
|
576
|
+
|
|
577
|
+
<dt><label for="colspan-3-b">Input B</label></dt>
|
|
578
|
+
<dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
|
|
579
|
+
|
|
580
|
+
<dt><label for="colspan-3-c">Input C</label></dt>
|
|
581
|
+
<dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
|
|
582
|
+
|
|
583
|
+
<dt><label for="colspan-3-d">Input D</label></dt>
|
|
584
|
+
<dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
|
|
585
|
+
</dl>
|
|
586
|
+
</fieldset>
|
|
587
|
+
|
|
588
|
+
<fieldset class="colspan-full">
|
|
589
|
+
<legend>colspan-full</legend>
|
|
590
|
+
|
|
591
|
+
<dl>
|
|
592
|
+
<dt><label for="colspan-full-a">Input A</label></dt>
|
|
593
|
+
<dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
|
|
594
|
+
|
|
595
|
+
<dt><label for="colspan-full-b">Input B</label></dt>
|
|
596
|
+
<dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
|
|
597
|
+
|
|
598
|
+
<dt><label for="colspan-full-c">Input C</label></dt>
|
|
599
|
+
<dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
|
|
600
|
+
|
|
601
|
+
<dt><label for="colspan-full-d">Input D</label></dt>
|
|
602
|
+
<dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
|
|
603
|
+
</dl>
|
|
604
|
+
</fieldset>
|
|
605
|
+
</fieldset>
|
|
606
|
+
|
|
607
|
+
<details>
|
|
608
|
+
<summary>Detail element</summary>
|
|
609
|
+
<dl>
|
|
610
|
+
<dt><label for="detail-input-1">Detail input</label></dt>
|
|
611
|
+
<dd><input type="text" name="detail-input-1" id="detail-input-1"></dd>
|
|
612
|
+
|
|
613
|
+
<dt><label for="detail-input-2">Detail input</label></dt>
|
|
614
|
+
<dd><input type="text" name="detail-input-2" id="detail-input-2"></dd>
|
|
615
|
+
|
|
616
|
+
<dt><label for="detail-input-3">Detail input</label></dt>
|
|
617
|
+
<dd><input type="text" name="detail-input-3" id="detail-input-3"></dd>
|
|
618
|
+
|
|
619
|
+
<dt><label for="detail-input-4">Detail input</label></dt>
|
|
620
|
+
<dd><input type="text" name="detail-input-4" id="detail-input-4"></dd>
|
|
621
|
+
</dl>
|
|
622
|
+
</details>
|
|
623
|
+
|
|
624
|
+
<details>
|
|
625
|
+
<summary>Another detail element with a nested fieldset</summary>
|
|
626
|
+
<dl>
|
|
627
|
+
<dt><label for="another-detail-input-1">Detail input</label></dt>
|
|
628
|
+
<dd><input type="text" name="another-detail-input-1" id="another-detail-input-1"></dd>
|
|
629
|
+
</dl>
|
|
630
|
+
|
|
631
|
+
<fieldset>
|
|
632
|
+
<legend>Nested fieldset</legend>
|
|
633
|
+
|
|
634
|
+
<dl>
|
|
635
|
+
<dt><label for="another-detail-input-2">Nested fieldset input</label></dt>
|
|
636
|
+
<dd><input type="text" name="another-detail-input-2" id="another-detail-input-2"></dd>
|
|
637
|
+
</dl>
|
|
638
|
+
</fieldset>
|
|
639
|
+
</details>
|
|
640
|
+
|
|
641
|
+
<input type="submit" name="button1" value="Non-grouped submit button">
|
|
642
|
+
<input type="reset" name="reset" value="Another one">
|
|
643
|
+
|
|
644
|
+
<p>Flexbox button layout pattern with two submit buttons:</p>
|
|
645
|
+
<menu>
|
|
646
|
+
<li><button type="submit" name="button1">Button 1</button></li>
|
|
647
|
+
<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>
|
|
648
|
+
</menu>
|
|
649
|
+
|
|
650
|
+
<p>Flexbox button layout pattern with three submit buttons:</p>
|
|
651
|
+
<menu>
|
|
652
|
+
<li><button type="submit" name="button1">Button 1</button></li>
|
|
653
|
+
<li><button type="reset" name="button2">Button 2</button></li>
|
|
654
|
+
<li><input type="submit" name="button3" value="Button 3"></li>
|
|
655
|
+
</menu>
|
|
656
|
+
</fieldset>
|
|
657
|
+
|
|
658
|
+
<fieldset>
|
|
659
|
+
<legend>P tag elements</legend>
|
|
660
|
+
|
|
661
|
+
<p>
|
|
662
|
+
<input type="checkbox" name="p-tag-checkbox" id="p-tag-checkbox">
|
|
663
|
+
<label for="p-tag-checkbox">Checkbox</label>
|
|
664
|
+
</p>
|
|
665
|
+
<p>
|
|
666
|
+
<label for="p-tag-input">Text input</label>
|
|
667
|
+
<input type="text" name="p-tag-input" id="p-tag-input">
|
|
668
|
+
</p>
|
|
669
|
+
<p>
|
|
670
|
+
<label for="p-tag-textarea">Textarea</label>
|
|
671
|
+
<textarea name="p-tag-textarea" id="p-tag-textarea"></textarea>
|
|
672
|
+
</p>
|
|
673
|
+
<p>
|
|
674
|
+
<button type="button" name="p-tag-button" id="p-tag-button">Button</button>
|
|
675
|
+
</p>
|
|
676
|
+
<p>
|
|
677
|
+
Some regular text with <strong>other elements</strong> <span>inside of it</span>
|
|
678
|
+
</p>
|
|
679
|
+
</fieldset>
|
|
680
|
+
|
|
681
|
+
<h2>Non-form related HTML elements</h2>
|
|
682
|
+
<p>This is some regular HTML that should not be affected by any semantic forms styles</p>
|
|
683
|
+
<div>This is a div</div>
|
|
684
|
+
<blockquote>This is a block quote</blockquote>
|
|
685
|
+
<a href="https://github.com/rooseveltframework/semantic-forms">A link to the semantic forms repo</a>
|
|
686
|
+
|
|
687
|
+
<ul>
|
|
688
|
+
<li>unordered list 1</li>
|
|
689
|
+
<li>unordered list 2</li>
|
|
690
|
+
<li>unordered list 3</li>
|
|
691
|
+
</ul>
|
|
692
|
+
<ol>
|
|
693
|
+
<li>ordered list 1</li>
|
|
694
|
+
<li>ordered list 2</li>
|
|
695
|
+
<li>ordered list 3</li>
|
|
696
|
+
</ol>
|
|
697
|
+
<menu>
|
|
698
|
+
<li>menu list 1</li>
|
|
699
|
+
<li>menu list 2</li>
|
|
700
|
+
<li>menu list 3</li>
|
|
701
|
+
</menu>
|
|
702
|
+
<dl>
|
|
703
|
+
<dt>description list title</dt>
|
|
704
|
+
<dd>description list value</dd>
|
|
705
|
+
</dl>
|
|
706
|
+
<details>
|
|
707
|
+
<summary>Details summary</summary>
|
|
708
|
+
<p>Some detail text</p>
|
|
709
|
+
</details>
|
|
710
|
+
</form>
|
|
711
|
+
|
|
712
|
+
<h2>Table with <code>semanticForms</code> class</h2>
|
|
713
|
+
<table class="semanticForms">
|
|
714
|
+
<thead>
|
|
715
|
+
<tr class="title">
|
|
716
|
+
<th colspan="3">Table Title</th>
|
|
717
|
+
</tr>
|
|
718
|
+
<tr>
|
|
719
|
+
<th>Column 1</th>
|
|
720
|
+
<th>Column 2</th>
|
|
721
|
+
<th>Column 3</th>
|
|
722
|
+
</tr>
|
|
723
|
+
</thead>
|
|
724
|
+
<tbody>
|
|
725
|
+
<tr>
|
|
726
|
+
<td>1</td>
|
|
727
|
+
<td>
|
|
728
|
+
<input type="text" name="table-text-1C" id="table-text-1C" placeholder="A text input in a table">
|
|
729
|
+
</td>
|
|
730
|
+
<td>
|
|
731
|
+
<menu>
|
|
732
|
+
<li><button type="button">Button 1</button></li>
|
|
733
|
+
<li><button type="button">Button 2</button></li>
|
|
734
|
+
</menu>
|
|
735
|
+
</td>
|
|
736
|
+
</tr>
|
|
737
|
+
<tr>
|
|
738
|
+
<td>2</td>
|
|
739
|
+
<td>
|
|
740
|
+
<input type="text" name="table-text-2C" id="table-text-2C" placeholder="A text input in a table">
|
|
741
|
+
</td>
|
|
742
|
+
<td>
|
|
743
|
+
<menu>
|
|
744
|
+
<li><button type="button">Button 1</button></li>
|
|
745
|
+
<li><button type="button">Button 2</button></li>
|
|
746
|
+
</menu>
|
|
747
|
+
</td>
|
|
748
|
+
</tr>
|
|
749
|
+
<tr>
|
|
750
|
+
<td>3</td>
|
|
751
|
+
<td>
|
|
752
|
+
<input type="text" name="table-text-3C" id="table-text-3C" placeholder="A text input in a table">
|
|
753
|
+
</td>
|
|
754
|
+
<td>
|
|
755
|
+
<menu>
|
|
756
|
+
<li><button type="button">Button 1</button></li>
|
|
757
|
+
<li><button type="button">Button 2</button></li>
|
|
758
|
+
</menu>
|
|
759
|
+
</td>
|
|
760
|
+
</tr>
|
|
761
|
+
</tbody>
|
|
762
|
+
</table>
|
|
763
|
+
|
|
764
|
+
<h2>Table with a <code>form</code> in a cell</h2>
|
|
765
|
+
<table class="semanticForms">
|
|
766
|
+
<thead>
|
|
767
|
+
<tr class="title">
|
|
768
|
+
<th colspan="2">Table Title</th>
|
|
769
|
+
</tr>
|
|
770
|
+
<tr>
|
|
771
|
+
<th>Column 1</th>
|
|
772
|
+
<th>Column 2</th>
|
|
773
|
+
</tr>
|
|
774
|
+
</thead>
|
|
775
|
+
<tbody>
|
|
776
|
+
<tr>
|
|
777
|
+
<td>Some text</td>
|
|
778
|
+
<td>
|
|
779
|
+
<form action="/somewhere" class="semanticForms">
|
|
780
|
+
<menu>
|
|
781
|
+
<li><button type="submit">Submit button</button></li>
|
|
782
|
+
</menu>
|
|
783
|
+
</form>
|
|
784
|
+
</td>
|
|
785
|
+
</tr>
|
|
786
|
+
</tbody>
|
|
787
|
+
</table>
|
|
788
|
+
|
|
789
|
+
<h2>Unstyled table</h2>
|
|
790
|
+
<table>
|
|
791
|
+
<thead>
|
|
792
|
+
<tr class="title">
|
|
793
|
+
<th colspan="3">Table Title</th>
|
|
794
|
+
</tr>
|
|
795
|
+
<tr>
|
|
796
|
+
<th>Column 1</th>
|
|
797
|
+
<th>Column 2</th>
|
|
798
|
+
<th>Column 3</th>
|
|
799
|
+
</tr>
|
|
800
|
+
</thead>
|
|
801
|
+
<tbody>
|
|
802
|
+
<tr>
|
|
803
|
+
<td>1</td>
|
|
804
|
+
<td>A</td>
|
|
805
|
+
<td>a</td>
|
|
806
|
+
</tr>
|
|
807
|
+
<tr>
|
|
808
|
+
<td>2</td>
|
|
809
|
+
<td>B</td>
|
|
810
|
+
<td>b</td>
|
|
811
|
+
</tr>
|
|
812
|
+
<tr>
|
|
813
|
+
<td>3</td>
|
|
814
|
+
<td>C</td>
|
|
815
|
+
<td>c</td>
|
|
816
|
+
</tr>
|
|
817
|
+
</tbody>
|
|
818
|
+
</table>
|
|
819
|
+
|
|
820
|
+
<hr>
|
|
821
|
+
|
|
822
|
+
<h2>Low flow (JavaScript disabled) styling</h2>
|
|
823
|
+
<p>Adding the <code>lowFlow</code> class to the form element removes all JS enhancements.</p>
|
|
824
|
+
<form action="/somewhere" method="post" class="semanticForms lowFlow">
|
|
825
|
+
<dl>
|
|
826
|
+
<dt><label for="low-flow-name">Name</label></dt>
|
|
827
|
+
<dd><input id="low-flow-name" name="low-flow-name" type="text" placeholder="e.g. John Smith"></dd>
|
|
828
|
+
|
|
829
|
+
<dt><label for="low-flow-prefilled">Prefilled field</label></dt>
|
|
830
|
+
<dd><input id="low-flow-prefilled" name="low-flow-prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
|
|
831
|
+
|
|
832
|
+
<dt><label for="low-flow-noplaceholder">No placeholder</label></dt>
|
|
833
|
+
<dd><input id="low-flow-noplaceholder" name="low-flow-noplaceholder" type="text"></dd>
|
|
834
|
+
|
|
835
|
+
<dt><label for="low-flow-password">Password field</label></dt>
|
|
836
|
+
<dd>
|
|
837
|
+
<input id="low-flow-password" name="low-flow-password" type="password" minlength="8" required>
|
|
838
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
839
|
+
</dd>
|
|
840
|
+
</dl>
|
|
841
|
+
|
|
842
|
+
<dl>
|
|
843
|
+
<dt><label for="low-flow-single-input">Single form input</label></dt>
|
|
844
|
+
<dd><input type="text" name="low-flow-single-input" id="low-flow-single-input"></dd>
|
|
845
|
+
</dl>
|
|
846
|
+
|
|
847
|
+
<fieldset>
|
|
848
|
+
<legend>Fieldset legend</legend>
|
|
849
|
+
<dl>
|
|
850
|
+
<dt><label for="low-flow-email">Email field</label></dt>
|
|
851
|
+
<dd><input id="low-flow-email" name="low-flow-email" type="email" placeholder="e.g. you@email.server"></dd>
|
|
852
|
+
|
|
853
|
+
<dt><label for="low-flow-tel">Telephone field</label></dt>
|
|
854
|
+
<dd><input id="low-flow-tel" name="low-flow-tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
|
|
855
|
+
|
|
856
|
+
<dt><label for="low-flow-url">URL field</label></dt>
|
|
857
|
+
<dd><input id="low-flow-url" name="low-flow-url" type="url" placeholder="e.g. https://github.com"></dd>
|
|
858
|
+
|
|
859
|
+
<dt><label for="low-flow-search">Search field</label></dt>
|
|
860
|
+
<dd><input id="low-flow-search" name="low-flow-search" type="search" placeholder="e.g. cats"></dd>
|
|
861
|
+
|
|
862
|
+
<dt><label for="low-flow-number">Number</label></dt>
|
|
863
|
+
<dd><input id="low-flow-number" name="low-flow-number" type="number" placeholder="e.g. 43"></dd>
|
|
864
|
+
|
|
865
|
+
<dt><label for="low-flow-label-subtext">Input with label help text</label></dt>
|
|
866
|
+
<dd>
|
|
867
|
+
<input id="low-flow-label-subtext" name="low-flow-label-subtext" type="text" placeholder="e.g. John Smith">
|
|
868
|
+
<label for="low-flow-label-subtext">Some help text</label>
|
|
869
|
+
</dd>
|
|
870
|
+
|
|
871
|
+
<dt><label for="low-flow-invalid-field">Invalid field</label></dt>
|
|
872
|
+
<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>
|
|
873
|
+
|
|
874
|
+
<dt><label for="low-flow-valid-field">Valid field</label></dt>
|
|
875
|
+
<dd><input id="low-flow-valid-field" class="valid" name="low-flow-valid-field" type="number" placeholder="e.g. 43" min="0" value="2"></dd>
|
|
876
|
+
|
|
877
|
+
<dt><label for="low-flow-required-field">Required field</label></dt>
|
|
878
|
+
<dd><input id="low-flow-required-field" name="low-flow-required-field" type="number" placeholder="e.g. 43" min="0" required></dd>
|
|
879
|
+
|
|
880
|
+
<dt><label for="low-flow-selectbox">Select box</label></dt>
|
|
881
|
+
<dd>
|
|
882
|
+
<select id="low-flow-selectbox" name="low-flow-selectbox">
|
|
883
|
+
<option value="1">Item one</option>
|
|
884
|
+
<option value="2">Item two</option>
|
|
885
|
+
<option value="3">Item three</option>
|
|
886
|
+
<option value="4">Item four</option>
|
|
887
|
+
<option value="5">Item five</option>
|
|
888
|
+
<option value="6">Item six</option>
|
|
889
|
+
<option value="7">Item seven</option>
|
|
890
|
+
</select>
|
|
891
|
+
<label for="low-flow-selectbox">Some help text regarding the select box</label>
|
|
892
|
+
</dd>
|
|
893
|
+
|
|
894
|
+
<dt><label data-for="low-flow-checkboxes">Checkboxes</label></dt>
|
|
895
|
+
<dd class="checkboxes">
|
|
896
|
+
<ul id="low-flow-checkboxes">
|
|
897
|
+
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_one"> <label for="low-flow-checkboxes_one">One</label></li>
|
|
898
|
+
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_two"> <label for="low-flow-checkboxes_two">Two</label></li>
|
|
899
|
+
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_three"> <label for="low-flow-checkboxes_three">Three</label></li>
|
|
900
|
+
</ul>
|
|
901
|
+
</dd>
|
|
902
|
+
|
|
903
|
+
<dt><label for="low-flow-checkbox">Single checkbox</label></dt>
|
|
904
|
+
<dd><input type="checkbox" name="low-flow-checkbox-field" id="low-flow-checkbox"></dd>
|
|
905
|
+
|
|
906
|
+
<dt><label data-for="low-flow-radios">Radios</label></dt>
|
|
907
|
+
<dd class="radios">
|
|
908
|
+
<ul id="low-flow-radios">
|
|
909
|
+
<li><input type="radio" name="low-flow-radios" id="low-flow-r_one"> <label for="low-flow-r_one">One</label></li>
|
|
910
|
+
<li><input type="radio" name="low-flow-radios" id="low-flow-r_two"> <label for="low-flow-r_two">Two</label></li>
|
|
911
|
+
<li><input type="radio" name="low-flow-radios" id="low-flow-r_three"> <label for="low-flow-r_three">Three</label></li>
|
|
912
|
+
</ul>
|
|
913
|
+
</dd>
|
|
914
|
+
|
|
915
|
+
<dt><label for="low-flow-color">Color field</label></dt>
|
|
916
|
+
<dd><input id="low-flow-color" name="low-flow-color" type="color"></dd>
|
|
917
|
+
|
|
918
|
+
<dt><label for="low-flow-date">Date field</label></dt>
|
|
919
|
+
<dd><input id="low-flow-date" name="low-flow-date" type="date"></dd>
|
|
920
|
+
|
|
921
|
+
<dt><label for="low-flow-time">Time field</label></dt>
|
|
922
|
+
<dd><input id="low-flow-time" name="low-flow-time" type="time"></dd>
|
|
923
|
+
|
|
924
|
+
<dt><label for="low-flow-datetime-local">Datetime-local field</label></dt>
|
|
925
|
+
<dd><input id="low-flow-datetime-local" name="low-flow-datetime-local" type="datetime-local"></dd>
|
|
926
|
+
|
|
927
|
+
<dt><label for="low-flow-month">Month field</label></dt>
|
|
928
|
+
<dd><input id="low-flow-month" name="low-flow-month" type="month"></dd>
|
|
929
|
+
|
|
930
|
+
<dt><label for="low-flow-week">Week field</label></dt>
|
|
931
|
+
<dd><input id="low-flow-week" name="low-flow-week" type="week"></dd>
|
|
932
|
+
|
|
933
|
+
<dt><label for="low-flow-file">File field</label></dt>
|
|
934
|
+
<dd><input id="low-flow-file" name="low-flow-file" type="file"></dd>
|
|
935
|
+
|
|
936
|
+
<dt><label for="low-flow-range">Range field</label></dt>
|
|
937
|
+
<dd><input id="low-flow-range" name="low-flow-range" type="range"></dd>
|
|
938
|
+
|
|
939
|
+
<dt><label for="low-flow-textarea">Textarea</label></dt>
|
|
940
|
+
<dd><textarea id="low-flow-textarea" name="low-flow-textarea" rows="5" cols="50" 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>
|
|
941
|
+
|
|
942
|
+
<dt><label for="low-flow-prefilledtextarea">Textarea (prefilled)</label></dt>
|
|
943
|
+
<dd>
|
|
944
|
+
<textarea id="low-flow-prefilledtextarea" name="low-flow-prefilledtextarea" rows="5" cols="50" 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>
|
|
945
|
+
<label for="low-flow-prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
|
|
946
|
+
</dd>
|
|
947
|
+
</dl>
|
|
948
|
+
|
|
949
|
+
<fieldset>
|
|
950
|
+
<legend>Nested fieldset</legend>
|
|
951
|
+
|
|
952
|
+
<dl>
|
|
953
|
+
<dt><label for="low-flow-nested-input-1">Input</label></dt>
|
|
954
|
+
<dd>
|
|
955
|
+
<input type="text" id="low-flow-nested-input-1" name="low-flow-nested-input-1" placeholder="Some interesting placeholder text">
|
|
956
|
+
<p>Here is some subtext.</p>
|
|
957
|
+
</dd>
|
|
958
|
+
|
|
959
|
+
<dt><label for="low-flow-nested-input-2">Input 2</label></dt>
|
|
960
|
+
<dd>
|
|
961
|
+
<input type="text" id="low-flow-nested-input-2" name="low-flow-nested-input-2" placeholder="Some interesting placeholder text">
|
|
962
|
+
<p><small>Here's some small subtext.</small></p>
|
|
963
|
+
</dd>
|
|
964
|
+
|
|
965
|
+
<dt><label for="low-flow-nested-input-3">Input 3</label></dt>
|
|
966
|
+
<dd>
|
|
967
|
+
<input type="text" id="low-flow-nested-input-3" name="low-flow-nested-input-3" placeholder="Some interesting placeholder text">
|
|
968
|
+
<p><strong>Here's some bold subtext.</strong></p>
|
|
969
|
+
</dd>
|
|
970
|
+
|
|
971
|
+
<dt><label for="low-flow-nested-input-4">Input 4</label></dt>
|
|
972
|
+
<dd>
|
|
973
|
+
<input type="text" id="low-flow-nested-input-4" name="low-flow-nested-input-4" placeholder="Some interesting placeholder text">
|
|
974
|
+
<p>Here is some subtext.</p>
|
|
975
|
+
<p>Here is some more subtext.</p>
|
|
976
|
+
</dd>
|
|
977
|
+
</dl>
|
|
978
|
+
|
|
979
|
+
<fieldset>
|
|
980
|
+
<legend>Another nested fieldset</legend>
|
|
981
|
+
|
|
982
|
+
<dl>
|
|
983
|
+
<dt><label for="low-flow-nested-nested-input">Input</label></dt>
|
|
984
|
+
<dd><input type="text" id="low-flow-nested-nested-input" name="low-flow-nested-nested-input" placeholder="Some interesting placeholder text"></dd>
|
|
985
|
+
|
|
986
|
+
<dt><label for="low-flow-nested-nested-input-2">Input 2</label></dt>
|
|
987
|
+
<dd>
|
|
988
|
+
<input type="text" id="low-flow-nested-nested-input-2" name="low-flow-nested-nested-input-2" placeholder="Some interesting placeholder text">
|
|
989
|
+
</dd>
|
|
990
|
+
|
|
991
|
+
<dt><label for="low-flow-nested-nested-select">Select</label></dt>
|
|
992
|
+
<dd>
|
|
993
|
+
<select id="low-flow-nested-nested-select" name="low-flow-nested-nested-select">
|
|
994
|
+
<option value="jfkdskfs">Hey</option>
|
|
995
|
+
</select>
|
|
996
|
+
</dd>
|
|
997
|
+
</dl>
|
|
998
|
+
</fieldset>
|
|
999
|
+
</fieldset>
|
|
1000
|
+
|
|
1001
|
+
<fieldset>
|
|
1002
|
+
<legend>Colspan classes</legend>
|
|
1003
|
+
|
|
1004
|
+
<dl>
|
|
1005
|
+
<div class="colspan-1">
|
|
1006
|
+
<dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
|
|
1007
|
+
<dd><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
|
|
1008
|
+
</div>
|
|
1009
|
+
<div class="colspan-1">
|
|
1010
|
+
<dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
|
|
1011
|
+
<dd><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
|
|
1012
|
+
</div>
|
|
1013
|
+
<div class="colspan-2">
|
|
1014
|
+
<dt><label for="low-flow-colspan-2">colspan-2</label></dt>
|
|
1015
|
+
<dd><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
|
|
1016
|
+
</div>
|
|
1017
|
+
<div class="colspan-4">
|
|
1018
|
+
<dt><label for="low-flow-colspan-4">colspan-4</label></dt>
|
|
1019
|
+
<dd><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
|
|
1020
|
+
</div>
|
|
1021
|
+
<div class="colspan-3">
|
|
1022
|
+
<dt><label for="low-flow-colspan-3">colspan-3</label></dt>
|
|
1023
|
+
<dd><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
|
|
1024
|
+
</div>
|
|
1025
|
+
<div class="colspan-1">
|
|
1026
|
+
<dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
|
|
1027
|
+
<dd><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
|
|
1028
|
+
</div>
|
|
1029
|
+
<div class="colspan-full">
|
|
1030
|
+
<dt><label for="low-flow-colspan-full">colspan-full</label></dt>
|
|
1031
|
+
<dd><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
|
|
1032
|
+
</div>
|
|
1033
|
+
<div class="colspan-5">
|
|
1034
|
+
<dt><label for="low-flow-colspan-5">colspan-5</label></dt>
|
|
1035
|
+
<dd><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
|
|
1036
|
+
</div>
|
|
1037
|
+
</dl>
|
|
1038
|
+
|
|
1039
|
+
<fieldset class="colspan-1">
|
|
1040
|
+
<legend>colspan-1</legend>
|
|
1041
|
+
|
|
1042
|
+
<dl>
|
|
1043
|
+
<dt><label for="low-flow-colspan-1-a">Input A</label></dt>
|
|
1044
|
+
<dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a"></dd>
|
|
1045
|
+
|
|
1046
|
+
<dt><label for="low-flow-colspan-1-b">Input B</label></dt>
|
|
1047
|
+
<dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b"></dd>
|
|
1048
|
+
|
|
1049
|
+
<dt><label for="low-flow-colspan-1-c">Input C</label></dt>
|
|
1050
|
+
<dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c"></dd>
|
|
1051
|
+
</dl>
|
|
1052
|
+
</fieldset>
|
|
1053
|
+
|
|
1054
|
+
<fieldset class="colspan-2">
|
|
1055
|
+
<legend>colspan-2</legend>
|
|
1056
|
+
|
|
1057
|
+
<dl>
|
|
1058
|
+
<dt><label for="low-flow-colspan-2-a">Input A</label></dt>
|
|
1059
|
+
<dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a"></dd>
|
|
1060
|
+
|
|
1061
|
+
<dt><label for="low-flow-colspan-2-b">Input B</label></dt>
|
|
1062
|
+
<dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b"></dd>
|
|
1063
|
+
|
|
1064
|
+
<dt><label for="low-flow-colspan-2-c">Input C</label></dt>
|
|
1065
|
+
<dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c"></dd>
|
|
1066
|
+
</dl>
|
|
1067
|
+
</fieldset>
|
|
1068
|
+
|
|
1069
|
+
<fieldset class="colspan-3">
|
|
1070
|
+
<legend>colspan-3</legend>
|
|
1071
|
+
|
|
1072
|
+
<dl>
|
|
1073
|
+
<dt><label for="low-flow-colspan-3-a">Input A</label></dt>
|
|
1074
|
+
<dd><input type="text" id="low-flow-colspan-3-a" name="low-flow-colspan-3-a"></dd>
|
|
1075
|
+
|
|
1076
|
+
<dt><label for="low-flow-colspan-3-b">Input B</label></dt>
|
|
1077
|
+
<dd><input type="text" id="low-flow-colspan-3-b" name="low-flow-colspan-3-b"></dd>
|
|
1078
|
+
|
|
1079
|
+
<dt><label for="low-flow-colspan-3-c">Input C</label></dt>
|
|
1080
|
+
<dd><input type="text" id="low-flow-colspan-3-c" name="low-flow-colspan-3-c"></dd>
|
|
1081
|
+
|
|
1082
|
+
<dt><label for="low-flow-colspan-3-d">Input D</label></dt>
|
|
1083
|
+
<dd><input type="text" id="low-flow-colspan-3-d" name="low-flow-colspan-3-d"></dd>
|
|
1084
|
+
</dl>
|
|
1085
|
+
</fieldset>
|
|
1086
|
+
|
|
1087
|
+
<fieldset class="colspan-4">
|
|
1088
|
+
<legend>colspan-4</legend>
|
|
1089
|
+
|
|
1090
|
+
<dl>
|
|
1091
|
+
<dt><label for="low-flow-colspan-4-a">Input A</label></dt>
|
|
1092
|
+
<dd><input type="text" id="low-flow-colspan-4-a" name="low-flow-colspan-4-a"></dd>
|
|
1093
|
+
|
|
1094
|
+
<dt><label for="low-flow-colspan-4-b">Input B</label></dt>
|
|
1095
|
+
<dd><input type="text" id="low-flow-colspan-4-b" name="low-flow-colspan-4-b"></dd>
|
|
1096
|
+
|
|
1097
|
+
<dt><label for="low-flow-colspan-4-c">Input C</label></dt>
|
|
1098
|
+
<dd><input type="text" id="low-flow-colspan-4-c" name="low-flow-colspan-4-c"></dd>
|
|
1099
|
+
|
|
1100
|
+
<dt><label for="low-flow-colspan-4-d">Input D</label></dt>
|
|
1101
|
+
<dd><input type="text" id="low-flow-colspan-4-d" name="low-flow-colspan-4-d"></dd>
|
|
1102
|
+
|
|
1103
|
+
<dt><label for="low-flow-colspan-4-e">Input E</label></dt>
|
|
1104
|
+
<dd><input type="text" id="low-flow-colspan-4-e" name="low-flow-colspan-4-e"></dd>
|
|
1105
|
+
</dl>
|
|
1106
|
+
</fieldset>
|
|
1107
|
+
|
|
1108
|
+
<fieldset class="colspan-5">
|
|
1109
|
+
<legend>colspan-5</legend>
|
|
1110
|
+
|
|
1111
|
+
<dl>
|
|
1112
|
+
<dt><label for="low-flow-colspan-5-a">Input A</label></dt>
|
|
1113
|
+
<dd><input type="text" id="low-flow-colspan-5-a" name="low-flow-colspan-5-a"></dd>
|
|
1114
|
+
|
|
1115
|
+
<dt><label for="low-flow-colspan-5-b">Input B</label></dt>
|
|
1116
|
+
<dd><input type="text" id="low-flow-colspan-5-b" name="low-flow-colspan-5-b"></dd>
|
|
1117
|
+
|
|
1118
|
+
<dt><label for="low-flow-colspan-5-c">Input C</label></dt>
|
|
1119
|
+
<dd><input type="text" id="low-flow-colspan-5-c" name="low-flow-colspan-5-c"></dd>
|
|
1120
|
+
|
|
1121
|
+
<dt><label for="low-flow-colspan-5-d">Input D</label></dt>
|
|
1122
|
+
<dd><input type="text" id="low-flow-colspan-5-d" name="low-flow-colspan-5-d"></dd>
|
|
1123
|
+
|
|
1124
|
+
<dt><label for="low-flow-colspan-5-e">Input E</label></dt>
|
|
1125
|
+
<dd><input type="text" id="low-flow-colspan-5-e" name="low-flow-colspan-5-e"></dd>
|
|
1126
|
+
|
|
1127
|
+
<dt><label for="low-flow-colspan-5-f">Input F</label></dt>
|
|
1128
|
+
<dd><input type="text" id="low-flow-colspan-5-f" name="low-flow-colspan-5-f"></dd>
|
|
1129
|
+
</dl>
|
|
1130
|
+
</fieldset>
|
|
1131
|
+
</fieldset>
|
|
1132
|
+
|
|
1133
|
+
|
|
1134
|
+
<details>
|
|
1135
|
+
<summary>Details summary</summary>
|
|
1136
|
+
<dl>
|
|
1137
|
+
<dt><label for="low-flow-detail-input-1">Detail input</label></dt>
|
|
1138
|
+
<dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1"></dd>
|
|
1139
|
+
|
|
1140
|
+
<dt><label for="low-flow-detail-input-2">Detail input</label></dt>
|
|
1141
|
+
<dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
|
|
1142
|
+
|
|
1143
|
+
<dt><label for="low-flow-detail-input-3">Detail input</label></dt>
|
|
1144
|
+
<dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
|
|
1145
|
+
|
|
1146
|
+
<dt><label for="low-flow-detail-input-4">Detail input</label></dt>
|
|
1147
|
+
<dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
|
|
1148
|
+
</dl>
|
|
1149
|
+
</details>
|
|
1150
|
+
|
|
1151
|
+
<details>
|
|
1152
|
+
<summary>Another details element</summary>
|
|
1153
|
+
<dl>
|
|
1154
|
+
<dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
|
|
1155
|
+
<dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
|
|
1156
|
+
</dl>
|
|
1157
|
+
</details>
|
|
1158
|
+
|
|
1159
|
+
<fieldset>
|
|
1160
|
+
<legend>P tag elements</legend>
|
|
1161
|
+
|
|
1162
|
+
<p>
|
|
1163
|
+
<input type="checkbox" name="low-flow-p-tag-checkbox" id="low-flow-p-tag-checkbox">
|
|
1164
|
+
<label for="low-flow-p-tag-checkbox">Checkbox</label>
|
|
1165
|
+
</p>
|
|
1166
|
+
<p>
|
|
1167
|
+
<label for="low-flow-p-tag-input">Text input</label>
|
|
1168
|
+
<input type="text" name="low-flow-p-tag-input" id="low-flow-p-tag-input">
|
|
1169
|
+
</p>
|
|
1170
|
+
<p>
|
|
1171
|
+
<label for="low-flow-p-tag-textarea">Textarea</label>
|
|
1172
|
+
<textarea name="low-flow-p-tag-textarea" id="low-flow-p-tag-textarea"></textarea>
|
|
1173
|
+
</p>
|
|
1174
|
+
<p>
|
|
1175
|
+
<button type="button" name="low-flow-p-tag-button" id="low-flow-p-tag-button">Button</button>
|
|
1176
|
+
</p>
|
|
1177
|
+
<p>
|
|
1178
|
+
Some regular text with <strong>other elements</strong> <span>inside of it</span>
|
|
1179
|
+
</p>
|
|
1180
|
+
</fieldset>
|
|
1181
|
+
|
|
1182
|
+
<input type="submit" name="button1" value="Non-grouped submit button">
|
|
1183
|
+
<input type="reset" name="reset" value="Another one">
|
|
1184
|
+
|
|
1185
|
+
<p>Flexbox button layout pattern with two submit buttons:</p>
|
|
1186
|
+
<menu>
|
|
1187
|
+
<li><button type="submit" name="button1">Button 1</button></li>
|
|
1188
|
+
<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>
|
|
1189
|
+
</menu>
|
|
1190
|
+
|
|
1191
|
+
<p>Flexbox button layout pattern with three submit buttons:</p>
|
|
1192
|
+
<menu>
|
|
1193
|
+
<li><button type="submit" name="button1">Button 1</button></li>
|
|
1194
|
+
<li><button type="reset" name="button2">Button 2</button></li>
|
|
1195
|
+
<li><input type="submit" name="button3" value="Button 3"></li>
|
|
1196
|
+
</menu>
|
|
1197
|
+
</fieldset>
|
|
1198
|
+
|
|
1199
|
+
<h2>Non-form related HTML elements</h2>
|
|
1200
|
+
<p>This is some regular HTML that should not be affected by any semantic forms styles</p>
|
|
1201
|
+
<div>This is a div</div>
|
|
1202
|
+
<blockquote>This is a block quote</blockquote>
|
|
1203
|
+
<a href="https://github.com/rooseveltframework/semantic-forms">A link to the semantic forms repo</a>
|
|
1204
|
+
<ul>
|
|
1205
|
+
<li>unordered list 1</li>
|
|
1206
|
+
<li>unordered list 2</li>
|
|
1207
|
+
<li>unordered list 3</li>
|
|
1208
|
+
</ul>
|
|
1209
|
+
<ol>
|
|
1210
|
+
<li>ordered list 1</li>
|
|
1211
|
+
<li>ordered list 2</li>
|
|
1212
|
+
<li>ordered list 3</li>
|
|
1213
|
+
</ol>
|
|
1214
|
+
<menu>
|
|
1215
|
+
<li>menu list 1</li>
|
|
1216
|
+
<li>menu list 2</li>
|
|
1217
|
+
<li>menu list 3</li>
|
|
1218
|
+
</menu>
|
|
1219
|
+
<dl>
|
|
1220
|
+
<dt>description list title</dt>
|
|
1221
|
+
<dd>description list value</dd>
|
|
1222
|
+
</dl>
|
|
1223
|
+
<details>
|
|
1224
|
+
<summary>Details summary</summary>
|
|
1225
|
+
<p>Some detail text</p>
|
|
1226
|
+
</details>
|
|
1227
|
+
</form>
|
|
1228
|
+
</article>
|
|
1229
|
+
</main>
|
|
1230
|
+
<script>
|
|
1231
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
1232
|
+
document.body.insertAdjacentHTML('afterbegin', '<p id="mode"><button></button></p>')
|
|
1233
|
+
document.querySelector('#mode button').addEventListener('click', (event) => toggleDarkMode())
|
|
1234
|
+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) toggleDarkMode('dark')
|
|
1235
|
+
else toggleDarkMode('light')
|
|
1236
|
+
|
|
1237
|
+
const forms = document.querySelectorAll('form')
|
|
1238
|
+
for (const form of forms) {
|
|
1239
|
+
form.addEventListener('submit', e => e.preventDefault())
|
|
1240
|
+
}
|
|
1241
|
+
|
|
1242
|
+
const greenButtons = document.querySelectorAll('input[type="image"]')
|
|
1243
|
+
for (const button of greenButtons) {
|
|
1244
|
+
button.addEventListener('click', (e) => {
|
|
1245
|
+
e.preventDefault()
|
|
1246
|
+
window.alert('GREEN!!!')
|
|
1247
|
+
})
|
|
1248
|
+
}
|
|
1249
|
+
})
|
|
1250
|
+
|
|
1251
|
+
function toggleDarkMode (mode) {
|
|
1252
|
+
if (mode === 'light' || document.body.className === 'dark') {
|
|
1253
|
+
document.documentElement.className = 'light'
|
|
1254
|
+
document.body.className = 'light'
|
|
1255
|
+
document.querySelector('#mode button').innerHTML = 'Switch to dark mode'
|
|
1256
|
+
const forms = document.querySelectorAll('form')
|
|
1257
|
+
for (const form of forms) {
|
|
1258
|
+
form.classList.add('light')
|
|
1259
|
+
form.classList.remove('dark')
|
|
1260
|
+
}
|
|
1261
|
+
} else {
|
|
1262
|
+
document.documentElement.className = 'dark'
|
|
1263
|
+
document.body.className = 'dark'
|
|
1264
|
+
document.querySelector('#mode button').innerHTML = 'Switch to light mode'
|
|
1265
|
+
const forms = document.querySelectorAll('form')
|
|
1266
|
+
for (const form of forms) {
|
|
1267
|
+
form.classList.add('dark')
|
|
1268
|
+
form.classList.remove('light')
|
|
1269
|
+
}
|
|
1270
|
+
}
|
|
1271
|
+
}
|
|
1272
|
+
</script>
|
|
1273
|
+
</body>
|
|
1274
|
+
</html>
|