Wie kann ich einem Label eine Klasse hinzufügen?

8

Ich muss bestimmten Beschriftungen, die mit der Formular-API von Drupal erstellt wurden, einen Klassennamen hinzufügen:

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

Wenn ich Folgendes verwende, <textarea>erhält der eine Klasse, aber nicht das Label.

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

Ich suche nach etwas Ähnlichem, das dem eine Klasse hinzufügt <label>.

Shawn
quelle
Sie sollten auch überlegen, ob Sie diese Feldbezeichnung nicht bereits mit CSS unter Verwendung der übergeordneten Containerklasse für den Feldnamen ausrichten können, z. B..field-name-field-myfield label{ color:red; }
David Thomas

Antworten:

6

Sie können mithilfe der Eigenschaften der Formular-API keine Klasse für das Beschriftungs-Tag des Formularelements festlegen. Sie können jedoch ein Präfix und ein Suffix festlegen, um das Element (Beschriftung + Textbereich) zu umschließen, und einen verschachtelten CSS-Selektor verwenden, um das zu erreichen, was Sie versuchen.

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

und im CSS können Sie das Label-Tag wie folgt auswählen:

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

Keine anständige Lösung, aber so mache ich das normalerweise und habe andere gesehen. #attributesist für das Eingabeelement selbst, also ist es richtig, dass Ihr Code die myClassKlasse zum hinzufügt textarea.

AyeshK
quelle
7

In diesem Beitrag zu StackOverflow heißt es, dass die Drupal Form-API das Hinzufügen von Klassen zu Labels nicht unterstützt, jedoch eine angemessene Problemumgehung enthält:

Stattdessen können Sie es mithilfe der Wrapper-Klasse für das Feld und die Bezeichnung als Ziel festlegen:

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

Die API-Dokumentation für theme_form_element_label () zeigt, warum Beschriftungen nicht möglich sind (zumindest nicht sofort einsatzbereit ): Das Attributarray wird in der Designfunktion initialisiert und mit nur zwei optionalen Klassen ('Option' und 'Element' gefüllt -unsichtbar').

Ist es also völlig unmöglich? Tatsächlich denke ich, dass dies möglich ist, aber ich muss hinzufügen, dass ich dies nicht selbst versucht habe. Sie könnten versuchen:

  • Fügen Sie #label_attributeseinigen (oder allen) Formularelementen mithilfe von hook_element_info_alter () in einem benutzerdefinierten Modul eine neue Eigenschaft hinzu .
  • Überschreiben Sie theme_form_element_label () und führen Sie das $attributesArray mit dem Wert von zusammen $element['#label_attributes'].

Wenn Sie es versuchen möchten, teilen Sie uns bitte mit, ob es funktioniert hat.

Marcvangend
quelle
Aus Zeitgründen werde ich mich für die von Ayesh K vorgeschlagene einfachere Lösung entscheiden. Dies scheint jedoch eine gute Lösung zu sein, die möglicherweise jemand anderem hilft. +1
Shawn
Plus 1 für die Erwähnung der Theme-Funktion theme_form_element_label ()
Ideogramm
Problemumgehungen: Wenn es akzeptabel ist, JS auf der Site zu benötigen, ist es wahrscheinlich am einfachsten, das DOM zu optimieren. Wenn nicht, wäre ein anderer (mittlerer) Weg, zu entfernen '#title'oder einzustellen '#title_display' => 'invisible'und dann einfach zu tun '#suffix' => '<label for="TheElementId" class="option">Display This Text</label>'. Dies führt dazu, dass es außerhalb des Wrappers <div>angezeigt wird, den Drupal für seine Formulareingabeelemente verwendet. Eine CSS-Regel kann jedoch dazu führen, dass es nicht anders aussieht.
Selten Needy
2

Um Ayeshs Antwort zu erweitern, habe ich einen Anwendungsbeispiel für einen solchen Code beigefügt. Während Marvangends Antwort viel mehr Drupalesk ist, wird viel nach einem sehr einfachen Ergebnis gesucht. Es ist der allgemeine Anwendungsfall, formularspezifische Elemente und CSS mit diesem Formular zu bündeln. Es ist ein kleines bisschen spezifischer, wenn wir auf innere Elemente zielen und darauf reagieren können.

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;
  }
}
Nicolas
quelle
2

Führen Sie dies in Drupal 8 einfach durch Hinzufügen der Datei your_module.module durch

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

und fügen Sie die #label_attributes bei der Formularerstellung hinzu:

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

Ich habe einen relativ einfachen Weg gefunden, dies mit dem Fences D7-Modul zu erreichen. Dieses Modul enthält viele Vorlagendateien zum Anpassen der Felder. Bearbeiten Sie das Feld, dem Sie eine eindeutige Klasse zuweisen möchten, und ändern Sie das Wrapper-Markup in ein für Sie relevantes Feld. Suchen Sie danach die entsprechende Vorlagendatei im Modul und kopieren Sie sie in Ihre sites / all / theme / THEME_NAME.

Vor

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

Nach dem

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

Durch Hinzufügen <?php print $label; ?>wird der Name des Felds als Klasse gedruckt, sodass Sie alle Feldbezeichnungen einzeln ausrichten können. Ich hoffe das hilft jemand anderem!

sen2008
quelle
0

Es ist schmutzig, aber Sie können der '# title'-Eigenschaft HTML hinzufügen:

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

Ich bin selbst überrascht, dass es funktioniert. Ich würde denken, Drupal würde das herausfiltern, aber nein. Sie können das Etikett also mit einer anderen Klasse umschließen:

<label for="edit-m-vernacularname" class="inline"><span title="HELP!">Common name
</span> </label>
Ideogramm
quelle