ひとり勉強ログ

ITエンジニアの勉強したことメモ

#04 FormHelper を使ってみる

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

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

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

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

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

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

[php] <?php namespace App\Controller;

use App\Controller\AppController;

/* * / class TestController extends AppController {

public function index()

{

} [/php]

<form>タグ

<form>タグの生成

■index.ctp [php] <!-- フォーム開始タグ --> <?= $this->Form->create(); ?> <!-- フォーム終了タグ --> <?= $this->Form->end(); ?> [/php]

生成されるコード [html] <!-- フォーム開始タグ --> <form method="post" accept-charset="utf-8" action="/test/index"> (中略) <!-- フォーム終了タグ --> </form> [/html]

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

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

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

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

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

生成されるコード [html] <!-- フォーム開始タグ --> <form method="post" accept-charset="utf-8" action="/test"> (中略) <!-- フォーム終了タグ --> </form> [/html]

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

input 要素

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

生成されるコード [html] <!-- テキスト入力 --> <input type="text" name="username" class="users"/> [/html]

パスワード入力

■index.ctp [php] <!-- パスワード --> <?= $this->Form->password('password'); ?> [/php] 生成されるコード [html] <!-- パスワード --> <input type="password" name="password"/> [/html]

非表示入力

■index.ctp [php] <!-- 非表示入力 --> <?= $this->Form->hidden('mode', ['value' => 'add']); ?> [/php] 生成されるコード [html] <!-- 非表示入力 --> <input type="hidden" name="mode" value="add"/> [/html]

テキストエリア

■index.ctp [php] <!-- テキストエリア --> <?= $this->Form->textarea('notes', ['rows' => '3', 'cols' => '5']); ?> [/php] 生成されるコード [html] <!-- テキストエリア --> <textarea name="notes" rows="3" cols="5"></textarea> [/html]

テキストエリアには固有の「escape」オプションがある。テキストエリアの内容をエスケープするかどうかを指定する。デフォルトは true になっている。 ■index.ctp [php] <!-- テキストエリア --> <?= $this->Form->textarea('notes', ['rows' => '3', 'cols' => '5', 'escape' => false]); ?> [/php] 生成されるコードは上述と変わらない。

チェックボックス

■index.ctp [php] <!-- チェックボックス --> <?= $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', 'サラダ'); ?> [/php] 生成されるコード [html] <!-- チェックボックス --> <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> [/html]

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

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

■index.ctp [php] <!-- チェックボックス 縦並び --> <?= $this->Form->input('check', [ 'type' => 'checkbox', 'value' => 'potato', 'label' => 'ポテト', 'checked' => true, 'hiddenField' => false ]); ?> <?= $this->Form->input('check', [ 'type' => 'checkbox', 'value' => 'salad', 'label' => 'サラダ', 'hiddenField' => false ]); ?> [/php] 生成されるコード [html] <!-- チェックボックス 縦並び --> <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> [/html]

ラジオボタン

■index.ctp [php] <!-- ラジオボタン --> <?= $this->form->radio('size', ['small', 'medium', 'large']); ?> [/php] 生成されるコード [html] <!-- ラジオボタン --> <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> [/html]

オプションを使用して以下のように記述することも可能。 ■index.ctp [php] <!-- ラジオボタン --> <?= $this->form->radio('size', [ ['value' => 's', 'text' => 'small'], ['value' => 'm', 'text' => 'medium'], ['value' => 'l', 'text' => 'large'] ]); ?> [/php] 生成されるコード [html] <!-- ラジオボタン --> <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> [/html]

セレクトボックス

■index.ctp [php] <!-- セレクトボックス --> <?= $this->Form->select('pref', ['東京都', '埼玉県', '千葉県', '神奈川県']); ?> [/php] 生成されるコード [html] <!-- セレクトボックス --> <select name="pref"><option value="0">東京都</option><option value="1">埼玉県</option><option value="2">千葉県</option><option value="3">神奈川県</option></select> [/html]

オプションで、キーと値のペアとして指定することも可能。 [php] <!-- セレクトボックス --> <?= $this->Form->select('pref', [ 'tokyo' => '東京都', 'saitama' => '埼玉県', 'chiba' => '千葉県', 'kanagawa'=> '神奈川県' ], ['empty' => true]); ?> [/php] 生成されるコード [html] <!-- セレクトボックス --> <select name="pref"><option value=""></option><option value="tokyo">東京都</option><option value="saitama">埼玉県</option><option value="chiba">千葉県</option><option value="kanagawa">神奈川県</option></select> [/html]

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

submit 要素

■index.ctp [php] <!-- submit 要素 --> <?= $this->Form->submit('登録'); ?> [/php] 生成されるコード [html] <!-- submit 要素 --> <div class="submit"><input type="submit" value="登録"/></div> [/html]

ボタン

■index.ctp [php] <!-- ボタン --> <?= $this->Form->button('ボタン'); ?> <?= $this->Form->button('別のボタン', ['type' => 'button']); ?> <?= $this->Form->button('リセット', ['type' => 'reset']); ?> <?= $this->Form->button('送信', ['type' => 'submit']); ?> [/php] 生成されるコード [html] <!-- ボタン --> <button type="submit">ボタン</button><button type="button">別のボタン</button><button type="reset">リセット</button><button type="submit">送信</button> [/html]