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 カスタムバリデーションを簡易的に実装する方法

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

: CakePHP3のビューで受取ったテーブルのオブジェクトを連想配列に変換する方法

コントローラーからビューに送ったテーブルのオブジェクトを連想配列に変換し、ビューの中で自由に使えるようにするメソッド「toArray()」の解説。連想配列に変換できれば利用度アップ！

: CakePHPを学ぶ際にはオブジェクト指向を学ぼう

CakePHPはオブジェクト指向で書かれていますので、CakePHPを学ぶにはオブジェクト指向も学びましょう。

: CakePHP3で他のテーブルのマスタテーブルからセレクトボックス（プルダウンリスト）を作る

他のテーブルのマスタのレコードからプルダウンリストを作成し、選択できるようにするサンプルプログラムと解説。ORMの設定によりデータベースの値を取得し、配列を作成し optionsに与える。

: CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い

CakePHP3のシェルスクリプトを作成し、コマンドラインから実行する方法を解説。複数単語をつなげる場合の対応方法がCakePHP2より制限が厳しくなったのでCakePHP3の命名規則の確認が必要だ。

: CakePHP4 のコマンドプログラムからコンポーネントを読み込む方法解説

CakePHP4でコマンドプログラムからコンポーネントを呼び出す方法を解説。コントローラーから呼び出すときと大差はないが、use句でコンポーネントを指定する事がポイント。

: CakePHP3で静的ページの作成は webrootか pagesを使う。トップページを参考に解説

CakePHP3で静的なページを設置する場合の方法（webrootとpagesとを活用する方法）を解説。pagesの解説はデフォルトのトップページがどう表示されているかを参考に解説。ルーティングの機能も。

: CakePHP 2.3　Search Pluginで検索処理　その５入力項目に複数項目入力した場合の AND検索、OR検索

CakePHPの検索プラグイン Search Pluginの検索処理の中で複数項目を入力した場合の AND検索、OR検索についての解説です。

: CakePHP3のfriendsofcake/searchでブックマークチュートリアルのタグ検索を実装

CakePHP3のCookbookにあるブックマークチュートリアル。ここで紹介されているタグで検索する処理を検索プラグイン「friendsofcake/search」で実現する方法を解説しました。

: CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」

CakePHPでQRコードを生成するライブラリ「cakePHP-QR-Code-Helper」の紹介。GDライブラリのインストールも必要ないHelperとして提供されているため、ファイルを設置すればすぐに使用可能。

PREV: MySQLの設定ファイル my.cnfがある場所と読み込み順序
NEXT: CakePHP3のcontroller内でテンプレート、レイアウトを変更する際の指定方法

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

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

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

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

CakePHP3の Form Helperの記述の仕方

フォーム開始タグ

フォーム終了タグ

ラベル

テキストボックス

テキストエリア

パスワード

hiddenタグ

ファイルアップロード

チェックボックス

ラジオボタン

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

ボタン

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

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

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

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

CakePHP3の関連記事

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

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

CakePHP3のビューで受取ったテーブルのオブジェクトを連想配列に変換する方法

CakePHPを学ぶ際にはオブジェクト指向を学ぼう

CakePHP3で他のテーブルのマスタテーブルからセレクトボックス（プルダウンリスト）を作る

CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い

CakePHP4 のコマンドプログラムからコンポーネントを読み込む方法解説

CakePHP3で静的ページの作成は webrootか pagesを使う。トップページを参考に解説

CakePHP 2.3　Search Pluginで検索処理　その５入力項目に複数項目入力した場合の AND検索、OR検索

CakePHP3のfriendsofcake/searchでブックマークチュートリアルのタグ検索を実装

CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」

WordPress投稿にPHPを記述するショートコードの使い方add_shortcode

コピーコンテンツ対策.htaccessで直リンク禁止しリダイレクトで対応

評価点投票プラグイン10個を比較！WordPressで口コミサイトを構築

BackWPupでバックアップ・リストア（復元）の具体的手順

コンパクトキーボード・KEK-EA9AU・FKB1420の魅力