Last modified by Vincent Massol on 2023/10/10

From version 4.3
edited by Sergiu Dumitriu
on 2011/09/01
Change comment: Added tag [standard]
To version 4.6
edited by Manuel Smeria
on 2013/01/18
Change comment: minor fixes

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.Sergiu
1 +XWiki.ManuelSmeria
Content
... ... @@ -3,44 +3,44 @@
3 3  $xwiki.ssx.use("DevGuide.VerticalForms")
4 4  {{/velocity}}
5 5  
6 -=Forms Standards: Inline Layout Usage=
7 -
8 8  {{box cssClass="floatinginfobox" title="**Content**"}}
9 9  {{toc/}}
10 10  {{/box}}
11 11  
12 -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.
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.
13 13  
14 14  * Forms Layout Type:
15 15   ** [[Vertical Layout>>DevGuide.VerticalForms]] (##xform##): uses a dl-dt-dd structure
16 16   ** **Inline Layout** (##xformInline##)
17 17  
18 -== A. Usage ==
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>>http://jira.xwiki.org/browse/XSCOLIBRI-266]]
19 19  
20 -* Obs: 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.
18 += Usage =
21 21  
22 -(% summary="Table containg classes for different form components" %)
23 -|= Tag |=Type |=Size |=Classes | | |=Usage\\
24 -| | | |=Required |=Optional |=Container |\\
25 -|form | | |##.xformInline##|##.half##, ##.third##| |Container for the form controls\\
26 -|label | | | | | |Descriptive label for the control\\
27 -|input | text |size=30 | | | |\\
28 -|input | password |size=30 | | | |\\
29 -|select | |size=1 | | | |\\
30 -|input | submit | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
31 -|input | button | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
32 -|a | | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
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}}
33 33  
34 -== B. Components ==
24 +|= Tag |=Type |=Size |=Classes Required|=Optional |=Container |=Usage\\
25 +|form | | |##.xformInline##|##.half##, ##.third##| |Container for the form controls\\
26 +|label | | | | | |Descriptive label for the control\\
27 +|input |text |size=30| | | |\\
28 +|input |password|size=30| | | |\\
29 +|select| |size=1 | | | |\\
30 +|input |submit | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
31 +|input |button | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
32 +|a | | |##.button## |##.secondary## |span##.buttonwrapper##|Button controls\\
35 35  
36 -=== 1. Labels ==
34 += Components =
37 37  
38 -==== [preview] ====
36 +== Labels ==
39 39  
40 -[[image:inlineform.png]]
38 +=== [preview] ===
41 41  
42 -==== [html] ====
40 +image:inlineform.png
43 43  
42 +=== [html] ===
43 +
44 44  {{code language="html"}}
45 45  <form action="." class="xformInline" method="post" name="form_name1">
46 46   <div>
... ... @@ -53,11 +53,11 @@
53 53  </form>
54 54  {{/code}}
55 55  
56 -==== [demo] ====
56 +=== [demo] ===
57 57  
58 58  {{html clean="false"}}
59 59  <form action="." class="xformInline" method="post" name="form_name1">
60 - </div>
60 + <div>
61 61   <label for="input_id1">Label</label>
62 62   <input id="input_id1" name="input_name1" type="text" value=""/>
63 63   <span class="buttonwrapper">
... ... @@ -67,7 +67,7 @@
67 67  </form>
68 68  {{/html}}
69 69  
70 -==== [css] ====
70 +=== [css] ===
71 71  
72 72  {{code language="css"}}
73 73  .xformInline label {

Get Connected