[Cakephp]Formヘルパー不要なタグ出力で悩まされたら

Cakephp で、ビュー作成時に Formヘルパー を使用していると、不要な <div> などのタグ出力に悩まされる場合があります。

特に、フレームワークを使い始めて間もない人は、その仕様を把握する、慣れるだけでも結構大変だったりします。

今回は、Cakephp の Formヘルパーの使用時、不要なタグを出力しないための設定です。

Formヘルパーを使う

WEB開発業務で良くあるケースとして。「お問い合わせフォームを作成したい」といったことがあります。

 

従来のように、HTML を用いて各お問い合わせフォームを作ることも可能なのですが、フレームワークを使用し、Formヘルパーを使用した方が CSRF(クロスサイトリクエストフォージェリ) 攻撃のセキュリティ対策が楽だったり、品質の面でも有利です。

そして、使い慣れると開発効率も良くなるので、是非慣れておきたい所です。

 

Formヘルパー の基本的な使い方については、ドキュメントが充実しているので、そちらに任せます。

覚えておきたいsetTemplates

Formヘルパー の基本的な使い方は、ドキュメントに沿えば決して難しくはありません。

以下は、Formヘルパーを使用した、簡単なフォーム作成例です。

<?= $this->Form->create($entitiyName) ?>

<?= $this->Form->control('hoge') ?>

// 以下、好きなようにフォームを作成して・・

<?= $this->Form->end() ?>

で、あっという間にフォームを出力してくれます。

ですが、この$this->Form->control()が結構曲者で、デフォルトでタグ出力をしてくれますが、便利な反面、フォームのスタイルなどを自由にカスタマイズしたい時に不要になる場合も多いです。

初心者の方は、「なんで勝手にタグ出力されてんの？なんで消えないの？」 (躓いて時間を無駄に消費したのち)「素のHTMLの方が慣れてるし、楽じゃな...」という思考になりがちです。

 

そこで Formヘルパー のタグ出力を設定できるのが、setTemplates()です。

各フォームのオプションとして、不要なタグ出力の制御はある程度できますが、setTemplates()を使用することで、各フォームにわざわざ個別に設定しなくても、一括でコントロール可能です。

 

やり方はいくつかありますが、今回は 影響度を小さくするために各ビュー単位で設定する方法 を紹介します。

例: ビューファイルの先頭に書く(Cake3なら.ctp。Cake4なら.php)

<?php
// 対象テンプレート内で記述する
$this->Form->setTemplates([
   'inputContainer' => '{{content}}',
   'label' => false,
]);

■ 上記コードでやったこと

このようにして、不要なタグ出力を制御することが可能です。スタイルクラスの付与などは、通常どおり、HTMLタグの class 属性を付与するだけです。これでカスタマイズはバッチリ！

 

Cakephp4: setTemplatesの仕様一覧

師匠 (先生？先輩？仲間？お兄ちゃん？) に教えてもらったsetTemplates()の仕様一覧が便利だったので、共有しておきます。

https://github.com/cakephp/cakephp/blob/3.x/src/View/Helper/FormHelper.php#L101-L168

'templates' => [
           // Used for button elements in button().
           'button' => '<button{{attrs}}>{{text}}</button>',
           // Used for checkboxes in checkbox() and multiCheckbox().
           'checkbox' => '<input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>',
           // Input group wrapper for checkboxes created via control().
           'checkboxFormGroup' => '{{label}}',
           // Wrapper container for checkboxes.
           'checkboxWrapper' => '<div class="checkbox">{{label}}</div>',
           // Widget ordering for date/time/datetime pickers.
           'dateWidget' => '{{year}}{{month}}{{day}}{{hour}}{{minute}}{{second}}{{meridian}}',
           // Error message wrapper elements.
           'error' => '<div class="error-message">{{content}}</div>',
           // Container for error items.
           'errorList' => '<ul>{{content}}</ul>',
           // Error item wrapper.
           'errorItem' => '<li>{{text}}</li>',
           // File input used by file().
           'file' => '<input type="file" name="{{name}}"{{attrs}}>',
           // Fieldset element used by allControls().
           'fieldset' => '<fieldset{{attrs}}>{{content}}</fieldset>',
           // Open tag used by create().
           'formStart' => '<form{{attrs}}>',
           // Close tag used by end().
           'formEnd' => '</form>',
           // General grouping container for control(). Defines input/label ordering.
           'formGroup' => '{{label}}{{input}}',
           // Wrapper content used to hide other content.
           'hiddenBlock' => '<div style="display:none;">{{content}}</div>',
           // Generic input element.
           'input' => '<input type="{{type}}" name="{{name}}"{{attrs}}/>',
           // Submit input element.
           'inputSubmit' => '<input type="{{type}}"{{attrs}}/>',
           // Container element used by control().
           'inputContainer' => '<div class="input {{type}}{{required}}">{{content}}</div>',
           // Container element used by control() when a field has an error.
           'inputContainerError' => '<div class="input {{type}}{{required}} error">{{content}}{{error}}</div>',
           // Label element when inputs are not nested inside the label.
           'label' => '<label{{attrs}}>{{text}}</label>',
           // Label element used for radio and multi-checkbox inputs.
           'nestingLabel' => '{{hidden}}<label{{attrs}}>{{input}}{{text}}</label>',
           // Legends created by allControls()
           'legend' => '<legend>{{text}}</legend>',
           // Multi-Checkbox input set title element.
           'multicheckboxTitle' => '<legend>{{text}}</legend>',
           // Multi-Checkbox wrapping container.
           'multicheckboxWrapper' => '<fieldset{{attrs}}>{{content}}</fieldset>',
           // Option element used in select pickers.
           'option' => '<option value="{{value}}"{{attrs}}>{{text}}</option>',
           // Option group element used in select pickers.
           'optgroup' => '<optgroup label="{{label}}"{{attrs}}>{{content}}</optgroup>',
           // Select element,
           'select' => '<select name="{{name}}"{{attrs}}>{{content}}</select>',
           // Multi-select element,
           'selectMultiple' => '<select name="{{name}}[]" multiple="multiple"{{attrs}}>{{content}}</select>',
           // Radio input element,
           'radio' => '<input type="radio" name="{{name}}" value="{{value}}"{{attrs}}>',
           // Wrapping container for radio input/label,
           'radioWrapper' => '{{label}}',
           // Textarea input element,
           'textarea' => '<textarea name="{{name}}"{{attrs}}>{{value}}</textarea>',
           // Container for submit buttons.
           'submitContainer' => '<div class="submit">{{content}}</div>',
           // Confirm javascript template for postLink()
           'confirmJs' => '{{confirm}}',
           // selected class
           'selectedClass' => 'selected',
       ],

これで、各フォームパーツ名を見ながら、Cakephp のデフォルトのタグ出力の仕様がわかります。

逆に出力したいタグがあれば、対象のキーに対して、カスタマイズすることにより、自由に使いこなすことが可能になります。