Drupal7のフォーム(form api)よりbootstrapのテキストボックスと検索ボタン一体化(input group)にする方法

drupal
bootstrap
form

やりたいこと：検索用のテキストボックスと検索ボタンを一体配置(bootstrap：input group)

  • Drupal:7.56
  • モジュール：bootstrap7.x-3.18
  • Drupalのフォーム(form api)でカスタム検索フォームを作成しました 
    function your_module_search_form($form, $form_state){
   $form["title"] = array(
        "#type" => "textfield",
        "#required" => true,
        "#maxlength" => 20,
        "#attributes" => array('placeholder' => t("Vocabulary, up to 30 letters") ,
        "#title" => t("Vocabulary"),
    );

    $form["item_search"] = array(
        "#type" => "button",
        "#value" => t("Search"),
    );
return $form;
}
    • Drupalフォームのスタイルは検索ボタンはテキストボックスの下にあります
      Drupal7のフォーム検索
  • ここで、上記図のように検索ボタンをテキストボックスの隣に配置したいです（bootstrap:input group）
  • bootstrap:input groupで検索テキストボックスとボタンを一体化に配置するサンプルコードは以下のようで 
    <div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">検索</button>
  </span>
</div>

     

解決：Drupalフォーム(form api)にある「prefix/suffix」プロパティの利用

  • Drupalのform apiにある「prefix/suffix」を利用して、テキストボックスと検索ボタンをグルーピングします 
    function your_module_search_form($form, $form_state){
   $form["title"] = array(
        "#type" => "textfield",
        "#required" => true,
        "#maxlength" => 20,
        "#attributes" => array('placeholder' => t("Vocabulary, up to 30 letters") ,
        "#title" => t("Vocabulary"),
        "#prefix" => "<div  class='input-group'>",
    );

    $form["item_search"] = array(
        "#type" => "button",
        "#value" => t("Search"),
        "#prefix" => "<span class='input-group-btn' style='vertical-align:bottom;'>",
        "#suffix" => "</span></div>",
    );
return $form;
}
  • 見事にテキストボックスと検索ボタンを一体として表示されました
    • ボタンの表示場所をcssで： style='vertical-align:bottom;' を指定する必要があります
    • 原因：このテキストボックスとボタンのグルーピング化するときに、テキストボックスのタイトル要素が含まれて、ボタンとテキストボックスの縦配置にずれが生じます