CakePHP3のForm Helperの使い方のまとめ

2017/01/14 2017/11/26

CakePHP3のForm Helperの使い方のまとめ

CakePHP3になり Form Helperの記述方法が変更に

　
CakePHPには、フォーム関連のタグ（テキストボックスやラジオボタン、セレクトボックスなどの入力ボックス）を生成するための専用機能が用意されています。
それが「Form Helper（フォームヘルパー）」と呼ばれるものです。
　
Form Helperは便利な機能なのですが、CakePHP2から CakePHP3にバージョンアップしてから記述の仕方が少し変わりました。
そのため、CakePHP3ではどのように記述すればいいのか、それをまとめてみました。
　
　

PHPフレームワーク CakePHP 3入門

CakePHP3の Form Helperの記述の仕方

フォーム開始タグ

echo $this -> Form -> create (
                "null", [ "type" => "post",
                          "url" => [ "controller" => "filename",
                                     "action" => "index" ] ] );

echo $this -> Form -> create (

"null", [ "type" => "post",

"url" => [ "controller" => "filename",

"action" => "index" ] ] );

　
「"type" => "post"」の部分ですが、
GETで送信する場合は、「"type" => "get"」にします。
ファイルを扱う場合は、「"type" => "file"」にします。
　
「"controller" => "filename"」の「filename」にはコントローラーの名称を指定します。
「"action" => "index"」の「index」にはアクションの名称を指定します。
　
　
ファイルをアップロードするときは、下記のとおり「enctype」を設定します。
　

    <?= $this->Form->create($topic, ['enctype' => 'multipart/form-data']); ?>
または
    <?= $this->Form->create($topic, ['type' => 'file']); ?>

<?= $this->Form->create($topic, ['enctype' => 'multipart/form-data']); ?>

または

<?= $this->Form->create($topic, ['type' => 'file']); ?>

フォーム終了タグ

echo $this -> Form -> end ();

1	echo $this -> Form -> end ();

ラベル

echo $this -> Form -> label ( "textbox", "textbox!" );

1	echo $this -> Form -> label ( "textbox", "textbox!" );

テキストボックス

echo $this -> Form -> text( "textbox", [ "size" => 10,
                                         "default" => "テスト" ] );
  もしくは
echo $this -> Form -> input ( "textbox", [ "type" => "text",
                                           "size" => 10,
                                           "label" => "テキストボックス",
                                           "default" => "テスト" ] ] );

echo $this -> Form -> text( "textbox", [ "size" => 10,

"default" => "テスト" ] );

もしくは

echo $this -> Form -> input ( "textbox", [ "type" => "text",

"size" => 10,

"label" => "テキストボックス",

"default" => "テスト" ] ] );

前者は下記のようになります。
<input type="text" name="text1" size="20" value="テスト"/>
　
後者は下記のようになります。
<div class="input text"><label for="textbox">テキストボックス</label><input type="text" name="textbox" size="20" id="textbox" value="テスト"/></div>

前者は下記のようになります。

後者は下記のようになります。

