web-dev-qa-db-ja.com

フォーム要素のdivラッパーのクラスを変更する

フォームAPIを使用してクラスをフォームラッパー（DIV）に追加または変更する方法はありますか？

それとも、テーマ機能だけで行われますか？

もしそうなら、それを変更するためにどのテーマ機能が使用されますか？

6forms
11
chrisjlee

テーマをグローバルに変更する場合は、通常 theme_form_element() をオーバーライドできます。特定のフォーム要素を1つだけ変更したい場合は、いくつかの選択肢があることを知っています。

  1. 興味のある特定のタイプのフォーム要素（テキストフィールドなど）に新しいテーマ関数を登録できます。次に、このテーマ関数を作成します（元に基づいて、たとえば theme_textfield() ）。ただし、最後にtheme('form_element', ...)を呼び出しません（処理することもできます） 1つのテーマ関数のラッパーと要素の両方、または個別のラッパーテーマ関数を作成してそれを使用することができます）。最後に、特定のフォーム要素に_#theme_プロパティを追加すると、その要素がカスタムテーマを取得します。

  2. _form_element.tpl.php_というテンプレートファイルを作成して、デフォルトの動作がtheme_form_element()になっていることを確認してから、hook_preprocess_form_element()を使用してテンプレートの候補を追加できます。次に、提案に一致する新しいテンプレートを作成します。テンプレートのほうが関数よりも少し遅いという話をよく耳にしますが、このように頻繁に使用されるテーマの呼び出しでは、テンプレートを使いこなす人々が想像できます。自分でこれを測定したことはありません。また、提案を行うには、前処理段階で十分なコンテキストが必要です。

5
Andy

これは非常に古いスレッドであることは知っていますが、フォーム要素を変更してクラスを追加する方法を学んでいます。私はカスタムモジュールを作ることに慣れました：

function yourtheme_custom_form_alter(&$form, &$form_state, $form_id) {
 case'webform_number_whatever':
   _yourtheme_form_add_wrapper($form['submitted']['yourfieldhere'], array('form-field-some-style', 'not-label', 'whatever-other-styles-you-want'));
 break;
}

function _yourtheme_form_add_wrapper(&$element, $classes = array(), $type = array('form-item', 'form-type-textfield'), $removeTitle = FALSE){
  $element['#prefix'] = '<div class="' . implode(" ", $classes) . '"><div class="' . implode(" ", $type) . '">';
  $element['#suffix'] = '</div></div>';
}
4
tdm

「ラッパー」を変更するには、form_elementをオーバーライドする必要があります。基本的に、すべてのフォーム要素はform_elementテーマtheme_form_element($element,$value);（form.incファイル）でレンダリングされます

したがって、フォーム要素のレンダリング方法を変更するには、その関数をtemplate.phpフォルダーにコピーし、名前を次のように変更します。phptemplate_form_element($element,$value)

これで変更を行うことができ、元の関数の代わりに使用されます

  1. Form.incからtheme_form_element($element,$value);をコピーします
  2. （テーマ）template.phpに貼り付けます
  3. 名前をphptemplate_form_element($element,$value)に変更します
  4. すべてのテーマキャッシュをクリアする
  5. 必要な変更を加えれば、それらが使用されます。
3
Andre

wrapper_attributesプロパティを使用できます。

$form['example'] = [
  '#type' => 'textfield',
  '#title' => $this->t('Example'),
  '#wrapper_attributes' => ['class' => ['wrapper-class']],
];
1
ya.teck

重要なのは、theme_form_elementは直接の親ラッパーdivのみを変更し、これはCSS効果の対象となるターゲットではない可能性があることです。

[プログラムではありませんが、ノードフィールドのトップラッパー（ラッパー、ラッパー、ラッパー）にクラスを適用するだけの場合は、特定のコンテンツタイプの[フィールドの管理]を選択して[フィールドグループ]モジュールを使用し、単純なDIVとして[新しいグループを追加]を選択します。次に、ラベルを削除して、必要なクラスを追加のラッパーに割り当てることができます（ただし、ラッパーはさらに増えました）-ネストは無制限です]

0
user24737

ラッパー属性を構成可能にします！

テーマに独自のフォーム要素テーマ関数を作成します... sites/all/themes/MY_THEME/theme/form-element.theme.inc

function my_theme_form_element($variables) {
  $element = &$variables['element'];

  $attributes = isset($element['#my_theme_wrapper_attributes']) ?
    $element['#my_theme_wrapper_attributes'] : array();

  ...

  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";

  ...
}

次に、このようなことを行うことができます...

function my_module_form_alter(&$form, &$form_state, $form_id) {
  $form['account']['mail']['#my_theme_wrapper_attributes']['class'][] = 'form-field--inline';
}
0
doublejosh

_#prefix/#suffix_も#attributes => array('class')も目的の結果を返さない場合があります。私の特別なケースは、managed_file要素の周りのajax-wrapper divにクラスを追加することです。 _#prefix/#suffix_は新しいコンテナを作成し、_#attributes/'class'_は最外部ではなく内部要素のクラスを変更します。

通常の最も外側のdivはちょうどです

_<div id="edit-doc1--XX-ajax-wrapper">
_

これはCSSでターゲットにするのが難しいです。 _[id^="edit-doc"]_または_[id$="-ajax-wrapper"]_をターゲットにすることができますが、これらの両方は、必要な要素だけではなく、それ以上のものをターゲットにします。

私が思いついた解決策は、フォームに _#process_ element を追加し、要素のコードを手動で操作することです。次に、フォーム項目の宣言に追加された_#process_属性を示します。

_$form['doc1'] = array(
  '#type' => 'managed_file',
  '#process' => array('mymodule_managed_file_process'),
);
_

そして、これがmymodule_managed_file_process()関数です：

_function mymodule_managed_file_process($element, &$form_state, $form) {

  // Call the original function to perform its processing.
  $element = file_managed_file_process($element, $form_state, $form);

  // Add our own class for theming.
  $element['#prefix'] = str_replace(
    'id=',
    'class="managed-file-wrapper" id=',
    $element['#prefix']
  );

  return $element;
}
_

文字列置換に依存することは移植性が低いため、自己の責任において_str_replace_を使用してください。ただし、このコードは実際に最も外側のDIVを変更して必要なクラスを追加します。

_<div class="managed-file-wrapper" id="edit-doc1--XX-ajax-wrapper">
_
0
Joseph Cheek

あなたは使うことができます

'#prefix' => '<div class="new_class">', '#suffix' => '</div>'

そしてこれはそれを包みます

0
Alex