[TASK] Remove deprecated IMAGEBUTTON element
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Documentation / Configuration / Layout / LayoutViewSpecific / Index.rst
1 .. include:: ../../../Includes.txt
2
3
4 .. _change-layout-specific-view:
5
6 =====================================
7 Change the layout for a specific view
8 =====================================
9
10 .. contents::
11     :local:
12     :depth: 1
13
14
15 .. _change-layout-specific-view-available-views:
16
17 Available views
18 ===============
19
20 There are 3 views available:
21
22 form:
23   This view displays the form with its form fields which can be filled by
24   the user and submitted.
25
26 confirmation:
27   If activated, this view shows a confirmation page which has to be
28   confirmed by the user.
29
30 postProcessor:
31   The mail postProcessor has its own view for rendering the mail which is
32   sent to the receiver.
33
34 It is not recommended to change the layout of a FORM object for all views.
35 For example when customizing the TEXTLINE object the integrator will get
36 strange results based on the following example:
37
38 .. code-block:: typoscript
39
40   tt_content.mailform.20 {
41     layout {
42       textline (
43         <div class="form-group">
44           <div class="col-sm-3 control-label">
45             <label />
46           </div>
47           <div class="col-sm-5">
48             <input class="form-control" />
49           </div>
50         </div>
51       )
52     }
53   }
54
55 The setup shown above changes the appearance of all TEXTLINE objects for all
56 views. That is, the user will get a confirmation page and a mail with
57 broken/ senseless input fields instead of the user data.
58
59 In order to only change the TEXTLINE object specific to all of the 3 views,
60 the following code could be applied.
61
62 .. code-block:: typoscript
63
64   tt_content.mailform.20 {
65     # customize form view
66     form {
67       layout {
68         textline (
69           <div class="form-group">
70             <div class="col-sm-3 control-label">
71               <label />
72             </div>
73             <div class="col-sm-5">
74               <input class="form-control" />
75             </div>
76           </div>
77         )
78       }
79     }
80
81     # customize confirmation view
82     confirmation {
83       layout {
84         textline (
85           <div class="form-group">
86             <div class="col-sm-3">
87               <strong><label /></strong>
88             </div>
89             <div class="col-sm-5">
90               <inputvalue />
91             </div>
92           </div>
93         )
94       }
95     }
96
97     # customize postProcessor/ mail
98     postProcessor {
99       layout {
100         textline (
101           <td colspan="2">
102             <div class="textline"><inputvalue /></div>
103           </td>
104         )
105       }
106     }
107   }
108
109
110 .. _change-layout-specific-view-properties:
111
112 Properties and defaults
113 =======================
114
115 If the integrator does not define any :ts:`.layout` setting the default
116 layout defined in the PHP classes will be used.
117
118 The following list shows all available elements within all the different
119 views including their corresponding default layouts.
120
121 .. contents::
122     :local:
123     :depth: 1
124
125
126 .. _reference-layout-form:
127
128 form
129 ^^^^
130
131 :aspect:`Property:`
132     form
133
134 :aspect:`Data type:`
135     string
136
137 :aspect:`Available in views:`
138     - form
139
140 :aspect:`Description:`
141     Layout of the FORM object/ outer wrap.
142
143     The <containerwrap /> tag will be substituted by the outer container
144     wrap and includes all child elements.
145
146 :aspect:`Default:`
147     Default layout **form view**:
148
149     .. code-block:: html
150
151       <form>
152         <containerWrap />
153       </form>
154
155
156 .. _reference-layout-confirmation:
157
158 confirmation
159 ^^^^^^^^^^^^
160
161 :aspect:`Property:`
162     confirmation
163
164 :aspect:`Data type:`
165     string
166
167 :aspect:`Available in views:`
168     - confirmation
169
170 :aspect:`Description:`
171     Layout of the outer wrap.
172
173     The <containerwrap /> tag will be substituted by the outer container
174     wrap and includes all child elements.
175
176 :aspect:`Default:`
177     Default layout **confirmation view**:
178
179     .. code-block:: html
180
181       <containerWrap />
182
183
184 .. _reference-layout-html:
185
186 html
187 ^^^^
188
189 :aspect:`Property:`
190     html
191
192 :aspect:`Data type:`
193     string
194
195 :aspect:`Available in views:`
196     - postProcessor
197
198 :aspect:`Description:`
199     Layout of the outer wrap.
200
201     The <containerwrap /> tag will be substituted by the outer container
202     wrap and includes all child elements.
203
204 :aspect:`Default:`
205     Default layout **postProcessor view**:
206
207     .. code-block:: html
208
209       <html>
210         <head>
211           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
212         </head>
213         <body>
214           <table cellspacing="0">
215             <containerWrap />
216           </table>
217         </body>
218       </html>
219
220
221 .. _reference-layout-containerwrap:
222
223 containerWrap
224 ^^^^^^^^^^^^^
225
226 :aspect:`Property:`
227     containerWrap
228
229 :aspect:`Data type:`
230     string
231
232 :aspect:`Available in views:`
233     - form
234     - confirmation
235     - postProcessor
236
237 :aspect:`Description:`
238     Inner wrap for container objects.
239
240     The <elements /> tag will be substituted with all the child elements,
241     including their element wraps.
242
243 :aspect:`Default:`
244     Default layout **form view**:
245
246     .. code-block:: html
247
248       <ol>
249         <elements />
250       </ol>
251
252     Default layout **confirmation view**:
253
254     .. code-block:: html
255
256       <ol>
257         <elements />
258       </ol>
259
260     Default layout **postProcessor view**:
261
262     .. code-block:: html
263
264       <tbody>
265         <elements />
266       </tbody>
267
268
269 .. _reference-layout-elementwrap:
270
271 elementWrap
272 ^^^^^^^^^^^
273
274 :aspect:`Property:`
275     elementWrap
276
277 :aspect:`Data type:`
278     string
279
280 :aspect:`Available in views:`
281     - form
282     - confirmation
283     - postProcessor
284
285 :aspect:`Description:`
286     Outer wrap for regular objects.
287
288     The <element /> tag will be substituted with the child element.
289
290 :aspect:`Default:`
291     Default layout **form view**:
292
293     .. code-block:: html
294
295       <li>
296         <element />
297       </li>
298
299     Default layout **confirmation view**:
300
301     .. code-block:: html
302
303       <li>
304         <element />
305       </li>
306
307     Default layout **postProcessor view**:
308
309     .. code-block:: html
310
311       <tr>
312         <element />
313       </tr>
314
315
316 .. _reference-layout-label:
317
318 label
319 ^^^^^
320
321 :aspect:`Property:`
322     label
323
324 :aspect:`Data type:`
325     string
326
327 :aspect:`Available in views:`
328     - form
329     - confirmation
330     - postProcessor
331
332 :aspect:`Description:`
333     Layout for the labels.
334
335     The <labelvalue /> tag will be substituted with the label text.
336
337     If available, the <mandatory /> tag will be substituted with the
338     validation rule message, styled by its own layout.
339
340     If available, the <error /> tag will be substituted with the error
341     message from the validation rule when the submitted value is not valid.
342
343 :aspect:`Default:`
344     Default layout **form view**:
345
346     .. code-block:: html
347
348       <label>
349         <labelvalue />
350         <mandatory />
351         <error />
352       </label>
353
354     Default layout **confirmation view**:
355
356     .. code-block:: html
357
358       <label>
359         <labelvalue />
360       </label>
361
362     Default layout **postProcessor view**:
363
364     .. code-block:: html
365
366       <em>
367         <labelvalue />
368       </em>
369
370
371 .. _reference-layout-mandatory:
372
373 mandatory
374 ^^^^^^^^^
375
376 :aspect:`Property:`
377     mandatory
378
379 :aspect:`Data type:`
380     string
381
382 :aspect:`Available in views:`
383     - form
384
385 :aspect:`Description:`
386     Layout for the validation rule message to describe the rule.
387
388     The <mandatoryvalue /> tag will be substituted with the validation rule
389     message.
390
391 :aspect:`Default:`
392     Default layout **form view**:
393
394     .. code-block:: html
395
396       <em>
397         <mandatoryvalue />
398       </em>
399
400
401 .. _reference-layout-error:
402
403 error
404 ^^^^^
405
406 :aspect:`Property:`
407     error
408
409 :aspect:`Data type:`
410     string
411
412 :aspect:`Available in views:`
413     - form
414
415 :aspect:`Description:`
416     Layout for the validation rule error message when the submitted data
417     does not validate.
418
419     The <errorvalue /> tag will be substituted with the validation rule
420     error message.
421
422 :aspect:`Default:`
423     Default layout **form view**:
424
425     .. code-block:: html
426
427       <strong>
428         <errorvalue />
429       </strong>
430
431
432 .. _reference-layout-legend:
433
434 legend
435 ^^^^^^
436
437 :aspect:`Property:`
438     legend
439
440 :aspect:`Data type:`
441     string
442
443 :aspect:`Available in views:`
444     - form
445     - confirmation
446     - postProcessor
447
448 :aspect:`Description:`
449     Layout for the legend.
450
451     The <legendvalue /> tag will be substituted with the legend text.
452
453     If available, the <mandatory /> tag will be substituted with the
454     validation rule message, styled by its own layout.
455
456     If available, the <error /> tag will be substituted with the error
457     message from the validation rule when the submitted value is not valid.
458
459 :aspect:`Default:`
460     Default layout **form view**:
461
462     .. code-block:: html
463
464       <legend>
465         <legendvalue />
466         <mandatory />
467         <error />
468       </legend>
469
470     Default layout **confirmation view**:
471
472     .. code-block:: html
473
474       <legend>
475         <legendvalue />
476       </legend>
477
478
479     Default layout **postProcessor view**:
480
481     .. code-block:: html
482
483       <thead>
484         <tr>
485           <th colspan="2" align="left">
486             <legendvalue />
487           </th>
488         </tr>
489       </thead>
490
491
492 .. _reference-layout-button:
493
494 button
495 ^^^^^^
496
497 :aspect:`Property:`
498     button
499
500 :aspect:`Data type:`
501     string
502
503 :aspect:`Available in views:`
504     - form
505
506 :aspect:`Description:`
507     Layout for the BUTTON object.
508
509 :aspect:`Default:`
510     Default layout **form view**:
511
512     .. code-block:: html
513
514       <label />
515       <input />
516
517
518 .. _reference-layout-checkbox:
519
520 checkbox
521 ^^^^^^^^
522
523 :aspect:`Property:`
524     checkbox
525
526 :aspect:`Data type:`
527     string
528
529 :aspect:`Available in views:`
530     - form
531     - confirmation
532     - postProcessor
533
534 :aspect:`Description:`
535     Layout for the CHECKBOX object.
536
537 :aspect:`Default:`
538     Default layout **form view**:
539
540     .. code-block:: html
541
542       <label />
543       <input />
544
545     Default layout **confirmation view**:
546
547     .. code-block:: html
548
549       <label />
550       <inputvalue />
551
552     Default layout **postProcessor view**:
553
554     .. code-block:: html
555
556       <td style="width: 200px;">
557         <label />
558       </td>
559       <td>
560         <inputvalue />
561       </td>
562
563
564 .. _reference-layout-checkboxgroup:
565
566 checkboxgroup
567 ^^^^^^^^^^^^^
568
569 :aspect:`Property:`
570     checkboxgroup
571
572 :aspect:`Data type:`
573     string
574
575 :aspect:`Available in views:`
576     - form
577     - confirmation
578     - postProcessor
579
580 :aspect:`Description:`
581     Layout for the CHECKBOXGROUP object.
582
583     The <containerwrap /> tag will be substituted by the outer container
584     wrap and includes all child elements.
585
586 :aspect:`Default:`
587     Default layout **form view**:
588
589     .. code-block:: html
590
591       <fieldset>
592         <legend />
593         <containerWrap />
594       </fieldset>
595
596     Default layout **confirmation view**:
597
598     .. code-block:: html
599
600       <fieldset>
601         <legend />
602         <containerWrap />
603       </fieldset>
604
605     Default layout **postProcessor view**:
606
607     .. code-block:: html
608
609       <td colspan="2">
610         <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
611           <legend />
612           <containerWrap />
613         </table>
614       </td>
615
616
617 .. _reference-layout-fieldset:
618
619 fieldset
620 ^^^^^^^^
621
622 :aspect:`Property:`
623     fieldset
624
625 :aspect:`Data type:`
626     string
627
628 :aspect:`Available in views:`
629     - form
630     - confirmation
631     - postProcessor
632
633 :aspect:`Description:`
634     Layout for the FIELDSET object.
635
636     The <containerwrap /> tag will be substituted by the outer container
637     wrap and includes all child elements.
638
639 :aspect:`Default:`
640     Default layout **form view**:
641
642     .. code-block:: html
643
644       <fieldset>
645         <legend />
646         <containerWrap />
647       </fieldset>
648
649     Default layout **confirmation view**:
650
651     .. code-block:: html
652
653       <fieldset>
654         <legend />
655         <containerWrap />
656       </fieldset>
657
658     Default layout **postProcessor view**:
659
660     .. code-block:: html
661
662       <td colspan="2">
663         <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
664           <legend />
665           <containerWrap />
666         </table>
667       </td>
668
669
670 .. _reference-layout-fileupload:
671
672 fileupload
673 ^^^^^^^^^^
674
675 :aspect:`Property:`
676     fileupload
677
678 :aspect:`Data type:`
679     string
680
681 :aspect:`Available in views:`
682     - form
683     - confirmation
684     - postProcessor
685
686 :aspect:`Description:`
687     Layout for the FILEUPLOAD object.
688
689 :aspect:`Default:`
690     Default layout **form view**:
691
692     .. code-block:: html
693
694       <label />
695       <input />
696
697     Default layout **confirmation view**:
698
699     .. code-block:: html
700
701       <label />
702       <inputvalue />
703
704     Default layout **postProcessor view**:
705
706     .. code-block:: html
707
708       <td style="width: 200px;">
709         <label />
710       </td>
711       <td>
712         <inputvalue />
713       </td>
714
715
716 .. _reference-layout-hidden:
717
718 hidden
719 ^^^^^^
720
721 :aspect:`Property:`
722     hidden
723
724 :aspect:`Data type:`
725     string
726
727 :aspect:`Available in views:`
728     - form
729     - postProcessor
730
731 :aspect:`Description:`
732     Layout for the HIDDEN object.
733
734 :aspect:`Default:`
735     Default layout **form view**:
736
737     .. code-block:: html
738
739       <input />
740
741     Default layout **postProcessor view**:
742
743     .. code-block:: html
744
745       <td style="width: 200px;">
746         <em>
747           <label />
748         </em>
749       </td>
750       <td>
751         <inputvalue />
752       </td>
753
754
755 .. _reference-layout-optgroup:
756
757 optgroup
758 ^^^^^^^^
759
760 :aspect:`Property:`
761     optgroup
762
763 :aspect:`Data type:`
764     string
765
766 :aspect:`Available in views:`
767     - form
768     - confirmation
769     - postProcessor
770
771 :aspect:`Description:`
772     Layout for the OPTGROUP object.
773
774     The <elements /> tag will be substituted with all the child elements,
775     which actually can only be OPTION objects.
776
777 :aspect:`Default:`
778     Default layout **form view**:
779
780     .. code-block:: html
781
782       <optgroup>
783         <elements />
784       </optgroup>
785
786     Default layout **confirmation view**:
787
788     .. code-block:: html
789
790       <elements />
791
792     Default layout **postProcessor view**:
793
794     .. code-block:: html
795
796       <elements />
797
798
799 .. _reference-layout-option:
800
801 option
802 ^^^^^^
803
804 :aspect:`Property:`
805     option
806
807 :aspect:`Data type:`
808     string
809
810 :aspect:`Available in views:`
811     - form
812     - confirmation
813     - postProcessor
814
815 :aspect:`Description:`
816     Layout for the OPTION object.
817
818 :aspect:`Default:`
819     Default layout **form view**:
820
821     .. code-block:: html
822
823       <option />
824
825     Default layout **confirmation view**:
826
827     .. code-block:: html
828
829       <inputvalue />
830
831     Default layout **postProcessor view**:
832
833     .. code-block:: html
834
835       <div>
836         <inputvalue />
837       </div>
838
839
840 .. _reference-layout-password:
841
842 password
843 ^^^^^^^^
844
845 :aspect:`Property:`
846     password
847
848 :aspect:`Data type:`
849     string
850
851 :aspect:`Available in views:`
852     - form
853
854 :aspect:`Description:`
855     Layout for the PASSWORD object.
856
857 :aspect:`Default:`
858     Default layout **form view**:
859
860     .. code-block:: html
861
862       <label />
863       <input />
864
865
866 .. _reference-layout-radio:
867
868 radio
869 ^^^^^
870
871 :aspect:`Property:`
872     radio
873
874 :aspect:`Data type:`
875     string
876
877 :aspect:`Available in views:`
878     - form
879     - confirmation
880     - postProcessor
881
882 :aspect:`Description:`
883     Layout for the RADIO object.
884
885 :aspect:`Default:`
886     Default layout **form view**:
887
888     .. code-block:: html
889
890       <label />
891       <input />
892
893     Default layout **confirmation view**:
894
895     .. code-block:: html
896
897       <label />
898       <inputvalue />
899
900     Default layout **postProcessor view**:
901
902     .. code-block:: html
903
904       <td style="width: 200px;">
905         <label />
906       </td>
907       <td>
908         <inputvalue />
909       </td>
910
911
912 .. _reference-layout-radiogroup:
913
914 radiogroup
915 ^^^^^^^^^^
916
917 :aspect:`Property:`
918     radiogroup
919
920 :aspect:`Data type:`
921     string
922
923 :aspect:`Available in views:`
924     - form
925     - confirmation
926     - postProcessor
927
928 :aspect:`Description:`
929     Layout for the RADIOGROUP object.
930
931     The <containerwrap /> tag will be substituted by the outer container
932     wrap and includes all child elements.
933
934 :aspect:`Default:`
935     Default layout **form view**:
936
937     .. code-block:: html
938
939       <fieldset>
940         <legend />
941         <containerWrap />
942       </fieldset>
943
944
945     Default layout **confirmation view**:
946
947     .. code-block:: html
948
949       <fieldset>
950         <legend />
951         <containerWrap />
952       </fieldset>
953
954     Default layout **postProcessor view**:
955
956     .. code-block:: html
957
958       <td colspan="2">
959         <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
960           <legend />
961           <containerWrap />
962         </table>
963       </td>
964
965
966 .. _reference-layout-reset:
967
968 reset
969 ^^^^^
970
971 :aspect:`Property:`
972     reset
973
974 :aspect:`Data type:`
975     string
976
977 :aspect:`Available in views:`
978     - form
979
980 :aspect:`Description:`
981     Layout for the RESET object.
982
983 :aspect:`Default:`
984     Default layout **form view**:
985
986     .. code-block:: html
987
988       <label />
989       <input />
990
991
992 .. _reference-layout-select:
993
994 select
995 ^^^^^^
996
997 :aspect:`Property:`
998     select
999
1000 :aspect:`Data type:`
1001     string
1002
1003 :aspect:`Available in views:`
1004     - form
1005     - confirmation
1006     - postProcessor
1007
1008 :aspect:`Description:`
1009     Layout for the SELECT object.
1010
1011     The <elements /> tag will be substituted with all the child elements,
1012     which only can be OPTGROUP or OPTION objects.
1013
1014 :aspect:`Default:`
1015     Default layout **form view**:
1016
1017     .. code-block:: html
1018
1019       <label />
1020       <select>
1021          <elements />
1022       </select>
1023
1024     Default layout **confirmation view**:
1025
1026     .. code-block:: html
1027
1028       <label />
1029       <ol>
1030          <elements />
1031       </ol>
1032
1033     Default layout **postProcessor view**:
1034
1035     .. code-block:: html
1036
1037       <td style="width: 200px;">
1038         <label />
1039       </td>
1040       <td>
1041         <elements />
1042       </td>
1043
1044
1045 .. _reference-layout-submit:
1046
1047 submit
1048 ^^^^^^
1049
1050 :aspect:`Property:`
1051     submit
1052
1053 :aspect:`Data type:`
1054     string
1055
1056 :aspect:`Available in views:`
1057     - form
1058
1059 :aspect:`Description:`
1060     Layout for the SUBMIT object.
1061
1062 :aspect:`Default:`
1063     Default layout **form view**:
1064
1065     .. code-block:: html
1066
1067       <label />
1068       <input />
1069
1070
1071 .. _reference-layout-textarea:
1072
1073 textarea
1074 ^^^^^^^^
1075
1076 :aspect:`Property:`
1077     textarea
1078
1079 :aspect:`Data type:`
1080     string
1081
1082 :aspect:`Available in views:`
1083     - form
1084     - confirmation
1085     - postProcessor
1086
1087 :aspect:`Description:`
1088     Layout for the TEXTAREA object.
1089
1090 :aspect:`Default:`
1091     Default layout **form view**:
1092
1093     .. code-block:: html
1094
1095       <label />
1096       <textarea />
1097
1098
1099     Default layout **confirmation view**:
1100
1101     .. code-block:: html
1102
1103       <label />
1104       <inputvalue />
1105
1106     Default layout **postProcessor view**:
1107
1108     .. code-block:: html
1109
1110       <td style="width: 200px;" valign="top">
1111           <label />
1112       </td>
1113       <td>
1114           <inputvalue />
1115       </td>
1116
1117
1118 .. _reference-layout-textblock:
1119
1120 textblock
1121 ^^^^^^^^^
1122
1123 :aspect:`Property:`
1124     textblock
1125
1126 :aspect:`Data type:`
1127     string
1128
1129 :aspect:`Available in views:`
1130     - form
1131
1132 :aspect:`Description:`
1133     Layout for the TEXTBLOCK object.
1134
1135 :aspect:`Default:`
1136     Default layout **form view**:
1137
1138     .. code-block:: html
1139
1140       <textblock />
1141
1142
1143 .. _reference-layout-textline:
1144
1145 textline
1146 ^^^^^^^^
1147
1148 :aspect:`Property:`
1149     textline
1150
1151 :aspect:`Data type:`
1152     string
1153
1154 :aspect:`Available in views:`
1155     - form
1156     - confirmation
1157     - postProcessor
1158
1159 :aspect:`Description:`
1160     Layout for the TEXTLINE object.
1161
1162 :aspect:`Default:`
1163     Default layout **form view**:
1164
1165     .. code-block:: html
1166
1167       <label />
1168       <input />
1169
1170     Default layout **confirmation view**:
1171
1172     .. code-block:: html
1173
1174       <label />
1175       <inputvalue />
1176
1177     Default layout **postProcessor view**:
1178
1179     .. code-block:: html
1180
1181       <td style="width: 200px;">
1182         <label />
1183       </td>
1184       <td>
1185         <inputvalue />
1186       </td>
1187
1188
1189 .. _change-layout-specific-view-example:
1190
1191 Example showing all .layout properties and defaults
1192 ===================================================
1193
1194 The code snippets below shows all available settings across all views
1195 including their default layout.
1196
1197 .. code-block:: typoscript
1198
1199   tt_content.mailform.20 {
1200     # ###
1201     # form view
1202     # ####
1203
1204     form {
1205       layout {
1206         form (
1207           <form>
1208             <containerWrap />
1209           </form>
1210         )
1211
1212         containerWrap (
1213           <ol>
1214             <elements />
1215           </ol>
1216         )
1217
1218         elementWrap (
1219           <li>
1220             <element />
1221           </li>
1222         )
1223
1224         label (
1225           <label>
1226             <labelvalue />
1227             <mandatory />
1228             <error />
1229           </label>
1230         )
1231
1232         mandatory (
1233           <em>
1234             <mandatoryvalue />
1235           </em>
1236         )
1237
1238         error (
1239           <strong>
1240             <errorvalue />
1241           </strong>
1242         )
1243
1244         legend (
1245           <legend>
1246             <legendvalue />
1247             <mandatory />
1248             <error />
1249           </legend>
1250         )
1251
1252         button (
1253           <label />
1254           <input />
1255         )
1256
1257         checkbox (
1258           <label />
1259           <input />
1260         )
1261
1262         checkboxgroup (
1263           <fieldset>
1264             <legend />
1265             <containerWrap />
1266           </fieldset>
1267         )
1268         fieldset (
1269             <fieldset>
1270                 <legend />
1271                 <containerWrap />
1272             </fieldset>
1273         )
1274
1275         fileupload (
1276           <label />
1277           <input />
1278         )
1279
1280         hidden (
1281           <input />
1282         )
1283
1284         optgroup (
1285           <optgroup>
1286             <elements />
1287           </optgroup>
1288         )
1289
1290         option (
1291           <option />
1292         )
1293
1294         password (
1295           <label />
1296           <input />
1297         )
1298
1299         radio (
1300           <label />
1301           <input />
1302         )
1303
1304         radiogroup (
1305           <fieldset>
1306             <legend />
1307             <containerWrap />
1308           </fieldset>
1309         )
1310
1311         reset (
1312           <label />
1313           <input />
1314         )
1315
1316         select (
1317           <label />
1318           <select>
1319             <elements />
1320           </select>
1321         )
1322
1323         submit (
1324           <label />
1325           <input />
1326         )
1327
1328         textarea (
1329           <label />
1330           <textarea />
1331         )
1332
1333         textblock (
1334           <textblock />
1335         )
1336
1337         textline (
1338           <label />
1339           <input />
1340         )
1341       }
1342     }
1343
1344     # ###
1345     # confirmation view
1346     # ###
1347
1348     confirmation {
1349       layout {
1350         confirmation (
1351           <containerWrap />
1352         )
1353
1354         containerWrap (
1355           <ol>
1356             <elements />
1357           </ol>
1358         )
1359
1360         elementWrap (
1361           <li>
1362             <element />
1363           </li>
1364         )
1365
1366         label (
1367           <label>
1368             <labelvalue />
1369           </label>
1370         )
1371
1372         legend (
1373           <legend>
1374             <legendvalue />
1375           </legend>
1376         )
1377
1378         checkbox (
1379           <label />
1380           <inputvalue />
1381         )
1382
1383         checkboxgroup (
1384           <fieldset>
1385             <legend />
1386             <containerWrap />
1387           </fieldset>
1388         )
1389
1390         fieldset (
1391           <fieldset>
1392             <legend />
1393             <containerWrap />
1394           </fieldset>
1395         )
1396
1397         fileupload (
1398           <label />
1399           <inputvalue />
1400         )
1401
1402         optgroup (
1403           <elements />
1404         )
1405
1406         option (
1407           <inputvalue />
1408         )
1409
1410         radio (
1411           <label />
1412           <inputvalue />
1413         )
1414
1415         radiogroup (
1416           <fieldset>
1417             <legend />
1418             <containerWrap />
1419           </fieldset>
1420         )
1421
1422         select (
1423           <label />
1424           <ol>
1425             <elements />
1426           </ol>
1427         )
1428
1429         textarea (
1430           <label />
1431           <inputvalue />
1432         )
1433
1434         textline (
1435           <label />
1436           <inputvalue />
1437         )
1438       }
1439     }
1440
1441     # ###
1442     # postProcesso view
1443     # ###
1444
1445     postProcessor {
1446       layout {
1447         html (
1448           <html>
1449             <head>
1450               <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
1451             </head>
1452             <body>
1453               <table cellspacing="0">
1454                 <containerWrap />
1455               </table>
1456             </body>
1457           </html>
1458         )
1459
1460         containerWrap (
1461           <tbody>
1462             <elements />
1463           </tbody>
1464         )
1465
1466         elementWrap (
1467           <tr>
1468             <element />
1469           </tr>
1470         )
1471
1472         label (
1473           <em>
1474             <labelvalue />
1475           </em>
1476         )
1477
1478         legend (
1479           <thead>
1480             <tr>
1481               <th colspan="2" align="left">
1482                 <legendvalue />
1483               </th>
1484             </tr>
1485           </thead>
1486         )
1487
1488         checkbox (
1489           <td style="width: 200px;">
1490             <label />
1491           </td>
1492           <td>
1493             <inputvalue />
1494           </td>
1495         )
1496
1497         checkboxgroup (
1498           <td colspan="2">
1499             <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
1500               <legend />
1501               <containerWrap />
1502             </table>
1503           </td>
1504         )
1505
1506         fieldset (
1507           <td colspan="2">
1508             <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
1509               <legend />
1510               <containerWrap />
1511             </table>
1512           </td>
1513         )
1514
1515         fileupload (
1516           <td style="width: 200px;">
1517             <label />
1518           </td>
1519           <td>
1520             <inputvalue />
1521           </td>
1522         )
1523
1524         hidden (
1525           <td style="width: 200px;">
1526             <em>
1527               <label />
1528             </em>
1529           </td>
1530           <td>
1531             <inputvalue />
1532           </td>
1533         )
1534
1535         optgroup (
1536           <elements />
1537         )
1538
1539         option (
1540           <div>
1541             <inputvalue />
1542           </div>
1543         )
1544
1545         radio (
1546           <td style="width: 200px;">
1547             <label />
1548           </td>
1549           <td>
1550             <inputvalue />
1551           </td>
1552         )
1553
1554         radiogroup (
1555           <td colspan="2">
1556             <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
1557               <legend />
1558               <containerWrap />
1559             </table>
1560           </td>
1561         )
1562
1563         select (
1564           <td style="width: 200px;">
1565             <label />
1566           </td>
1567           <td>
1568             <elements />
1569           </td>
1570         )
1571
1572         textarea (
1573           <td style="width: 200px;" valign="top">
1574             <label />
1575           </td>
1576           <td>
1577             <inputvalue />
1578           </td>
1579         )
1580
1581         textline (
1582           <td style="width: 200px;">
1583             <label />
1584           </td>
1585           <td>
1586             <inputvalue />
1587           </td>
1588         )
1589       }
1590     }
1591   }
1592