cakePHP3 Form_helperで作成したチェックボックスを横並びに表示したい

Question

###前提・実現したいこと
cakePHP3勉強中です。
Form_Helper + bootstrapで画面を作成しています。
配列の値でチェックボックスを作っているのですが、下記ソースコードですと、縦に表示されて今います。
これを横並びに表示させる方法をご教示ください。
よろしくお願いします。

###該当のソースコード

echo $this->Form->input('language_type',array('label'=>__('言語'),
                                              'type'   => 'select',
                                              'multiple' => 'checkbox',
                                              'options'=>$language_type,
                                              'value'=>explode(',',$project->language_type)
));

###生成されたHTML

<div class="input select">
  <label for="language-type">言語</label>
  <input type="hidden" name="language_type" value=""/>
  <div class="checkbox">
    <label for="language-type-1">
    <input type="checkbox" name="language_type[]" value="1" id="language-type-1">
    Ajax</label>
  </div>
  <div class="checkbox">
    <label for="language-type-2" class="selected">
    <input type="checkbox" name="language_type[]" value="2" checked="checked" id="language-type-2">
    ASP</label>
  </div>
  <div class="checkbox">
    <label for="language-type-3">
    <input type="checkbox" name="language_type[]" value="3" id="language-type-3">
    ASP.NET</label>
  </div>
  <div class="checkbox">
    <label for="language-type-4">
    <input type="checkbox" name="language_type[]" value="4" id="language-type-4">
    C</label>
  </div>
  <div class="checkbox">
    <label for="language-type-5">
    <input type="checkbox" name="language_type[]" value="5" id="language-type-5">
    C#</label>
  </div>
</div>

###試したこと
課題に対してアプローチしたことを記載してください
上記コードを、下記で囲ってみましたが、縦並びのままでした。

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-xs-3">年月日</label>
        <div class="col-xs-9 form-inline">
      チェックボックスを出力するform_helper
        </div>
    </div>
</form>

###補足情報(言語/FW/ツール等のバージョンなど)
cakePHP3.3.3
PHP5.6.25

Comments

[gin]

生成されるhtmlを提示してください。

Answer 1

Cakephp3のFormHelperにはtemplates機能があるのでそれを使えば出力されるHTMLをカスタマイズできますよ

以下に、サンプルコードを書いてみたので、参考にしてください。

<?php
$language_type = array('C', 'D', 'E', 'F', 'G', 'H', 'I', 'J');

echo $this->Form->input('language_type',array('label'=>__('言語'),
  'type'   => 'select',
  'multiple' => 'checkbox',
  'options'=>$language_type,
  'value'=>0,
  'templates' => array(
    'nestingLabel' => "<div class='col-md-4'>{{hidden}}<label{{attrs}} >{{input}}{{text}}</label></div>",
  ),
));

Answer 2

labelをどういう形でくくるのか分かりませんが、とりえずtype="checkbox"の横並びはこんな感じに書きます。

<form class="form">

	<div class="form-group">
		<p class="control-label"><b>item1</b></p>
		<div class="form-inline">
			<label class="checkbox-inline"><input type="checkbox"> checkbox1</label>
			<label class="checkbox-inline"><input type="checkbox"> checkbox2</label>
		</div>
	</div>

	<div class="form-group">
		<p class="control-label"><b>item2</b></p>
		<div class="form-inline">
			<div class="checkbox-inline"><input type="checkbox"> <label>checkbox1</label></div>
			<div class="checkbox-inline"><input type="checkbox"> <label>checkbox2</label></div>
		</div>
	</div>

</form>

Answer 3

これ、CakePHPの罠の一つなんですが、

$this->Form->input('name', array('type' => 'select', 'multiple' => 'checkbox'・・・);

を使うと、そのままだとCSS適用が難しいHTML出力になります。(classも何もないdivとかあって。)

ですので、optionsで一行で書くのを諦め、

$this->Form->input('Class.name.', array('type' => 'checkbox', ・・・);

を使って、for文でデータを回して書くのが結局一番加工しやすい形になります。

Comments

[tundeco]

Templateを加工するか迷ったのですが、multiple=>'checkbox'を諦めてforeachで作成する事にしました。ありがとうございました。