CakePHP3で遊ぶ

bootstrapの基本形

レスポンシブwebデザインのページを作成する際に利用するフレームワークの一つにbootstrapがあります。
bootstrapでは、グリッドという概念があり、横方向に12個のグリッドに分割しています。このグリッドを1～12個まとめて一つの表示フィールドとします。
一般的には次のようになります。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2"><label for="field"></label></div>
    <div class="col-xs-6"><input type="text" id="field" name="field"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-12"><hr /></div>
  </div>
</div>

Form->control()メソッドで実現する方法

CakePHP3のFormヘルパーのcontrol()メソッドでは、テンプレートを使ってinputやlabel、divエレメントに展開しています。
ですので必要に応じて、テンプレートを変更します。
viewで変更するには、

<?php
  $this->Form->templates([
    'label' => '<div class="col-xs-2"><label{{attrs}}>{{text}}</label></div>',
    'input' => '<div class="col-xs-6"><input type="{{type}}" name="{{name}}"{{attrs}}/></div>',
    'error' => '<div class="col-xs-4 error-message">{{content}}</div>',
    'inputContainer' => '<div class="row input {{type}}{{required}}">{{content}}</div><div class="col-xs-12"><hr /></div>',
    'inputContainerError' => '<div class="row input {{type}}{{required}} error">{{content}}{{error}}</div><div class="col-xs-12"><hr /></div>',
  ]);

のようにテンプレートを変更します。
この状態で

  $this->Form->control('field');

とした場合に出力されるHTMLは、

  <div class="row input text">
    <div class="col-xs-2"><label for="field"></label></div>
    <div class="col-xs-6"><input type="text" id="field" name="field"></div>
    <div class="col-xs-12"><hr /></div>
</div>

のようになります。
また、バリデーションエラーがあると、

  <div class="row input text error">
    <div class="col-xs-2"><label for="field"></label></div>
    <div class="col-xs-6"><input type="text" id="field" name="field"></div>
    <div class="col-xs-4 error-message">エラーメッセージ</div>
    <div class="col-xs-12"><hr /></div>
</div>

のようになります。
ここではinputエレメントのみを変更していますが、必要に応じて、他のエレメントも変更して対応できます。