CakePHP FormHelperの使い方

2019.08.06 2021.03.03

FormHelper使用時の覚え書き。チェックボックスとかラジオボタンに属性を付けたりするのが厄介だったので。

FormHelperはForm->create()からForm->end()の中にコントロールを記述します。

<?= $this->Form->create(null, [
    'url' => ['action' => 'execute'],
    'type' => 'post',
    ]); ?>

<?= $this->Form->end() ?>

日付選択コントロール

日付選択用に専用の部品が用意されています。便利ですね。

<?= $this->Form->date('first-date', [
    'minYear' => 2017, // 年選択の最小の年.
    'maxYear' => 2025, // 年選択の最大の年.
    'monthNames' => false, // 月を数字で表示.
    'empty' => [
        'year' => false,  // 年選択で空白は不可.
        'month' => false, // 月選択で空白は不可.
        'day' => false,   // 日選択で空白は不可.
    ],
    'default' => [ // 初期値.
        'year' => 2019,
        'month' => 7,
        'day' => 1,
    ],
]) ?>

'monthNames' =>falseを指定しない場合、月の英語名(Januaryなど)が選択肢になります。

クラスを指定する場合は以下のようにします。

'year' => ['class' => 'custom-select mr-sm-2 w100px'],
'month' => ['class' => 'custom-select mr-sm-2 w60px'],
'day' => ['class' => 'custom-select mr-sm-2 w60px'],

フォームの構成部品

以下、各種フォームの構成部品(コントロール)を出力する方法です。

セレクトボックス

valueはインデックス値です。未指定の場合は選択なしになります。

単一選択

<?= $this->Form->select('select-single', [1, 2, 3, 4, 5], ['value' => 1, 'class' => 'form-control']); ?>

複数選択

'hiddenField' => falseはデフォルトで生成されるinput type="hidden"の要素を生成しないようにします。

<?= $this->Form->select('select-multi', [1, 2, 3, 4, 5],
[
    'multiple' => true,
    'value' => [0, 1],
    'hiddenField' => false,
    'class' => 'form-control',
]); ?>

チェックボックス

'hiddenField' => falseはデフォルトで生成されるinput type="hidden"の要素を生成しないようにします。

<label><?= $this->Form->checkbox('checkbox-one', [
    'value' => '1',
    'hiddenField' => false,
    'class' => 'form-check-input'
    ]); ?>登録日</label>

出力

<label><input type="checkbox" name="checkbox-one" value="1" class="form-check-input">登録日</label>

チェックあり

'checked' => trueを指定します。

<label><?= $this->Form->checkbox('checkbox-one', [
    'value' => '1',
    'hiddenField' => false,
    'class' => 'form-check-input',
    'checked' => true
    ]); ?>登録日</label>

チェックボックス - input() メソッド

チェックボックスに<Label for="">を使用したい場合は、input()メソッドを使用します。

<?= $this->Form->input('checkbox-one', [
    'type' => 'checkbox',
    'value' => '1',
    'label' => '登録日',
    'hiddenField' => false,
    'class' => 'form-check-input'
    ]); ?>

出力

<div class="input checkbox">
    <label for="checkbox-one">
        <input type="checkbox" name="checkbox-one" value="1" class="form-check-input" id="checkbox-one">登録日
    </label>
</div>

ラベルに属性を指定

ラベルにclassなどの属性を指定したい場合は、'label'を連想配列で指定します。

<?= $this->Form->input('checkbox-one', [
    'type' => 'checkbox',
    'value' => '1',
    'label' => ['text' => '登録日', 'class' => 'custom-control-label'],
    'hiddenField' => false,
    'class' => 'custom-control-input',
    ]); ?>

出力

<div class="input checkbox">
    <label class="custom-control-label" for="checkbox-one">
        <input type="checkbox" name="checkbox-one" value="1" class="custom-control-input" id="checkbox-one">登録日
    </label>
</div>

外側の <div> を出力しない

Form->input()でチェックボックスを出力すると、<div class="input checkbox"></div>の内側に出力されます。この<div>を出力したくない場合、以下のようにtemplatesの'inputContainer'を指定します。

<?= $this->Form->input('checkbox-one', [
    'type' => 'checkbox',
    'value' => '1',
    'label' => '登録日',
    'hiddenField' => false,
    'class' => 'custom-control-input',
    templates => ['inputContainer' => '{{content}}'],
    ]); ?>

出力

