CSSクラスをフォームラベルに追加するにはどうすればよいですか？

Drupal 8フォームAPIを使用しているページのラベルにCSSクラスを追加したいのですが。それを適用する方法についての参考文献をオンラインで見つけることができませんでした。次の回避策を使用しましたが、奇妙な結果が生じます。

public function buildForm(array $form, FormStateInterface $form_state)
{
    $form['label1']  = array(
        '#type' => 'label',
        '#title' => $this->t('QUESTIONNAIRE'),
        '#id'         => 'lbl1',
        '#prefix'     => '<div class="caption1">',
        '#suffix'     => '</div>',
    ) ;

レンダリングされるHTMLは次のとおりです。

<div class="caption1"><label for="lbl1" class="control-label">
<div class="caption1"></div>QUESTIONNAIRE
  </label>

divステートメントが間違った場所にあるだけでなく、2回レンダリングされます。

私は数年前にこれが不可能であることを示す投稿を見つけましたが、それ以降、D8で修正されたことを期待しています。接頭辞/接尾辞ではなく、個別の配列要素として実行したいと思います。

PS：このサイトはDrupal 8.0.0-rc2です

私はこれが古いスレッドであることを知っていますが、誰にとってもグーグルです。

この手がかりはにありtemplate_preprocess_form_element()ます。

$element += [
    '#title_display' => 'before',
    '#wrapper_attributes' => [],
    '#label_attributes' => [],
  ];

#label_attributes 標準の属性配列なので、クラスを簡単に設定できます ['class' => ['my-class', 'other-class']]

#title_display 3つの値を取ります。

• before：ラベルは要素の前に出力されます。これがデフォルトです。

• after：要素の後にラベルが出力されます。たとえば、これはラジオおよびチェックボックスの#type要素に使用されます。

• 非表示：ラベルは、スクリーンリーダーがフォームを適切にナビゲートできるようにするために重要ですが、視覚的に煩わしい場合があります。このプロパティは、スクリーンリーダー以外のすべてのユーザーに対してラベルを非表示にします。
• 属性：要素にタイトル属性を設定して、ツールチップを作成しますが、ラベル要素は出力しません。これはチェックボックスとラジオでのみサポートされています

これをチェックしたところ、ラベル要素に直接クラスを追加することができないと思います。

ご存知のように、クラスは通常、次のように#attributesで追加されます。

 $form['foo'] = array(
  '#type' => 'textfield',
  '#title' => 'Foo',
  '#attributes' => array('class' => array('first-class', 'second-class')),
);

ただし、テストしただけで、＃attributesはLabel要素にクラスを追加しません。

ラッパーフォーム要素を追加し、それにクラスを与え、ラッパー要素の子であるという事実に基づいてラベルをスタイルすることは可能ですか？このような：

$form['container'] = array(
  '#type' => 'container',
  '#attributes' => array('class' => array('your-class')),
);
$form['container']['foo'] = array(
  '#type' => 'textfield',
  '#title' => 'Foo',
);

これで、例のテキストフィールド（およびそのラベル）がyour-classを持つDIV要素内にレンダリングされます。つまり、ラベルをスタイルできます。

.your-class label {
  /* your CSS here */
}

Drupal> = 8.0.0でこれを行うにはいくつかのオプションがあります。これらはすべて、テーマのテンプレートオーバーライドを中心に展開しますが、モジュールは他のモジュールによって定義されたテンプレートの前処理フックを実装できる必要があります

1. 最も単純ですが動的ではないオプションは、form-element-label.html.twigを直接オーバーライドすることです。これは、すべてのラベルがform-controlクラスを取得する場合に機能します。
2. これらの行に沿って、template_preprocess_form_element_labelを実装すると、同じことを実行してform-control、テンプレートをオーバーライドせずに属性にクラスを追加できます。
3. また、template_preprocess_form_elementを実装して、overwriteしないようにロジックを追加し$variables['label']、その値をフォーム要素配列の定義済みキーから取得することもできます。

送信ボタンについては、以下のようなクラスを追加できます。

$ form ['actions'] ['submit'] ['＃attributes'] ['class'] [] = 'use-ajax-submit';

私が見つけた最もクリーンなオプションは、上記の@mradcliffeの＃3提案によるものです。例えばあなたのフォーム定義で-

$form['distance'] = [
        '#type' => 'select',
        '#title' => 'Distance',
        '#required' => true,
        '#options' => [
            '10' => '10 Miles',
            '25' => '25 Miles',
            '50' => '50 Miles',
            '100' => '100 Miles'
        ],
        '#label_classes' => [
            'some-label-class'
        ]
    ];

次に、カスタムモジュールでhook_preprocess_form_elementを実装します。

/**
* Implementation of hook_preprocess_form_element
* @param $variables
*/
function your_module_preprocess_form_element(&$variables)
{
    if(isset($variables['element']['#label_classes'])) {
        $variables['label']['#attributes']['class'] = $variables['element']['#label_classes'];
    }
}

これは、Drupalが追加したいラベルクラスをオーバーライドすることに注意してください。私の場合はそれで結構です。上記のコードは、必要に応じてこれを防ぐために変更できます。

@Nate回答を完了するために、これらのクラスを既存のフォームに追加する場合は、hook_form_alterで行うことができます。

function your_module_form_alter(&$form, FormStateInterface &$form_state, $form_id)
{
    // for a textfield
    $form['distance']['widget'][0]['value']['#label_classes'] = ['some-label-class'];
    // for a radio field
    $form['country']['widget']['#label_classes'] = ['some-label-class'];
}

次に、テキストフィールドにhook_preprocess_form_elementを使用するか、ラジオフィールドにhook_preprocess_fieldsetを使用します。

/**
 * Implements hook_preprocess_hook().
 */
function your_module_preprocess_fieldset(&$variables)
{
  if(isset($variables['element']['#label_classes'])) {
    foreach ($variables['element']['#label_classes'] as $class) {
      $variables['legend']['attributes']->addClass($class);
    }
  }
}