Posts tagged radio
Mac でフォーム入力時に Tab キーでチェックボックスなどにもフォーカスさせる
1Mac にスイッチしてから不便だったことがあります。ブラウザでフォーム入力しているときに Tabキーを押すとチェックボックスやラジオボタンなどにフォーカスがいかないことです。Windows の時は Tab でフォーカスをチェックボックスに当ててスペースで選択したり、ラジオボタンを矢印キーで選択したりとキーボードですませていたので非常に不便でした。
(続きを読む…)
CakePHP HTML ヘルパーで出力するラジオボタンにラベルを付ける方法
2CakePHP 1.1 の HTML ヘルパーが出力するラジオボタンにはラベルが付いていないのでラジオボタン以外の文字の部分をクリックしてもチェックができません。そこで CakePHP HTML ヘルパーで出力されるタグを変更する方法 のエントリーの方法を使用してラジオボタンにラベルを付加してみました。
app/config/tags.ini.php
radio = <label><input type="radio" name="data[%s][%s]" id="%s" %s />%s</label>
あとは普通に $html->radio() を使用して出力すればラベルが付加されています。
CakePHP 1.2 ではラジオボタンにラベルがついた状態で出力されていました。
CakePHP HTML ヘルパーで textarea を出力する
1CakePHP の HTML ヘルパーでテキストエリアを出力するには下記のように書きます。
<?php echo $html->textarea("Model/field", array("cols"=>20, "rows"=>5, "value"=>"hoge")); ?>
checkbox や radio などと違って第2引数に HTML 属性値がくることに注意が必要です。
array("value"=>"hoge")
などと書くことにより初期値を入れることができます。
CakePHP htmlヘルパーでラジオボタンを離れた場所に分けて書く方法
1html ヘルパーでラジオボタンを書く場合
<?php echo $html->radio('Model/field', array('1'=>'option1','2'=>'option2', '3'=>'option3')); ?>
のように書くと、ラジオボタンを横に並べて表示させることができます。
ただ、デザインによってはテーブルなどを使用していたり縦に並べたりして、ひとつづつ表示させたいときもあると思います。
その場合は
<?php echo $html->radio('Model/field', array('1'=>'option1')); ?> <?php echo $html->radio('Model/field', array('2'=>'option2')); ?> <?php echo $html->radio('Model/field', array('3'=>'option3')); ?>
とすれば、それぞれのボタンを希望の位置に表示させることができます。
CakePHP html ヘルパーでラジオボタンの選択状態 (checked) を指定する方法
1html ヘルパーを使用してラジオボタンの選択状態 (checked) を指定する方法です。
下記のようにすると option2 にチェックがつきます。
<?php echo $html->radio('Model/field', array('1'=>'option1','2'=>'option2', '3'=>'option3'), null, array('value'=>'2'), false); ?>
第4パラメータの array(‘value’=>’2′) でチェックするボタンを指定しています。
キーの ‘value’ は固定で、値の’2′ の方をチェックしたいラジオボタンの value 属性の値と同じものを指定すれば、そのボタンがチェックされます。
デフォルトや以前入力された状態を表示するために使用できそうです。
CakePHP html ヘルパーでラジオボタンを表示する
0htmlヘルパーで radio ボタンを表示させるには下記のようにします。
下記の例では3つのラジオボタンを表示しています。
<?php echo $html->radio('Model/field', array('1'=>'option1','2'=>'option2', '3'=>'option3'), ' | ', array('onchange'=>'alert(this.value)'), false); ?>
表示される HTML は下記のようになります。
(実際には1行で出力されますが改行を入れています)
<input type="radio" name="data[Model][field]" id="field_1" onchange="alert(this.value)" value="1" />option1 | <input type="radio" name="data[Model][field]" id="field_2" onchange="alert(this.value)" value="2" />option2 | <input type="radio" name="data[Model][field]" id="field_3" onchange="alert(this.value)" value="3" />option3 |
radio メソッド
string radio(string $fieldName, arrray $options [,string $inbetween=null [,array $htmlAttributes=array() [,bool $return=false ]]])
- $fieldName
- name属性の値
- $option
- array(‘value’=>’表示名’);
value は value=”value” になり、表示名はラジオボタンの後ろに表示される文字名 - $inbetween
- ラジオボタンの間に表示される文字列
- $htmlAttributes
- html の属性 array(‘属性名’=>’値’)で指定する
- $return
- ヘルパーの自動出力を抑止する(参考:ヘルパーの出力を echo を使わずに出力する方法)