130単位

Smarty html_radios関数でラジオボタンにラベル付け

開発, PHP

ラジオボタンには出来るだけラベルを付けたい派です。

Smartyにはラジオボタンの出力を補助する html_radios というカスタム関数があります。これを単純なかたちで使うと、

<?php
$smarty->assign('perfume', array(
                           1 => 'kashiyuka',
                           2 => 'a-chan',
                           3 => 'nocchi'));
?>

{html_radios name='perfume' options=$perfume}

↓

<label><input type="radio" name="perfume" value="1" />kashiyuka</label>
<label><input type="radio" name="perfume" value="2" />a-chan</label>
<label><input type="radio" name="perfume" value="3" />nocchi</label>

こんなhtmlが出力されます。これ、IE7やFirefoxではラベルが効いているんですが、IE6だとダメで、テキストをクリックしてもラジオボタンが選択されません。

for属性なし → kashiyukaa-channocchi

そこで、function.html_radios.phpの中身をのぞいてみました。最初のほうにパラメータに対応する変数の宣言があり、以下のようになっていました。

    $labels = true;
    $label_ids = false;

コードを追っていくと、パラメータでlabelsがtrueならばlabelタグを、さらにlabel_idsがtrueならばidに紐付いたfor属性を付加して出力、となっているのが分かりました。で、label_idsがデフォルトでfalseであるために、上記のようなhtmlが生成されたというわけです。

IE6でもラベルを効かせるには、テンプレートに以下のようにlabel_idsをtrueにして加えます。

{html_radios name='perfume' options=$perfume label_ids=true}

↓

<label for="perfume_1"><input type="radio" name="perfume" value="1" id="perfume_1" />kashiyuka</label>
<label for="perfume_2"><input type="radio" name="perfume" value="2" id="perfume_2" />a-chan</label>
<label for="perfume_3"><input type="radio" name="perfume" value="3" id="perfume_3" />nocchi</label>

for属性あり → kashiyukaa-channocchi

ところで、このような仕様になったのは3年ほど前のようですが、なぜかマニュアルに一切載ってないのが不思議です。

あわせて以下ページが参考になると思います。

cl.pocari.org - Smary 2.6.10 以降の html_radios 関数で label タグの for 属性を設定する方法

へっぽこ開発室 - smarty html_radios のlabel_idsパラメータ

関連記事：

わずかなユーザビリティ向上

チェックボックスとラジオボタンの比較

ツイートする

Permalink | コメント(0) | トラックバック(0)