目次
はじめに
CakePHPのFormヘルパでは、inputタグをおまかせで作ってくれます。
ですが今回は出力をテーブル形式にしたくて、その方法について調べてみました。
Formヘルパ
Formヘルパでは下記のように書くとHTMLタグに変換されます。
<?= $this->Form->input('name');
<div class="input text required"><label for="name">Name</label><input type="text" name="name" required="required" maxlength="255" id="name"/></div>
変更可能な箇所
この出力のカスタマイズ方法については公式サイトに載っていました。
ですがinputContainerぐらいしか載っていないため、一覧を調べてみました。
下記の表になります。
| 名前 | デフォルト値 |
|---|---|
| ‘button’ | <button{{attrs}}>{{text}}</button> |
| ‘checkbox’ | <input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}> |
| ‘checkboxFormGroup’ | {{label}} |
| ‘checkboxWrapper’ | <div class="checkbox">{{label}}</div> |
| ‘dateWidget’ | {{year}}{{month}}{{day}}{{hour}}{{minute}}{{second}}{{meridian}} |
| ‘error’ | <div class="error-message">{{content}}</div> |
| ‘errorList’ | <ul>{{content}}</ul> |
| ‘errorItem’ | <li>{{text}}</li> |
| ‘file’ | <input type="file" name="{{name}}"{{attrs}}> |
| ‘fieldset’ | <fieldset{{attrs}}>{{content}}</fieldset> |
| ‘formStart’ | <form{{attrs}}> |
| ‘formEnd’ | </form> |
| ‘formGroup’ | {{label}}{{input}} |
| ‘hiddenBlock’ | <div style="display:none;">{{content}}</div> |
| ‘input’ | <input type="{{type}}" name="{{name}}"{{attrs}}/> |
| ‘inputSubmit’ | <input type="{{type}}"{{attrs}}/> |
| ‘inputContainer’ | <div class="input {{type}}{{required}}">{{content}}</div> |
| ‘inputContainerError’ | <div class="input {{type}}{{required}} error">{{content}}{{error}}</div> |
| ‘label’ | <label{{attrs}}>{{text}}</label> |
| ‘nestingLabel’ | {{hidden}}<label{{attrs}}>{{input}}{{text}}</label> |
| ‘legend’ | <legend>{{text}}</legend> |
| ‘multicheckboxTitle’ | <legend>{{text}}</legend> |
| ‘multicheckboxWrapper’ | <fieldset{{attrs}}>{{content}}</fieldset> |
| ‘option’ | <option value="{{value}}"{{attrs}}>{{text}}</option> |
| ‘optgroup’ | <optgroup label="{{label}}"{{attrs}}>{{content}}</optgroup> |
| ‘select’ | <select name="{{name}}"{{attrs}}>{{content}}</select> |
| ‘selectMultiple’ | <select name="{{name}}[]" multiple="multiple"{{attrs}}>{{content}}</select> |
| ‘radio’ | <input type="radio" name="{{name}}" value="{{value}}"{{attrs}}> |
| ‘radioWrapper’ | {{label}} |
| ‘textarea’ | <textarea name="{{name}}"{{attrs}}>{{value}}</textarea> |
| ‘submitContainer’ | <div class="submit">{{content}}</div> |
思った以上にかなりありますね。
テーブルで出力
この中の一部を変更します。
テンプレートファイル（add.cpt）にて、Formヘルパが出力するデフォルトの値を変更します。
今回はFormヘルパが作成するinputタグを囲うinputContainer、ラベルとinputタグ自体の3つを変更します。
$myTemplates = [
'inputContainer' => '<tr>{{content}}</tr>',
'label' => '<th><label{{attrs}}>{{text}}</label></th>',
'input' => '<td><input type="{{type}}" name="{{name}}"{{attrs}}/></td>',
];
$this->Form->templates($myTemplates);
echo $this->Form->control('name');
このようにすると下記のようにテーブル形式でinputタグが出力されます。
<tr><td><label for="name">Name</label></td><td><input type="text" name="name" required="required" maxlength="255" id="name"/></td></tr>
これでテーブルタグでinputタグを作ることが出来ました！快適ですね！