<div class="input text"><label for="textbox">テキストボックス</label><input type="text" name="textbox" size="20" id="textbox" value="テスト"/></div>

　
記述の方法によって、ラベルや IDなどが自動的に編集されます。
後者で「"label" => "テキストボックス"」を指定しない場合は、「name」の値がラベルとして編集されます。
　
デフォルト値を指定する場合は「default="テスト"」のように指定します。「value="テスト"」と指定しても問題ないように見えますが、入力エラーが起こった場合などに入力値がもとに戻ってしまいますので、間違いないようにしましょう。
※「"size" => 10」の指定は、CSSの設定によっては指定しても意味がない場合があります。
　
　
ちなみに、テキストボックスだけではありませんが、
echo $this -> Form -> input ( "textbox", [ "type" => "text",
の部分は、
echo $this -> Form -> control ( "textbox", [ "type" => "text",
でも問題ありません。
　
　

テキストエリア

echo $this -> Form -> textarea ( "area", [ "cols" => 10,
                                           "rows" => 2 ] );
  もしくは
echo $this -> Form -> input ( "area", [ "type" => "textarea",
                                        "cols" => 10,
                                        "rows" => 2,
                                        "label" => "テキストエリア" ] );

echo $this -> Form -> textarea ( "area", [ "cols" => 10,

"rows" => 2 ] );

もしくは

echo $this -> Form -> input ( "area", [ "type" => "textarea",

"cols" => 10,

"rows" => 2,

"label" => "テキストエリア" ] );

　
テキストエリアの縦横のサイズは、「"cols" => 10」「"rows" => 2」で指定します。
　
　

パスワード

echo $this -> Form -> password ( "pw" );
  もしくは
echo $this -> Form -> input ( "pw", [ "type" => "password",
                                      "label" => "パスワード" ] );

echo $this -> Form -> password ( "pw" );

もしくは

echo $this -> Form -> input ( "pw", [ "type" => "password",

"label" => "パスワード" ] );

hiddenタグ

echo $this -> Form -> hidden ( "Hide", [ "value" => "Hide Message" ] ) );
  もしくは
echo $this -> Form -> input ( "Hide", [ "type" => "hidden",
                                        "value" => "Hide Message" ] );

echo $this -> Form -> hidden ( "Hide", [ "value" => "Hide Message" ] ) );

もしくは

echo $this -> Form -> input ( "Hide", [ "type" => "hidden",

"value" => "Hide Message" ] );

ファイルアップロード

echo $this -> Form -> file ( "fileupload" );
  もしくは
echo $this -> Form -> input ( "fileupload", [ "type" => "file",
                                              "label" => "ファイル" ] );

echo $this -> Form -> file ( "fileupload" );

もしくは

echo $this -> Form -> input ( "fileupload", [ "type" => "file",

"label" => "ファイル" ] );

チェックボックス

echo $this -> Form -> checkbox ( "check", [ "id" => "check",
                                            "value" => "check1",
                                            "hiddenField" => false ] );
echo $this -> Form -> label ( "check", "check1!" );
echo $this -> Form -> checkbox ( "check", [ "id" => "check",
                                            "value" => "check2" ] );
echo $this -> Form -> label ( "check", "check2!" );

  もしくは
echo $this -> Form -> input ( "check", [ "type" => "checkbox",
                                         "value" => "check1",
                                         "label" => "チェックボックス1",
                                         "checked" => true,
                                         "hiddenField" => false ] );
echo $this -> Form -> input ( "check", [ "type" => "checkbox",
                                         "value" => "check2",
                                         "label" => "チェックボックス2" ] );

echo $this -> Form -> checkbox ( "check", [ "id" => "check",

"value" => "check1",

"hiddenField" => false ] );

echo $this -> Form -> label ( "check", "check1!" );

echo $this -> Form -> checkbox ( "check", [ "id" => "check",

"value" => "check2" ] );

echo $this -> Form -> label ( "check", "check2!" );

もしくは

echo $this -> Form -> input ( "check", [ "type" => "checkbox",

"value" => "check1",

"label" => "チェックボックス1",

"checked" => true,

"hiddenField" => false ] );

echo $this -> Form -> input ( "check", [ "type" => "checkbox",

"value" => "check2",

"label" => "チェックボックス2" ] );

　
「"value" => "check1"」を編集しない場合は「value="1"」が自動的に編集されます。
そのため、同じ nameのチェックボックスの項目が複数ある場合は、どのチェックボックスにチェックが入ったかを知るために「"value" => "check1"」の編集は必須になります。
　
「"checked" => true」は、デフォルトでチェックを入れておきたい場合に指定します。
　
「"hiddenField" => false」を編集すると、自動編集される「<input type="hidden" name="check" value="0"/>」の hiddenの値が編集されなくなります。
チェックボックスがチェックされなかった場合の対処方法も含め、指定するか否かを確認します。
　
また、後者の指定の仕方では、自動的に「divタグ」が編集されるため、項目が縦に並びます。
項目を横並びにしたい場合は、前者の指定の仕方をする必要があります。
　
もしくは、下記のラジオボタンのところでサンプルの記述をしていますが「templates」の指定をすることで、より柔軟な表現が可能になります。
　
　

ラジオボタン

echo $this -> Form -> radio ( "radiobutton1", [ "男", "女", "その他" ] );
  もしくは
echo $this -> Form -> radio ( "radiobutton2", [ "male" => "男",
                                                "female" => "女",
                                                "etc" => "その他" ] );
  もしくは
echo $this -> Form -> input ( "radiobutton3", 
                                [ "type" => "radio",
                                  "options" => [ "male" => "男",
                                                 "female" => "女",
                                                 "etc" => "その他" ], 
                                  "value" => "female",
                                  "empty" => "None",
                                  "templates" => [ "radioWrapper" => '<div class="radio-extention">{{label}}</div>' ] ] );
  もしくは
echo $this -> Form -> input ( "radiobutton4",
                                [ "type" => "radio",
                                  "options" => [ [ "value" => "male",
                                                   "text" => "男" ],
                                                 [ "value" => "female",
                                                   "text" => "女",
                                                   "checked" => true ], 
                                                 [ "value" => "etc",
                                                   "text" => "その他" ] ] ] );

echo $this -> Form -> radio ( "radiobutton1", [ "男", "女", "その他" ] );

もしくは

echo $this -> Form -> radio ( "radiobutton2", [ "male" => "男",

"female" => "女",

"etc" => "その他" ] );

もしくは

echo $this -> Form -> input ( "radiobutton3",

[ "type" => "radio",

"options" => [ "male" => "男",

"female" => "女",

"etc" => "その他" ],

"value" => "female",

"empty" => "None",

"templates" => [ "radioWrapper" => '<div class="radio-extention">{{label}}</div>' ] ] );

もしくは

echo $this -> Form -> input ( "radiobutton4",

[ "type" => "radio",

"options" => [ [ "value" => "male",

"text" => "男" ],

[ "value" => "female",

"text" => "女",

"checked" => true ],

[ "value" => "etc",

"text" => "その他" ] ] ] );

　
1つ目の指定の方法では、valueの値は「0」から「1」「2」と自動的に数値が編集されます。
また、1つ目、2つ目の指定の方法では、初期値を指定する方法が分かりませんでした。
　
3つ目には、「templates」という項目を追加していますが、「templates」の指定をすることでヘルパーを使って表示するデザインを希望通りの表現にすることが可能です。
「templates」の指定は 4つ目の記述方法でも指定可能です。
　
また、3つ目には「"empty" => true」という項目を追加していますが、一度クリックすると外すことができないラジオボタンで、空白値を選択できるようにする設定もできます。「"empty" => "None"」のようにラベルの値を指定することもできます。
　
　

セレクトボックス・プルダウンリスト

echo $this -> Form -> select ( "select1",
                                 [ "男", "女", "その他" ],
                                 [ "empty" => "Choose One" ] );
  もしくは
echo $this -> Form -> select ( "select2",
                                 [ "male" => "男",
                                   "female" => "女",
                                   "etc" => "その他"],
                                 [ "multiple" => true ] );
  もしくは
echo $this -> Form -> input  ( "select3",
                                 [ "type" => "select",
                                   "options" => [ "male" => "男",
                                                  "female" => "女",
                                                  "etc" => "その他" ], 
                                   "value" => "female",
                                   "multiple" => true,
                                   "empty" => "Choose One" ] );
  もしくは
echo $this -> Form -> input  ( "select4",
                                 [ "type" => "select",
                                   "options" => [ [ "value" => "male",
                                                    "text" => "男" ],
                                                  [ "value" => "female",
                                                    "text" => "女",
                                                    "selected" => true ], 
                                                  [ "value" => "etc",
                                                    "text" => "その他" ] ], 
                                   "empty" => "Choose One" ] );

echo $this -> Form -> select ( "select1",

[ "男", "女", "その他" ],

[ "empty" => "Choose One" ] );

もしくは

echo $this -> Form -> select ( "select2",

[ "male" => "男",

"female" => "女",

"etc" => "その他"],

[ "multiple" => true ] );

もしくは

echo $this -> Form -> input ( "select3",

[ "type" => "select",

"options" => [ "male" => "男",

"female" => "女",

"etc" => "その他" ],

"value" => "female",

"multiple" => true,

"empty" => "Choose One" ] );

もしくは

echo $this -> Form -> input ( "select4",

[ "type" => "select",

"options" => [ [ "value" => "male",

"text" => "男" ],

[ "value" => "female",

"text" => "女",

"selected" => true ],

[ "value" => "etc",

"text" => "その他" ] ],

"empty" => "Choose One" ] );

　
1つ目の指定の方法では、ラジオボタンと同様に valueの値は「0」から「1」「2」と自動的に数値が編集されます。
また、1つ目、2つ目の指定の方法では、初期値を指定する方法が分かりませんでした。
　
「"empty" => "Choose One"」を指定することで、何も指定しない項目を設定することができます。
「"multiple" => true」を指定することで、複数指定可能なタイプのセレクトボックスになります。
　
1つ目と 2つ目の記述方法では、「"empty" => "Choose One"」と「"multiple" => true」を同時に指定することはできません。
　
　

ボタン

echo $this -> Form -> submit ( "OK");
  もしくは
echo $this -> Form -> button ( "Add", [ "class" => "yourClass" ] );
  もしくは
echo $this -> Form -> input  ( "Add", [ "type" => "button",
                                        "class" => "yourClass" ] );
  もしくは
echo $this -> Form -> reset  ( "Reset");
  もしくは
echo $this -> Form -> input  ( "Reset", [ "type" => "reset" ] );

echo $this -> Form -> submit ( "OK");

もしくは

echo $this -> Form -> button ( "Add", [ "class" => "yourClass" ] );

もしくは

echo $this -> Form -> input ( "Add", [ "type" => "button",

"class" => "yourClass" ] );

もしくは

echo $this -> Form -> reset ( "Reset");

もしくは

echo $this -> Form -> input ( "Reset", [ "type" => "reset" ] );

　
1つ目と 2つ目は「submit」ボタンになります。
3つ目はただのボタンになりますので、JavaScriptの処理を記述する場合はこのボタンの記述になります。
　
4つ目、5つ目は、リセットボタンになります。
　
また、3つ目のボタンのところで参考に記述していますが、classや idの指定もできます。
「"class" => "yourClass"」「"id" => "yourId"」のような感じで、引数として指定するとそれが反映されます。
これは、ボタンに限らず、その他の入力タイプでも指定が可能ですので、入力フォームのデザインを指定したい場合に役に立ちます。
　
　

CakePHP3 ビギナーズガイド: 最新のPHPフレームワークをマスターせよ！ PRIMERシリーズ (libroブックス)

CakePHP3の Form Helperで日付、時間関連の処理

　
CakePHP3では、日付や時間に関する処理も多く用意してあります。
　

年のリストを指定して生成する場合

　

　
「minYear」「maxYear」で開始年、終了年を指定することができます。
また、指定は「date ( "Y" )」のように、現在の年を指定することもできます。

echo $this -> Form -> year ( "year_list", [ "minYear" => 2010,
                                            "maxYear" => date( "Y" ) ] );

1 2	echo $this -> Form -> year ( "year_list", [ "minYear" => 2010, "maxYear" => date( "Y" ) ] );

生年月日のリストを生成する場合

「minYear」「maxYear」は、「date ( "Y" ) - 70」のように計算式を含めて指定することもできます。

echo $this -> Form -> date ( "birthday",  [ "label" => "Date of birth",
                                            "dateFormat" => "DMY",
                                            "minYear" => date ( "Y" ) - 70,
                                            "maxYear" => date ( "Y" ) - 18 ] );

echo $this -> Form -> date ( "birthday", [ "label" => "Date of birth",

"dateFormat" => "DMY",

"minYear" => date ( "Y" ) - 70,

"maxYear" => date ( "Y" ) - 18 ] );

「月」の表記を数値にする場合

　

　

　
標準の設定では、「月」の表記は「January」「February」のように英語表記になっていますので、「"monthNames" => false」を指定することで数値で表記することができます。
「templates」を設定することで表示形式を指定します。
「interval」を設定すると、「分」の表記を指定の間隔で編集することができます。
その他、「default」では初期値を、「empty」では未選択の時のラベルの値を指定します。

echo $this -> Form -> input (
     "jp_datetime", [ "label" => "日本表記の日時",
                      "type" => "datetime",
                      "dateformat" => "YMD",
                      "monthNames" => false,
                      "separator" => "/",
                      "templates" => [ "dateWidget" => '{{year}} 年 {{month}} 月 {{day}} 日 {{hour}} 時 {{minute}} 分' ],
                      "minYear" => date ( "Y" ) - 70,
                      "maxYear" => date ( "Y" ) - 18,
                      "default" => date ( "Y-m-d" ),
                      "interval" => 5,
                      "empty" => [ "year" => "年", "month" => "月", "day" => "日", "hour" => "時", "minute" => "分" ] ] );

echo $this -> Form -> input (

"jp_datetime", [ "label" => "日本表記の日時",

"type" => "datetime",

"dateformat" => "YMD",

"monthNames" => false,

"separator" => "/",

"templates" => [ "dateWidget" => '{{year}} 年 {{month}} 月 {{day}} 日 {{hour}} 時 {{minute}} 分' ],

"minYear" => date ( "Y" ) - 70,

"maxYear" => date ( "Y" ) - 18,

"default" => date ( "Y-m-d" ),

"interval" => 5,

"empty" => [ "year" => "年", "month" => "月", "day" => "日", "hour" => "時", "minute" => "分" ] ] );

- CakePHP 3.x 4.x CakePHP3

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数

CakePHP3で特定フォルダのパスの定数を解説。root、DocumentRoot、app、config、webroot、tests、tmp、cache、vendor、コア、コアの srcが設定済み。realpath()関数を使うと柔軟なパス指定が可能。

: CakePHP3で「SQLSTATE[23000]: Integrity constraint violation」「SQLSTATE[42S22]: Column not found」などのエラーが出たときの確認するポイント

CakePHP3の開発で発生する「SQLSTATE[23000]: Integrity constraint violation」「SQLSTATE[42S22]: Column not found」のエラーには特有の原因もあるため、その説明と対処方法の解説。

: CakePHP 2.3でファイルをアップロード・その2　ファイル名を乱数で設定

CakePHPのアップロードするファイル名を乱数で変更しセキュリティを高める方法を解説。

: CakePHP3のCakeDC/UsersのUserHelperでログアウトやreCAPTCHAをカスタマイズ

CakeDC謹製Usersプラグインの紹介。UserHelperを利用し、ログアウトのリンクや権限があるときのみ表示されるリンク、プロフィールページへのリンク、reCAPTCHAの設置方法などを解説。

: CakePHP4で「app_local.php」「.env」を利用して環境ごとの定数を振り分ける方法

CakePHP4で.env、app_local.phpに定数を定義してそれを呼び出す方法の解説。Gitでは管理せず本番環境と開発環境とで異なる定数を定義するためそれを利用する方法。

: CakePHP 2.3　連携先のテーブルの項目で条件抽出する場合

アソシエーション（連携）している先のテーブルの項目で条件抽出する際の考え方と注意点をサンプルソースを用いて説明しています。

: CakePHP3のアソシエーションでJOINのタイプのLEFT、INNERを切り替えながら使う方法

CakePHP3でテーブルのアソシエーションしたデータの取得をコントローラー側でINNERかLEFTを指定する方法を解説。TableファイルにINNERで指定していてもController側で変更ができる。

: CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法

CakePHP3でデフォルトのソート条件を設定しつつ画面上でユーザがソート条件を選択したときもソート処理を実行させる方法を解説。ソート条件はページネーションの処理として実装。

: cakephp3 カスタムバリデーションを簡易的に実装する方法

CakePHP3の独自のバリデーションをテーブルクラス内に簡単に記述する方法を解説。他のテーブルクラスでは使えないが、記述する量は少なく実装できるため、他で使わない処理を書くのには便利。

: CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法

CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングをする方法を解説。インストール方法、読み込み方法。および、具体的なスクレイピングを実行するサンプルソースも。