ラベルにクラスを追加するにはどうすればよいですか?


8

次のように、DrupalのフォームAPIによって作成された特定のラベルにクラス名を追加する必要があります。

$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

Form APIのプロパティを使用して、フォーム要素のラベルタグにクラスを設定することはできません。ただし、要素(ラベル+テキストエリア)をラップするようにプレフィックスとサフィックスを設定し、ネストされた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に関するこの投稿では、DrupalフォームAPIはラベルへのクラスの追加をサポートしていませんが、適切な回避策が含まれています:

代わりに、フィールドとラベルのラッパークラスを使用してターゲットにすることができます。

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

theme_form_element_label()のAPIドキュメントは、ラベルが不可能である理由を示しています(少なくともすぐに使用できるわけではありません)。attributes配列は、theme関数で初期化され、2つのオプションクラス( 'option'と 'element -invisible ')。

それで、それは完全に不可能ですか?実際、それは可能だと思いますが、私はこれを自分で試したことがないことを付け加えなければなりません。あなたがしようとすることができます:

  • カスタムモジュールのhook_element_info_alter()#label_attributesを使用して、一部(またはすべて)のフォーム要素に新しいプロパティを追加します。
  • theme_form_element_label()をオーバーライドして、$attributes配列にの値をマージします$element['#label_attributes']

これを試してみる場合は、うまくいったかどうかをお知らせください。


時間の制約があるため、Ayesh Kによって提案されたより簡単な解決策を選びます。これは良い解決策のように見えますが、他の誰かを助けるかもしれません。+1
Shawn

プラス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 2016年

2

Ayeshの答えを拡張して、そのようなコードの使用例を含めました。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;
  }
}

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モジュールを使用してこれを達成する比較的簡単な方法を見つけました。このモジュールには、フィールドをカスタマイズするための多数のテンプレートファイルが付属しています。一意のクラスを付与するフィールドを編集し、ラッパーマークアップを適切なものに変更します。その後、モジュール内で対応するテンプレートファイルを見つけて、sites / 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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.