Bir etikete nasıl sınıf ekleyebilirim?


9

Böyle Drupal'ın form API'sı tarafından oluşturulan belirli etiketlere bir sınıf adı eklemeniz gerekir:

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

Aşağıdakileri kullanırsam, <textarea>bir sınıf alır, ancak etiketi alır.

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

Ben bir sınıf ekleyecek benzer bir şey arıyorum <label>.


Alan adı için üst kapsayıcı sınıfını kullanarak bu alan etiketini CSS ile zaten hedefleyemiyorsanız da düşünmelisiniz, örn..field-name-field-myfield label{ color:red; }
David Thomas

Yanıtlar:


5

Form API'sinin özelliklerini kullanarak form öğesinin etiket etiketine bir sınıf ayarlayamazsınız. Bununla birlikte, öğeyi sarmak için bir önek ve bir sonek (etiket + textarea) ayarlayabilir ve yapmaya çalıştığınız şeyi gerçekleştirmek için bazı iç içe CSS seçici kullanabilirsiniz.

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

ve CSS'de etiket etiketini şu şekilde seçebilirsiniz:

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

İyi bir çözüm değil ama bunu genellikle böyle yapıyorum ve başkalarının yaptığını gördüm. #attributesgiriş öğesinin kendisi içindir, bu nedenle kodunuz myClasssınıfı ekler textarea.


6

StackOverflow'daki bu yazı , Drupal Form API'sının etiketlere sınıf eklemeyi desteklemediğini, ancak iyi bir geçici çözüm içerdiğini söylüyor:

Bunun yerine, alan ve etiket için sarmalayıcı sınıfını kullanarak hedefleyebilirsiniz:

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

Theme_form_element_label () için API belgeleri etiketlerin neden mümkün olmadığını gösterir (en azından kutudan çıkmaz): attributes dizisi tema işlevinde başlatılır ve yalnızca iki isteğe bağlı sınıf ('seçenek' ve 'öğesi ile doldurulur) -görünmez').

Peki, bu tamamen imkansız mı? Aslında, bunun yapılabileceğini düşünüyorum, ama bunu kendim denemediğimi eklemeliyim. Şunları deneyebilirsiniz:

  • Özel bir modülde hook_element_info_alter ()#label_attributes kullanarak bazı (veya tümü) form öğelerine yeni bir özellik ekleyin ;
  • Theme_form_element_label () geçersiz kılmak ve bu birleştirme yapmak $attributesdeğeri ile dizi $element['#label_attributes'].

Bunu deneyecekseniz, çalışıp çalışmadığını lütfen bize bildirin.


Zaman kısıtlamaları nedeniyle, Ayesh K tarafından önerilen daha kolay çözüm için gideceğim. Bu iyi bir çözüm gibi görünüyor, ancak başka birine yardımcı olabilir. +1
Shawn

Theme_form_element_label () tema işlevinden bahsetmek için Artı 1
Ideogram

Çözümler: Sitede JS gerektirilmesi kabul edilebilirse, DOM'u değiştirmek muhtemelen en kolay yoldur. Değilse, başka bir (ortalama) yol kaldırmak '#title'veya ayarlamak '#title_display' => 'invisible've daha sonra yapmak olacaktır '#suffix' => '<label for="TheElementId" class="option">Display This Text</label>'. Bu, Drupal'ın <div>form giriş öğeleri için kullandığı sarmalayıcı dışında görünmesine neden olur , ancak bir CSS kuralı farklı görünmemesine neden olabilir.
SeldomNeedy

3

Drupal 8'de bunu sadece_module.module dosyanıza ekleyerek yapın

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']
    );
  }
}

ve form oluşturma işlemine #label_attributes ekleyin:

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

2

Ayesh'in cevabına genişleyen bu kod için örnek bir kullanım örneği ekledim. Marvangend'in cevabı çok daha fazla Drupalesk olsa da, çok basit bir sonuç için çok fazla kazma. Forma özgü elemanların ve CSS'nin adı geçen formla birlikte tutulması genel kullanım durumudur, iç unsurları hedeflememize ve bu unsurlar üzerinde hareket etmemize izin vermek biraz daha spesifiktir.

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;
  }
}

0

Fences D7 modülünü kullanarak bunu başarmanın nispeten kolay bir yolunu buldum. Bu modül alanları özelleştirmek için birçok şablon dosyası ile birlikte gelir. Benzersiz bir sınıf vermek istediğiniz alanı düzenleyin ve sarmalayıcı işaretlemesini sizin için alakalı bir şeyle değiştirin. Bundan sonra, modül içindeki ilgili şablon dosyasını bulun ve sitelerinize / all / themes / THEME_NAME klasörüne kopyalayın.

Önce

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

Sonra

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

Ekleyerek <?php print $label; ?>, alanın adını sınıf olarak yazdırır ve tüm alan etiketlerini ayrı ayrı hedeflemenizi sağlar. Umarım bunun bir başkasına yardımı olur!


0

Kirli, ancak '# title' özelliğine HTML ekleyebilirsiniz:

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

Çalıştığım için kendime şaşırdım. Drupal'ın bunu filtreleyeceğini düşünürdüm, ama hayır. Böylece, etiketi başka bir sınıfla sarabilirsiniz:

<label for="edit-m-vernacularname" class="inline"><span title="HELP!">Common name
</span> </label>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.