back
フォームヘルパーを利用する (4/5)
■ラジオボタン／セレクト項目の生成
先ほどの説明で、あえて省いておいたフォーム部品があります。それは「ラジオボタン」と「セレクト」です。
これらは、複数の項目を持つ、複雑な構造の部品です。このため、作成するメソッドの使い方も、他のものとは若干違っています。
以下に、使い方をまとめておきましょう。
・ラジオボタン
・セレクト
他のタグ生成メソッドと異なり、第2引数には、表示する項目の情報を連想配列としてまとめたものを用意します。オプション設定（属性の値などを設定するためのもの）を用意する場合は、第3引数に用意します。
問題は、表示する項目の情報をどう用意するか、でしょう。これは、１つ１つの項目の情報をまとめた連想配列の連想配列になります。ざっとこんな感じですね。
表示項目は、最低限、'value'と'text'が必要でしょう。valueが、その項目を選択した時の値となり、textが項目として表示されるテキストになります。
では、簡単なサンプルを挙げておきましょう。ラジオボタンと２つのセレクトを表示するサンプルです（下のリスト参照）。作成されたフォームを実際に触って動作を確かめてみましょう。
ラジオボタンは、項目の情報を元に、<input type="radio">タグと、それにテキストを表示する<label>タグがセットで生成されます。
セレクトは、ここでは複数項目を選択するのに、['multiple'=>true]という値を第3引数に指定しています。すると、自動的に一覧リストの形で表示されることがわかります。これを付けず、１つだけが選択される場合は、自動的にポップアップメニューのスタイルになります。
もちろん、第3引数にsize属性などを用意すればポップアップメニューとリスト表示を明示的に設定することもできますが、「multipleかどうかで自動的に切り替えてくれる」というのはなかなか便利ですね！
これらは、複数の項目を持つ、複雑な構造の部品です。このため、作成するメソッドの使い方も、他のものとは若干違っています。
以下に、使い方をまとめておきましょう。
・ラジオボタン
<?=$this->Form->radio( 名前 , [ ボタン情報 ]) ?>
・セレクト
<?=$this->Form->select( 名前 , [ 項目情報 ]) ?>
他のタグ生成メソッドと異なり、第2引数には、表示する項目の情報を連想配列としてまとめたものを用意します。オプション設定（属性の値などを設定するためのもの）を用意する場合は、第3引数に用意します。
問題は、表示する項目の情報をどう用意するか、でしょう。これは、１つ１つの項目の情報をまとめた連想配列の連想配列になります。ざっとこんな感じですね。
[
['value'=> 値, 'text'=> 表示テキスト ] ,
['value'=> 値, 'text'=> 表示テキスト ] ,
……略……
]
表示項目は、最低限、'value'と'text'が必要でしょう。valueが、その項目を選択した時の値となり、textが項目として表示されるテキストになります。
では、簡単なサンプルを挙げておきましょう。ラジオボタンと２つのセレクトを表示するサンプルです（下のリスト参照）。作成されたフォームを実際に触って動作を確かめてみましょう。
ラジオボタンは、項目の情報を元に、<input type="radio">タグと、それにテキストを表示する<label>タグがセットで生成されます。
セレクトは、ここでは複数項目を選択するのに、['multiple'=>true]という値を第3引数に指定しています。すると、自動的に一覧リストの形で表示されることがわかります。これを付けず、１つだけが選択される場合は、自動的にポップアップメニューのスタイルになります。
もちろん、第3引数にsize属性などを用意すればポップアップメニューとリスト表示を明示的に設定することもできますが、「multipleかどうかで自動的に切り替えてくれる」というのはなかなか便利ですね！
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<div>
<h3>Index Page</h3>
<p><?= $message ?></p>
<?=$this->Form->create(null,[
'type' => 'post',
'url' => ['controller' => 'Helo', 'action' => 'index']]
) ?>
<?=$this->Form->radio('radio',[
['value'=>'男','text'=>'male','checked'=>true],
['value'=>'女','text'=>'female']
]) ?>
<?=$this->Form->select('select',[
['value'=>'Mac','text'=>'Mac OS X'],
['value'=>'Windows','text'=>'Windows 10'],
['value'=>'Linux','text'=>'Linux']
]) ?>
<?=$this->Form->select('select2',[
['value'=>'Mac','text'=>'Mac OS X'],
['value'=>'Windows','text'=>'Windows 10'],
['value'=>'Linux','text'=>'Linux']
],['multiple'=>true]) ?>
<?=$this->Form->submit('OK') ?>
<?=$this->Form->end() ?>
</form>
</div>
| << 前へ | 次へ >> |