Ubah kelas pada pembungkus div dari elemen formulir

Apakah ada cara untuk menambah atau mengubah kelas ke pembungkus formulir (div's) menggunakan formulir api?

Atau apakah itu hanya dilakukan dengan fungsi tema?

Jika demikian, fungsi tema mana yang digunakan untuk mengubahnya?

Anda dapat mengganti secara theme_form_element()normal jika Anda ingin mengubah tema secara global. Jika Anda tertarik untuk memodifikasi hanya satu elemen formulir tertentu maka saya menyadari beberapa pilihan.

1. Anda bisa mendaftarkan fungsi tema baru untuk tipe elemen elemen tertentu yang Anda minati (mis. Bidang teks). Anda kemudian membuat fungsi tema ini (berdasarkan aslinya, mis. theme_textfield()) Tetapi itu tidak memanggil theme('form_element', ...)pada akhirnya (Anda bisa menangani pembungkus dan elemen dalam fungsi satu tema, atau Anda bisa membuat fungsi tema pembungkus terpisah dan gunakan itu). Akhirnya Anda menambahkan #themeproperti ke elemen formulir tertentu, dan elemen itu akan mendapatkan tema khusus Anda.

2. Anda dapat membuat file template bernama form_element.tpl.phpyang hanya memiliki perilaku default theme_form_element()dan kemudian gunakan hook_preprocess_form_element()untuk menambahkan saran template. Kemudian Anda membuat templat baru yang sesuai dengan saran. Anda sering mendengar orang-orang mengatakan bahwa template sedikit lebih lambat daripada fungsi, dan untuk panggilan tema yang sering digunakan seperti itu saya dapat membayangkan orang-orang menolak untuk menggunakan template. Saya belum pernah melakukan pengukuran untuk ini sendiri. Selain itu, Anda perlu memiliki konteks yang cukup pada tahap persiapan untuk dapat membuat saran.

Saya tahu ini adalah utas yang sangat lama, tetapi saya telah belajar cara mengubah elemen formulir dan menambahkan kelas. Saya sempat membuat modul khusus:

function yourtheme_custom_form_alter(&$form, &$form_state, $form_id) {
 case'webform_number_whatever':
   _yourtheme_form_add_wrapper($form['submitted']['yourfieldhere'], array('form-field-some-style', 'not-label', 'whatever-other-styles-you-want'));
 break;
}

function _yourtheme_form_add_wrapper(&$element, $classes = array(), $type = array('form-item', 'form-type-textfield'), $removeTitle = FALSE){
  $element['#prefix'] = '<div class="' . implode(" ", $classes) . '"><div class="' . implode(" ", $type) . '">';
  $element['#suffix'] = '</div></div>';
}

Untuk Mengubah "wrapper" Anda perlu mengganti form_element. Pada dasarnya semua elemen formulir di-render dengan tema theme_form_element($element,$value);form_element (file form.inc)

Jadi untuk mengubah cara ini membuat elemen formulir Anda, Anda cukup menyalin fungsi itu ke folder template.php Anda dan ganti namanya menjadi: phptemplate_form_element($element,$value)

sekarang Anda dapat membuat perubahan apa pun dan itu akan digunakan alih-alih fungsi aslinya

1. Salin theme_form_element($element,$value);dari form.inc
2. Rekatkan ke (tema Anda) template.php
3. ganti namanya menjadi: phptemplate_form_element($element,$value)
4. hapus semua cache tema
5. buat perubahan apa pun yang Anda inginkan dan akan digunakan.

Anda dapat menggunakan properti wrapper_attributes .

$form['example'] = [
  '#type' => 'textfield',
  '#title' => $this->t('Example'),
  '#wrapper_attributes' => ['class' => ['wrapper-class']],
];

Yang penting, theme_form_element hanya akan memodifikasi div pembungkus induk langsung dan ini mungkin bukan target yang dimaksudkan untuk efek CSS.

[Meskipun tidak terprogram, jika seseorang hanya ingin menerapkan kelas ke pembungkus atas bidang simpul (pembungkusnya, pembungkusnya, pembungkusnya) saya dapat menggunakan modul "Kelompok bidang" dengan memilih "Kelola Bidang" untuk jenis konten tertentu dan pilih "Tambah grup baru" sebagai DIV sederhana. Kemudian label dapat dihapus dan kelas yang diinginkan ditugaskan ke pembungkus tambahan (tapi sekarang kami memiliki pembungkus lebih banyak) - dengan bersarang tanpa batas]

Anda bisa menggunakannya

'#prefix' => '<div class="new_class">', '#suffix' => '</div>'

dan ini akan membungkusnya

Jadikan atribut wrapper dapat dikonfigurasi!

Buat fungsi tema elemen bentuk Anda sendiri di tema Anda ... sites/all/themes/MY_THEME/theme/form-element.theme.inc

function my_theme_form_element($variables) {
  $element = &$variables['element'];

  $attributes = isset($element['#my_theme_wrapper_attributes']) ?
    $element['#my_theme_wrapper_attributes'] : array();

  ...

  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";

  ...
}

Maka Anda dapat melakukan hal-hal seperti ini ...

function my_module_form_alter(&$form, &$form_state, $form_id) {
  $form['account']['mail']['#my_theme_wrapper_attributes']['class'][] = 'form-field--inline';
}

Ada kasus datang dalam yang tidak #prefix/#suffixatau #attributes => array('class')memberikan hasil yang diinginkan. Kasus khusus saya adalah menambahkan kelas ke div ajax-wrapper di sekitar elemen managed_file. #prefix/#suffixmenciptakan wadah baru dan #attributes/'class'memodifikasi kelas elemen dalam, bukan yang terluar.

Div terluar normal adalah adil

<div id="edit-doc1--XX-ajax-wrapper">

yang sulit ditargetkan di CSS. Saya dapat menargetkan [id^="edit-doc"]atau [id$="-ajax-wrapper"]tetapi kedua target ini lebih dari sekedar elemen yang saya inginkan.

Solusi yang saya temukan adalah menambahkan #processelemen ke formulir dan memanipulasi kode elemen secara manual. Berikut #processatribut yang ditambahkan ke deklarasi item formulir:

$form['doc1'] = array(
  '#type' => 'managed_file',
  '#process' => array('mymodule_managed_file_process'),
);

Dan inilah mymodule_managed_file_process()fungsinya:

function mymodule_managed_file_process($element, &$form_state, $form) {

  // Call the original function to perform its processing.
  $element = file_managed_file_process($element, $form_state, $form);

  // Add our own class for theming.
  $element['#prefix'] = str_replace(
    'id=',
    'class="managed-file-wrapper" id=',
    $element['#prefix']
  );

  return $element;
}

Mengandalkan subtitusi string tidak terlalu portabel, jadi gunakan str_replacedengan risiko Anda sendiri. Namun kode ini, memang mengubah DIV terluar untuk menambahkan kelas yang diperlukan:

<div class="managed-file-wrapper" id="edit-doc1--XX-ajax-wrapper">

<?php
    $form['#attributes'] = array('class' => 'your-class-name');
?> 

Anda bisa menggunakan cara di atas untuk menambahkan kelas pada elemen formulir.