Bagaimana saya bisa menambahkan kelas ke label?


8

Saya perlu menambahkan nama kelas ke label tertentu yang dibuat oleh API bentuk Drupal seperti ini:

$form['name'] => array(
  '#type' => 'textfield',
  '#title' => 'Prénom'
);

Jika saya menggunakan yang berikut ini, <textarea>mendapat kelas, tetapi tidak label.

$form['name']['#attributes']['class'] = array('myClass');

Saya mencari sesuatu yang serupa yang akan menambah kelas ke <label>.


Anda juga harus mempertimbangkan apakah Anda belum dapat menargetkan label bidang itu dengan CSS menggunakan kelas wadah induk untuk nama bidang, misalnya.field-name-field-myfield label{ color:red; }
David Thomas

Jawaban:


6

Anda tidak bisa menetapkan kelas ke tag label elemen form menggunakan properti Form API. Namun, Anda dapat mengatur awalan dan akhiran untuk membungkus elemen (label + textarea) dan menggunakan beberapa pemilih CSS bersarang untuk mencapai apa yang Anda coba lakukan.

$form['name'] => array(
  '#type' => 'textfield',
  '#title' => 'Prénom'
  '#prefix' => '<div class="myClass">',
  '#suffix' => '</div>'
);

dan di CSS, Anda dapat memilih tag label seperti ini:

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

Bukan solusi yang layak tetapi itulah cara saya biasanya melakukan ini, dan telah melihat orang lain melakukannya. #attributesadalah untuk elemen input itu sendiri sehingga benar kode Anda menambahkan myClasskelas ke textarea.


7

Ini posting di StackOverflow mengatakan bahwa Drupal Formulir API tidak mendukung penambahan kelas untuk label, tetapi tidak mengandung solusi yang layak:

Alih-alih, Anda bisa menargetkannya menggunakan kelas pembungkus untuk bidang dan label:

.form-item-field-foo label {
  /* CSS here */
}

Dokumentasi API untuk theme_form_element_label () menunjukkan mengapa label tidak mungkin (setidaknya tidak out-of-the-box): array atribut diinisialisasi dalam fungsi tema dan diisi dengan hanya dua kelas opsional ('opsi' dan 'elemen -tidak terlihat ').

Jadi, apakah ini sepenuhnya mustahil? Sebenarnya, saya pikir itu bisa dilakukan, tetapi saya harus menambahkan bahwa saya belum mencoba ini sendiri. Anda dapat mencoba untuk:

  • Tambahkan #label_attributesproperti baru ke beberapa (atau semua) elemen formulir menggunakan hook_element_info_alter () dalam modul khusus;
  • Override theme_form_element_label () dan buat itu menggabungkan $attributesarray dengan nilai $element['#label_attributes'].

Jika Anda akan mencoba ini, beri tahu kami jika berhasil.


Karena keterbatasan waktu, saya akan mencari solusi yang lebih mudah yang diusulkan oleh Ayesh K. Ini sepertinya solusi yang baik, mungkin dapat membantu orang lain. +1
Shawn

Plus 1 untuk menyebutkan fungsi theme_form_element_label ()
Ideogram

Penanganan masalah: jika memerlukan JS di situs dapat diterima, mengutak-atik DOM mungkin paling mudah. Jika tidak, cara (berarti) lain adalah dengan menghapus '#title'atau mengatur '#title_display' => 'invisible'dan kemudian lakukan '#suffix' => '<label for="TheElementId" class="option">Display This Text</label>'. Itu menyebabkannya muncul di luar pembungkus yang <div>digunakan Drupal untuk elemen input bentuknya, tetapi aturan CSS bisa membuatnya terlihat tidak berbeda.
SeldomNeedy

2

Memperluas jawaban Ayesh, saya telah menyertakan contoh kasus penggunaan untuk kode tersebut. Sementara jawaban marvangend jauh lebih Drupalesk, banyak menggali untuk hasil yang sangat sederhana. Menyimpan elemen khusus bentuk & CSS yang dibundel dengan formulir tersebut adalah kasus penggunaan umum, memungkinkan kita untuk menargetkan & bertindak pada elemen dalam adalah sedikit lebih spesifik.

http://legomenon.io/article/drupal-7-adding-form-placeholder-attributes

function mymodule_form_alter(&$form, $form_state, $form_id) {
  switch ($form_id) {
    // Waterfall.
    case 'webform_client_form_16':
    case 'webform_client_form_51':
    case 'webform_client_form_64':
    case 'webform_client_form_78':
      $exclude = array('select', 'radios', 'checkboxes', 'managed_file');
      foreach ($form['submitted'] as $name => $component) {
        if (!in_array($component['#type'], $exclude) && $name != '#tree') {
          $form['submitted'][$name]['#prefix'] = '<span class= "label-invisible">';
          $form['submitted'][$name]['#suffix'] = '</span>';
          $form['submitted'][$name]['#attributes']['placeholder'] = $component['#title'];
        }
      }
      $form['#attached']['css'] = array(
        drupal_get_path('module', 'mymodule') . '/css/mymodule.form.css',
      );
    break;
  }
}

2

Pada Drupal 8, lakukan itu hanya dengan menambahkan file your_module.module

function your_module_preprocess_form_element(&$variables) {

  $element = $variables['element'];
  if (isset($element['#label_attributes'])) {
    $variables['label']['#attributes'] = array_merge(
      $variables['attributes'],
      $element['#label_attributes']
    );
  }
}

dan tambahkan #label_attributes pada pembuatan formulir:

$form['some_field'] = [
  [...]
  '#label_attributes' => [
    'some_attr' => 'some_value',
  ]
]

0

Saya menemukan cara yang relatif mudah untuk melakukannya menggunakan modul Pagar D7. Modul ini dilengkapi dengan banyak file templat untuk menyesuaikan bidang. Edit bidang yang ingin Anda berikan kelas uniknya dan ubah markup pembungkus menjadi sesuatu yang relevan untuk Anda. Setelah itu, cari file templat yang sesuai dalam modul dan salin ke situs / all / themes / THEME_NAME Anda.

Sebelum

<span class="field-label"<?php print $title_attributes; ?>>
  <?php print $label; ?>:
</span>

Setelah

<span class="<?php print $label; ?> field-label"<?php print $title_attributes; ?>>
  <?php print $label; ?>:
</span>

Dengan menambahkan <?php print $label; ?>, ia mencetak nama bidang sebagai kelas, memungkinkan Anda untuk menargetkan semua label bidang secara individual. Saya harap ini membantu orang lain!


0

Itu kotor, tetapi Anda dapat menambahkan HTML ke properti '# title':

$form['some_element'] = array(
  '#type'          => 'textfield',
  '#title'         => '<span title="HELP!">'.t($subchildlabel).'</span>',
  '#default_value' => 
) 
 
);

Saya sendiri kaget ternyata berhasil. Saya pikir Drupal akan menyaring ini, tetapi tidak. Jadi, Anda dapat membungkus label dengan kelas lain:

<label for="edit-m-vernacularname" class="inline"><span title="HELP!">Common name
</span> </label>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.