Drupal 6 Form Elements Example Module

21st September 2011 - 8 minutes read time

During my work developing Drupal sites I am quite often asked if I can provide a example of form elements for designers. This is so that they can test their designs with all possible form elements that might appear in a Drupal install and make sure that the theme we create will be robust and future proof. I often find myself forgetting how to create, say, a multi select element and needed a sort of cheat sheet that I could look form elements up on.

To this end I sat down and created a list of all of the Drupal form elements and packaged them into a module so that when the path 'form_elements' is loaded a very large form with lots of elements will be rendered. There is even a tabledrag form component in there, which is used quite a bit within the Drupal administration pages.

The submit button will just post the information back to the form page and show the data that was returned. This means that the module is also useful if you want to see what sort of data each form element produces.

To use this module create a directory called form_elements and add a the following to the form_elements.info file.

  1. name = Form Elements
  2. description = Prints out all of the form elements.
  3. core = 6.x

The following code is for the form_elements.module file.

  1. <?php
  2.  
  3. /**
  4.  * For more information about the different API controls available see:
  5.  * http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.html/6
  6.  */
  7.  
  8. /**
  9.  * Implements hook_menu() to create a URL for the form elements example.
  10.  */
  11. function form_elements_menu() {
  12. $items['form_elements'] = array(
  13. 'title' => 'Drupal Form Elements',
  14. 'page callback' => 'drupal_get_form',
  15. 'page arguments' => array('form_elements_form'),
  16. 'access callback' => TRUE,
  17. );
  18. return $items;
  19. }
  20.  
  21. /**
  22.  * This is form containing every form element type available.
  23.  */
  24. function form_elements_form() {
  25. // Check box
  26. $form['checkbox_element'] = array(
  27. '#type' => 'checkbox',
  28. '#title' => t('Form elements checkbox'),
  29. '#default_value' => FALSE,
  30. '#description' => t('A regular checkbox.')
  31. );
  32.  
  33. // Multiple checkbox
  34. $form['checkboxes_element'] = array(
  35. '#type' => 'checkboxes',
  36. '#title' => t('Form elements checkboxes'),
  37. '#options' => range(0, 5),
  38. '#default_value' => array(1),
  39. '#description' => t('A regular set of checkboxes.')
  40. );
  41.  
  42. // Date element
  43. $form['date_element'] = array(
  44. '#type' => 'date',
  45. '#title' => t('Form elements date'),
  46. '#description' => t('A regular date.')
  47. );
  48.  
  49. // Fieldset containing a text field element
  50. $form['fielset_element'] = array(
  51. '#type' => 'fieldset',
  52. '#title' => t('Form elements fieldset element'),
  53. '#collapsible' => TRUE,
  54. '#collapsed' => FALSE,
  55. );
  56. // A text area inside a fieldset element
  57. $form['fielset_element']['fielset_element_textfield'] = array(
  58. '#type' => 'textfield',
  59. '#title' => t('Form elements textfield, in a fieldset'),
  60. '#description' => t('A regular textfield, in a fieldset.')
  61. );
  62.  
  63. // A file upload element
  64. $form['file_element'] = array(
  65. '#type' => 'file',
  66. '#title' => t('Form elements file'),
  67. '#description' => t('A regular file.')
  68. );
  69.  
  70. // Password Element
  71. $form['password_element'] = array(
  72. '#type' => 'password',
  73. '#title' => t('Form elements password'),
  74. '#description' => t('A regular password.')
  75. );
  76.  
  77. // Confirm password element
  78. $form['password_confirm_element'] = array(
  79. '#type' => 'password_confirm',
  80. '#title' => t('Form elements password_confirm'),
  81. '#description' => t('A regular password_confirm.')
  82. );
  83.  
  84. // Radio element
  85. $form['radio_element'] = array(
  86. '#type' => 'radio',
  87. '#title' => t('Form elements radio'),
  88. '#default_value' => TRUE,
  89. '#description' => t('A regular radio.')
  90. );
  91.  
  92. // Radios element
  93. $form['radios_element'] = array(
  94. '#type' => 'radios',
  95. '#title' => t('Form elements radios'),
  96. '#options' => range(0, 5),
  97. '#default_value' => 1,
  98. '#description' => t('A regular set of radios.')
  99. );
  100.  
  101. // Select element
  102. $form['select_element'] = array(
  103. '#type' => 'select',
  104. '#title' => t('Form elements select'),
  105. '#options' => range(0, 5),
  106. '#default_value' => 1,
  107. '#description' => t('A regular select.'),
  108. );
  109.  
  110. // Mutli select element.
  111. $form['multiple_select_element'] = array(
  112. '#type' => 'select',
  113. '#title' => t('Form elements multiple select'),
  114. '#options' => range(0, 5),
  115. '#default_value' => 1,
  116. '#description' => t('A regular multiple select.'),
  117. '#multiple' => TRUE
  118. );
  119.  
  120. // A textfield element
  121. $form['textfield_element'] = array(
  122. '#type' => 'textfield',
  123. '#title' => t('Form elements textfield'),
  124. '#description' => t('A regular textfield.')
  125. );
  126.  
  127. // A text area element
  128. $form['textarea_element'] = array(
  129. '#type' => 'textarea',
  130. '#title' => t('Form elements textarea'),
  131. '#description' => t('A regular textarea.')
  132. );
  133.  
  134. // A weight element (usually used when sorting elements)
  135. $form['weight_element'] = array(
  136. '#type' => 'weight',
  137. '#title' => t('Form elements weight'),
  138. '#description' => t('A regular weight.')
  139. );
  140.  
  141. // Data for tabledrag element
  142. $rows = array(
  143. array(
  144. 'id' => 1,
  145. 'person' => 'Joe Blogs',
  146. 'email' => '[email protected]',
  147. 'weight' => 0,
  148. ),
  149. array(
  150. 'id' => 2,
  151. 'person' => 'Jane Blogs',
  152. 'email' => '[email protected]',
  153. 'weight' => 10,
  154. ),
  155. );
  156.  
  157. // Tabledrag element
  158. foreach ($rows as $row) {
  159. $form['tabledragrows'][$row['id']]['person_' . $row['id']] = array(
  160. '#type' => 'textfield',
  161. '#default_value' => $row['person'],
  162. '#size' => 20,
  163. );
  164.  
  165. $form['tabledragrows'][$row['id']]['email_' . $row['id']] = array(
  166. '#type' => 'textfield',
  167. '#default_value' => $row['email'],
  168. '#size' => 20,
  169. );
  170.  
  171. // the weight form element.
  172. $form['tabledragrows'][$row['id']]['weight_' . $row['id']] = array(
  173. '#type' => 'weight',
  174. '#delta' => 50,
  175. '#default_value' => $row['weight'],
  176. '#attributes' => array('class' => 'weight'),
  177. );
  178. }
  179.  
  180. // A button element
  181. $form['button_element'] = array(
  182. '#type' => 'button',
  183. '#value' => t('Button'),
  184. );
  185.  
  186. // A image button element
  187. $form['image_button_element'] = array(
  188. '#type' => 'image_button',
  189. '#value' => t('Image Button'),
  190. '#src' => 'misc/druplicon.png'
  191. );
  192.  
  193. // A hidden element
  194. $form['hidden_element'] = array(
  195. '#type' => 'hidden',
  196. '#value' => t('A hidden element'),
  197. );
  198.  
  199. // A token element
  200. $form['token_element'] = array(
  201. '#type' => 'token',
  202. '#default_value' => t('A token element'),
  203. );
  204.  
  205. // A markup (HTML) element
  206. $form['markup_element'] = array(
  207. '#type' => 'markup',
  208. '#value' => '<p>' . t('A markup element') . '</p>'
  209. );
  210.  
  211. // An item element
  212. $form['item_element'] = array(
  213. '#type' => 'item',
  214. '#title' => t('An item element'),
  215. '#value' => t('An item element value')
  216. );
  217.  
  218. // A value element (used internally)
  219. $form['value_element'] = array(
  220. '#type' => 'value',
  221. '#default_value' => t('A value element')
  222. );
  223.  
  224. // A submit element
  225. $form['submit'] = array(
  226. '#type' => 'submit',
  227. '#value' => t('Submit'),
  228. );
  229.  
  230. return $form;
  231. }
  232.  
  233. /**
  234.  * Implements hook_submit() for the form_elements_form() form.
  235.  */
  236. function form_elements_form_submit($form, &$form_state) {
  237. // Exclude unnecessary elements.
  238. unset($form_state['values']['submit'], $form_state['values']['form_id'], $form_state['values']['op'], $form_state['values']['form_token'], $form_state['values']['form_build_id']);
  239.  
  240. foreach ($form_state['values'] as $key => $value) {
  241. variable_set($key, $value);
  242. drupal_set_message(t('%name has value %value', array('%name' => $key, '%value' => print_r($value, TRUE))));
  243. }
  244. }
  245.  
  246. /**
  247.  * Implementation of hook_theme().
  248.  */
  249. function form_elements_theme() {
  250. return array(
  251. 'form_elements_form' => array(
  252. 'arguments' => array(
  253. 'form' => NULL
  254. ),
  255. ),
  256. );
  257. }
  258.  
  259. /**
  260.  * Theme for form_element_form. Used to create the tabledrag element and then
  261.  * render the rest of the form.
  262.  */
  263. function theme_form_elements_form($form) {
  264. $table_rows = array();
  265.  
  266. if (is_array($form['tabledragrows'])) {
  267. //loop through each "row" in the table array
  268. foreach ($form['tabledragrows'] as $id => $row) {
  269. //we are only interested in numeric keys
  270. if (intval($id)) {
  271. $this_row = array();
  272.  
  273. $this_row[] = drupal_render($form['tabledragrows'][$id]['person_' . $id]);
  274. $this_row[] = drupal_render($form['tabledragrows'][$id]['email_' . $id]);
  275.  
  276. //Add the weight field to the row
  277. $this_row[] = drupal_render($form['tabledragrows'][$id]['weight_' . $id]);
  278.  
  279. //Add the row to the array of rows
  280. $table_rows[] = array('data' => $this_row, 'class' => 'draggable');
  281. }
  282. }
  283. }
  284.  
  285. //Make sure the header count matches the column count
  286. $header = array(
  287. "Person",
  288. "Email",
  289. "Weight"
  290. );
  291.  
  292.  
  293. $form['tabledragrows'] = array(
  294. '#value' => theme('table', $header, $table_rows, array('id' => 'person-email'))
  295. );
  296.  
  297. $output = drupal_render($form);
  298.  
  299. // Call add_tabledrag to add and setup the JavaScript
  300. // The key thing here is the first param - the table ID
  301. // and the 4th param, the class of the form item which holds the weight
  302. drupal_add_tabledrag('person-email', 'order', 'sibling', 'weight');
  303.  
  304. return $output;
  305. }

When you enable this module you can navigate to /form_elements and see the large form in place.

The code for this module is also available on github.

Add new comment

The content of this field is kept private and will not be shown publicly.