semantic-forms 5.2.2 → 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 +7 -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 +3 -3
- package/semanticForms.js +14 -568
- package/semanticForms.scss +167 -1570
|
@@ -31,438 +31,653 @@
|
|
|
31
31
|
<h1>Semantic Forms</h1>
|
|
32
32
|
<p>A pattern library of forms based on semantic HTML enhanced with a modern UX.</p>
|
|
33
33
|
|
|
34
|
-
<
|
|
34
|
+
<details>
|
|
35
|
+
<summary>Table of Contents</summary>
|
|
35
36
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<dd><input type="text" name="single-input" id="single-input"></dd>
|
|
75
|
-
</dl>
|
|
76
|
-
|
|
77
|
-
<dl class="colspan-1">
|
|
78
|
-
<dt><label for="max-content-input"><code>data-max-content</code> text input</label></dt>
|
|
79
|
-
<dd><input type="text" name="max-content-input" id="max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
|
|
80
|
-
|
|
81
|
-
<dt><label for="max-content-select"><code>data-max-content</code> select</label></dt>
|
|
82
|
-
<dd>
|
|
83
|
-
<select name="max-content-select" id="max-content-select" data-max-content>
|
|
84
|
-
<option>Short</option>
|
|
85
|
-
<option>Some really really really really really really really really long text</option>
|
|
86
|
-
<option>This is some medium text</option>
|
|
87
|
-
</select>
|
|
88
|
-
</dd>
|
|
89
|
-
</dl>
|
|
90
|
-
|
|
91
|
-
<fieldset class="colspan-full">
|
|
92
|
-
<legend>Fieldset legend</legend>
|
|
93
|
-
|
|
94
|
-
<h3>Inputs</h3>
|
|
95
|
-
<dl>
|
|
96
|
-
<dt><label for="email">Email field</label></dt>
|
|
97
|
-
<dd><input id="email" name="email" type="email" placeholder="e.g. you@email.server"></dd>
|
|
98
|
-
|
|
99
|
-
<dt><label for="tel">Telephone field</label></dt>
|
|
100
|
-
<dd><input id="tel" name="tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
|
|
101
|
-
|
|
102
|
-
<dt><label for="url">URL field</label></dt>
|
|
103
|
-
<dd><input id="url" name="url" type="url" placeholder="e.g. https://github.com"></dd>
|
|
104
|
-
|
|
105
|
-
<dt><label for="search-field">Search field</label></dt>
|
|
106
|
-
<dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cats"></dd>
|
|
107
|
-
|
|
108
|
-
<dt><label for="search-no-float">No float label</label></dt>
|
|
109
|
-
<dd><input id="search-no-float" name="search-no-float" type="search" placeholder="e.g. cats" class="no-float-label"></dd>
|
|
37
|
+
<ul>
|
|
38
|
+
<li><a href="#high_flow_styling">High flow (JavaScript enabled) styling</a>
|
|
39
|
+
<ul>
|
|
40
|
+
<li><a href="#inputs">Inputs</a></li>
|
|
41
|
+
<li><a href="#selects">Selects</a></li>
|
|
42
|
+
<li><a href="#checkboxes">Checkboxes</a></li>
|
|
43
|
+
<li><a href="#radios">Radios</a></li>
|
|
44
|
+
<li><a href="#other">Other</a></li>
|
|
45
|
+
<li><a href="#alignment_classes">Alignment classes</a></li>
|
|
46
|
+
<li><a href="#keyboard_shortcuts">Keyboard shortcuts</a></li>
|
|
47
|
+
<li><a href="#tables">Tables</a></li>
|
|
48
|
+
<li><a href="#nested_fieldsets">Nested fieldsets</a></li>
|
|
49
|
+
<li><a href="#details">Detail elements</a></li>
|
|
50
|
+
<li><a href="#buttons">Buttons</a></li>
|
|
51
|
+
<li><a href="#colspan_classes">Colspan classes</a></li>
|
|
52
|
+
<li><a href="#p_tag_elements">P tag elements</a></li>
|
|
53
|
+
</ul>
|
|
54
|
+
</li>
|
|
55
|
+
<li><a href="#semantic_table">Semantic form tables</a>
|
|
56
|
+
<ul>
|
|
57
|
+
<li><a href="#table_semantic_form_class">Table with <code>semanticForms</code> class</a></li>
|
|
58
|
+
<li><a href="#table_form_in_cell">Table with a <code>form</code> in a cell</a></li>
|
|
59
|
+
<li><a href="#table_unstyled">Unstyled table</a></li>
|
|
60
|
+
</ul>
|
|
61
|
+
</li>
|
|
62
|
+
<li><a href="#low_flow_styling">Low flow (JavaScript disabled) styling</a>
|
|
63
|
+
<ul>
|
|
64
|
+
<li><a href="#low_flow_inputs">Inputs</a></li>
|
|
65
|
+
<li><a href="#low_flow_nested_fieldsets">Nested fieldsets</a></li>
|
|
66
|
+
<li><a href="#low_flow_details">Detail elements</a></li>
|
|
67
|
+
<li><a href="#low_flow_colspan_classes">Colspan classes</a></li>
|
|
68
|
+
<li><a href="#low_flow_p_tag_elements">P tag elements</a></li>
|
|
69
|
+
<li><a href="#low_flow_buttons">Buttons</a></li>
|
|
70
|
+
</ul>
|
|
71
|
+
</li>
|
|
72
|
+
<li><a href="#non_form_related_elements">Non-form related HTML elements</a></li>
|
|
73
|
+
</ul>
|
|
74
|
+
</details>
|
|
110
75
|
|
|
111
|
-
|
|
112
|
-
<dd><input id="number" name="number" type="number" placeholder="e.g. 43"></dd>
|
|
76
|
+
<h2 id="high_flow_styling">High flow (JavaScript enabled) styling</h2>
|
|
113
77
|
|
|
114
|
-
|
|
78
|
+
<form action="/somewhere" method="post" class="semanticForms">
|
|
79
|
+
<dl>
|
|
80
|
+
<div>
|
|
81
|
+
<dt><label for="name">Name</label></dt>
|
|
82
|
+
<dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div>
|
|
86
|
+
<dt><label for="prefilled">Prefilled field</label></dt>
|
|
87
|
+
<dd><input id="prefilled" name="prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div>
|
|
91
|
+
<dt><label for="noplaceholder">No placeholder</label></dt>
|
|
92
|
+
<dd><input id="noplaceholder" name="noplaceholder" type="text"></dd>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div>
|
|
96
|
+
<dt><label for="password">Password field</label></dt>
|
|
115
97
|
<dd>
|
|
116
|
-
<input id="
|
|
117
|
-
<
|
|
98
|
+
<input id="password" name="password" type="password" minlength="8" required>
|
|
99
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
118
100
|
</dd>
|
|
101
|
+
</div>
|
|
119
102
|
|
|
120
|
-
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
<dt><label for="label-required-help-icon" data-show-help-icon>Required input with help icon</label></dt>
|
|
124
|
-
<dd><input id="label-required-help-icon" name="label-subtext" type="text" title="Some more help text." placeholder="Hover over the icon" required></dd>
|
|
125
|
-
|
|
126
|
-
<dt><label for="invalid-field">Invalid field</label></dt>
|
|
127
|
-
<dd><input id="invalid-field" class="invalid" name="invalid-field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
|
|
128
|
-
|
|
129
|
-
<dt><label for="valid-field">Valid field</label></dt>
|
|
130
|
-
<dd><input id="valid-field" class="valid" name="valid-field" type="number" placeholder="e.g. 43" min="0" value="2"></dd>
|
|
131
|
-
|
|
132
|
-
<dt><label for="required-field">Required field</label></dt>
|
|
133
|
-
<dd><input id="required-field" name="required-field" type="text" required></dd>
|
|
134
|
-
|
|
135
|
-
<dt><label for="required-field-no-asterisk" data-no-asterisk>Required field (no asterisk)</label></dt>
|
|
136
|
-
<dd><input id="required-field-no-asterisk" name="required-field-no-asterisk" type="text" required></dd>
|
|
137
|
-
|
|
138
|
-
<dt><label for="required-field-custom-title" data-asterisk-text="This is a custom title.">Required field (custom title)</label></dt>
|
|
139
|
-
<dd><input id="required-field-custom-title" name="required-field-custom-title" type="text" required></dd>
|
|
140
|
-
|
|
141
|
-
<dt><label for="disabledInput">Disabled input</label></dt>
|
|
142
|
-
<dd><input id="disabledInput" name="disabledInput" type="text" placeholder="e.g. foo" disabled></dd>
|
|
143
|
-
|
|
144
|
-
<dt><label for="disabledInputValue">Disabled input w/ value</label></dt>
|
|
145
|
-
<dd><input id="disabledInputValue" name="disabledInputValue" type="text" placeholder="e.g. foo" value="some value" disabled></dd>
|
|
146
|
-
|
|
147
|
-
<dt><label for="color">Color field</label></dt>
|
|
148
|
-
<dd><input id="color" name="color" type="color"></dd>
|
|
149
|
-
|
|
150
|
-
<dt><label for="date">Date field</label></dt>
|
|
151
|
-
<dd><input id="date" name="date" type="date"></dd>
|
|
152
|
-
|
|
153
|
-
<dt><label for="time">Time field</label></dt>
|
|
154
|
-
<dd><input id="time" name="time" type="time"></dd>
|
|
155
|
-
|
|
156
|
-
<dt><label for="datetime-local">Datetime-local field</label></dt>
|
|
157
|
-
<dd><input id="datetime-local" name="datetime-local" type="datetime-local"></dd>
|
|
158
|
-
|
|
159
|
-
<dt><label for="month">Month field</label></dt>
|
|
160
|
-
<dd><input id="month" name="month" type="month"></dd>
|
|
161
|
-
|
|
162
|
-
<dt><label for="week">Week field</label></dt>
|
|
163
|
-
<dd><input id="week" name="week" type="week"></dd>
|
|
164
|
-
|
|
165
|
-
<dt><label for="file">File field</label></dt>
|
|
166
|
-
<dd><input id="file" name="file" type="file"></dd>
|
|
167
|
-
|
|
168
|
-
<dt><label for="input-button-2">Input with button</label></dt>
|
|
103
|
+
<div>
|
|
104
|
+
<dt><label for="dontshow-password">Don't show password field</label></dt>
|
|
169
105
|
<dd>
|
|
170
|
-
<input
|
|
171
|
-
<
|
|
172
|
-
<input type="submit" value="Submit">
|
|
106
|
+
<input id="dontshow-password" name="dontshow-password" type="password" minlength="8" required data-no-reveal>
|
|
107
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
173
108
|
</dd>
|
|
109
|
+
</div>
|
|
174
110
|
|
|
175
|
-
|
|
111
|
+
<div>
|
|
112
|
+
<dt><label for="customize-password">Customize clear/show buttons</label></dt>
|
|
176
113
|
<dd>
|
|
177
|
-
<
|
|
178
|
-
|
|
179
|
-
<option value="2">Option 2</option>
|
|
180
|
-
<option value="3">Option 3</option>
|
|
181
|
-
</select>
|
|
182
|
-
<button type="submit">Pick</button>
|
|
114
|
+
<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!">
|
|
115
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
183
116
|
</dd>
|
|
117
|
+
</div>
|
|
184
118
|
|
|
185
|
-
|
|
186
|
-
<
|
|
187
|
-
|
|
188
|
-
<dt><label for="rangeValue">Range value</label></dt>
|
|
189
|
-
<dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
|
|
190
|
-
</dl>
|
|
191
|
-
|
|
192
|
-
<h3>Selects</h3>
|
|
193
|
-
<dl>
|
|
194
|
-
<dt><label for="selectbox">Select box</label></dt>
|
|
119
|
+
<div>
|
|
120
|
+
<dt><label for="input-button-1">Input with button</label></dt>
|
|
195
121
|
<dd>
|
|
196
|
-
<
|
|
197
|
-
|
|
198
|
-
<option value="2">Item two</option>
|
|
199
|
-
<option value="3">Item three</option>
|
|
200
|
-
<option value="4">Item four</option>
|
|
201
|
-
<option value="5">Item five</option>
|
|
202
|
-
<option value="6">Item six</option>
|
|
203
|
-
<option value="7">Item seven</option>
|
|
204
|
-
</select>
|
|
205
|
-
<label for="selectbox">Some help text regarding the select box</label>
|
|
122
|
+
<input type="text" id="input-button-1" name="input-button-1" placeholder="This input has a button">
|
|
123
|
+
<button type="button">Go</button>
|
|
206
124
|
</dd>
|
|
125
|
+
</div>
|
|
126
|
+
</dl>
|
|
207
127
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
</dd>
|
|
128
|
+
<dl>
|
|
129
|
+
<div>
|
|
130
|
+
<dt><label for="single-input">Single form input</label></dt>
|
|
131
|
+
<dd><input type="text" name="single-input" id="single-input"></dd>
|
|
132
|
+
</div>
|
|
133
|
+
</dl>
|
|
134
|
+
|
|
135
|
+
<dl class="colspan-1">
|
|
136
|
+
<div>
|
|
137
|
+
<dt><label for="max-content-input"><code>data-max-content</code> text input</label></dt>
|
|
138
|
+
<dd><input type="text" name="max-content-input" id="max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
|
|
139
|
+
</div>
|
|
221
140
|
|
|
222
|
-
|
|
141
|
+
<div>
|
|
142
|
+
<dt><label for="max-content-select"><code>data-max-content</code> select</label></dt>
|
|
223
143
|
<dd>
|
|
224
|
-
<select
|
|
225
|
-
<option
|
|
226
|
-
<option
|
|
227
|
-
<option
|
|
228
|
-
<option value="3">Item three</option>
|
|
229
|
-
<option value="4">Item four</option>
|
|
230
|
-
<option value="5">Item five</option>
|
|
231
|
-
<option value="6">Item six</option>
|
|
232
|
-
<option value="7">Item seven</option>
|
|
144
|
+
<select name="max-content-select" id="max-content-select" data-max-content>
|
|
145
|
+
<option>Short</option>
|
|
146
|
+
<option>Some really really really really really really really really long text</option>
|
|
147
|
+
<option>This is some medium text</option>
|
|
233
148
|
</select>
|
|
234
149
|
</dd>
|
|
150
|
+
</div>
|
|
151
|
+
</dl>
|
|
235
152
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
<option value="1">Option 1</option>
|
|
239
|
-
<option value="2" selected>Option 2</option>
|
|
240
|
-
<option value="3" selected>Option 3</option>
|
|
241
|
-
<option value="4">Option 4</option>
|
|
242
|
-
<option value="5">Option 5</option>
|
|
243
|
-
</select></dd>
|
|
244
|
-
</dl>
|
|
245
|
-
|
|
246
|
-
<h3>Checkboxes</h3>
|
|
153
|
+
<fieldset id="inputs" class="colspan-full">
|
|
154
|
+
<legend>Inputs</legend>
|
|
247
155
|
<dl>
|
|
248
|
-
<
|
|
249
|
-
|
|
250
|
-
<
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
</
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
<
|
|
259
|
-
<
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
156
|
+
<div>
|
|
157
|
+
<dt><label for="email">Email field</label></dt>
|
|
158
|
+
<dd><input id="email" name="email" type="email" placeholder="e.g. you@email.server"></dd>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div>
|
|
162
|
+
<dt><label for="tel">Telephone field</label></dt>
|
|
163
|
+
<dd><input id="tel" name="tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div>
|
|
167
|
+
<dt><label for="url">URL field</label></dt>
|
|
168
|
+
<dd><input id="url" name="url" type="url" placeholder="e.g. https://github.com"></dd>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<div>
|
|
172
|
+
<dt><label for="search-field">Search field</label></dt>
|
|
173
|
+
<dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cats"></dd>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<div>
|
|
177
|
+
<dt><label for="search-no-float">No float label</label></dt>
|
|
178
|
+
<dd><input id="search-no-float" name="search-no-float" type="search" placeholder="e.g. cats" class="no-float-label"></dd>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<div>
|
|
182
|
+
<dt><label for="number">Number</label></dt>
|
|
183
|
+
<dd><input id="number" name="number" type="number" placeholder="e.g. 43"></dd>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div>
|
|
187
|
+
<dt><label for="label-subtext">Input with label help text</label></dt>
|
|
188
|
+
<dd>
|
|
189
|
+
<input id="label-subtext" name="label-subtext" type="text" placeholder="e.g. John Smith">
|
|
190
|
+
<label for="label-subtext">Some help text</label>
|
|
191
|
+
</dd>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<div>
|
|
195
|
+
<dt><label for="label-help-icon" data-show-help-icon>Input with help icon</label></dt>
|
|
196
|
+
<dd><input id="label-help-icon" name="label-help-icon" type="text" title="Some more help text." placeholder="Hover over the icon"></dd>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<div>
|
|
200
|
+
<dt><label for="label-required-help-icon" data-show-help-icon>Required input with help icon</label></dt>
|
|
201
|
+
<dd><input id="label-required-help-icon" name="label-required-help-icon" type="text" title="Some more help text." placeholder="Hover over the icon" required></dd>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div>
|
|
205
|
+
<dt><label for="invalid-field">Invalid field</label></dt>
|
|
206
|
+
<dd><input id="invalid-field" class="invalid" name="invalid-field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<div>
|
|
210
|
+
<dt><label for="valid-field">Valid field</label></dt>
|
|
211
|
+
<dd><input id="valid-field" class="valid" name="valid-field" type="number" placeholder="e.g. 43" min="0" value="2"></dd>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div>
|
|
215
|
+
<dt><label for="required-field">Required field</label></dt>
|
|
216
|
+
<dd><input id="required-field" name="required-field" type="text" required></dd>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<div>
|
|
220
|
+
<dt><label for="required-field-no-asterisk" data-no-asterisk>Required field (no asterisk)</label></dt>
|
|
221
|
+
<dd><input id="required-field-no-asterisk" name="required-field-no-asterisk" type="text" required></dd>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<div>
|
|
225
|
+
<dt><label for="required-field-custom-title" data-asterisk-text="This is a custom title.">Required field (custom title)</label></dt>
|
|
226
|
+
<dd><input id="required-field-custom-title" name="required-field-custom-title" type="text" required></dd>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<div>
|
|
230
|
+
<dt><label for="disabledInput">Disabled input</label></dt>
|
|
231
|
+
<dd><input id="disabledInput" name="disabledInput" type="text" placeholder="e.g. foo" disabled></dd>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div>
|
|
235
|
+
<dt><label for="disabledInputValue">Disabled input w/ value</label></dt>
|
|
236
|
+
<dd><input id="disabledInputValue" name="disabledInputValue" type="text" placeholder="e.g. foo" value="some value" disabled></dd>
|
|
237
|
+
</div>
|
|
238
|
+
|
|
239
|
+
<div>
|
|
240
|
+
<dt><label for="color">Color field</label></dt>
|
|
241
|
+
<dd><input id="color" name="color" type="color"></dd>
|
|
242
|
+
</div>
|
|
243
|
+
|
|
244
|
+
<div>
|
|
245
|
+
<dt><label for="date">Date field</label></dt>
|
|
246
|
+
<dd><input id="date" name="date" type="date"></dd>
|
|
247
|
+
</div>
|
|
248
|
+
|
|
249
|
+
<div>
|
|
250
|
+
<dt><label for="time">Time field</label></dt>
|
|
251
|
+
<dd><input id="time" name="time" type="time"></dd>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<div>
|
|
255
|
+
<dt><label for="datetime-local">Datetime-local field</label></dt>
|
|
256
|
+
<dd><input id="datetime-local" name="datetime-local" type="datetime-local"></dd>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div>
|
|
260
|
+
<dt><label for="month">Month field</label></dt>
|
|
261
|
+
<dd><input id="month" name="month" type="month"></dd>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<div>
|
|
265
|
+
<dt><label for="week">Week field</label></dt>
|
|
266
|
+
<dd><input id="week" name="week" type="week"></dd>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<div>
|
|
270
|
+
<dt><label for="file">File field</label></dt>
|
|
271
|
+
<dd><input id="file" name="file" type="file"></dd>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<div>
|
|
275
|
+
<dt><label for="input-button-2">Input with button</label></dt>
|
|
276
|
+
<dd>
|
|
277
|
+
<input type="text" id="input-button-2" name="input-button-2" placeholder="This input has a button" value="John Doe">
|
|
278
|
+
<label for="input-button-2">Some help text that should span the entire width of the input/button combo.</label>
|
|
279
|
+
<input type="submit" value="Submit">
|
|
280
|
+
</dd>
|
|
281
|
+
</div>
|
|
265
282
|
|
|
266
|
-
<
|
|
267
|
-
|
|
268
|
-
<
|
|
269
|
-
|
|
270
|
-
for="help-text-checkboxes_one">One</label></li>
|
|
271
|
-
<li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_two"> <label
|
|
272
|
-
for="help-text-checkboxes_two">Two</label></li>
|
|
273
|
-
<li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_three"> <label
|
|
274
|
-
for="help-text-checkboxes_three">Three</label></li>
|
|
275
|
-
</ul>
|
|
276
|
-
</dd>
|
|
283
|
+
<div>
|
|
284
|
+
<dt><label for="range">Range field</label></dt>
|
|
285
|
+
<dd><input id="range" name="range" type="range"></dd>
|
|
286
|
+
</div>
|
|
277
287
|
|
|
278
|
-
<
|
|
279
|
-
|
|
280
|
-
<
|
|
281
|
-
|
|
282
|
-
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_one" checked>
|
|
283
|
-
<label for="extra-text-checkboxes_one">One</label>
|
|
284
|
-
</li>
|
|
285
|
-
<li>
|
|
286
|
-
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_two">
|
|
287
|
-
<label for="extra-text-checkboxes_two">Two</label>
|
|
288
|
-
</li>
|
|
289
|
-
<li>
|
|
290
|
-
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_three" checked>
|
|
291
|
-
<label for="extra-text-checkboxes_three">Three</label></li>
|
|
292
|
-
</ul>
|
|
293
|
-
<label data-for="extra-text-checkboxes">This is some additional text.</label>
|
|
294
|
-
</dd>
|
|
288
|
+
<div>
|
|
289
|
+
<dt><label for="rangeValue">Range value</label></dt>
|
|
290
|
+
<dd><input id="rangeValue" name="rangeValue" type="range" class="displayValue"></dd>
|
|
291
|
+
</div>
|
|
295
292
|
</dl>
|
|
293
|
+
</fieldset>
|
|
296
294
|
|
|
295
|
+
<fieldset id="selects">
|
|
296
|
+
<legend>Selects</legend>
|
|
297
297
|
<dl>
|
|
298
|
-
<
|
|
299
|
-
|
|
298
|
+
<div>
|
|
299
|
+
<dt><label for="selectbox">Select box</label></dt>
|
|
300
|
+
<dd>
|
|
301
|
+
<select id="selectbox" name="selectbox">
|
|
302
|
+
<option value="1">Item one</option>
|
|
303
|
+
<option value="2">Item two</option>
|
|
304
|
+
<option value="3">Item three</option>
|
|
305
|
+
<option value="4">Item four</option>
|
|
306
|
+
<option value="5">Item five</option>
|
|
307
|
+
<option value="6">Item six</option>
|
|
308
|
+
<option value="7">Item seven</option>
|
|
309
|
+
</select>
|
|
310
|
+
<label for="selectbox">Some help text regarding the select box</label>
|
|
311
|
+
</dd>
|
|
312
|
+
</div>
|
|
300
313
|
|
|
301
|
-
<
|
|
302
|
-
|
|
314
|
+
<div>
|
|
315
|
+
<dt><label for="required-selectbox">Required select box</label></dt>
|
|
316
|
+
<dd>
|
|
317
|
+
<select id="required-selectbox" name="required-selectbox" required>
|
|
318
|
+
<option value="">Make a selection</option>
|
|
319
|
+
<option value="1">Item one</option>
|
|
320
|
+
<option value="2">Item two</option>
|
|
321
|
+
<option value="3">Item three</option>
|
|
322
|
+
<option value="4">Item four</option>
|
|
323
|
+
<option value="5">Item five</option>
|
|
324
|
+
<option value="6">Item six</option>
|
|
325
|
+
<option value="7">Item seven</option>
|
|
326
|
+
</select>
|
|
327
|
+
</dd>
|
|
328
|
+
</div>
|
|
303
329
|
|
|
304
|
-
<
|
|
305
|
-
|
|
330
|
+
<div>
|
|
331
|
+
<dt><label for="required-selectbox-hide" data-no-asterisk>Required select box (no asterisk)</label></dt>
|
|
332
|
+
<dd>
|
|
333
|
+
<select id="required-selectbox-hide" name="required-selectbox-hide" required>
|
|
334
|
+
<option value="">Make a selection</option>
|
|
335
|
+
<option value="1">Item one</option>
|
|
336
|
+
<option value="2">Item two</option>
|
|
337
|
+
<option value="3">Item three</option>
|
|
338
|
+
<option value="4">Item four</option>
|
|
339
|
+
<option value="5">Item five</option>
|
|
340
|
+
<option value="6">Item six</option>
|
|
341
|
+
<option value="7">Item seven</option>
|
|
342
|
+
</select>
|
|
343
|
+
</dd>
|
|
344
|
+
</div>
|
|
306
345
|
|
|
307
|
-
<
|
|
308
|
-
|
|
309
|
-
<
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
346
|
+
<div>
|
|
347
|
+
<dt><label for="select-button">Select with button</label></dt>
|
|
348
|
+
<dd>
|
|
349
|
+
<select id="select-button" name="select-button">
|
|
350
|
+
<option value="1">Option 1</option>
|
|
351
|
+
<option value="2">Option 2</option>
|
|
352
|
+
<option value="3">Option 3</option>
|
|
353
|
+
</select>
|
|
354
|
+
<button type="submit">Pick</button>
|
|
355
|
+
</dd>
|
|
356
|
+
</div>
|
|
313
357
|
|
|
358
|
+
<div>
|
|
359
|
+
<dt><label for="multiple-select">Multiple select</label></dt>
|
|
360
|
+
<dd><select name="multiple-select" id="multiple-select" multiple>
|
|
361
|
+
<option value="1">Option 1</option>
|
|
362
|
+
<option value="2" selected>Option 2</option>
|
|
363
|
+
<option value="3" selected>Option 3</option>
|
|
364
|
+
<option value="4">Option 4</option>
|
|
365
|
+
<option value="5">Option 5</option>
|
|
366
|
+
</select></dd>
|
|
367
|
+
</div>
|
|
368
|
+
</dl>
|
|
369
|
+
</fieldset>
|
|
314
370
|
|
|
315
|
-
|
|
371
|
+
<fieldset id="checkboxes">
|
|
372
|
+
<legend>Checkboxes</legend>
|
|
316
373
|
<dl>
|
|
317
|
-
<
|
|
318
|
-
|
|
319
|
-
<
|
|
320
|
-
<
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
<
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
<input type="
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
<
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
374
|
+
<div>
|
|
375
|
+
<dt><label data-for="basic_checkboxes">Checkboxes</label></dt>
|
|
376
|
+
<dd class="checkboxes">
|
|
377
|
+
<ul id="basic_checkboxes">
|
|
378
|
+
<li><input type="checkbox" name="some_field_name" id="checkboxes_one" checked> <label for="checkboxes_one">One</label></li>
|
|
379
|
+
<li><input type="checkbox" name="some_field_name" id="checkboxes_two"> <label for="checkboxes_two">Two</label></li>
|
|
380
|
+
<li><input type="checkbox" name="some_field_name" id="checkboxes_three"> <label for="checkboxes_three">Three</label></li>
|
|
381
|
+
</ul>
|
|
382
|
+
</dd>
|
|
383
|
+
</div>
|
|
384
|
+
|
|
385
|
+
<div>
|
|
386
|
+
<dt><label data-for="required-checkboxes" data-asterisk-text="Custom checkbox title text.">Required checkboxes</label></dt>
|
|
387
|
+
<dd class="checkboxes">
|
|
388
|
+
<ul id="required-checkboxes">
|
|
389
|
+
<li>
|
|
390
|
+
<input type="checkbox" name="required-field" id="required-checkboxes_one" checked required> <label for="required-checkboxes_one">One</label>
|
|
391
|
+
</li>
|
|
392
|
+
<li>
|
|
393
|
+
<input type="checkbox" name="required-field" id="required-checkboxes_two"> <label for="required-checkboxes_two">Two</label>
|
|
394
|
+
</li>
|
|
395
|
+
<li>
|
|
396
|
+
<input type="checkbox" name="required-field" id="required-checkboxes_three" checked> <label for="required-checkboxes_three">Three</label>
|
|
397
|
+
</li>
|
|
398
|
+
</ul>
|
|
399
|
+
</dd>
|
|
400
|
+
</div>
|
|
401
|
+
|
|
402
|
+
<div>
|
|
403
|
+
<dt><label data-for="help-text-checkboxes" title="Here is some helpful text." data-show-help-icon>Checkboxes w/ help text</label></dt>
|
|
404
|
+
<dd class="checkboxes">
|
|
405
|
+
<ul id="help-text-checkboxes">
|
|
406
|
+
<li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_one" checked> <label for="help-text-checkboxes_one">One</label></li>
|
|
407
|
+
<li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_two"> <label for="help-text-checkboxes_two">Two</label></li>
|
|
408
|
+
<li><input type="checkbox" name="some_field_name" id="help-text-checkboxes_three"> <label for="help-text-checkboxes_three">Three</label></li>
|
|
409
|
+
</ul>
|
|
410
|
+
</dd>
|
|
411
|
+
</div>
|
|
412
|
+
|
|
413
|
+
<div>
|
|
414
|
+
<dt><label data-for="extra-text-checkboxes">Checkboxes w/ additional text</label></dt>
|
|
415
|
+
<dd class="checkboxes">
|
|
416
|
+
<ul id="extra-text-checkboxes">
|
|
417
|
+
<li>
|
|
418
|
+
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_one" checked>
|
|
419
|
+
<label for="extra-text-checkboxes_one">One</label>
|
|
420
|
+
</li>
|
|
421
|
+
<li>
|
|
422
|
+
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_two">
|
|
423
|
+
<label for="extra-text-checkboxes_two">Two</label>
|
|
424
|
+
</li>
|
|
425
|
+
<li>
|
|
426
|
+
<input type="checkbox" name="extra-text-field" id="extra-text-checkboxes_three" checked>
|
|
427
|
+
<label for="extra-text-checkboxes_three">Three</label></li>
|
|
428
|
+
</ul>
|
|
429
|
+
<label data-for="extra-text-checkboxes">This is some additional text.</label>
|
|
430
|
+
</dd>
|
|
431
|
+
</div>
|
|
365
432
|
</dl>
|
|
366
433
|
|
|
367
434
|
<dl>
|
|
368
|
-
<
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
<
|
|
379
|
-
<
|
|
380
|
-
<
|
|
381
|
-
</
|
|
435
|
+
<div>
|
|
436
|
+
<dt><label for="checkbox">Checkbox</label></dt>
|
|
437
|
+
<dd><input type="checkbox" name="checkbox-field" id="checkbox"></dd>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
<div>
|
|
441
|
+
<dt><label for="required-checkbox">Checkbox (required)</label></dt>
|
|
442
|
+
<dd><input type="checkbox" name="required-checkbox-field" id="required-checkbox" required></dd>
|
|
443
|
+
</div>
|
|
444
|
+
|
|
445
|
+
<div>
|
|
446
|
+
<dt><label for="help-icon-checkbox" title="Single checkboxes can have help text too!" data-show-help-icon>Checkbox w/ help text</label></dt>
|
|
447
|
+
<dd><input type="checkbox" name="help-icon-checkbox-field" id="help-icon-checkbox"></dd>
|
|
448
|
+
</div>
|
|
449
|
+
|
|
450
|
+
<div>
|
|
451
|
+
<dt><label for="additional-text-checkbox">Checkbox w/ additional text</label></dt>
|
|
452
|
+
<dd>
|
|
453
|
+
<input type="checkbox" name="extra-text-checkbox-field" id="additional-text-checkbox">
|
|
454
|
+
<label for="additional-text-checkbox">This is some additional text.</label>
|
|
455
|
+
</dd>
|
|
456
|
+
</div>
|
|
382
457
|
</dl>
|
|
458
|
+
</fieldset>
|
|
383
459
|
|
|
384
|
-
|
|
460
|
+
<fieldset id="radios">
|
|
461
|
+
<legend>Radios</legend>
|
|
385
462
|
<dl>
|
|
386
|
-
<
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
<
|
|
397
|
-
<
|
|
398
|
-
<
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
</
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
</
|
|
463
|
+
<div>
|
|
464
|
+
<dt><label data-for="basic_radios">Radios</label></dt>
|
|
465
|
+
<dd class="radios">
|
|
466
|
+
<ul id="basic_radios">
|
|
467
|
+
<li><input type="radio" name="radios" id="r_one"> <label for="r_one">One</label></li>
|
|
468
|
+
<li><input type="radio" name="radios" id="r_two"> <label for="r_two">Two</label></li>
|
|
469
|
+
<li><input type="radio" name="radios" id="r_three"> <label for="r_three">Three</label></li>
|
|
470
|
+
</ul>
|
|
471
|
+
</dd>
|
|
472
|
+
</div>
|
|
473
|
+
<div>
|
|
474
|
+
<dt><label data-for="required-radios" data-asterisk-text="Custom radio title text.">Required radios</label></dt>
|
|
475
|
+
<dd class="radios">
|
|
476
|
+
<ul id="required-radios">
|
|
477
|
+
<li><input type="radio" name="required-field" id="required-radios_one" checked required> <label for="required-radios_one">One</label></li>
|
|
478
|
+
<li><input type="radio" name="required-field" id="required-radios_two"> <label for="required-radios_two">Two</label></li>
|
|
479
|
+
<li><input type="radio" name="required-field" id="required-radios_three" checked> <label for="required-radios_three">Three</label></li>
|
|
480
|
+
</ul>
|
|
481
|
+
</dd>
|
|
482
|
+
</div>
|
|
483
|
+
<div>
|
|
484
|
+
<dt><label data-for="help-text-radios" title="Here is some helpful text." data-show-help-icon>Radios w/ help text</label></dt>
|
|
485
|
+
<dd class="radios">
|
|
486
|
+
<ul id="help-text-radios">
|
|
487
|
+
<li><input type="radio" name="some_field_name" id="help-text-radios_one" checked> <label for="help-text-radios_one">One</label></li>
|
|
488
|
+
<li><input type="radio" name="some_field_name" id="help-text-radios_two"> <label for="help-text-radios_two">Two</label></li>
|
|
489
|
+
<li><input type="radio" name="some_field_name" id="help-text-radios_three"> <label for="help-text-radios_three">Three</label></li>
|
|
490
|
+
</ul>
|
|
491
|
+
</dd>
|
|
492
|
+
</div>
|
|
493
|
+
<div>
|
|
494
|
+
<dt><label data-for="radios-with-additional-text">Radios w/ additional text</label></dt>
|
|
495
|
+
<dd class="radios">
|
|
496
|
+
<ul id="radios-with-additional-text">
|
|
497
|
+
<li>
|
|
498
|
+
<input type="radio" name="radios-with-additional-text" id="a_r_one">
|
|
499
|
+
<label for="a_r_one">One</label>
|
|
500
|
+
</li>
|
|
501
|
+
<li>
|
|
502
|
+
<input type="radio" name="radios-with-additional-text" id="a_r_two">
|
|
503
|
+
<label for="a_r_two">Two</label>
|
|
504
|
+
</li>
|
|
505
|
+
<li>
|
|
506
|
+
<input type="radio" name="radios-with-additional-text" id="a_r_three">
|
|
507
|
+
<label for="a_r_three">Three</label>
|
|
508
|
+
</li>
|
|
509
|
+
</ul>
|
|
510
|
+
<label data-for="radios-with-additional-text">This is some additional text.</label>
|
|
511
|
+
</dd>
|
|
512
|
+
</div>
|
|
416
513
|
</dl>
|
|
417
|
-
|
|
418
|
-
<h3>Keyboard shortcuts</h3>
|
|
419
514
|
<dl>
|
|
420
|
-
<
|
|
421
|
-
|
|
515
|
+
<div>
|
|
516
|
+
<dt><label for="radio">Radio</label></dt>
|
|
517
|
+
<dd><input type="radio" name="radio" id="radio"></dd>
|
|
518
|
+
</div>
|
|
519
|
+
<div>
|
|
520
|
+
<dt><label for="required-radio">Radio (required)</label></dt>
|
|
521
|
+
<dd><input type="radio" name="required-radio" id="required-radio" required></dd>
|
|
522
|
+
</div>
|
|
523
|
+
<div>
|
|
524
|
+
<dt><label for="help-icon-radio" title="Single radios can have help text too!" data-show-help-icon>Radio w/ help text</label></dt>
|
|
525
|
+
<dd><input type="radio" name="help-icon-radio-field" id="help-icon-radio"></dd>
|
|
526
|
+
</div>
|
|
527
|
+
<div>
|
|
528
|
+
<dt><label for="extra-text-radio">Radio w/ additional text</label></dt>
|
|
529
|
+
<dd>
|
|
530
|
+
<input type="radio" name="extra-text-radio" id="extra-text-radio">
|
|
531
|
+
<label for="extra-text-radio">This is some additional text.</label>
|
|
532
|
+
</dd>
|
|
533
|
+
</div>
|
|
534
|
+
</dl>
|
|
535
|
+
</fieldset>
|
|
422
536
|
|
|
423
|
-
|
|
424
|
-
|
|
537
|
+
<fieldset id="other">
|
|
538
|
+
<legend>Other inputs</legend>
|
|
539
|
+
<dl>
|
|
540
|
+
<div>
|
|
541
|
+
<dt><label for="textarea">Textarea</label></dt>
|
|
542
|
+
<dd><textarea id="textarea" name="textarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic."></textarea></dd>
|
|
543
|
+
</div>
|
|
425
544
|
|
|
426
|
-
<
|
|
427
|
-
|
|
545
|
+
<div>
|
|
546
|
+
<dt><label for="prefilledtextarea">Textarea (prefilled)</label></dt>
|
|
547
|
+
<dd>
|
|
548
|
+
<textarea id="prefilledtextarea" name="prefilledtextarea" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.">Some prefilled content...</textarea>
|
|
549
|
+
<label for="prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
|
|
550
|
+
</dd>
|
|
551
|
+
</div>
|
|
428
552
|
|
|
429
|
-
<
|
|
430
|
-
|
|
431
|
-
<
|
|
432
|
-
|
|
553
|
+
<div>
|
|
554
|
+
<dt><label for="textarea-max-rows">Textarea</label></dt>
|
|
555
|
+
<dd>
|
|
556
|
+
<textarea id="textarea-max-rows" name="textarea-max-rows" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-max-rows="3">Row 1 Row 2 Row 3 Row 4</textarea>
|
|
557
|
+
<label for="textarea-max-rows">This <code>textarea</code> has the <code>data-max-rows</code> set to 3, so the textarea will not expand past 3 rows.</label>
|
|
558
|
+
</dd>
|
|
559
|
+
</div>
|
|
433
560
|
|
|
434
|
-
<
|
|
435
|
-
|
|
561
|
+
<div>
|
|
562
|
+
<dt><label for="disable-autosize-textarea">Disabled autosize textarea</label></dt>
|
|
563
|
+
<dd>
|
|
564
|
+
<textarea name="disable-autosize-textarea" id="disable-autosize-textarea" rows="5" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-disable-autosize>Row 1 Row 2 Row 3 Row 4 Row 5 Row 6</textarea>
|
|
565
|
+
<label for="disable-autosize-textarea">This <code>textarea</code> element has the <code>data-disable-autosize</code> attribute applied, and has <code>rows</code> set to 5.</label>
|
|
566
|
+
</dd>
|
|
567
|
+
</div>
|
|
436
568
|
|
|
437
|
-
<
|
|
438
|
-
|
|
439
|
-
<textarea name="
|
|
440
|
-
|
|
441
|
-
</dd>
|
|
569
|
+
<div>
|
|
570
|
+
<dt><label for="auto-grow-textarea">Auto-grow textarea</label></dt>
|
|
571
|
+
<dd><textarea name="auto-grow-textarea" id="auto-grow-textarea" data-auto-grow>Start typing to see me grow</textarea></dd>
|
|
572
|
+
</div>
|
|
442
573
|
|
|
443
|
-
<
|
|
444
|
-
|
|
445
|
-
<input type="
|
|
446
|
-
|
|
447
|
-
|
|
574
|
+
<div>
|
|
575
|
+
<dt><label for="auto-grow-input">Auto-grow input</label></dt>
|
|
576
|
+
<dd><input type="text" name="auto-grow-input" id="auto-grow-input" value="Start typing to see me grow" data-auto-grow></dd>
|
|
577
|
+
</div>
|
|
578
|
+
</dl>
|
|
579
|
+
</fieldset>
|
|
448
580
|
|
|
449
|
-
|
|
450
|
-
|
|
581
|
+
<fieldset id="alignment_classes">
|
|
582
|
+
<legend>Alignment classes</legend>
|
|
583
|
+
<dl class="colspan-3">
|
|
584
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
585
|
+
<dt><label for="align-start-input"><code>align-start</code></label></dt>
|
|
586
|
+
<dd class="align-start"><input type="text" name="align-start-input" id="align-start-input"></dd>
|
|
587
|
+
</div>
|
|
588
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
589
|
+
<dt><label for="align-center-input"><code>align-center</code></label></dt>
|
|
590
|
+
<dd class="align-center"><input type="text" name="align-center-input" id="align-center-input"></dd>
|
|
591
|
+
</div>
|
|
592
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
593
|
+
<dt><label for="align-end-input"><code>align-end</code></label></dt>
|
|
594
|
+
<dd class="align-end"><input type="text" name="align-end-input" id="align-end-input"></dd>
|
|
595
|
+
</div>
|
|
596
|
+
</dl>
|
|
597
|
+
<dl class="colspan-3">
|
|
598
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
599
|
+
<dt><label for="align-start-button"><code>align-start</code></label></dt>
|
|
600
|
+
<dd class="align-start"><input type="button" value="align-start" id="align-start-button" data-max-content></dd>
|
|
601
|
+
</div>
|
|
602
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
603
|
+
<dt><label for="align-center-button"><code>align-center</code></label></dt>
|
|
604
|
+
<dd class="align-center"><input type="button" value="align-center" id="align-center-button" data-max-content></dd>
|
|
605
|
+
</div>
|
|
606
|
+
<div style="outline: dashed 1px gray; outline-offset: 2px;">
|
|
607
|
+
<dt><label for="align-end-button"><code>align-end</code></label></dt>
|
|
608
|
+
<dd class="align-end"><input type="button" value="align-end" id="align-end-button" data-max-content></dd>
|
|
609
|
+
</div>
|
|
610
|
+
</dl>
|
|
611
|
+
</fieldset>
|
|
451
612
|
|
|
452
|
-
|
|
453
|
-
|
|
613
|
+
<fieldset id="keyboard_shortcuts">
|
|
614
|
+
<dl>
|
|
615
|
+
<div>
|
|
616
|
+
<dt><label for="custom-focus-input">Default Input focus</label></dt>
|
|
617
|
+
<dd><input type="text" name="custom-focus-input" id="custom-focus-input" data-focus-key="P"></dd>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<div>
|
|
621
|
+
<dt><label for="custom-focus-ctrl-input">Ctrl Input focus</label></dt>
|
|
622
|
+
<dd><input type="text" name="custom-focus-ctrl-input" id="custom-focus-ctrl-input" data-focus-modifier="ctrl" data-focus-key="P"></dd>
|
|
623
|
+
</div>
|
|
624
|
+
|
|
625
|
+
<div>
|
|
626
|
+
<dt><label for="custom-focus-alt-input">Alt Input focus</label></dt>
|
|
627
|
+
<dd><input type="text" name="custom-focus-alt-input" id="custom-focus-alt-input" data-focus-modifier="alt" data-focus-key="P"></dd>
|
|
628
|
+
</div>
|
|
629
|
+
|
|
630
|
+
<div>
|
|
631
|
+
<dt><label for="custom-focus-meta-input">Meta Input focus</label></dt>
|
|
632
|
+
<dd><input type="text" name="custom-focus-meta-input" id="custom-focus-meta-input" data-focus-modifier="meta" data-focus-key="Y"></dd>
|
|
633
|
+
</div>
|
|
634
|
+
|
|
635
|
+
<div>
|
|
636
|
+
<dt><label for="custom-focus-number">Number focus</label></dt>
|
|
637
|
+
<dd><input type="number" name="custom-focus-number" id="custom-focus-number" data-focus-key="L"></dd>
|
|
638
|
+
</div>
|
|
639
|
+
|
|
640
|
+
<div>
|
|
641
|
+
<dt><label for="custom-focus-textarea">Textarea focus</label></dt>
|
|
642
|
+
<dd>
|
|
643
|
+
<textarea name="custom-focus-textarea" id="custom-focus-textarea" data-focus-key="!"></textarea>
|
|
644
|
+
<label for="custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
|
|
645
|
+
</dd>
|
|
646
|
+
</div>
|
|
454
647
|
|
|
455
|
-
<
|
|
456
|
-
|
|
457
|
-
<
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
648
|
+
<div>
|
|
649
|
+
<dt><label for="custom-focus-date">Date focus</label></dt>
|
|
650
|
+
<dd>
|
|
651
|
+
<input type="date" name="custom-focus-date" id="custom-focus-date" data-focus-key="D">
|
|
652
|
+
<label for="custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
|
|
653
|
+
</dd>
|
|
654
|
+
</div>
|
|
655
|
+
|
|
656
|
+
<div>
|
|
657
|
+
<dt><label for="custom-focus-color">Color focus</label></dt>
|
|
658
|
+
<dd><input type="color" name="custom-focus-color" id="custom-focus-color" title="This input has a keyboard shortcut!" data-focus-key="$" data-focus-modifier-mac="alt"></dd>
|
|
659
|
+
</div>
|
|
660
|
+
|
|
661
|
+
<div>
|
|
662
|
+
<dt><label for="custom-focus-range">Range focus</label></dt>
|
|
663
|
+
<dd><input type="range" name="custom-focus-range" id="custom-focus-range" data-focus-key="U"></dd>
|
|
664
|
+
</div>
|
|
665
|
+
|
|
666
|
+
<div>
|
|
667
|
+
<dt><label for="custom-focus-select">Select focus</label></dt>
|
|
668
|
+
<dd><select name="custom-focus-select" id="custom-focus-select" data-focus-key="K">
|
|
669
|
+
<option value="1">Value 1</option>
|
|
670
|
+
<option value="2">Value 2</option>
|
|
671
|
+
<option value="3">Value 3</option>
|
|
672
|
+
</select></dd>
|
|
673
|
+
</div>
|
|
461
674
|
</dl>
|
|
675
|
+
</fieldset>
|
|
462
676
|
|
|
463
|
-
|
|
464
|
-
|
|
677
|
+
<fieldset id="tables">
|
|
678
|
+
<legend>Tables</legend>
|
|
465
679
|
<h4>Table with inputs and buttons</h4>
|
|
680
|
+
|
|
466
681
|
<table>
|
|
467
682
|
<thead>
|
|
468
683
|
<tr class="title">
|
|
@@ -539,130 +754,189 @@
|
|
|
539
754
|
</tr>
|
|
540
755
|
</tbody>
|
|
541
756
|
</table>
|
|
757
|
+
</fieldset>
|
|
542
758
|
|
|
543
|
-
|
|
544
|
-
|
|
759
|
+
<fieldset id="nested_fieldsets">
|
|
760
|
+
<legend>Nested fieldsets</legend>
|
|
545
761
|
<fieldset>
|
|
546
762
|
<legend>Fieldset 1</legend>
|
|
547
763
|
|
|
548
764
|
<dl>
|
|
549
|
-
<
|
|
550
|
-
|
|
551
|
-
<
|
|
552
|
-
|
|
553
|
-
|
|
765
|
+
<div>
|
|
766
|
+
<dt><label for="nested-input-1">Input</label></dt>
|
|
767
|
+
<dd>
|
|
768
|
+
<input type="text" id="nested-input-1" name="nested-input-1" value="a value"
|
|
769
|
+
placeholder="Some interesting placeholder text">
|
|
770
|
+
<p>Here is some subtext.</p>
|
|
771
|
+
</dd>
|
|
772
|
+
</div>
|
|
554
773
|
|
|
555
|
-
<
|
|
556
|
-
|
|
557
|
-
<
|
|
558
|
-
|
|
559
|
-
|
|
774
|
+
<div>
|
|
775
|
+
<dt><label for="nested-input-2">Input 2</label></dt>
|
|
776
|
+
<dd>
|
|
777
|
+
<input type="text" id="nested-input-2" name="nested-input-2" placeholder="Some interesting placeholder text">
|
|
778
|
+
<p><small>Here's some small subtext.</small></p>
|
|
779
|
+
</dd>
|
|
780
|
+
</div>
|
|
560
781
|
|
|
561
|
-
<
|
|
562
|
-
|
|
563
|
-
<
|
|
564
|
-
|
|
565
|
-
|
|
782
|
+
<div>
|
|
783
|
+
<dt><label for="nested-input-3">Input 3</label></dt>
|
|
784
|
+
<dd>
|
|
785
|
+
<input type="text" id="nested-input-3" name="nested-input-3" placeholder="Some interesting placeholder text">
|
|
786
|
+
<p><strong>Here's some bold subtext.</strong></p>
|
|
787
|
+
</dd>
|
|
788
|
+
</div>
|
|
566
789
|
|
|
567
|
-
<
|
|
568
|
-
|
|
569
|
-
<
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
790
|
+
<div>
|
|
791
|
+
<dt><label for="nested-input-4">Input 4</label></dt>
|
|
792
|
+
<dd>
|
|
793
|
+
<input type="text" id="nested-input-4" name="nested-input-4" placeholder="Some interesting placeholder text">
|
|
794
|
+
<p>Here is some subtext.</p>
|
|
795
|
+
<p>Here is some more subtext.</p>
|
|
796
|
+
</dd>
|
|
797
|
+
</div>
|
|
573
798
|
</dl>
|
|
574
799
|
|
|
575
800
|
<fieldset>
|
|
576
801
|
<legend>Fieldset 2</legend>
|
|
577
802
|
|
|
578
803
|
<dl>
|
|
579
|
-
<
|
|
580
|
-
|
|
581
|
-
<
|
|
582
|
-
|
|
804
|
+
<div>
|
|
805
|
+
<dt><label for="nested-nested-input-1">Input 1</label></dt>
|
|
806
|
+
<dd>
|
|
807
|
+
<input type="text" id="nested-nested-input-1" name="nested-nested-input-1"
|
|
808
|
+
placeholder="Some interesting placeholder text">
|
|
809
|
+
</dd>
|
|
810
|
+
</div>
|
|
583
811
|
|
|
584
|
-
<
|
|
585
|
-
|
|
586
|
-
<input type="text" id="nested-nested-input-2" name="nested-nested-input-2"
|
|
587
|
-
|
|
812
|
+
<div>
|
|
813
|
+
<dt><label for="nested-nested-input-2">Input 2</label></dt>
|
|
814
|
+
<dd><input type="text" id="nested-nested-input-2" name="nested-nested-input-2"
|
|
815
|
+
placeholder="Some interesting placeholder text"></dd>
|
|
816
|
+
</div>
|
|
588
817
|
|
|
589
|
-
<
|
|
590
|
-
|
|
591
|
-
<
|
|
592
|
-
<
|
|
593
|
-
|
|
594
|
-
|
|
818
|
+
<div>
|
|
819
|
+
<dt><label for="nested-nested-select">Select</label></dt>
|
|
820
|
+
<dd>
|
|
821
|
+
<select id="nested-nested-select" name="nested-nested-select">
|
|
822
|
+
<option value="value">Value</option>
|
|
823
|
+
</select>
|
|
824
|
+
</dd>
|
|
825
|
+
</div>
|
|
595
826
|
</dl>
|
|
596
827
|
|
|
597
828
|
<fieldset>
|
|
598
829
|
<legend>Fieldset 3</legend>
|
|
599
830
|
|
|
600
831
|
<dl>
|
|
601
|
-
<
|
|
602
|
-
|
|
603
|
-
<input type="text" id="left-nested-input-a" name="left-nested-input-a"
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
<
|
|
614
|
-
|
|
615
|
-
<input type="text" id="left-nested-input-
|
|
616
|
-
|
|
832
|
+
<div>
|
|
833
|
+
<dt><label for="left-nested-input-a">Input A</label></dt>
|
|
834
|
+
<dd><input type="text" id="left-nested-input-a" name="left-nested-input-a"
|
|
835
|
+
placeholder="Some interesting placeholder text"></dd>
|
|
836
|
+
</div>
|
|
837
|
+
|
|
838
|
+
<div>
|
|
839
|
+
<dt><label for="left-nested-input-b">Input B</label></dt>
|
|
840
|
+
<dd><input type="text" id="left-nested-input-b" name="left-nested-input-b"
|
|
841
|
+
placeholder="Some interesting placeholder text"></dd>
|
|
842
|
+
</div>
|
|
843
|
+
|
|
844
|
+
<div>
|
|
845
|
+
<dt><label for="left-nested-input-c">Input C</label></dt>
|
|
846
|
+
<dd><input type="text" id="left-nested-input-c" name="left-nested-input-c"
|
|
847
|
+
placeholder="Some interesting placeholder text"></dd>
|
|
848
|
+
</div>
|
|
849
|
+
|
|
850
|
+
<div>
|
|
851
|
+
<dt><label for="left-nested-input-d">Input D</label></dt>
|
|
852
|
+
<dd><input type="text" id="left-nested-input-d" name="left-nested-input-d"
|
|
853
|
+
placeholder="Some interesting placeholder text"></dd>
|
|
854
|
+
</div>
|
|
617
855
|
</dl>
|
|
618
856
|
</fieldset>
|
|
619
857
|
</fieldset>
|
|
620
858
|
</fieldset>
|
|
859
|
+
</fieldset>
|
|
621
860
|
|
|
861
|
+
<fieldset id="details">
|
|
862
|
+
<legend>Detail elements</legend>
|
|
622
863
|
<details>
|
|
623
864
|
<summary>Detail element</summary>
|
|
624
865
|
<dl>
|
|
625
|
-
<
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
<
|
|
866
|
+
<div>
|
|
867
|
+
<dt><label for="detail-input-1">Detail input</label></dt>
|
|
868
|
+
<dd><input type="text" name="detail-input-1" id="detail-input-1" value="Some input..."></dd>
|
|
869
|
+
</div>
|
|
870
|
+
|
|
871
|
+
<div>
|
|
872
|
+
<dt><label for="detail-input-2">Detail input</label></dt>
|
|
873
|
+
<dd><input type="text" name="detail-input-2" id="detail-input-2"></dd>
|
|
874
|
+
</div>
|
|
875
|
+
|
|
876
|
+
<div>
|
|
877
|
+
<dt><label for="detail-input-3">Detail input</label></dt>
|
|
878
|
+
<dd><input type="text" name="detail-input-3" id="detail-input-3"></dd>
|
|
879
|
+
</div>
|
|
880
|
+
|
|
881
|
+
<div>
|
|
882
|
+
<dt><label for="detail-input-4">Detail input</label></dt>
|
|
883
|
+
<dd><input type="text" name="detail-input-4" id="detail-input-4"></dd>
|
|
884
|
+
</div>
|
|
636
885
|
</dl>
|
|
637
886
|
</details>
|
|
638
887
|
|
|
639
888
|
<details>
|
|
640
889
|
<summary>Another detail element with a nested fieldset</summary>
|
|
641
890
|
<dl>
|
|
642
|
-
<
|
|
643
|
-
|
|
891
|
+
<div>
|
|
892
|
+
<dt><label for="another-detail-input-1">Detail input</label></dt>
|
|
893
|
+
<dd><input type="text" name="another-detail-input-1" id="another-detail-input-1"></dd>
|
|
894
|
+
</div>
|
|
644
895
|
</dl>
|
|
645
896
|
|
|
646
897
|
<fieldset>
|
|
647
898
|
<legend>Nested fieldset</legend>
|
|
648
899
|
|
|
649
900
|
<dl>
|
|
650
|
-
<
|
|
651
|
-
|
|
901
|
+
<div>
|
|
902
|
+
<dt><label for="another-detail-input-2">Nested fieldset input</label></dt>
|
|
903
|
+
<dd><input type="text" name="another-detail-input-2" id="another-detail-input-2"></dd>
|
|
904
|
+
</div>
|
|
652
905
|
</dl>
|
|
653
906
|
</fieldset>
|
|
654
907
|
</details>
|
|
908
|
+
</fieldset>
|
|
655
909
|
|
|
656
|
-
|
|
657
|
-
<
|
|
910
|
+
<fieldset id="buttons">
|
|
911
|
+
<legend>Buttons</legend>
|
|
912
|
+
<dl>
|
|
913
|
+
<div>
|
|
914
|
+
<dt><label for="button-input1">Standard button</label></dt>
|
|
915
|
+
<dd><button id="button-input1">Standard button</button></dd>
|
|
916
|
+
</div>
|
|
917
|
+
|
|
918
|
+
<div>
|
|
919
|
+
<dt><label for="button-input2">Input button</label></dt>
|
|
920
|
+
<dd><input type="button" id="button-input2" value="Input button"></dd>
|
|
921
|
+
</div>
|
|
922
|
+
<div>
|
|
923
|
+
<dt><label for="button-input3">Submit input</label></dt>
|
|
924
|
+
<dd><input type="submit" id="button-input3" value="Submit input"></dd>
|
|
925
|
+
</div>
|
|
926
|
+
<div>
|
|
927
|
+
<dt><label for="button-input4">Reset input</label></dt>
|
|
928
|
+
<dd><input type="reset" id="button-input4" value="Reset input"></dd>
|
|
929
|
+
</div>
|
|
930
|
+
</dl>
|
|
931
|
+
<input type="button" name="button1" value="Non-grouped button">
|
|
932
|
+
<input type="submit" name="button2" value="Non-grouped submit button">
|
|
933
|
+
<input type="reset" name="button3" value="Non-grouped reset button">
|
|
658
934
|
<a href="/" class="button-link">Button link</a>
|
|
659
|
-
|
|
660
935
|
<p>Flexbox button layout pattern with two submit buttons:</p>
|
|
661
936
|
<menu>
|
|
662
937
|
<li><button type="submit" name="button1">Button 1</button></li>
|
|
663
938
|
<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>
|
|
664
939
|
</menu>
|
|
665
|
-
|
|
666
940
|
<p>Flexbox button layout pattern with three submit buttons:</p>
|
|
667
941
|
<menu>
|
|
668
942
|
<li><button type="submit" name="button1">Button 1</button></li>
|
|
@@ -671,104 +945,130 @@
|
|
|
671
945
|
</menu>
|
|
672
946
|
</fieldset>
|
|
673
947
|
|
|
674
|
-
<fieldset>
|
|
948
|
+
<fieldset id="colspan_classes">
|
|
675
949
|
<legend>Colspan classes</legend>
|
|
676
|
-
|
|
677
950
|
<dl>
|
|
678
|
-
<
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
<
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
<
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
<
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
951
|
+
<div class="colspan-1">
|
|
952
|
+
<dt><label for="colspan-1a">colspan-1</label></dt>
|
|
953
|
+
<dd><input type="text" name="colspan-1a" id="colspan-1a"></dd>
|
|
954
|
+
</div>
|
|
955
|
+
<div class="colspan-1">
|
|
956
|
+
<dt><label for="colspan-1b">colspan-1</label></dt>
|
|
957
|
+
<dd><input type="text" name="colspan-1b" id="colspan-1b"></dd>
|
|
958
|
+
</div>
|
|
959
|
+
<div class="colspan-2">
|
|
960
|
+
<dt><label for="colspan-2">colspan-2</label></dt>
|
|
961
|
+
<dd><input type="text" name="colspan-2" id="colspan-2"></dd>
|
|
962
|
+
</div>
|
|
963
|
+
<div class="colspan-4">
|
|
964
|
+
<dt><label for="colspan-4">colspan-4</label></dt>
|
|
965
|
+
<dd><input type="text" name="colspan-4" id="colspan-4"></dd>
|
|
966
|
+
</div>
|
|
967
|
+
<div class="colspan-3">
|
|
968
|
+
<dt><label for="colspan-3">colspan-3</label></dt>
|
|
969
|
+
<dd><input type="text" name="colspan-3" id="colspan-3"></dd>
|
|
970
|
+
</div>
|
|
971
|
+
<div class="colspan-1">
|
|
972
|
+
<dt><label for="colspan-1c">colspan-1</label></dt>
|
|
973
|
+
<dd><input type="text" name="colspan-1c" id="colspan-1c"></dd>
|
|
974
|
+
</div>
|
|
975
|
+
<div class="colspan-full">
|
|
976
|
+
<dt><label for="colspan-full">colspan-full</label></dt>
|
|
977
|
+
<dd><input type="text" name="colspan-full" id="colspan-full"></dd>
|
|
978
|
+
</div>
|
|
979
|
+
<div class="colspan-5">
|
|
980
|
+
<dt><label for="colspan-5">colspan-5</label></dt>
|
|
981
|
+
<dd><input type="text" name="colspan-5" id="colspan-5"></dd>
|
|
982
|
+
</div>
|
|
694
983
|
</dl>
|
|
695
|
-
|
|
696
984
|
<fieldset class="colspan-1">
|
|
697
985
|
<legend>colspan-1</legend>
|
|
698
|
-
|
|
699
986
|
<dl>
|
|
700
|
-
<
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
<
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
987
|
+
<div>
|
|
988
|
+
<dt><label for="colspan-1-a">Input A</label></dt>
|
|
989
|
+
<dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
|
|
990
|
+
</div>
|
|
991
|
+
<div>
|
|
992
|
+
<dt><label for="colspan-1-b">Input B</label></dt>
|
|
993
|
+
<dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
|
|
994
|
+
</div>
|
|
995
|
+
<div>
|
|
996
|
+
<dt><label for="colspan-1-c">Input C</label></dt>
|
|
997
|
+
<dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
|
|
998
|
+
</div>
|
|
999
|
+
<div>
|
|
1000
|
+
<dt><label for="colspan-1-d">Input D</label></dt>
|
|
1001
|
+
<dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
|
|
1002
|
+
</div>
|
|
711
1003
|
</dl>
|
|
712
1004
|
</fieldset>
|
|
713
|
-
|
|
714
1005
|
<fieldset class="colspan-2">
|
|
715
1006
|
<legend>colspan-2</legend>
|
|
716
|
-
|
|
717
1007
|
<dl>
|
|
718
|
-
<
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
<
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
1008
|
+
<div>
|
|
1009
|
+
<dt><label for="colspan-2-a">Input A</label></dt>
|
|
1010
|
+
<dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
|
|
1011
|
+
</div>
|
|
1012
|
+
<div>
|
|
1013
|
+
<dt><label for="colspan-2-b">Input B</label></dt>
|
|
1014
|
+
<dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
|
|
1015
|
+
</div>
|
|
1016
|
+
<div>
|
|
1017
|
+
<dt><label for="colspan-2-c">Input C</label></dt>
|
|
1018
|
+
<dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div>
|
|
1021
|
+
<dt><label for="colspan-2-d">Input D</label></dt>
|
|
1022
|
+
<dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
|
|
1023
|
+
</div>
|
|
729
1024
|
</dl>
|
|
730
1025
|
</fieldset>
|
|
731
|
-
|
|
732
1026
|
<fieldset>
|
|
733
1027
|
<legend>colspan-3</legend>
|
|
734
|
-
|
|
735
1028
|
<dl class="colspan-3">
|
|
736
|
-
<
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
<
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
1029
|
+
<div>
|
|
1030
|
+
<dt><label for="colspan-3-a">Input A</label></dt>
|
|
1031
|
+
<dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
|
|
1032
|
+
</div>
|
|
1033
|
+
<div>
|
|
1034
|
+
<dt><label for="colspan-3-b">Input B</label></dt>
|
|
1035
|
+
<dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
|
|
1036
|
+
</div>
|
|
1037
|
+
<div>
|
|
1038
|
+
<dt><label for="colspan-3-c">Input C</label></dt>
|
|
1039
|
+
<dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
|
|
1040
|
+
</div>
|
|
1041
|
+
<div>
|
|
1042
|
+
<dt><label for="colspan-3-d">Input D</label></dt>
|
|
1043
|
+
<dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
|
|
1044
|
+
</div>
|
|
747
1045
|
</dl>
|
|
748
1046
|
</fieldset>
|
|
749
|
-
|
|
750
1047
|
<fieldset class="colspan-full">
|
|
751
1048
|
<legend>colspan-full</legend>
|
|
752
|
-
|
|
753
1049
|
<dl>
|
|
754
|
-
<
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
<
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
1050
|
+
<div>
|
|
1051
|
+
<dt><label for="colspan-full-a">Input A</label></dt>
|
|
1052
|
+
<dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
|
|
1053
|
+
</div>
|
|
1054
|
+
<div>
|
|
1055
|
+
<dt><label for="colspan-full-b">Input B</label></dt>
|
|
1056
|
+
<dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
|
|
1057
|
+
</div>
|
|
1058
|
+
<div>
|
|
1059
|
+
<dt><label for="colspan-full-c">Input C</label></dt>
|
|
1060
|
+
<dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
|
|
1061
|
+
</div>
|
|
1062
|
+
<div>
|
|
1063
|
+
<dt><label for="colspan-full-d">Input D</label></dt>
|
|
1064
|
+
<dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
|
|
1065
|
+
</div>
|
|
765
1066
|
</dl>
|
|
766
1067
|
</fieldset>
|
|
767
1068
|
</fieldset>
|
|
768
1069
|
|
|
769
|
-
<fieldset>
|
|
1070
|
+
<fieldset id="p_tag_elements">
|
|
770
1071
|
<legend>P tag elements</legend>
|
|
771
|
-
|
|
772
1072
|
<p>
|
|
773
1073
|
<input type="checkbox" name="p-tag-checkbox" id="p-tag-checkbox">
|
|
774
1074
|
<label for="p-tag-checkbox">Checkbox</label>
|
|
@@ -788,466 +1088,580 @@
|
|
|
788
1088
|
Some regular text with <strong>other elements</strong> <span>inside of it</span>
|
|
789
1089
|
</p>
|
|
790
1090
|
</fieldset>
|
|
791
|
-
|
|
792
|
-
<h2>Non-form related HTML elements</h2>
|
|
793
|
-
<p>This is some regular HTML that should not be affected by any semantic forms styles</p>
|
|
794
|
-
<div>This is a div</div>
|
|
795
|
-
<blockquote>This is a block quote</blockquote>
|
|
796
|
-
<a href="https://github.com/rooseveltframework/semantic-forms">A link to the semantic forms repo</a>
|
|
797
|
-
|
|
798
|
-
<ul>
|
|
799
|
-
<li>unordered list 1</li>
|
|
800
|
-
<li>unordered list 2</li>
|
|
801
|
-
<li>unordered list 3</li>
|
|
802
|
-
</ul>
|
|
803
|
-
<ol>
|
|
804
|
-
<li>ordered list 1</li>
|
|
805
|
-
<li>ordered list 2</li>
|
|
806
|
-
<li>ordered list 3</li>
|
|
807
|
-
</ol>
|
|
808
|
-
<menu>
|
|
809
|
-
<li>menu list 1</li>
|
|
810
|
-
<li>menu list 2</li>
|
|
811
|
-
<li>menu list 3</li>
|
|
812
|
-
</menu>
|
|
813
|
-
<dl>
|
|
814
|
-
<dt>description list title</dt>
|
|
815
|
-
<dd>description list value</dd>
|
|
816
|
-
</dl>
|
|
817
1091
|
</form>
|
|
818
1092
|
|
|
819
|
-
<
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
<
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
<
|
|
838
|
-
<
|
|
839
|
-
|
|
840
|
-
<
|
|
841
|
-
</
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
</
|
|
849
|
-
<
|
|
850
|
-
<
|
|
851
|
-
|
|
852
|
-
<
|
|
853
|
-
</
|
|
854
|
-
|
|
855
|
-
</tr>
|
|
856
|
-
<tr>
|
|
857
|
-
<td>3</td>
|
|
858
|
-
<td>
|
|
859
|
-
<input type="text" name="table-text-3C" id="table-text-3C" placeholder="A text input in a table">
|
|
860
|
-
</td>
|
|
861
|
-
<td>
|
|
862
|
-
<menu>
|
|
863
|
-
<li><button type="button">Button 3</button></li>
|
|
864
|
-
<li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
|
|
865
|
-
</menu>
|
|
866
|
-
</td>
|
|
867
|
-
</tr>
|
|
868
|
-
</tbody>
|
|
869
|
-
</table>
|
|
870
|
-
|
|
871
|
-
<h2>Table with a <code>form</code> in a cell</h2>
|
|
872
|
-
<table class="semanticForms">
|
|
873
|
-
<thead>
|
|
874
|
-
<tr class="title">
|
|
875
|
-
<th colspan="2">Table Title</th>
|
|
876
|
-
</tr>
|
|
877
|
-
<tr>
|
|
878
|
-
<th>Column 1</th>
|
|
879
|
-
<th>Column 2</th>
|
|
880
|
-
</tr>
|
|
881
|
-
</thead>
|
|
882
|
-
<tbody>
|
|
883
|
-
<tr>
|
|
884
|
-
<td>Some text</td>
|
|
885
|
-
<td>
|
|
886
|
-
<form action="/somewhere" class="semanticForms">
|
|
1093
|
+
<hr>
|
|
1094
|
+
|
|
1095
|
+
<h2 id="semantic_table">Semantic form tables</h2>
|
|
1096
|
+
|
|
1097
|
+
<section>
|
|
1098
|
+
<h3 id="table_semantic_form_class">Table with <code>semanticForms</code> class</h3>
|
|
1099
|
+
<table class="semanticForms">
|
|
1100
|
+
<thead>
|
|
1101
|
+
<tr class="title">
|
|
1102
|
+
<th colspan="3">Table Title</th>
|
|
1103
|
+
</tr>
|
|
1104
|
+
<tr>
|
|
1105
|
+
<th>Column 1</th>
|
|
1106
|
+
<th>Column 2</th>
|
|
1107
|
+
<th>Column 3</th>
|
|
1108
|
+
</tr>
|
|
1109
|
+
</thead>
|
|
1110
|
+
<tbody>
|
|
1111
|
+
<tr>
|
|
1112
|
+
<td>1</td>
|
|
1113
|
+
<td>
|
|
1114
|
+
<input type="text" name="table-text-1C" id="table-text-1C" placeholder="A text input in a table">
|
|
1115
|
+
</td>
|
|
1116
|
+
<td>
|
|
1117
|
+
<menu>
|
|
1118
|
+
<li><button type="button">Button 1</button></li>
|
|
1119
|
+
<li><a href="fullDemo.html" class="button-link">Link button 1</a></li>
|
|
1120
|
+
</menu>
|
|
1121
|
+
</td>
|
|
1122
|
+
</tr>
|
|
1123
|
+
<tr>
|
|
1124
|
+
<td>2</td>
|
|
1125
|
+
<td>
|
|
1126
|
+
<input type="text" name="table-text-2C" id="table-text-2C" placeholder="A text input in a table">
|
|
1127
|
+
</td>
|
|
1128
|
+
<td>
|
|
887
1129
|
<menu>
|
|
888
|
-
<li><button type="
|
|
1130
|
+
<li><button type="button">Button 2</button></li>
|
|
1131
|
+
<li><a href="fullDemo.html" class="button-link">Link button 2</a></li>
|
|
889
1132
|
</menu>
|
|
890
|
-
</
|
|
891
|
-
</
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
<
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
1133
|
+
</td>
|
|
1134
|
+
</tr>
|
|
1135
|
+
<tr>
|
|
1136
|
+
<td>3</td>
|
|
1137
|
+
<td>
|
|
1138
|
+
<input type="text" name="table-text-3C" id="table-text-3C" placeholder="A text input in a table">
|
|
1139
|
+
</td>
|
|
1140
|
+
<td>
|
|
1141
|
+
<menu>
|
|
1142
|
+
<li><button type="button">Button 3</button></li>
|
|
1143
|
+
<li><a href="fullDemo.html" class="button-link">Link button 3</a></li>
|
|
1144
|
+
</menu>
|
|
1145
|
+
</td>
|
|
1146
|
+
</tr>
|
|
1147
|
+
</tbody>
|
|
1148
|
+
</table>
|
|
1149
|
+
<h3 id="table_form_in_cell">Table with a <code>form</code> in a cell</h3>
|
|
1150
|
+
<table class="semanticForms">
|
|
1151
|
+
<thead>
|
|
1152
|
+
<tr class="title">
|
|
1153
|
+
<th colspan="2">Table Title</th>
|
|
1154
|
+
</tr>
|
|
1155
|
+
<tr>
|
|
1156
|
+
<th>Column 1</th>
|
|
1157
|
+
<th>Column 2</th>
|
|
1158
|
+
</tr>
|
|
1159
|
+
</thead>
|
|
1160
|
+
<tbody>
|
|
1161
|
+
<tr>
|
|
1162
|
+
<td>Some text</td>
|
|
1163
|
+
<td>
|
|
1164
|
+
<form action="/somewhere" class="semanticForms">
|
|
1165
|
+
<menu>
|
|
1166
|
+
<li><button type="submit">Submit button</button></li>
|
|
1167
|
+
</menu>
|
|
1168
|
+
</form>
|
|
1169
|
+
</td>
|
|
1170
|
+
</tr>
|
|
1171
|
+
</tbody>
|
|
1172
|
+
</table>
|
|
1173
|
+
<h3 id="table_unstyled">Unstyled table</h3>
|
|
1174
|
+
<table>
|
|
1175
|
+
<thead>
|
|
1176
|
+
<tr class="title">
|
|
1177
|
+
<th colspan="3">Table Title</th>
|
|
1178
|
+
</tr>
|
|
1179
|
+
<tr>
|
|
1180
|
+
<th>Column 1</th>
|
|
1181
|
+
<th>Column 2</th>
|
|
1182
|
+
<th>Column 3</th>
|
|
1183
|
+
</tr>
|
|
1184
|
+
</thead>
|
|
1185
|
+
<tbody>
|
|
1186
|
+
<tr>
|
|
1187
|
+
<td>1</td>
|
|
1188
|
+
<td>A</td>
|
|
1189
|
+
<td>a</td>
|
|
1190
|
+
</tr>
|
|
1191
|
+
<tr>
|
|
1192
|
+
<td>2</td>
|
|
1193
|
+
<td>B</td>
|
|
1194
|
+
<td>b</td>
|
|
1195
|
+
</tr>
|
|
1196
|
+
<tr>
|
|
1197
|
+
<td>3</td>
|
|
1198
|
+
<td>C</td>
|
|
1199
|
+
<td>c</td>
|
|
1200
|
+
</tr>
|
|
1201
|
+
</tbody>
|
|
1202
|
+
</table>
|
|
1203
|
+
</section>
|
|
926
1204
|
|
|
927
1205
|
<hr>
|
|
928
1206
|
|
|
929
|
-
<h2>Low flow (JavaScript disabled) styling</h2>
|
|
1207
|
+
<h2 id="low_flow_styling">Low flow (JavaScript disabled) styling</h2>
|
|
930
1208
|
<p>Adding the <code>lowFlow</code> class to the form element removes all JS enhancements.</p>
|
|
931
1209
|
<form action="/somewhere" method="post" class="semanticForms lowFlow">
|
|
932
1210
|
<dl>
|
|
933
|
-
<
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
<
|
|
944
|
-
<
|
|
945
|
-
<
|
|
946
|
-
</
|
|
1211
|
+
<div>
|
|
1212
|
+
<dt><label for="low-flow-name">Name</label></dt>
|
|
1213
|
+
<dd><input id="low-flow-name" name="low-flow-name" type="text" placeholder="e.g. John Smith"></dd>
|
|
1214
|
+
</div>
|
|
1215
|
+
|
|
1216
|
+
<div>
|
|
1217
|
+
<dt><label for="low-flow-prefilled">Prefilled field</label></dt>
|
|
1218
|
+
<dd><input id="low-flow-prefilled" name="low-flow-prefilled" type="text" placeholder="e.g. Stuff" value="Some text prefilled"></dd>
|
|
1219
|
+
</div>
|
|
1220
|
+
|
|
1221
|
+
<div>
|
|
1222
|
+
<dt><label for="low-flow-noplaceholder">No placeholder</label></dt>
|
|
1223
|
+
<dd><input id="low-flow-noplaceholder" name="low-flow-noplaceholder" type="text"></dd>
|
|
1224
|
+
</div>
|
|
1225
|
+
|
|
1226
|
+
<div>
|
|
1227
|
+
<dt><label for="low-flow-password">Password field</label></dt>
|
|
1228
|
+
<dd>
|
|
1229
|
+
<input id="low-flow-password" name="low-flow-password" type="password" minlength="8" required>
|
|
1230
|
+
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
1231
|
+
</dd>
|
|
1232
|
+
</div>
|
|
947
1233
|
</dl>
|
|
948
1234
|
|
|
949
1235
|
<dl>
|
|
950
|
-
<
|
|
951
|
-
|
|
1236
|
+
<div>
|
|
1237
|
+
<dt><label for="low-flow-single-input">Single form input</label></dt>
|
|
1238
|
+
<dd><input type="text" name="low-flow-single-input" id="low-flow-single-input"></dd>
|
|
1239
|
+
</div>
|
|
952
1240
|
</dl>
|
|
953
1241
|
|
|
954
1242
|
<fieldset>
|
|
955
1243
|
<legend>Fieldset legend</legend>
|
|
956
|
-
<dl>
|
|
957
|
-
<dt><label for="low-flow-email">Email field</label></dt>
|
|
958
|
-
<dd><input id="low-flow-email" name="low-flow-email" type="email" placeholder="e.g. you@email.server"></dd>
|
|
959
|
-
|
|
960
|
-
<dt><label for="low-flow-tel">Telephone field</label></dt>
|
|
961
|
-
<dd><input id="low-flow-tel" name="low-flow-tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
|
|
962
|
-
|
|
963
|
-
<dt><label for="low-flow-url">URL field</label></dt>
|
|
964
|
-
<dd><input id="low-flow-url" name="low-flow-url" type="url" placeholder="e.g. https://github.com"></dd>
|
|
965
1244
|
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
<
|
|
974
|
-
<
|
|
975
|
-
<
|
|
976
|
-
</
|
|
977
|
-
|
|
978
|
-
<
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
<
|
|
989
|
-
<
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
<
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
</
|
|
1000
|
-
|
|
1001
|
-
<dt><label data-for="low-flow-checkboxes">Checkboxes</label></dt>
|
|
1002
|
-
<dd class="checkboxes">
|
|
1003
|
-
<ul id="low-flow-checkboxes">
|
|
1004
|
-
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_one"> <label for="low-flow-checkboxes_one">One</label></li>
|
|
1005
|
-
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_two"> <label for="low-flow-checkboxes_two">Two</label></li>
|
|
1006
|
-
<li><input type="checkbox" name="low-flow-field" id="low-flow-checkboxes_three"> <label for="low-flow-checkboxes_three">Three</label></li>
|
|
1007
|
-
</ul>
|
|
1008
|
-
</dd>
|
|
1009
|
-
|
|
1010
|
-
<dt><label for="low-flow-checkbox">Single checkbox</label></dt>
|
|
1011
|
-
<dd><input type="checkbox" name="low-flow-checkbox-field" id="low-flow-checkbox"></dd>
|
|
1012
|
-
|
|
1013
|
-
<dt><label data-for="low-flow-radios">Radios</label></dt>
|
|
1014
|
-
<dd class="radios">
|
|
1015
|
-
<ul id="low-flow-radios">
|
|
1016
|
-
<li><input type="radio" name="low-flow-radios" id="low-flow-r_one"> <label for="low-flow-r_one">One</label></li>
|
|
1017
|
-
<li><input type="radio" name="low-flow-radios" id="low-flow-r_two"> <label for="low-flow-r_two">Two</label></li>
|
|
1018
|
-
<li><input type="radio" name="low-flow-radios" id="low-flow-r_three"> <label for="low-flow-r_three">Three</label></li>
|
|
1019
|
-
</ul>
|
|
1020
|
-
</dd>
|
|
1021
|
-
|
|
1022
|
-
<dt><label for="low-flow-color">Color field</label></dt>
|
|
1023
|
-
<dd><input id="low-flow-color" name="low-flow-color" type="color"></dd>
|
|
1024
|
-
|
|
1025
|
-
<dt><label for="low-flow-date">Date field</label></dt>
|
|
1026
|
-
<dd><input id="low-flow-date" name="low-flow-date" type="date"></dd>
|
|
1027
|
-
|
|
1028
|
-
<dt><label for="low-flow-time">Time field</label></dt>
|
|
1029
|
-
<dd><input id="low-flow-time" name="low-flow-time" type="time"></dd>
|
|
1030
|
-
|
|
1031
|
-
<dt><label for="low-flow-datetime-local">Datetime-local field</label></dt>
|
|
1032
|
-
<dd><input id="low-flow-datetime-local" name="low-flow-datetime-local" type="datetime-local"></dd>
|
|
1033
|
-
|
|
1034
|
-
<dt><label for="low-flow-month">Month field</label></dt>
|
|
1035
|
-
<dd><input id="low-flow-month" name="low-flow-month" type="month"></dd>
|
|
1036
|
-
|
|
1037
|
-
<dt><label for="low-flow-week">Week field</label></dt>
|
|
1038
|
-
<dd><input id="low-flow-week" name="low-flow-week" type="week"></dd>
|
|
1245
|
+
<h3 id="low_flow_inputs">Inputs</h3>
|
|
1246
|
+
<dl>
|
|
1247
|
+
<div>
|
|
1248
|
+
<dt><label for="low-flow-email">Email field</label></dt>
|
|
1249
|
+
<dd><input id="low-flow-email" name="low-flow-email" type="email" placeholder="e.g. you@email.server"></dd>
|
|
1250
|
+
</div>
|
|
1251
|
+
|
|
1252
|
+
<div>
|
|
1253
|
+
<dt><label for="low-flow-tel">Telephone field</label></dt>
|
|
1254
|
+
<dd><input id="low-flow-tel" name="low-flow-tel" type="tel" placeholder="e.g. 555-437-1111"></dd>
|
|
1255
|
+
</div>
|
|
1256
|
+
|
|
1257
|
+
<div>
|
|
1258
|
+
<dt><label for="low-flow-url">URL field</label></dt>
|
|
1259
|
+
<dd><input id="low-flow-url" name="low-flow-url" type="url" placeholder="e.g. https://github.com"></dd>
|
|
1260
|
+
</div>
|
|
1261
|
+
|
|
1262
|
+
<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>
|
|
1265
|
+
</div>
|
|
1266
|
+
|
|
1267
|
+
<div>
|
|
1268
|
+
<dt><label for="low-flow-number">Number</label></dt>
|
|
1269
|
+
<dd><input id="low-flow-number" name="low-flow-number" type="number" placeholder="e.g. 43"></dd>
|
|
1270
|
+
</div>
|
|
1271
|
+
|
|
1272
|
+
<div>
|
|
1273
|
+
<dt><label for="low-flow-label-subtext">Input with label help text</label></dt>
|
|
1274
|
+
<dd>
|
|
1275
|
+
<input id="low-flow-label-subtext" name="low-flow-label-subtext" type="text" placeholder="e.g. John Smith">
|
|
1276
|
+
<label for="low-flow-label-subtext">Some help text</label>
|
|
1277
|
+
</dd>
|
|
1278
|
+
</div>
|
|
1039
1279
|
|
|
1040
|
-
<
|
|
1041
|
-
|
|
1280
|
+
<div>
|
|
1281
|
+
<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-Field" type="number" placeholder="e.g. 43" min="0" value="-2"></dd>
|
|
1283
|
+
</div>
|
|
1042
1284
|
|
|
1043
|
-
<
|
|
1044
|
-
|
|
1285
|
+
<div>
|
|
1286
|
+
<dt><label for="low-flow-valid-field">Valid field</label></dt>
|
|
1287
|
+
<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>
|
|
1288
|
+
</div>
|
|
1045
1289
|
|
|
1046
|
-
<
|
|
1047
|
-
|
|
1290
|
+
<div>
|
|
1291
|
+
<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="number" placeholder="e.g. 43" min="0" required></dd>
|
|
1293
|
+
</div>
|
|
1048
1294
|
|
|
1049
|
-
<
|
|
1050
|
-
|
|
1051
|
-
<
|
|
1052
|
-
|
|
1053
|
-
|
|
1295
|
+
<div>
|
|
1296
|
+
<dt><label for="low-flow-selectbox">Select box</label></dt>
|
|
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>
|
|
1309
|
+
</div>
|
|
1310
|
+
|
|
1311
|
+
<div>
|
|
1312
|
+
<dt><label data-for="low-flow-checkboxes">Checkboxes</label></dt>
|
|
1313
|
+
<dd class="checkboxes">
|
|
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>
|
|
1320
|
+
</div>
|
|
1321
|
+
|
|
1322
|
+
<div>
|
|
1323
|
+
<dt><label for="low-flow-checkbox">Single checkbox</label></dt>
|
|
1324
|
+
<dd><input type="checkbox" name="low-flow-checkbox-field" id="low-flow-checkbox"></dd>
|
|
1325
|
+
</div>
|
|
1326
|
+
|
|
1327
|
+
<div>
|
|
1328
|
+
<dt><label data-for="low-flow-radios">Radios</label></dt>
|
|
1329
|
+
<dd class="radios">
|
|
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>
|
|
1336
|
+
</div>
|
|
1337
|
+
|
|
1338
|
+
<div>
|
|
1339
|
+
<dt><label for="low-flow-color">Color field</label></dt>
|
|
1340
|
+
<dd><input id="low-flow-color" name="low-flow-color" type="color"></dd>
|
|
1341
|
+
</div>
|
|
1342
|
+
|
|
1343
|
+
<div>
|
|
1344
|
+
<dt><label for="low-flow-date">Date field</label></dt>
|
|
1345
|
+
<dd><input id="low-flow-date" name="low-flow-date" type="date"></dd>
|
|
1346
|
+
</div>
|
|
1347
|
+
|
|
1348
|
+
<div>
|
|
1349
|
+
<dt><label for="low-flow-time">Time field</label></dt>
|
|
1350
|
+
<dd><input id="low-flow-time" name="low-flow-time" type="time"></dd>
|
|
1351
|
+
</div>
|
|
1352
|
+
|
|
1353
|
+
<div>
|
|
1354
|
+
<dt><label for="low-flow-datetime-local">Datetime-local field</label></dt>
|
|
1355
|
+
<dd><input id="low-flow-datetime-local" name="low-flow-datetime-local" type="datetime-local"></dd>
|
|
1356
|
+
</div>
|
|
1357
|
+
|
|
1358
|
+
<div>
|
|
1359
|
+
<dt><label for="low-flow-month">Month field</label></dt>
|
|
1360
|
+
<dd><input id="low-flow-month" name="low-flow-month" type="month"></dd>
|
|
1361
|
+
</div>
|
|
1362
|
+
|
|
1363
|
+
<div>
|
|
1364
|
+
<dt><label for="low-flow-week">Week field</label></dt>
|
|
1365
|
+
<dd><input id="low-flow-week" name="low-flow-week" type="week"></dd>
|
|
1366
|
+
</div>
|
|
1367
|
+
|
|
1368
|
+
<div>
|
|
1369
|
+
<dt><label for="low-flow-file">File field</label></dt>
|
|
1370
|
+
<dd><input id="low-flow-file" name="low-flow-file" type="file"></dd>
|
|
1371
|
+
</div>
|
|
1372
|
+
|
|
1373
|
+
<div>
|
|
1374
|
+
<dt><label for="low-flow-range">Range field</label></dt>
|
|
1375
|
+
<dd><input id="low-flow-range" name="low-flow-range" type="range"></dd>
|
|
1376
|
+
</div>
|
|
1377
|
+
|
|
1378
|
+
<div>
|
|
1379
|
+
<dt><label for="low-flow-textarea">Textarea</label></dt>
|
|
1380
|
+
<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>
|
|
1381
|
+
</div>
|
|
1382
|
+
|
|
1383
|
+
<div>
|
|
1384
|
+
<dt><label for="low-flow-prefilledtextarea">Textarea (prefilled)</label></dt>
|
|
1385
|
+
<dd>
|
|
1386
|
+
<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>
|
|
1387
|
+
<label for="low-flow-prefilledtextarea">Some help text regarding the textarea with some really long text that should overflow and wrap</label>
|
|
1388
|
+
</dd>
|
|
1389
|
+
</div>
|
|
1054
1390
|
</dl>
|
|
1055
1391
|
|
|
1392
|
+
<h3 id="low_flow_nested_fieldsets">Nested fieldsets</h3>
|
|
1056
1393
|
<fieldset>
|
|
1057
1394
|
<legend>Nested fieldset</legend>
|
|
1058
1395
|
|
|
1059
1396
|
<dl>
|
|
1060
|
-
<
|
|
1061
|
-
|
|
1062
|
-
<
|
|
1063
|
-
|
|
1064
|
-
|
|
1397
|
+
<div>
|
|
1398
|
+
<dt><label for="low-flow-nested-input-1">Input</label></dt>
|
|
1399
|
+
<dd>
|
|
1400
|
+
<input type="text" id="low-flow-nested-input-1" name="low-flow-nested-input-1" placeholder="Some interesting placeholder text">
|
|
1401
|
+
<p>Here is some subtext.</p>
|
|
1402
|
+
</dd>
|
|
1403
|
+
</div>
|
|
1065
1404
|
|
|
1066
|
-
<
|
|
1067
|
-
|
|
1068
|
-
<
|
|
1069
|
-
|
|
1070
|
-
|
|
1405
|
+
<div>
|
|
1406
|
+
<dt><label for="low-flow-nested-input-2">Input 2</label></dt>
|
|
1407
|
+
<dd>
|
|
1408
|
+
<input type="text" id="low-flow-nested-input-2" name="low-flow-nested-input-2" placeholder="Some interesting placeholder text">
|
|
1409
|
+
<p><small>Here's some small subtext.</small></p>
|
|
1410
|
+
</dd>
|
|
1411
|
+
</div>
|
|
1071
1412
|
|
|
1072
|
-
<
|
|
1073
|
-
|
|
1074
|
-
<
|
|
1075
|
-
|
|
1076
|
-
|
|
1413
|
+
<div>
|
|
1414
|
+
<dt><label for="low-flow-nested-input-3">Input 3</label></dt>
|
|
1415
|
+
<dd>
|
|
1416
|
+
<input type="text" id="low-flow-nested-input-3" name="low-flow-nested-input-3" placeholder="Some interesting placeholder text">
|
|
1417
|
+
<p><strong>Here's some bold subtext.</strong></p>
|
|
1418
|
+
</dd>
|
|
1419
|
+
</div>
|
|
1077
1420
|
|
|
1078
|
-
<
|
|
1079
|
-
|
|
1080
|
-
<
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1421
|
+
<div>
|
|
1422
|
+
<dt><label for="low-flow-nested-input-4">Input 4</label></dt>
|
|
1423
|
+
<dd>
|
|
1424
|
+
<input type="text" id="low-flow-nested-input-4" name="low-flow-nested-input-4" placeholder="Some interesting placeholder text">
|
|
1425
|
+
<p>Here is some subtext.</p>
|
|
1426
|
+
<p>Here is some more subtext.</p>
|
|
1427
|
+
</dd>
|
|
1428
|
+
</div>
|
|
1084
1429
|
</dl>
|
|
1085
1430
|
|
|
1086
1431
|
<fieldset>
|
|
1087
1432
|
<legend>Another nested fieldset</legend>
|
|
1088
1433
|
|
|
1089
1434
|
<dl>
|
|
1090
|
-
<
|
|
1091
|
-
|
|
1435
|
+
<div>
|
|
1436
|
+
<dt><label for="low-flow-nested-nested-input">Input</label></dt>
|
|
1437
|
+
<dd><input type="text" id="low-flow-nested-nested-input" name="low-flow-nested-nested-input" placeholder="Some interesting placeholder text"></dd>
|
|
1438
|
+
</div>
|
|
1092
1439
|
|
|
1093
|
-
<
|
|
1094
|
-
|
|
1095
|
-
<
|
|
1096
|
-
|
|
1440
|
+
<div>
|
|
1441
|
+
<dt><label for="low-flow-nested-nested-input-2">Input 2</label></dt>
|
|
1442
|
+
<dd>
|
|
1443
|
+
<input type="text" id="low-flow-nested-nested-input-2" name="low-flow-nested-nested-input-2" placeholder="Some interesting placeholder text">
|
|
1444
|
+
</dd>
|
|
1445
|
+
</div>
|
|
1097
1446
|
|
|
1098
|
-
<
|
|
1099
|
-
|
|
1100
|
-
<
|
|
1101
|
-
<
|
|
1102
|
-
|
|
1103
|
-
|
|
1447
|
+
<div>
|
|
1448
|
+
<dt><label for="low-flow-nested-nested-select">Select</label></dt>
|
|
1449
|
+
<dd>
|
|
1450
|
+
<select id="low-flow-nested-nested-select" name="low-flow-nested-nested-select">
|
|
1451
|
+
<option value="jfkdskfs">Hey</option>
|
|
1452
|
+
</select>
|
|
1453
|
+
</dd>
|
|
1454
|
+
</div>
|
|
1104
1455
|
</dl>
|
|
1105
1456
|
</fieldset>
|
|
1106
1457
|
</fieldset>
|
|
1107
1458
|
|
|
1459
|
+
<h3 id="low_flow_details">Detail elements</h3>
|
|
1108
1460
|
<details>
|
|
1109
1461
|
<summary>Details summary</summary>
|
|
1110
1462
|
<dl>
|
|
1111
|
-
<
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
<
|
|
1463
|
+
<div>
|
|
1464
|
+
<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>
|
|
1466
|
+
</div>
|
|
1467
|
+
|
|
1468
|
+
<div>
|
|
1469
|
+
<dt><label for="low-flow-detail-input-2">Detail input</label></dt>
|
|
1470
|
+
<dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
|
|
1471
|
+
</div>
|
|
1472
|
+
|
|
1473
|
+
<div>
|
|
1474
|
+
<dt><label for="low-flow-detail-input-3">Detail input</label></dt>
|
|
1475
|
+
<dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
|
|
1476
|
+
</div>
|
|
1477
|
+
|
|
1478
|
+
<div>
|
|
1479
|
+
<dt><label for="low-flow-detail-input-4">Detail input</label></dt>
|
|
1480
|
+
<dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
|
|
1481
|
+
</div>
|
|
1122
1482
|
</dl>
|
|
1123
1483
|
</details>
|
|
1124
1484
|
|
|
1125
1485
|
<details>
|
|
1126
1486
|
<summary>Another details element</summary>
|
|
1127
1487
|
<dl>
|
|
1128
|
-
<
|
|
1129
|
-
|
|
1488
|
+
<div>
|
|
1489
|
+
<dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
|
|
1490
|
+
<dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
|
|
1491
|
+
</div>
|
|
1130
1492
|
</dl>
|
|
1131
1493
|
</details>
|
|
1132
1494
|
|
|
1133
|
-
<
|
|
1134
|
-
<legend>Colspan classes</legend>
|
|
1495
|
+
<h3 id="low_flow_colspan_classes">Colspan classes</h3>
|
|
1135
1496
|
|
|
1136
|
-
|
|
1497
|
+
<dl>
|
|
1498
|
+
<div class="colspan-1">
|
|
1137
1499
|
<dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
|
|
1138
|
-
<dd
|
|
1500
|
+
<dd><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
|
|
1501
|
+
</div>
|
|
1502
|
+
|
|
1503
|
+
<div class="colspan-1">
|
|
1139
1504
|
<dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
|
|
1140
|
-
<dd
|
|
1505
|
+
<dd><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
|
|
1506
|
+
</div>
|
|
1507
|
+
|
|
1508
|
+
<div class="colspan-2">
|
|
1141
1509
|
<dt><label for="low-flow-colspan-2">colspan-2</label></dt>
|
|
1142
|
-
<dd
|
|
1510
|
+
<dd><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
|
|
1511
|
+
</div>
|
|
1512
|
+
|
|
1513
|
+
<div class="colspan-4">
|
|
1143
1514
|
<dt><label for="low-flow-colspan-4">colspan-4</label></dt>
|
|
1144
|
-
<dd
|
|
1515
|
+
<dd><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
|
|
1516
|
+
</div>
|
|
1517
|
+
|
|
1518
|
+
<div class="colspan-3">
|
|
1145
1519
|
<dt><label for="low-flow-colspan-3">colspan-3</label></dt>
|
|
1146
|
-
<dd
|
|
1520
|
+
<dd><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
|
|
1521
|
+
</div>
|
|
1522
|
+
|
|
1523
|
+
<div class="colspan-1">
|
|
1147
1524
|
<dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
|
|
1148
|
-
<dd
|
|
1525
|
+
<dd><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
|
|
1526
|
+
</div>
|
|
1527
|
+
|
|
1528
|
+
<div class="colspan-full">
|
|
1149
1529
|
<dt><label for="low-flow-colspan-full">colspan-full</label></dt>
|
|
1150
|
-
<dd
|
|
1530
|
+
<dd><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
|
|
1531
|
+
</div>
|
|
1532
|
+
|
|
1533
|
+
<div class="colspan-5">
|
|
1151
1534
|
<dt><label for="low-flow-colspan-5">colspan-5</label></dt>
|
|
1152
|
-
<dd
|
|
1153
|
-
</
|
|
1535
|
+
<dd><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
|
|
1536
|
+
</div>
|
|
1537
|
+
</dl>
|
|
1154
1538
|
|
|
1155
|
-
|
|
1156
|
-
|
|
1539
|
+
<fieldset class="colspan-1">
|
|
1540
|
+
<legend>colspan-1</legend>
|
|
1157
1541
|
|
|
1158
|
-
|
|
1542
|
+
<dl>
|
|
1543
|
+
<div>
|
|
1159
1544
|
<dt><label for="low-flow-colspan-1-a">Input A</label></dt>
|
|
1160
1545
|
<dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a" placeholder="Some interesting placeholder text"></dd>
|
|
1546
|
+
</div>
|
|
1161
1547
|
|
|
1548
|
+
<div>
|
|
1162
1549
|
<dt><label for="low-flow-colspan-1-b">Input B</label></dt>
|
|
1163
1550
|
<dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b" placeholder="Some interesting placeholder text"></dd>
|
|
1551
|
+
</div>
|
|
1164
1552
|
|
|
1553
|
+
<div>
|
|
1165
1554
|
<dt><label for="low-flow-colspan-1-c">Input C</label></dt>
|
|
1166
1555
|
<dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c" placeholder="Some interesting placeholder text"></dd>
|
|
1556
|
+
</div>
|
|
1167
1557
|
|
|
1558
|
+
<div>
|
|
1168
1559
|
<dt><label for="low-flow-colspan-1-d">Input D</label></dt>
|
|
1169
1560
|
<dd><input type="text" id="low-flow-colspan-1-d" name="low-flow-colspan-1-d" placeholder="Some interesting placeholder text"></dd>
|
|
1170
|
-
</
|
|
1171
|
-
</
|
|
1561
|
+
</div>
|
|
1562
|
+
</dl>
|
|
1563
|
+
</fieldset>
|
|
1172
1564
|
|
|
1173
|
-
|
|
1174
|
-
|
|
1565
|
+
<fieldset class="colspan-2">
|
|
1566
|
+
<legend>colspan-2</legend>
|
|
1175
1567
|
|
|
1176
|
-
|
|
1568
|
+
<dl>
|
|
1569
|
+
<div>
|
|
1177
1570
|
<dt><label for="low-flow-colspan-2-a">Input A</label></dt>
|
|
1178
1571
|
<dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a" placeholder="Some interesting placeholder text"></dd>
|
|
1572
|
+
</div>
|
|
1179
1573
|
|
|
1574
|
+
<div>
|
|
1180
1575
|
<dt><label for="low-flow-colspan-2-b">Input B</label></dt>
|
|
1181
1576
|
<dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b" placeholder="Some interesting placeholder text"></dd>
|
|
1577
|
+
</div>
|
|
1182
1578
|
|
|
1579
|
+
<div>
|
|
1183
1580
|
<dt><label for="low-flow-colspan-2-c">Input C</label></dt>
|
|
1184
1581
|
<dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c" placeholder="Some interesting placeholder text"></dd>
|
|
1582
|
+
</div>
|
|
1185
1583
|
|
|
1584
|
+
<div>
|
|
1186
1585
|
<dt><label for="low-flow-colspan-2-d">Input D</label></dt>
|
|
1187
1586
|
<dd><input type="text" id="low-flow-colspan-2-d" name="low-flow-colspan-2-d" placeholder="Some interesting placeholder text"></dd>
|
|
1188
|
-
</
|
|
1189
|
-
</
|
|
1587
|
+
</div>
|
|
1588
|
+
</dl>
|
|
1589
|
+
</fieldset>
|
|
1190
1590
|
|
|
1191
|
-
|
|
1192
|
-
|
|
1591
|
+
<fieldset>
|
|
1592
|
+
<legend>colspan-3</legend>
|
|
1193
1593
|
|
|
1194
|
-
|
|
1594
|
+
<dl class="colspan-3">
|
|
1595
|
+
<div>
|
|
1195
1596
|
<dt><label for="low-flow-colspan-3-a">Input A</label></dt>
|
|
1196
1597
|
<dd><input type="text" id="low-flow-colspan-3-a" name="low-flow-colspan-3-a" placeholder="Some interesting placeholder text"></dd>
|
|
1598
|
+
</div>
|
|
1197
1599
|
|
|
1600
|
+
<div>
|
|
1198
1601
|
<dt><label for="colspan-3-b">Input B</label></dt>
|
|
1199
1602
|
<dd><input type="text" id="low-flow-colspan-3-b" name="low-flow-colspan-3-b" placeholder="Some interesting placeholder text"></dd>
|
|
1603
|
+
</div>
|
|
1200
1604
|
|
|
1605
|
+
<div>
|
|
1201
1606
|
<dt><label for="colspan-3-c">Input C</label></dt>
|
|
1202
1607
|
<dd><input type="text" id="low-flow-colspan-3-c" name="low-flow-colspan-3-c" placeholder="Some interesting placeholder text"></dd>
|
|
1608
|
+
</div>
|
|
1203
1609
|
|
|
1610
|
+
<div>
|
|
1204
1611
|
<dt><label for="colspan-3-d">Input D</label></dt>
|
|
1205
1612
|
<dd><input type="text" id="low-flow-colspan-3-d" name="low-flow-colspan-3-d" placeholder="Some interesting placeholder text"></dd>
|
|
1206
|
-
</
|
|
1207
|
-
</
|
|
1613
|
+
</div>
|
|
1614
|
+
</dl>
|
|
1615
|
+
</fieldset>
|
|
1208
1616
|
|
|
1209
|
-
|
|
1210
|
-
|
|
1617
|
+
<fieldset class="colspan-full">
|
|
1618
|
+
<legend>colspan-full</legend>
|
|
1211
1619
|
|
|
1212
|
-
|
|
1620
|
+
<dl>
|
|
1621
|
+
<div>
|
|
1213
1622
|
<dt><label for="low-flow-colspan-full-a">Input A</label></dt>
|
|
1214
1623
|
<dd><input type="text" id="low-flow-colspan-full-a" name="low-flow-colspan-full-a" placeholder="Some interesting placeholder text"></dd>
|
|
1624
|
+
</div>
|
|
1215
1625
|
|
|
1626
|
+
<div>
|
|
1216
1627
|
<dt><label for="low-flow-colspan-full-b">Input B</label></dt>
|
|
1217
1628
|
<dd><input type="text" id="low-flow-colspan-full-b" name="low-flow-colspan-full-b" placeholder="Some interesting placeholder text"></dd>
|
|
1629
|
+
</div>
|
|
1218
1630
|
|
|
1631
|
+
<div>
|
|
1219
1632
|
<dt><label for="low-flow-colspan-full-c">Input C</label></dt>
|
|
1220
1633
|
<dd><input type="text" id="low-flow-colspan-full-c" name="low-flow-colspan-full-c" placeholder="Some interesting placeholder text"></dd>
|
|
1634
|
+
</div>
|
|
1221
1635
|
|
|
1636
|
+
<div>
|
|
1222
1637
|
<dt><label for="low-flow-colspan-full-d">Input D</label></dt>
|
|
1223
1638
|
<dd><input type="text" id="low-flow-colspan-full-d" name="low-flow-colspan-full-d" placeholder="Some interesting placeholder text"></dd>
|
|
1224
|
-
</
|
|
1225
|
-
</
|
|
1639
|
+
</div>
|
|
1640
|
+
</dl>
|
|
1226
1641
|
</fieldset>
|
|
1227
1642
|
|
|
1228
|
-
<
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
<p>
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
<p>
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
<p>
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
<p>
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
<
|
|
1247
|
-
|
|
1248
|
-
</p>
|
|
1249
|
-
</fieldset>
|
|
1643
|
+
<h3 id="low_flow_p_tag_elements">P tag elements</h3>
|
|
1644
|
+
|
|
1645
|
+
<p>
|
|
1646
|
+
<input type="checkbox" name="low-flow-p-tag-checkbox" id="low-flow-p-tag-checkbox">
|
|
1647
|
+
<label for="low-flow-p-tag-checkbox">Checkbox</label>
|
|
1648
|
+
</p>
|
|
1649
|
+
<p>
|
|
1650
|
+
<label for="low-flow-p-tag-input">Text input</label>
|
|
1651
|
+
<input type="text" name="low-flow-p-tag-input" id="low-flow-p-tag-input">
|
|
1652
|
+
</p>
|
|
1653
|
+
<p>
|
|
1654
|
+
<label for="low-flow-p-tag-textarea">Textarea</label>
|
|
1655
|
+
<textarea name="low-flow-p-tag-textarea" id="low-flow-p-tag-textarea"></textarea>
|
|
1656
|
+
</p>
|
|
1657
|
+
<p>
|
|
1658
|
+
<button type="button" name="low-flow-p-tag-button" id="low-flow-p-tag-button">Button</button>
|
|
1659
|
+
</p>
|
|
1660
|
+
<p>
|
|
1661
|
+
Some regular text with <strong>other elements</strong> <span>inside of it</span>
|
|
1662
|
+
</p>
|
|
1250
1663
|
|
|
1664
|
+
<h3 id="low_flow_buttons">Buttons</h3>
|
|
1251
1665
|
<input type="submit" name="button1" value="Non-grouped submit button">
|
|
1252
1666
|
<input type="reset" name="reset" value="Another one">
|
|
1253
1667
|
<a href="/" class="button-link">Button link</a>
|
|
@@ -1265,12 +1679,15 @@
|
|
|
1265
1679
|
<li><input type="submit" name="button3" value="Button 3"></li>
|
|
1266
1680
|
</menu>
|
|
1267
1681
|
</fieldset>
|
|
1682
|
+
</form>
|
|
1268
1683
|
|
|
1269
|
-
|
|
1684
|
+
<h2 id="non_form_related_elements">Non-form related HTML elements</h2>
|
|
1685
|
+
<form action="/somewhere" method="post" class="semanticForms">
|
|
1270
1686
|
<p>This is some regular HTML that should not be affected by any semantic forms styles</p>
|
|
1271
1687
|
<div>This is a div</div>
|
|
1272
1688
|
<blockquote>This is a block quote</blockquote>
|
|
1273
1689
|
<a href="https://github.com/rooseveltframework/semantic-forms">A link to the semantic forms repo</a>
|
|
1690
|
+
|
|
1274
1691
|
<ul>
|
|
1275
1692
|
<li>unordered list 1</li>
|
|
1276
1693
|
<li>unordered list 2</li>
|