【cakePHP3.x】cakePHP3.x系のformHelperの使い方

webサイトをcakePHP3で組んでいた際、応募フォームを作る過程でformの作り方を調べていたら2系と3系とで作り方が変わっていた
かつ、CSSやJSとも連携させようとすると上手くできなかったので作り方をメモ

環境
virtualbox / centOS7 / nginx / php5.6
公式ドキュメント

そもそもcakePHPのformHelperを使う意味

私は最初formHelperを使わずに自前でformタグ・inputタグを書いて、レイアウトまで整えていました
そのあと、セキュリティのこと考えないとなーと色々調べていたら、formHeplerを使うとCSRF対策のトークン関連の処理を内包してくれるとのことでした
自分でセキュリティ対策を0から組める自信がない方はformHelperを使うことをオススメします

コード例

hogehoge.ctp

<?php echo $this->Html->css('hogehoge.css') ?>
<?php echo $this->Html->script('hogehoge.js') ?>

// CSSは割愛
<div id="contact_info">
    <?=$this->Form->create(null, ['url' => ['action' => 'submit', 'type' => 'post'], 'onsubmit' => 'return send()'])?>
        <div class="tr1 clear">
            <p class="th1">名前</p>
            <div class="td1">
                <?php echo $this->Form->input('name', ['label' => false, 'templates' => ['inputContainer' => '{{content}}']]); ?>
            </div>
        </div>

        <div class="tr1 clear">
            <p class="th1">備考</p>
            <div class="td1">
                <?php echo $this->Form->input('remarks', ['label' => false, 'type' => 'textarea', 'placeholder' => 'hogehoge' ,'templates' => ['inputContainer' => '{{content}}']]); ?>
            </div>
        </div>

        <div id="contact_submit">
            <?php echo $this->Form->submit('送信', ['label' => false, 'templates' => ['submitContainer' => '{{content}}']]); ?>
        </div>
    <?=$this->Form->end()?>
</div>

▼送信ボタンが押された時に未入力チェックを行うJS

hogehoge.js

function send() {
    name = document.getElementById('name').value;

    if (name === '') {
        alert('名前が入力されていません');
        return false;
    }
}

結果

個別の関数説明

▼ $this->Form->create
第2引数($options)で色々な設定を登録できます

キー	説明
url	action : submit時のアクション名(関数名) type : [post / get] 通信種別
onsubmit	submit時にJSを挟む 関数からfalseがreturnされた場合、submitがキャンセルされる

▼ $this->Form->input
第1引数はコントローラで受け取る際の名前を指定する
第2引数($options)で色々な設定を登録できます

キー	説明
label	input領域の左側に表示させる語句 falseで非表示
type	未入力で通常のinputタグ textareaやradioなども指定可能
placeholder	placeholderの設定が可能
templates	何も指定しない場合、inputタグがdivタグで括られる 回避策は2つ 1.'templates' => ['XXXContainer' => '{{content}}']と指定する 2.プロジェクト名/vender/cakephp/cakephp/src/View/Helper/FormHelper.phpの$_defaultConfig変数内のtemplateを書き換える

▼ $this->Form->submit
第1引数はボタン内に表示させる文字
第2引数はinputと同じ

備考

他にも色々な設定が可能です
公式ドキュメントやソースを見てみてください