Як додати клас CSS до мітки форми?

Я хочу додати клас CSS до мітки на сторінці, що використовує API формами Drupal 8. Мені не вдалося знайти в Інтернеті довідку про те, як це застосувати. Я використав наступне рішення, але це дає деякі дивні результати.

public function buildForm(array $form, FormStateInterface $form_state)
{
    $form['label1']  = array(
        '#type' => 'label',
        '#title' => $this->t('QUESTIONNAIRE'),
        '#id'         => 'lbl1',
        '#prefix'     => '<div class="caption1">',
        '#suffix'     => '</div>',
    ) ;

і наданий HTML:

<div class="caption1"><label for="lbl1" class="control-label">
<div class="caption1"></div>QUESTIONNAIRE
  </label>

Заява div не тільки знаходиться в неправильному місці, але й виводиться двічі.

Я кілька разів тому знайшов публікації, які показують, що це неможливо, але сподіваюся, що відтоді і з D8 це було виправлено. Я не хочу це робити з префіксом / суфіксом, але як окремий елемент масиву.

PS: цей сайт Drupal 8.0.0-rc2

Я знаю, що це стара тема, але для будь-кого Google.

Розгадка в цьому є в template_preprocess_form_element().

$element += [
    '#title_display' => 'before',
    '#wrapper_attributes' => [],
    '#label_attributes' => [],
  ];

#label_attributes це стандартний масив атрибутів, тому дуже легко встановити клас ['class' => ['my-class', 'other-class']]

#title_display приймає 3 значення:

• раніше: Мітка виводиться перед елементом. Це за замовчуванням.

• після: Мітка виводиться після елемента. Наприклад, це використовується для елементів радіо та галочки #type.

• невидимий: Мітки є критичними для читачів екрану, щоб вони могли правильно переходити по формах, але можуть бути відволікаючими візуально. Ця властивість приховує етикетку для всіх, крім читачів екрана.
• атрибут: Встановіть атрибут заголовка на елементі для створення підказки, але не виведіть елемент мітки. Це підтримується лише для прапорців і радіо

Я щойно перевірив це, і не вважаю, що можливо додати клас безпосередньо до елемента мітки.

Як ви, напевно, знаєте, класи зазвичай додаються з #attributes наступним чином:

 $form['foo'] = array(
  '#type' => 'textfield',
  '#title' => 'Foo',
  '#attributes' => array('class' => array('first-class', 'second-class')),
);

Однак я лише тестував і #attributes не додає класів до елемента Label.

Чи можна вам додати елемент форми для обгортки, дати йому клас, а потім стилізувати свою мітку виходячи з того, що вона є дочірнім елементом обгортки? Подобається це:

$form['container'] = array(
  '#type' => 'container',
  '#attributes' => array('class' => array('your-class')),
);
$form['container']['foo'] = array(
  '#type' => 'textfield',
  '#title' => 'Foo',
);

Тепер це візуалізує приклад текстового поля (та його мітки) всередині елемента DIV, у якому є ваш клас, тобто ви можете розмістити стиль:

.your-class label {
  /* your CSS here */
}

У Drupal> = 8.0.0 це зробити кілька варіантів. Усі вони дійсно обертаються навколо зміни шаблону в темі, але модуль повинен мати можливість реалізувати гачки попередньої обробки шаблонів, визначені іншими модулями

1. Найпростіший, але нединамічний варіант - безпосередньо переоформити form-element-label.html.twig . Це може спрацювати, якщо всі мітки отримають form-controlклас.
2. Дотримуючись цих рядків, реалізація template_preprocess_form_element_label дозволить вам зробити те ж саме і додати form-controlклас до атрибутів, не змінюючи шаблон.
3. Ви також можете реалізувати template_preprocess_form_element та додати логіку, щоб не перезаписати $variables['label'], а взяти її значення з деякого визначеного ключа в масиві елементів форми.

Для кнопок подання ми можемо додати клас, як показано нижче:

$ form ['Actions'] ['submit'] ['# attributes'] ['class'] [] = 'use-ajax-submit';

Найпростіший варіант, який я знайшов, - це згідно із пропозицією №3 @ mradcliffe, наведеною вище. Наприклад у визначенні форми -

$form['distance'] = [
        '#type' => 'select',
        '#title' => 'Distance',
        '#required' => true,
        '#options' => [
            '10' => '10 Miles',
            '25' => '25 Miles',
            '50' => '50 Miles',
            '100' => '100 Miles'
        ],
        '#label_classes' => [
            'some-label-class'
        ]
    ];

Потім у користувальницькому модулі реалізуйте гачку_preprocess_form_element:

/**
* Implementation of hook_preprocess_form_element
* @param $variables
*/
function your_module_preprocess_form_element(&$variables)
{
    if(isset($variables['element']['#label_classes'])) {
        $variables['label']['#attributes']['class'] = $variables['element']['#label_classes'];
    }
}

Зверніть увагу, це скасує будь-які класи етикеток, які Drupal хоче додати. У моєму випадку це нормально. Код вище може бути змінений, щоб запобігти цьому, якщо це необхідно.

Щоб завершити @Nate відповідь, якщо ви хочете додати класи тез до вже наявної форми, ви можете це зробити в гачку_form_alter:

function your_module_form_alter(&$form, FormStateInterface &$form_state, $form_id)
{
    // for a textfield
    $form['distance']['widget'][0]['value']['#label_classes'] = ['some-label-class'];
    // for a radio field
    $form['country']['widget']['#label_classes'] = ['some-label-class'];
}

А потім використовуйте елемент_макро_пропроцес_форма_елемент для текстового поля або гачок_препроцес_фільд для радіополя:

/**
 * Implements hook_preprocess_hook().
 */
function your_module_preprocess_fieldset(&$variables)
{
  if(isset($variables['element']['#label_classes'])) {
    foreach ($variables['element']['#label_classes'] as $class) {
      $variables['legend']['attributes']->addClass($class);
    }
  }
}