Example: Custom form rendering

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