Example: Custom form rendering

1. 1: <?php
2. 2:  
3. 3: /**
4. 4:  * Nette\Forms example 4
5. 5:  *
6. 6:  * - custom form rendering
7. 7:  */
8. 8:  
9. 9:  
10. 10: require '../../Nette/loader.php';
11. 11:  
12. 12:  
13. 13:  
14. 14: Debug::enable();
15. 15:  
16. 16:  
17. 17: $countries = array(
18. 18:     'Select your country',
19. 19:     'Europe' => array(
20. 20:         'CZ' => 'Czech Republic',
21. 21:         'FR' => 'France',
22. 22:         'DE' => 'Germany',
23. 23:         'GR' => 'Greece',
24. 24:         'HU' => 'Hungary',
25. 25:         'IE' => 'Ireland',
26. 26:         'IT' => 'Italy',
27. 27:         'NL' => 'Netherlands',
28. 28:         'PL' => 'Poland',
29. 29:         'SK' => 'Slovakia',
30. 30:         'ES' => 'Spain',
31. 31:         'CH' => 'Switzerland',
32. 32:         'UA' => 'Ukraine',
33. 33:         'GB' => 'United Kingdom',
34. 34:     ),
35. 35:     'AU' => 'Australia',
36. 36:     'CA' => 'Canada',
37. 37:     'EG' => 'Egypt',
38. 38:     'JP' => 'Japan',
39. 39:     'US' => 'United States',
40. 40:     '?'  => 'other',
41. 41: );
42. 42:  
43. 43: $sex = array(
44. 44:     'm' => Html::el('option', 'male')->style('color: #248bd3'),
45. 45:     'f' => Html::el('option', 'female')->style('color: #e948d4'),
46. 46: );
47. 47:  
48. 48:  
49. 49:  
50. 50: // Step 1: Define form with validation rules
51. 51: $form = new Form;
52. 52: // setup custom rendering
53. 53: $renderer = $form->getRenderer();
54. 54: $renderer->wrappers['form']['container'] = Html::el('div')->id('form');
55. 55: $renderer->wrappers['form']['errors'] = FALSE;
56. 56: $renderer->wrappers['group']['container'] = NULL;
57. 57: $renderer->wrappers['group']['label'] = 'h3';
58. 58: $renderer->wrappers['pair']['container'] = NULL;
59. 59: $renderer->wrappers['controls']['container'] = 'dl';
60. 60: $renderer->wrappers['control']['container'] = 'dd';
61. 61: $renderer->wrappers['control']['.odd'] = 'odd';
62. 62: $renderer->wrappers['control']['errors'] = TRUE;
63. 63: $renderer->wrappers['label']['container'] = 'dt';
64. 64: $renderer->wrappers['label']['suffix'] = ':';
65. 65:  
66. 66:  
67. 67: // group Personal data
68. 68: $form->addGroup('Personal data');
69. 69: $form->addText('name', 'Your name', 35)
70. 70:     ->addRule(Form::FILLED, 'Enter your name');
71. 71:  
72. 72: $form->addText('age', 'Your age', 5)
73. 73:     ->addRule(Form::FILLED, 'Enter your age')
74. 74:     ->addRule(Form::INTEGER, 'Age must be numeric value')
75. 75:     ->addRule(Form::RANGE, 'Age must be in range from %d to %d', array(10, 100));
76. 76:  
77. 77: $form->addSelect('gender', 'Your gender', $sex, 2);
78. 78:  
79. 79: $form->addText('email', 'E-mail', 35)
80. 80:     ->setEmptyValue('@')
81. 81:     ->addCondition(Form::FILLED) // conditional rule: if is email filled, ...
82. 82:         ->addRule(Form::EMAIL, 'Incorrect E-mail Address'); // ... then check email
83. 83:  
84. 84:  
85. 85: // group Shipping address
86. 86: $form->addGroup('Shipping address')
87. 87:     ->setOption('embedNext', TRUE);
88. 88:  
89. 89: $form->addCheckbox('send', 'Ship to address')
90. 90:     ->addCondition(Form::EQUAL, TRUE) // conditional rule: if is checkbox checked...
91. 91:         ->toggle('sendBox'); // toggle div #sendBox
92. 92:  
93. 93:  
94. 94: // subgroup
95. 95: $form->addGroup()
96. 96:     ->setOption('container', Html::el('div')->id('sendBox'));
97. 97:  
98. 98: $form->addText('street', 'Street', 35);
99. 99:  
100. 100: $form->addText('city', 'City', 35)
101. 101:     ->addConditionOn($form['send'], Form::EQUAL, TRUE)
102. 102:         ->addRule(Form::FILLED, 'Enter your shipping address');
103. 103:  
104. 104: $form->addSelect('country', 'Country', $countries)
105. 105:     ->skipFirst()
106. 106:     ->addConditionOn($form['send'], Form::EQUAL, TRUE)
107. 107:         ->addRule(Form::FILLED, 'Select your country');
108. 108:  
109. 109:  
110. 110: // group Your account
111. 111: $form->addGroup('Your account');
112. 112:  
113. 113: $form->addPassword('password', 'Choose password', 20)
114. 114:     ->addRule(Form::FILLED, 'Choose your password')
115. 115:     ->addRule(Form::MIN_LENGTH, 'The password is too short: it must be at least %d characters', 3)
116. 116:     ->setOption('description', '(at least 3 characters)');
117. 117:  
118. 118: $form->addPassword('password2', 'Reenter password', 20)
119. 119:     ->addConditionOn($form['password'], Form::VALID)
120. 120:         ->addRule(Form::FILLED, 'Reenter your password')
121. 121:         ->addRule(Form::EQUAL, 'Passwords do not match', $form['password']);
122. 122:  
123. 123: $form->addFile('avatar', 'Picture');
124. 124:  
125. 125: $form->addHidden('userid');
126. 126:  
127. 127: $form->addTextArea('note', 'Comment', 30, 5);
128. 128:  
129. 129:  
130. 130: // group for buttons
131. 131: $form->addGroup();
132. 132:  
133. 133: $form->addSubmit('submit1', 'Send');
134. 134:  
135. 135:  
136. 136:  
137. 137: // Step 2: Check if form was submitted?
138. 138: if ($form->isSubmitted()) {
139. 139:  
140. 140:     // Step 2c: Check if form is valid
141. 141:     if ($form->isValid()) {
142. 142:         echo '<h2>Form was submitted and successfully validated</h2>';
143. 143:  
144. 144:         $values = $form->getValues();
145. 145:         Debug::dump($values);
146. 146:  
147. 147:         // this is the end, my friend :-)
148. 148:         if (empty($disableExit)) exit;
149. 149:     }
150. 150:  
151. 151: } else {
152. 152:     // not submitted, define default values
153. 153:     $defaults = array(
154. 154:         'name'    => 'John Doe',
155. 155:         'userid'  => 231,
156. 156:         'country' => 'CZ', // Czech Republic
157. 157:     );
158. 158:  
159. 159:     $form->setDefaults($defaults);
160. 160: }
161. 161:  
162. 162:  
163. 163:  
164. 164: // Step 3: Render form
165. 165: ?>
166. 166: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
167. 167: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
168. 168: <head>
169. 169:     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
170. 170:     <meta http-equiv="content-language" content="en" />
171. 171:  
172. 172:     <title>Nette\Forms example 4 | Nette Framework</title>
173. 173:  
174. 174:     <style type="text/css">
175. 175:     <!--
176. 176:     body {
177. 177:         font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif;
178. 178:     }
179. 179:  
180. 180:     .required {
181. 181:         font-weight: bold;
182. 182:     }
183. 183:  
184. 184:     .error {
185. 185:         color: red;
186. 186:     }
187. 187:  
188. 188:     input.text {
189. 189:         border: 1px solid #78bd3f;
190. 190:         padding: 3px;
191. 191:         color: black;
192. 192:         background: white;
193. 193:     }
194. 194:  
195. 195:     input.button {
196. 196:         font-size: 120%;
197. 197:     }
198. 198:  
199. 199:     dt, dd {
200. 200:         padding: .5em 1em;
201. 201:     }
202. 202:  
203. 203:     #form {
204. 204:         width: 550px;
205. 205:     }
206. 206:  
207. 207:     #form h3 {
208. 208:         background: #78bd3f;
209. 209:         color: white;
210. 210:         margin: 0;
211. 211:         padding: .1em 1em;
212. 212:         font-size: 100%;
213. 213:         font-weight: normal;
214. 214:         clear: both;
215. 215:     }
216. 216:  
217. 217:     #form dl {
218. 218:         background: #F8F8F8;
219. 219:         margin: 0;
220. 220:     }
221. 221:  
222. 222:     #form dt {
223. 223:         text-align: right;
224. 224:         font-weight: normal;
225. 225:         float: left;
226. 226:         width: 10em;
227. 227:         clear: both;
228. 228:     }
229. 229:  
230. 230:     #form dd {
231. 231:         margin: 0;
232. 232:         padding-left: 10em;
233. 233:         display: block;
234. 234:     }
235. 235:  
236. 236:     #form dd ul {
237. 237:         list-style: none;
238. 238:         font-size: 90%;
239. 239:     }
240. 240:  
241. 241:     #form dd.odd {
242. 242:         background: #EEE;
243. 243:     }
244. 244:     -->
245. 245:     </style>
246. 246: </head>
247. 247:  
248. 248: <body>
249. 249:     <h1>Nette\Forms example 4</h1>
250. 250:  
251. 251:     <?php echo $form ?>
252. 252: </body>
253. 253: </html>