Как я могу добавить класс на ярлык?


8

Мне нужно добавить имя класса для определенных меток, созданных 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

Ответы:


6

Вы не можете установить класс для тега label элемента формы, используя свойства Form API. Однако вы можете установить префикс и суффикс, чтобы обернуть элемент (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.


7

В этом посте о StackOverflow говорится, что API-интерфейс Drupal Form не поддерживает добавление классов к меткам, но содержит достойный обходной путь:

Вместо этого вы можете настроить таргетинг, используя класс-оболочку для поля и метки:

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

Документация API для theme_form_element_label () показывает, почему метки невозможны (по крайней мере, не из коробки): массив атрибутов инициализируется в функции темы и заполняется двумя необязательными классами (option и element) незримые ').

Итак, это совершенно невозможно? На самом деле, я думаю, что это можно сделать, но я должен добавить, что я сам не пробовал. Вы можете попробовать:

  • Добавьте новое #label_attributesсвойство к некоторым (или всем) элементам формы, используя hook_element_info_alter () в пользовательском модуле;
  • Переопределите theme_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

2

Расширяя ответ Айеша, я включил пример использования такого кода. В то время как ответ Марванендга гораздо больше, чем 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;
  }
}

2

На 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',
  ]
]

0

Я нашел относительно простой способ сделать это с помощью модуля Fences D7. Этот модуль поставляется с большим количеством файлов шаблонов для настройки полей. Отредактируйте поле, которому вы хотите присвоить уникальный класс, и измените разметку оболочки на что-то подходящее для вас. После этого найдите соответствующий файл шаблона в модуле и скопируйте его в ваши сайты / all / themes / 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.