Skip to Content

Version 1.7 by Ecaterina Moraru (Valica) on 2011/01/05
Show last authors
1 = Forms Standards: Vertical Layout Usage =
2
3 {{box cssClass="floatinginfobox" title="**Content**"}}
4 {{toc/}}
5 {{/box}}
6
7 XWiki Forms are a general usage purpose CSS classes, that need to be used in order to have a consistent view of forms across XWiki. This classes implementation has been voted at [[[Vote] [Standards] Forms: Usage + Documentation page to XWiki.org>>http://markmail.org/thread/5zrnncdukmc7wmer]] and implemented in [[XSCOLIBRI-260>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-260]]
8
9 * Forms Layout Type:
10 ** **Vertical Layout** (xform): uses a dl-dt-dd structure
11 ** Inline Layout (not standardized yet)
12
13 == A. Usage ==
14
15 * Obs: The CSS classes have as parent the .xform class. This is supposed to be used on the form tag, but if the styling is done inside dynamically generated structures it can be used on other elements, like divs, as long as the element remains the parent for the other form components.
16
17 (% summary="Table containg classes for different form components" %)
18 |= Tag |=Type |=Size |=Classes | | |=Usage\\
19 | | | |=Required |=Optional |=Container |\\
20 |form | | |##.xform## |##.half##, ##.third##| |Container for the form controls\\
21 |label | | | | |dt |Descriptive label for the control\\
22 |span | | |##.xRequired## | |dt label |Displays the required status of a control\\
23 |span | | |##.xHint## | |dt |Attach hint information to a control\\
24 |span | | |##.xErrorMsg## | |dt |Alert or error information for the control\\
25 |input | hidden | | | | |\\
26 |input | text |size=60 | | |dd |\\
27 | | | | |##.xErrorField##|dd |Alert or error triggering control\\
28 |input | password |size=60 | | |dd |\\
29 | | | | |##.xErrorField##|dd |Alert or error triggering control\\
30 |input | radio | | | | |\\
31 |input | checkbox | | | | |\\
32 |input | submit | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
33 |input | button | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
34 |a | | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
35 |textarea | |rows=7 cols=45| | | |\\
36 | | | | |##.xErrorField##|dd |Alert or error triggering control\\
37 |select | |size=1 | | | |\\
38 |fieldset | | | | | |\\
39 |legend | | | | | |\\
40
41 == B. Components ==
42
43 === 1. Labels ===
44
45 * This element provides a descriptive label for the containing form control.
46
47 ==== [preview] ====
48
49 [[image:label.png]]
50
51 ==== [html] ====
52
53 {{code language="html"}}
54 <form action="." class="xform" method="post" name="form_name1">
55 <dl>
56 <dt>
57 <label for="input_id1">Label</label>
58 </dt>
59 <dd>
60 <input id="input_id1" name="input_name1" type="text" size="60" value=""/>
61 </dd>
62 </dl>
63 <p>
64 <span class="buttonwrapper">
65 <input class="button" type="submit" value="Button"/>
66 </span>
67 </p>
68 </form>
69 {{/code}}
70
71 ==== [demo] ====
72
73 {{html clean="false"}}
74 <form action="." class="xform" method="post" name="form_name">
75 <dl>
76 <dt>
77 <label for="input_id1">Label</label>
78 </dt>
79 <dd>
80 <input id="input_id1" name="input_name1" type="text" size="60" value=""/>
81 </dd>
82 </dl>
83 <p>
84 <span class="buttonwrapper">
85 <input class="button" type="submit" value="Button"/>
86 </span>
87 </p>
88 </form>
89 {{/html}}
90
91 ==== [css] ====
92
93 {{code language="css"}}
94 .xform input[type="text" size="60"], .xform input[type="password"],
95 .xform select, .xform textarea{
96 width: 99%;
97 }
98
99 .xform dt {
100 margin-top: 1.2em;
101 }
102
103 .xform label {
104 color: $theme.textColor;
105 display: block;
106 font-size: .85em;
107 font-weight: 700;
108 margin-bottom: .3em;
109 text-transform: uppercase;
110 }
111 {{/code}}
112
113 === 2. Required ===
114
115 * This element displays the required status of a form control.
116
117 ==== [preview] ====
118
119 [[image:required.png]]
120
121 ==== [html] ====
122
123 {{code language="html"}}
124 <label for="input_id2">Label <span class="xRequired">(Required)</span></label>
125 {{/code}}
126
127 ==== [demo] ====
128
129 {{html clean="false"}}
130 <form action="." class="xform" method="post" name="form_name2">
131 <dl>
132 <dt>
133 <label for="input_id2">Label <span class="xRequired">(Required)</span></label>
134 </dt>
135 <dd>
136 <input id="input_id2" name="input_name2" type="text" size="60" value=""/>
137 </dd>
138 </dl>
139 <p>
140 <span class="buttonwrapper">
141 <input class="button" type="submit" value="Button"/>
142 </span>
143 </p>
144 </form>
145 {{/html}}
146
147 ==== [css] ====
148
149 {{code language="css"}}
150 .xform .xRequired {
151 color: $theme.textSecondaryColor;
152 font-size: .9em;
153 font-style: italic;
154 font-weight: normal;
155 margin-left: 1ex;
156 text-transform: none;
157 }
158 {{/code}}
159
160 ==== [translation] ====
161
162 xe.form.required=(Required)
163
164 === 3. Hint ===
165
166 * This element provides a convenient way to attach hint information to a form control.
167
168 ==== [preview] ====
169
170 [[image:hint.png]]
171
172 ==== [html] ====
173
174 {{code language="html"}}
175 <dt>
176 <label for="input_id3">Label</label>
177 <span class="xHint">Hint</span>
178 </dt>
179 {{/code}}
180
181 ==== [demo] ====
182
183 {{html clean="false"}}
184 <form action="." class="xform" method="post" name="form_name3">
185 <dl>
186 <dt>
187 <label for="input_id3">Label</label>
188 <span class="xHint">Hint</span>
189 </dt>
190 <dd>
191 <input id="input_id3" name="input_name3" type="text" size="60" value=""/>
192 </dd>
193 </dl>
194 <p>
195 <span class="buttonwrapper">
196 <input class="button" type="submit" value="Button"/>
197 </span>
198 </p>
199 </form>
200 {{/html}}
201
202 ==== [css] ====
203
204 {{code language="css"}}
205 .xform .xHint {
206 color: $theme.textSecondaryColor;
207 display: block;
208 font-size: .8em;
209 font-style: normal;
210 font-weight: 400;
211 margin-bottom: .3em;
212 }
213 {{/code}}
214
215 === 4. Error ===
216
217 * This element provides a convenient way to attach alert or error information to a form control.
218
219 ==== [preview] ====
220
221 [[image:error.png]]
222
223 ==== [html] ====
224
225 {{code language="html"}}
226 <dl>
227 <dt>
228 <label for="input_id5">Label</label>
229 <span class="xHint">Hint</span>
230 <span class="xErrorMsg">Error</span>
231 </dt>
232 <dd>
233 <input class="xErrorField" id="input_id5" name="input_name5" type="text" size="60" value=""/>
234 </dd>
235 </dl>
236 {{/code}}
237
238 ==== [demo] ====
239
240 {{html clean="false"}}
241 <form action="." class="xform" method="post" name="form_name5">
242 <dl>
243 <dt>
244 <label for="input_id5">Label</label>
245 <span class="xHint">Hint</span>
246 <span class="xErrorMsg">Error</span>
247 </dt>
248 <dd>
249 <input class="xErrorField" id="input_id5" name="input_name5" type="text" size="60" value=""/>
250 </dd>
251 </dl>
252 <p>
253 <span class="buttonwrapper">
254 <input class="button" type="submit" value="Button"/>
255 </span>
256 </p>
257 </form>
258 {{/html}}
259
260 ==== [css] ====
261
262 {{code language="css"}}
263 .xform .xErrorMsg {
264 color: #CC3333;
265 display: block;
266 font-size: .8em;
267 font-weight: normal;
268 margin-bottom: .3em;
269 }
270
271 .xform .xErrorField {
272 border: 1px solid #CC3333;
273 }
274 {{/code}}
275
276 === 5. Buttons ===
277
278 * Note: margin-top for .buttonwrapper
279 ** have a p surrounding them, no need for margin-top
280 ** have .buttonwrapper {display:inline-block;}: how this affect the inline layout for older browsers?
281
282 ==== [preview] ====
283
284 [[image:buttons.png]]
285
286 ==== [html] ====
287
288 * Use an additional .buttonwrapper class span container to surround button elements
289
290 {{code language="html"}}
291 <span class="buttonwrapper">
292 <input class="button" type="submit" value="Button"/>
293 </span>
294 <span class="buttonwrapper">
295 <a href="." class="button">Link</a>
296 </span>
297 <span class="buttonwrapper">
298 <input class="button secondary" type="submit" value="Secondary Button"/>
299 </span>
300 <span class="buttonwrapper">
301 <a href="." class="button secondary">Secondary Link</a>
302 </span>
303 {{/code}}
304
305 ==== [demo] ====
306
307 {{html clean="false"}}
308 <form action="." class="xform" method="post" name="form_name6">
309 <dl>
310 <dt>
311 <label for="input_id6">Label</label>
312 </dt>
313 <dd>
314 <input id="input_id6" name="input_name6" type="text" size="60" value=""/>
315 </dd>
316 </dl>
317 <p>
318 <span class="buttonwrapper">
319 <input class="button" type="submit" value="Button"/>
320 </span>
321 <span class="buttonwrapper">
322 <a href="." class="button">Link</a>
323 </span>
324 <span class="buttonwrapper">
325 <input class="button secondary" type="submit" value="Secondary Button"/>
326 </span>
327 <span class="buttonwrapper">
328 <a href="." class="button secondary">Secondary Link</a>
329 </span>
330 </p>
331 </form>
332 {{/html}}
333
334 ==== [css] ====
335
336 .buttonwrapper and .button classes are described in colibri.css
337
338 {{code language="css"}}
339 .buttonwrapper input.secondary, .buttonwrapper a.secondary {
340 background-color: $theme.buttonSecondaryBackgroundColor;
341 color: $theme.buttonSecondaryTextColor;
342 }
343 {{/code}}
344
345 === 6. Grouping ===
346
347 * Grouping can be done by using fieldset/legend or other markup (like headers)
348
349 ==== [preview] ====
350
351 [[image:grouping.png]]
352
353 ==== [html] ====
354
355 {{code language="html"}}
356 <h2>Group 1</h2>
357 {{/code}}
358
359 ==== [demo] ====
360
361 {{html clean="false"}}
362 <form action="." class="xform" method="post" name="form_name10">
363 <h2>Group 1</h2>
364 <dl>
365 <dt>
366 <label for="input_id10">Label</label>
367 </dt>
368 <dd>
369 <input id="input_id10" name="input_name10" type="text" size="60" value=""/>
370 </dd>
371 </dl>
372 <h2>Group 2</h2>
373 <dl>
374 <dt>
375 <label for="input_id11">Label</label>
376 </dt>
377 <dd>
378 <input id="input_id11" name="input_name11" type="text" size="60" value=""/>
379 </dd>
380 </dl>
381 <p>
382 <span class="buttonwrapper">
383 <input class="button" type="submit" value="Button"/>
384 </span>
385 </p>
386 </form>
387 {{/html}}
388
389 ==== [css] ====
390
391 {{code language="css"}}
392 .xform h2 {
393 font-size: 1.2em;
394 font-weight: bold;
395 margin: 2em 0 0;
396 }
397 {{/code}}
398
399 == C. Form Examples ==
400
401 === [preview] ===
402 [[image:example.png]]
403
404 === [demo] ===
405 {{html clean="false"}}
406 <form action="." class="xform" method="post" name="form_name7">
407 <dl>
408 <dt>
409 <label for="input_id7">Browser Title Bar Text <span class="xRequired">(Required)</span></label>
410 <span class="xHint">Type the text you want to be displayed in the browser's title bar</span>
411 </dt>
412 <dd>
413 <input id="input_id7" name="input_name7" type="text" size="60" value=""/>
414 </dd>
415 <dt>
416 <label for="checkbox_id1"><input type="checkbox" name="checkbox_id1"/> Standard Index</label>
417 <span class="xHint">Index only elements that are not already indexed</span>
418 </dt>
419 <dt>
420 <label for="select_id1">Show Left Panels</label>
421 </dt>
422 <dd>
423 <select id="select_id1" size="1">
424 <option value="" label="---">---</option>
425 <option value="1" label="Yes">Yes</option>
426 <option selected="selected" value="0" label="No">No</option>
427 </select>
428 </dd>
429 <dt>
430 <label>Activate annotations</label>
431 <span class="xHint">Configure if annotations are available for the current wiki</span>
432 </dt>
433 <dd>
434 <label for="radio_id1">
435 <input type="radio" value="1" name="radio_name1" id="radio_id1" checked="checked"/>
436 Yes
437 </label>
438 <label for="radio_id2">
439 <input type="radio" value="0" name="radio_name1" id="radio_id2"/>
440 No
441 </label>
442 </dd>
443 <dt>
444 <label for="textarea_id1">HTTP Meta Information</label>
445 </dt>
446 <dd>
447 <textarea id="textarea_id1" rows="7" cols="45">Text</textarea>
448 </dd>
449 </dl>
450 <p>
451 <span class="buttonwrapper">
452 <input class="button" type="submit" value="Button"/>
453 </span>
454 <span class="buttonwrapper">
455 <input class="secondary button" type="submit" value="Secondary Button"/>
456 </span>
457 </p>
458 </form>
459 {{/html}}
460
461 == D. Tips ==
462
463 === D1. Other useful CSS classes ===
464
465 * Read about [[Special CSS classes>>DevGuide.SpecialCSSClasses]] that can be used for forms elements.
466
467 === D2. LiveValidation ===
468
469 * [[XWIKI-4792>>http://jira.xwiki.org/jira/browse/XWIKI-4792]]: Add javascript LiveValidation input validation library
470
471 === D3. Captchas ===
472
473 * http://code.xwiki.org/xwiki/bin/view/Modules/CaptchaModule
474
475 === D4. WCAG ===
476
477 Form created within XWiki must validated accordingly with WCAG rules. There are some [[exceptions>>http://dev.xwiki.org/xwiki/bin/view/Community/WCAGTesting]] stated for XWiki.

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected