Webemania | How to add classes or attributes to Drupal form elements

| Published Date: 03 Aug 2014 | Last Updated Date: 04 Sep 2017
Total Reads: 7,522 | Last Visit: 21 Sep 2017 03:00:35 PM

This tutorial solves the following questions:

  • Add css property for individual components in Drupal form elements
  • How can I add a class to a label with drupal's form API?
  • Adding class to form-item
  • How do I add classes to form elements?
  • How to customize Drupal form element?
  • How to add class/attributes to drupal form/form element/form label?
  • How to alter drupal form/form element/form label?

Add Wrapper class to Drupal Form and Form attributes

  1. <?php
  2.  
  3. /**
  4.  *implements hook_menu()
  5.  *
  6.  */
  7. function mymodule_menu(){
  8. $items = array();
  9. $items['mymodule'] = array(
  10. 'type' => MENU_NORMAL_ITEM,
  11. 'title' => 'My module Form',
  12. 'page callback' => 'drupal_get_form',
  13. 'page arguments' => array('mymodule_form'),
  14. 'access callback' => TRUE,
  15. );
  16. return $items;
  17. }
  18.  
  19.  
  20. function mymodule_form($form_state){
  21. $form = array();
  22.  
  23. // Add a class to drupal form:
  24. $form['#attributes'] = array('class'=>'drupal-custom-form');
  25. $form['name'] = array(
  26. '#type' => 'textfield',
  27. '#description' => 'Enter your name',
  28. );
  29.  
  30. $form['age'] = array(
  31. '#type' => 'textfield',
  32. '#description' => 'Enter your age',
  33. );
  34.  
  35.  
  36. // $form['name']['#attributes'] = array('disabled'=>'disabled');
  37. // Add a class/attributes to drupal form elements:
  38. // example - Add a class to drupal submit button
  39.  
  40. $form['submit'] = array(
  41. '#type' => 'submit',
  42. '#value' => 'Submit',
  43. );
  44.  
  45. // for D6
  46. $form['submit']['#attributes']['class'] = 'button large-button';
  47.  
  48. // For D7
  49. //$form['submit']['#attributes']['class'] = array('button large-button');
  50. return $form;
  51. }
  52. ?>

But we can not add an attributes to form label. Drupal does not provide any thing for this. But we can add wrapper to this form element and then apply CSS Later like this:

Add Wrapper class to Drupal Label

  1. <?php
  2.  
  3. function mymodule_form($form_state){
  4. $form = array();
  5.  
  6. // Add a class to drupal form:
  7. $form['#attributes'] = array('class'=>'drupal-custom-form');
  8. // since Drupal does not allow to add attributes to form Label, Add a wrapper class and apply css later
  9. $form['name'] => array(
  10. '#type' => 'textfield',
  11. '#title' => 'Your name',
  12. '#prefix' => '<div class="myClass">',
  13. '#suffix' => '</div>'
  14. );
  15. return $form;
  16. }
  17. ?>

Adding Style to above wrapper class

  1. .myClass label {
  2. text-transform: uppercase; /* just for example */
  3. }

Alter some form attributes/form field to contributed module

In Drupal, we need to alter some fields of contributed modules frequently. Lets see how we do this ?

In order to do this, use hook_form_alter drupal api function

  1. <?php
  2. /**
  3.  *implements hook_form_alter()
  4.  *
  5.  */
  6. function mymodule_form_alter($form, $form_state, $form_id) {
  7. if ($form_id == 'mymodule_form') {
  8.  
  9. // disable name field
  10.  
  11. // For D6
  12. $form['name']['#attributes'] = array('disabled'=>'disabled');
  13.  
  14. // hide age field
  15. // $form['age']['#access'] = FALSE;
  16.  
  17.  
  18. // hide age field based on condition
  19. // for anonymous user, hide age
  20. global $user;
  21. if (!$user->uid) {
  22. $form['age']['#access'] = FALSE;
  23. }
  24. }
  25. }
  26. ?>

Tags

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
Max length 128 characters
Image CAPTCHA
Enter the characters shown in the image.

About This Mania

Hasan Hafiz, Blogger at web mania ltd (www.webemania.com). He has more than 5 years experience in web development platform. He worked as a Sr. Software Developer at Canadian based outsourcing software firm, Lead Developer at countries top most VOIPswitch development company and Sr. Software Engineer at USA based outsourcing software firm . His expertise areas are PHP, MySQL, CSS, Javascript, JQuery, HTML, XML and MVC Framework Codeigniter. He has been along with Drupal from more than 4 years. You may call him Drupal Addicted.