Smarty研究（3）html_checkboxes などの label タグを IE6 対応にする

2007.06.27

スマティスト（Smarty を使う人の意）（大流行中）のみなさま、こんにちは。
Smarty 研究シリーズの第三弾は、HTML の label タグのお話です。

ラジオボタンやチェックボックスを選択するのに便利な label タグ。
文字列などをクリッカブルにし、選択しやすくできます。
この便利な label タグの書き方には 2 種類あります。
ひとつはそのまま囲む方法。

<label><input type="radio" name="jojo" value="1">ジョナサン</label>

<label><input type="radio" name="jojo" value="2">ジョセフ</label>

<label><input type="radio" name="jojo" value="3">承太郎</label>

<label><input type="radio" name="jojo" value="4">仗助</label>

<label><input type="radio" name="jojo" value="5">ジョルノ</label>

もう一つは id と関連付ける方法です。

<input type="radio" name="jojo" value="1" id="jojo_1"><label for="jojo_1">ジョナサン</label>

<input type="radio" name="jojo" value="2" id="jojo_2"><label for="jojo_2">ジョセフ</label>

<input type="radio" name="jojo" value="3" id="jojo_3"><label for="jojo_3">承太郎</label>

<input type="radio" name="jojo" value="4" id="jojo_4"><label for="jojo_4">仗助</label>

<input type="radio" name="jojo" value="5" id="jojo_5"><label for="jojo_5">ジョルノ</label>

こうして label タグを使うと、

ジョナサン
ジョセフ
承太郎
仗助
ジョルノ

こんな感じで、文字をクリックした時にちゃんとラジオボタンが選択されるようになります。

書き方としては、どちらを使用しても問題はありません。
仕様上は。

しかし残念ながら IE6 では前者の書き方ではうまく機能しません。（IE7 は問題なく機能します）
そして、さらに残念な事に、Smarty の関数「html_radios」や「html_checkboxes」では
前者の方が書き出されてしまうのです。

この事実を知った時に、面倒くさがり黒帯の僕は
「うん、まあいいんじゃね？IE6 だけ動かなくても問題なくね？」
とか思ったもんですが、当時の先輩に
「なにそれダセー」
と一刀両断されてしまいました。

ということで、しぶしぶ「html_radios」と「html_checkboxes」を使用した際に
後者の形式で吐き出されるように手を加えたのでした。
「smarty/libs/plugins」の中を覗き込み、
「function.html_radios.php」と「function.html_checkboxes.php」
というファイルを見つけ、それをいじる事にしました。
（試す際は念のため、ファイルのバックアップを取ってくださいね。）

まずは「html_radios」の方。

function smarty_function_html_radios_output($name, $value, $output, $selected, $extra, $separator, $labels) {
    $_output = '';
    if ($labels) $_output .= '<label>';
    $_output .= '<input type="radio" name="'
        . smarty_function_escape_special_chars($name) . '" value="'
        . smarty_function_escape_special_chars($value) . '"';

    if ($value==$selected) {
        $_output .= ' checked="checked"';
    }
    $_output .= $extra . ' />' . $output;
    if ($labels) $_output .= '</label>';
    $_output .=  $separator;

    return $_output;
}

これを
↓

function smarty_function_html_radios_output($name, $value, $output, $selected, $extra, $separator, $labels) {
    $o_name = smarty_function_escape_special_chars($name);
    $o_value = smarty_function_escape_special_chars($value);
    $o_id = smarty_function_escape_special_chars($name) . "_" . smarty_function_escape_special_chars(urlencode($value));

    $_output = '';
    $_output .= '<input type="radio" name="'
        . $o_name . '" value="'
        . $o_value . '" id="'
        . $o_id . '"';

    if ($value==$selected) {
        $_output .= ' checked="checked"';
    }
    $_output .= $extra . ' />';
    if ($labels) {$_output .= '<label for="' . $o_id . '">';}
    $_output .= $output;
    if ($labels) {$_output .= '</label>';}
    $_output .=  $separator;

    return $_output;
}

こんな感じに。

次に「html_checkboxes」の方。

function smarty_function_html_checkboxes_output($name, $value, $output, $selected, $extra, $separator, $labels) {
    $_output = '';
    if ($labels) $_output .= '<label>';
    $_output .= '<input type="checkbox" name="'
        . smarty_function_escape_special_chars($name) . '[]" value="'
        . smarty_function_escape_special_chars($value) . '"';

    if (in_array((string)$value, $selected)) {
        $_output .= ' checked="checked"';
    }
    $_output .= $extra . ' />' . $output;
    if ($labels) $_output .= '</label>';
    $_output .=  $separator;

    return $_output;
}

同じ要領でこれを
↓

function smarty_function_html_checkboxes_output($name, $value, $output, $selected, $extra, $separator, $labels) {
    $o_name = smarty_function_escape_special_chars($name);
    $o_value = smarty_function_escape_special_chars($value);
    $o_id = smarty_function_escape_special_chars($name) . "_" . smarty_function_escape_special_chars(urlencode($value));

    $_output = '';
    $_output .= '<input type="checkbox" name="'
        . $o_name . '[]" value="'
        . $o_value . '" id="'
        . $o_id . '"';

    if (in_array((string)$value, $selected)) {
        $_output .= ' checked="checked"';
    }
    $_output .= $extra . ' />';
    if ($labels) {$_output .= '<label for="' . $o_id . '">';}
    $_output .= $output;
    if ($labels) {$_output .= '</label>';}
    $_output .=  $separator;

    return $_output;
}

このように変更しました。

という事で、無事に後者の方式で label タグが吐き出されるようになりました。
これでもう IE6 に対応してねーの？ダセー！といわれる心配もなし！
めでたしめでたし！

もう今後 IE6 は減る一方だと思いますけども気にしない。