HOME>WEBプログラム覚書>[CakePHP2.0.x]FormHelper::input()の出力メモ

[CakePHP2.0.x]FormHelper::input()の出力メモ

FormHelper::input()の出力がどのくらい変更できるかのテスト。

デフォルトの出力

対象はUserモデルとして、こんな感じに書くと

PHP

  1. <?php
  2. echo $this->Form->input('name');
  3. ?>

出力はこうなる。

通常の出力

  1. <div class="input text required">
  2.     <label for="UserName">Name</label>
  3.     <input name="data[User][name]" maxlength="255" type="text" id="UserName">
  4. </div>
  5.  

エラー時の出力はこうなる。

エラー時の出力

  1. <div class="input text required error">
  2.     <label for="UserName">Name</label>
  3.     <input name="data[User][name]" maxlength="255" type="text" value="" id="UserName" class="form-error">
  4.     <div class="error-message">notempty</div>
  5. </div>
  6.  

オプション設定して出力

オプションをこんな風に記述すると

PHP

  1. <?php
  2. echo $this->Form->input('name', array(
  3.         'class' => 'user-name',
  4.  
  5.         'label' => array(
  6.             'text'   => 'あなたの名前を入れてください。',
  7.             'id'     => 'YourName',
  8.             'class'  => 'your-name',
  9.         ),
  10.  
  11.         // 外側のDiv
  12.         'div' => array(
  13.             'tag'   => 'span',
  14.             'class' => 'input-wrapper',
  15.         ),
  16.  
  17.         'error' => array(
  18.             'notempty' => '必須項目です。',// 通常はモデルでバリデーションと一緒に設定する
  19.             'attributes' => array(
  20.                 'wrap'  => 'span',
  21.                 'class' => 'label label-warning'
  22.             ),
  23.         ),
  24.  
  25.         'before'  => '<span>↓↓↓before</span>',
  26.         'after'   => '<span>↑↑↑after</span>',
  27.         'between' => '<span>→→→between</span>',
  28. ));
  29. ?>

通常の出力はこうなる。

通常の出力

  1. <span class="input-wrapper required">
  2.     <span>↓↓↓before</span>
  3.     <label for="UserName" id="YourName" class="your-name">あなたの名前を入れてください。</label>
  4.     <span>→→→between</span>
  5.     <input name="data[User][name]" class="test" maxlength="255" type="text" id="UserName">
  6.     <span>↑↑↑after</span>
  7. </span>
  8.  

エラー時の出力はこうなる。

エラー時の出力

  1. <span class="input-wrapper required error">
  2.     <span>↓↓↓before</span>
  3.     <label for="UserName" id="YourName" class="your-name">あなたの名前を入れてください。</label>
  4.     <span>→→→between</span>
  5.     <input name="data[User][name]" class="user-name form-error" maxlength="255" type="text" value="" id="UserName">
  6.     <span>↑↑↑after</span>
  7.     <span class="label label-warning">必須項目です。</span>
  8. </span>
  9.  

エラー時に一番外側の要素のclassに追加されるerrorはハードコーディングされているので変更は不可能。 ということで、普通にやってCakePHPをTwitter Bootstrapに合わせるのは無理ということがわかりました。 LESS使いましょう。

参照サイト
投稿日 2012年4月 4日 04:34
カテゴリ PHP
タグ CakePHP | テストコード | フレームワーク
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1293

コメント

コメントする
Name
Email Address
URL