Access the label for a form element via hook_form_alter

Question

I have a form with id equal to webform_client_form_3. I have a particular field that I'm altering by applying a class to it like so:

$form['submitted']['estimated_annual_distribution_of_effort']['sensor_technology']['#attributes']['class'][] = 'span1';

This all works great. However, I also need to add a class on to the label for that particular element as well. Looking through the $form array, I haven't been able to find anything that gives access to the labels. Am I just missing something or are the labels not part of the $form array?

Answer 1

The attributes for labels are hard-coded into the theme_form_element_label() function. You can override it at the theme/module level but you'll have to do so for all labels in the system as the variables passed to the theme function do not contain the form context.

The easiest thing to do would be to add a predictable class to each label in every form (based on the name of the form element that the label is for), and then use a CSS selector based on a combination of your form ID and the label class to target it.

Unfortunately there's a fair bit of code you'll need to copy over, and only one small change you'll need to make, but I can't think of another way to do it:

function MYTHEME_form_element_label($variables) {
  $element = $variables['element'];
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  // If title and required marker are both empty, output no label.
  if ((!isset($element['#title']) || $element['#title'] === '') && empty($element['#required'])) {
    return '';
  }

  // If the element is required, a required marker is appended to the label.
  $required = !empty($element['#required']) ? theme('form_required_marker', array('element' => $element)) : '';

  $title = filter_xss_admin($element['#title']);

  $attributes = array();
  // Style the label as class option to display inline with the element.
  if ($element['#title_display'] == 'after') {
    $attributes['class'] = 'option';
  }
  // Show label only to screen readers to avoid disruption in visual flows.
  elseif ($element['#title_display'] == 'invisible') {
    $attributes['class'] = 'element-invisible';
  }

  if (!empty($element['#id'])) {
    $attributes['for'] = $element['#id'];
  }

  // NEW CODE HERE
  $label_class = 'label-for-' . $element['#id'];
  $attributes['class'] = isset($attributes['class']) ? $attributes['class'] . ' ' . $label_class : $label_class;

  // The leading whitespace helps visually separate fields from inline labels.
  return ' <label' . drupal_attributes($attributes) . '>' . $t('!title !required', array('!title' => $title, '!required' => $required)) . "</label>\n";
}

Once you put that code in your theme's template.php file and clear the cache, you'll be able to target the label with CSS like so:

form#webform_client_form_3 label.label-for-edit-field-name