#04 FormHelper を使ってみる

CakePHP には、フォーム関係のタグを生成させる「FormHelper」という機能がある。

FormHelper は、フォームの作成、検証などを効率化してくれる。

以下、FormHelper を使用し、「index.ctp」ファイルにフォームを作成していく。

■場所:
\htdocs\chococake\src\Template\Test
■ファイル名
index.ctp

尚、TestController の index メソッドは一旦以下のようにクリアしておく。

■場所:
\htdocs\chococake\src\Controller
■ファイル名
TestController.php

<?php
namespace App\Controller;

use App\Controller\AppController;

/**
* 
*/
class TestController extends AppController
{

  public function index()

  {

}

<form>タグ

<form>タグの生成

■index.ctp

<!-- フォーム開始タグ -->
<?= $this->Form->create(); ?>
<!-- フォーム終了タグ -->
<?= $this->Form->end(); ?>

生成されるコード

<!-- フォーム開始タグ -->
<form method="post" accept-charset="utf-8" action="/test/index">
(中略)
<!-- フォーム終了タグ -->
</form>

フォームの開始は create メソッドを使用して出力する。

create メソッドがパラメータなしで呼ばれた場合、現在の URL を元にフォームを作成するため、action 属性の中身は現在のURLである「/test/index」となる。

また、フォーム送信のデフォルトのメソッドは「post」となる。

create メソッドにオプションを指定することもできる。

■index.ctp

<!-- フォーム開始タグ -->
<?= $this->Form->create(null, [
  'type' => 'post',
  'url' => ['controller' => 'test', 'action' => 'index']
]); ?>
<!-- フォーム終了タグ -->
<?= $this->Form->end(); ?>

生成されるコード

<!-- フォーム開始タグ -->
<form method="post" accept-charset="utf-8" action="/test">
(中略)
<!-- フォーム終了タグ -->
</form>

「type」、「url」でそれぞれ指定することができる。
「action」に指定した「index」が表示されていないが、「/test」と「/test/index」は同じ意味。

input 要素

■index.ctp

<!-- テキスト入力 -->
<?= $this->Form->text('username', ['class' => 'users']); ?>

生成されるコード

<!-- テキスト入力 -->
<input type="text" name="username" class="users"/>

パスワード入力

■index.ctp

<!-- パスワード -->
<?= $this->Form->password('password'); ?>

生成されるコード

<!-- パスワード -->
<input type="password" name="password"/>

非表示入力

■index.ctp

<!-- 非表示入力 -->
<?= $this->Form->hidden('mode', ['value' => 'add']); ?>

生成されるコード

<!-- 非表示入力 -->
<input type="hidden" name="mode" value="add"/>

テキストエリア

■index.ctp

<!-- テキストエリア -->
<?= $this->Form->textarea('notes', ['rows' => '3', 'cols' => '5']); ?>

生成されるコード

<!-- テキストエリア -->
<textarea name="notes" rows="3" cols="5"></textarea>

テキストエリアには固有の「escape」オプションがある。テキストエリアの内容をエスケープするかどうかを指定する。デフォルトは true になっている。
■index.ctp

<!-- テキストエリア -->
<?= $this->Form->textarea('notes', ['rows' => '3', 'cols' => '5', 'escape' => false]); ?>

生成されるコードは上述と変わらない。

チェックボックス

■index.ctp

<!-- チェックボックス -->
<?= $this->Form->checkbox('sidemenu', [
  'id' => 'potato',
  'value' => 'potato',
  'hiddenField' => false,
  'checked' => true,
]); ?>
<?= $this->Form->label('potato', 'ポテト'); ?>
<?= $this->Form->checkbox('sidemenu', [
  'id' => 'salad',
  'value' => 'salad',
  'hiddenField' => false
]); ?>
<?= $this->Form->label('salad', 'サラダ'); ?>

生成されるコード

<!-- チェックボックス -->
<input type="checkbox" name="sidemenu" value="potato" id="potato" checked="checked"><label for="potato">ポテト</label><input type="checkbox" name="sidemenu" value="salad" id="salad"><label for="salad">サラダ</label><input type="checkbox" name="sidemenu" value="chicken" id="chicken"><label for="chicken">チキン</label>

「’hiddenField’ => false」を入れておくと「」などの hidden の値が表示されなくなる。

上述の場合、横並びにレイアウトされるが、縦並びにするには以下のようにする。

■index.ctp

<!-- チェックボックス 縦並び -->
<?= $this->Form->input('check', [
  'type' => 'checkbox',
  'value' => 'potato',
  'label' => 'ポテト',
  'checked' => true,
  'hiddenField' => false
]); ?>
<?= $this->Form->input('check', [
  'type' => 'checkbox',
  'value' => 'salad',
  'label' => 'サラダ',
  'hiddenField' => false
]); ?>

生成されるコード

<!-- チェックボックス 縦並び -->
<div class="input checkbox"><label for="check"><input type="checkbox" name="check" value="potato" checked="checked" id="check">ポテト</label></div><div class="input checkbox"><label for="check"><input type="checkbox" name="check" value="salad" id="check">サラダ</label></div>

ラジオボタン

■index.ctp

<!-- ラジオボタン -->
<?= $this->form->radio('size', ['small', 'medium', 'large']); ?>

生成されるコード

<!-- ラジオボタン -->
<input type="hidden" name="size" value=""/><label for="size-0"><input type="radio" name="size" value="0" id="size-0">small</label><label for="size-1"><input type="radio" name="size" value="1" id="size-1">medium</label><label for="size-2"><input type="radio" name="size" value="2" id="size-2">large</label>

オプションを使用して以下のように記述することも可能。
■index.ctp

<!-- ラジオボタン -->
<?= $this->form->radio('size',
[
['value' => 's', 'text' => 'small'],
['value' => 'm', 'text' => 'medium'],
['value' => 'l', 'text' => 'large']
]); ?>

生成されるコード

<!-- ラジオボタン -->
<input type="hidden" name="size" value=""/><label for="size-s"><input type="radio" name="size" value="s" id="size-s">small</label><label for="size-m"><input type="radio" name="size" value="m" id="size-m">medium</label><label for="size-l"><input type="radio" name="size" value="l" id="size-l">large</label>

セレクトボックス

■index.ctp

<!-- セレクトボックス -->
<?= $this->Form->select('pref', ['東京都', '埼玉県', '千葉県', '神奈川県']); ?>

生成されるコード

<!-- セレクトボックス -->
<select name="pref"><option value="0">東京都</option><option value="1">埼玉県</option><option value="2">千葉県</option><option value="3">神奈川県</option></select>

オプションで、キーと値のペアとして指定することも可能。

<!-- セレクトボックス -->
<?= $this->Form->select('pref', [
  'tokyo'   => '東京都',
  'saitama' => '埼玉県',
  'chiba'   => '千葉県',
  'kanagawa'=> '神奈川県'
], ['empty' => true]); ?>

生成されるコード

<!-- セレクトボックス -->
<select name="pref"><option value=""></option><option value="tokyo">東京都</option><option value="saitama">埼玉県</option><option value="chiba">千葉県</option><option value="kanagawa">神奈川県</option></select>

[‘empty’ => true] と入れることで、HTML 内に「<option value=””></option>」のデフォルト値を設定することが可能。

submit 要素

■index.ctp

<!-- submit 要素 -->
<?= $this->Form->submit('登録'); ?>

生成されるコード

<!-- submit 要素 -->
<div class="submit"><input type="submit" value="登録"/></div>

ボタン

■index.ctp

<!-- ボタン -->
<?= $this->Form->button('ボタン'); ?>
<?= $this->Form->button('別のボタン', ['type' => 'button']); ?>
<?= $this->Form->button('リセット', ['type' => 'reset']); ?>
<?= $this->Form->button('送信', ['type' => 'submit']); ?>

生成されるコード

<!-- ボタン -->
<button type="submit">ボタン</button><button type="button">別のボタン</button><button type="reset">リセット</button><button type="submit">送信</button>

CakePHP の一覧