Hide last authors
Ecaterina Moraru (Valica) 2.3 1 {{velocity}}
2 $xwiki.ssx.use("DevGuide.InlineForms")
3 $xwiki.ssx.use("DevGuide.VerticalForms")
4 {{/velocity}}
Ecaterina Moraru (Valica) 1.1 5
6 {{box cssClass="floatinginfobox" title="**Content**"}}
7 {{toc/}}
8 {{/box}}
9
Manuel Smeria 4.6 10 XWiki Forms (##xform## / ##xformInline##) are general usage purpose CSS classes that need to be used in order to have a consistent view of forms across XWiki.
Ecaterina Moraru (Valica) 1.1 11
12 * Forms Layout Type:
Vincent Massol 6.3 13 ** [[Vertical Layout>>platform:DevGuide.VerticalForms]] (##xform##): uses a dl-dt-dd structure
Vincent Massol 6.1 14 ** **Inline Layout** (##xformInline##)
Ecaterina Moraru (Valica) 1.1 15
Thomas Mortagne 5.1 16 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-266>>https://jira.xwiki.org/browse/XSCOLIBRI-266]]
Ecaterina Moraru (Valica) 4.5 17
Manuel Smeria 4.6 18 = Usage =
Ecaterina Moraru (Valica) 1.1 19
Manuel Smeria 4.6 20 {{info}}
21 The CSS classes have as parent the ##.xformInline## 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.
22 {{/info}}
Ecaterina Moraru (Valica) 1.1 23
Manuel Smeria 4.7 24 (% summary="Table containg classes for different form components" %)
Manuel Smeria 4.6 25 |= Tag |=Type |=Size |=Classes Required|=Optional |=Container |=Usage\\
26 |form | | |##.xformInline##|##.half##, ##.third##| |Container for the form controls\\
27 |label | | | | | |Descriptive label for the control\\
28 |input |text |size=30| | | |\\
29 |input |password|size=30| | | |\\
30 |select| |size=1 | | | |\\
31 |input |submit | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
32 |input |button | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
33 |a | | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
Ecaterina Moraru (Valica) 1.1 34
Manuel Smeria 4.6 35 = Components =
Ecaterina Moraru (Valica) 1.1 36
Manuel Smeria 4.6 37 == Labels ==
Ecaterina Moraru (Valica) 1.1 38
Manuel Smeria 4.6 39 === [preview] ===
Ecaterina Moraru (Valica) 1.1 40
Manuel Smeria 4.6 41 image:inlineform.png
Ecaterina Moraru (Valica) 1.1 42
Manuel Smeria 4.6 43 === [html] ===
Ecaterina Moraru (Valica) 1.1 44
45 {{code language="html"}}
46 <form action="." class="xformInline" method="post" name="form_name1">
Sergiu Dumitriu 4.2 47 <div>
48 <label for="input_id1">Label</label>
49 <input id="input_id1" name="input_name1" type="text" value="" size="30"/>
50 <span class="buttonwrapper">
51 <input class="button" type="submit" value="Button"/>
52 </span>
53 </div>
Ecaterina Moraru (Valica) 1.1 54 </form>
55 {{/code}}
56
Manuel Smeria 4.6 57 === [demo] ===
Ecaterina Moraru (Valica) 1.1 58
59 {{html clean="false"}}
60 <form action="." class="xformInline" method="post" name="form_name1">
Ecaterina Moraru (Valica) 4.4 61 <div>
Sergiu Dumitriu 4.2 62 <label for="input_id1">Label</label>
63 <input id="input_id1" name="input_name1" type="text" value=""/>
64 <span class="buttonwrapper">
65 <input class="button" type="submit" value="Button"/>
66 </span>
67 </div>
Ecaterina Moraru (Valica) 1.1 68 </form>
69 {{/html}}
70
Manuel Smeria 4.6 71 === [css] ===
Ecaterina Moraru (Valica) 1.1 72
73 {{code language="css"}}
74 .xformInline label {
75 color: $theme.textColor;
76 font-size: .85em;
77 font-weight: 700;
78 margin-bottom: .3em;
79 text-transform: uppercase;
80 }
81 {{/code}}

Get Connected