<label for="checkbox-one">
    <input type="checkbox" name="checkbox-one" value="1" class="custom-control-input" id="checkbox-one">登録日
</label>

ラベルの外側に <input> を出力する

チェックボックスはラベルの内側にもなっています。ラベルの外側に<input>を表示したい場合は以下のようにします。

<?= $this->Form->input('checkbox-one', [
    'type' => 'checkbox',
    'value' => '1',
    'label' => '登録日',
    'hiddenField' => false,
    'class' => 'custom-control-input',
    templates => [
        'inputContainer' => '{{content}}',
        'nestingLabel' => '{{hidden}}{{input}}<label{{attrs}}>{{text}}</label>',
        ],
    ]); ?>

出力

<input type="checkbox" name="checkbox-one" value="1" class="custom-control-input" id="checkbox-one">
<label for="checkbox-one">登録日</label>

または以下のようにフォーム全体で指定します。

<?= $this->Form->setTemplates([
    'nestingLabel' => '{{hidden}}{{input}}<label{{attrs}}>{{text}}</label>',
    'formGroup' => '{{input}}{{label}}',
])`; ?>

ラベルを自前で出力する

ラベルを自前で指定したい場合は'label' => falseを指定します。そしてlabel()でラベルを指定します。

<?= $this->Form->input('checkbox-one', [
    'type' => 'checkbox',
    'value' => '1',
    'label' => false,
    'hiddenField' => false,
    'class' => 'custom-control-input',
    templates => ['inputContainer' => '{{content}}'],
    ]); ?>
<?= $this->Form->label('checkbox-one', '登録日', ['class' => 'custom-control-label']); ?>

出力

<input type="checkbox" name="checkbox-one" value="1" class="custom-control-input" id="checkbox-one">
<label class="custom-control-label" for="checkbox-one">登録日</label>

ラジオボタン

valueはインデックス値です。未指定の場合は選択なしになります。
'hiddenField' => falseはデフォルトで生成されるinput type="hidden"の要素を生成しないようにします。

<?= $this->Form->radio('radio',
    ['登録日', '更新日'],
    ['value' => 0, 'hiddenField' => false, 'class' => 'custom-control-input']); ?>

上記の場合、値は0,1となります。値を任意に指定したい場合は、以下のようにラベルと一緒にvalueも指定します。

<?= $this->Form->radio('radio', [
        ['value' => 'create', text => '登録日'],
        ['value' => 'modified', text => '更新日'],
    ],
    ['value' => 'create', 'hiddenField' => false, 'class' => 'custom-control-input']); ?>

ラベル位置の変更

ラジオボタンのラベル位置変更は$this->Form->setTemplates()でnestingLabelとradioWrapperを指定します。次にsetTemplates()するまで有効です。
また、ラベルの属性は同じラジオボタンのグループで共通になります。

<?= $this->Form->setTemplates([
    'nestingLabel' => '{{hidden}}{{input}}<label{{attrs}}>{{text}}</label>',
    'formGroup' => '{{input}}{{label}}',
    'radioWrapper' => '<div class="custom-control custom-radio custom-control-inline">{{label}}</div>',
]); ?>

<?= $this->Form->radio('radio', [
    ['value' => 'create', text => '登録日',],
    ['value' => 'modified', text => '更新日',],
],
[
    'label' => ['class' => 'custom-control-label'],
    'value' => 'create',
    'hiddenField' => false,
    'class' => 'custom-control-input',
]); ?>

出力

<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" name="radio" value="create" id="radio-create" checked="checked" class="custom-control-input">
    <label class="custom-control-label selected" for="radio-create">登録日</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" name="radio" value="modified" id="radio-modified" class="custom-control-input">
    <label class="custom-control-label" for="radio-modified">更新日</label>
</div>

テキストフィールド

<?= $this->Form->input('reason', ['label' => '理由：', 'size' => '50', 'class' => 'form-control']); ?>

ボタン

以下はSubmitボタンとフォームクリアボタンのサンプルです。

<?= $this->Form->button('Submit form', ['type' => 'submit', 'name' => 'execute', 'class' => 'btn btn-primary', 'onfocus' => 'this.blur();']); ?>
<?= $this->Form->button('Reset', ['type' => 'reset', 'class' => 'btn btn-outline-primary', 'onfocus' => 'this.blur();']); ?>

コメントコメントをキャンセル

CakePHP クエリービルダーの使い方

CakePHP3に認証機能を追加する