Bagaimana cara menambahkan kelas CSS ke label formulir?

Saya ingin menambahkan kelas CSS ke label pada halaman yang menggunakan Drupal 8 Form API. Saya tidak dapat menemukan referensi online tentang cara menerapkannya. Saya telah menggunakan solusi berikut, tetapi menghasilkan beberapa hasil aneh.

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>',
    ) ;

dan HTML yang diberikan adalah:

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

Tidak hanya pernyataan div di tempat yang salah tetapi juga diberikan dua kali.

Saya telah menemukan posting dari beberapa tahun yang lalu yang menunjukkan ini tidak mungkin, tetapi saya berharap sejak itu, dan dengan D8, itu telah diperbaiki. Saya tidak ingin melakukannya dengan awalan / akhiran, tetapi sebagai elemen array terpisah.

PS: situs ini adalah Drupal 8.0.0-rc2

Saya tahu ini adalah utas lama, tetapi bagi siapa pun Googling.

Petunjuk untuk ini ada di template_preprocess_form_element().

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

#label_attributes adalah array atribut standar, sehingga sangat mudah untuk mengatur kelas ['class' => ['my-class', 'other-class']]

#title_display mengambil 3 nilai:

• sebelumnya: Label adalah output sebelum elemen. Ini standarnya.

• after: Label adalah output setelah elemen. Misalnya, ini digunakan untuk radio dan elemen kotak centang #type.

• invisible: Label sangat penting bagi pembaca layar untuk memungkinkan mereka menavigasi dengan benar melalui formulir tetapi dapat mengganggu secara visual. Properti ini menyembunyikan label untuk semua orang kecuali pembaca layar.
• atribut: Mengatur atribut judul pada elemen untuk membuat tooltip tetapi tidak menghasilkan elemen label. Ini hanya didukung untuk kotak centang dan radio

Saya baru saja memeriksa ini dan saya tidak percaya mungkin untuk menambahkan kelas langsung ke elemen label.

Seperti yang paling mungkin Anda ketahui, kelas biasanya ditambahkan dengan #attributes sebagai berikut:

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

Namun, saya baru saja menguji dan #attributes tidak menambahkan kelas ke elemen Label.

Apakah mungkin bagi Anda untuk menambahkan elemen bentuk pembungkus, memberikan kelas untuk itu dan kemudian gaya label Anda berdasarkan fakta bahwa itu adalah anak dari elemen pembungkus? Seperti ini:

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

Sekarang, ini akan merender bidang teks contoh (dan labelnya) di dalam elemen DIV yang memiliki kelas Anda, yaitu Anda dapat membuat gaya yang Anda beri label:

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

Ada beberapa opsi untuk melakukan ini di Drupal> = 8.0.0. Ini semua benar-benar berputar di sekitar template menimpa dalam sebuah tema, tetapi sebuah modul harus dapat mengimplementasikan kait preproses proses yang ditentukan oleh modul lain

1. Opsi paling sederhana, tetapi non-dinamis adalah mengganti form-element-label.html.twig secara langsung. Ini bisa bekerja jika semua label mendapatkan form-controlkelas.
2. Mengikuti garis-garis ini, menerapkan template_preprocess_form_element_label akan memungkinkan Anda untuk melakukan hal yang sama dan menambahkan form-controlkelas ke atribut tanpa mengabaikan template.
3. Anda juga bisa menerapkan template_preprocess_form_element , dan menambahkan logika untuk tidak menimpa $variables['label'], tetapi mengambil nilainya dari beberapa kunci yang ditentukan pada array elemen formulir.

Untuk tombol kirim, kami dapat menambahkan kelas seperti di bawah ini:

$ form ['action'] ['submit'] ['# atribut'] ['class'] [] = 'use-ajax-submit';

Opsi terbersih yang saya temukan adalah sesuai saran # 3 mradcliffe di atas. Misalnya dalam definisi formulir Anda -

$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'
        ]
    ];

Kemudian dalam modul khusus, implementasikan hook_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'];
    }
}

Catatan ini akan menggantikan kelas label apa pun yang ingin ditambahkan Drupal. Dalam kasus saya itu tidak masalah. Kode di atas dapat diubah untuk mencegah hal ini jika perlu.

Untuk menyelesaikan jawaban @Nate, jika Anda ingin menambahkan kelas tesis ke formulir yang ada, Anda bisa melakukannya di hook_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'];
}

Dan kemudian gunakan hook_preprocess_form_element untuk bidang teks atau hook_preprocess_fieldset untuk bidang radio:

/**
 * 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);
    }
  }
}