Як я можу додати клас до мітки?


9

Мені потрібно додати ім'я класу до певних міток, створених API API Drupal, як це:

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

Якщо я використовую наступне, <textarea>отримує клас, але не мітку.

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

Я шукаю щось подібне, що додасть клас до <label>.


Ви також повинні врахувати, якщо ви вже не можете націлити на цю мітку поля CSS, використовуючи клас батьківського контейнера для імені поля, наприклад.field-name-field-myfield label{ color:red; }
David Thomas

Відповіді:


5

Не можна встановити клас тегу мітки елемента форми за допомогою властивостей API Form. Однак ви можете встановити префікс і суфікс, щоб обернути елемент (label + textarea) і використовувати якийсь вкладений селектор CSS для виконання того, що ви намагаєтеся зробити.

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

і в CSS ви можете вибрати тег мітки таким чином:

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

Не гідне рішення, але я зазвичай так роблю, і я бачив, як це роблять інші. #attributesпризначений для самого елемента введення, тож правильно ваш код додає myClassклас до textarea.


6

У цій публікації на StackOverflow йдеться про те, що API Drupal Form не підтримує додавання класів до міток, але він містить гідний спосіб вирішення:

Натомість ви можете націлити його за допомогою класу обгортки для поля та мітки:

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

Документація API для topic_form_element_label () показує, чому мітки неможливі (принаймні, не виходячи з коробки): масив атрибутів ініціалізується у тематичній функції та заповнюється лише двома додатковими класами ('параметр' та 'елемент' -невидимий ').

Отже, це абсолютно неможливо? Насправді я думаю, що це можна зробити, але мушу додати, що я сам цього не пробував. Ви можете спробувати:

  • Додайте нове #label_attributesвластивість до деяких (або всіх) елементів форм, використовуючи прив'язку_element_info_alter () у спеціальному модулі;
  • Замініть topic_form_element_label () і змусьте його об'єднати $attributesмасив зі значенням $element['#label_attributes'].

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


Через часові обмеження я піду для більш легкого рішення, запропонованого Айшем К. Це здається хорошим рішенням, але, можливо, це допоможе комусь іншому. +1
Шон

Плюс 1 для згадування тематичної функції theme_form_element_label ()
Ідеограма

Обхідні шляхи: якщо вимога JS на сайті прийнятна, налаштування DOM, мабуть, найлегше. Якщо ні, іншим (середнім) способом було б видалити '#title'або встановити, '#title_display' => 'invisible'а потім просто зробити '#suffix' => '<label for="TheElementId" class="option">Display This Text</label>'. Це призводить до того, що він з'являється поза обгорткою, яку <div>Drupal використовує для своїх елементів введення форми, але правило CSS може зробити так, щоб воно виглядало не інакше.
SeldomNeedy

3

У Drupal 8, зробіть це просто, додавши у файл 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']
    );
  }
}

і додайте #label_attributes для створення форми:

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

2

Розкриваючи відповідь Айше, я включив приклад використання такого коду. Хоча відповідь marvangend набагато більше Drupalesk, це багато копати для дуже простого результату. Збереження специфічних елементів форми та CSS у поєднанні із зазначеною формою є загальним випадком використання, що дозволяє нам орієнтуватися та діяти на внутрішніх елементах - це трохи більш конкретно.

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. Цей модуль постачається з великою кількістю файлів шаблонів для налаштування полів. Відредагуйте поле, якому ви хочете надати унікальний клас, і змініть розмітку обгортки на щось відповідне для вас. Після цього знайдіть відповідний файл шаблону в модулі та скопіюйте його на свої сайти / усі / теми / THEME_NAME.

До цього

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

Після

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

Додавши текст <?php print $label; ?>, він друкує назву поля як класу, що дозволяє націлювати всі мітки поля окремо. Я сподіваюся, що це допомагає комусь іншому!


0

Це брудно, але ви можете додати HTML до властивості "# title":

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

Я сам здивований, що це працює. Я думаю, що Drupal відфільтрує це, але ні. Отже, ви можете обернути етикетку іншим класом:

<label for="edit-m-vernacularname" class="inline"><span title="HELP!">Common name
</span> </label>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.