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