selectボックスのoptionタグのselected属性の書き方

mobile Ethna

アクセス数もだいぶ落ち着いてきたので久々のエントリ。


HTMLのセレクトボックスに使用するoptionタグを、初期選択状態にするのに selected属性を使用することになりますが、これの書き方について。
3キャリアの携帯で以下のような htmlを書いてテストしてみました。

<html>
<head></head>
<body>
select test<br>
<form action="/" method"get">
<select name="hoge">
<option value="1">1</option>
<option value="2" selected>2</option>
</select>

<select name="hoge">
<option value="1">1</option>
<option value="2" selected="true">2</option>
</select>

<select name="hoge">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>

</body>
</html>

「2」の値がデフォルト選択されているかというテスト。
で、結果は以下のようになりました。

キャリア 機種名 1つめ 2つめ 3つめ
DoCoMo P905i 2 2 2
DoCoMo P906iC 2 2 2
au W31K 2 1 2
au A5401CA 2 1 2
SoftBank 904SH 2 2 2
SoftBank 602SH 2 1 2

SoftBankの2Gは、もう新規契約ができなかったような気がするので無視していいと思いますが、auは Win端末でも 2つめの記述は理解してくれませんでした。


で、なんで、こんなチェックをしたかというと、Ethnaのフォームヘルパーが、2つめのようなコードを吐くからです。
Ethna_SmartyPlugin.php
「Contents of /ethna/tags/ETHNA_2_3_5/class/Ethna_SmartyPlugin.php - Ethna - SourceForge.JP」


Line:374あたり

<?php //色づけ
// {{{ smarty_modifier_select
/**
 *  smarty modifier:セレクトボックス用フィルタ
 *
 *  単純なセレクトボックスの場合はsmarty関数"select"を利用することで
 *  タグを省略可能
 *
 *  sample:
 *  <code>
 *  $smarty->assign("form", 1);
 *
 *  <option value="1" {$form|select:"1"}>foo</option>
 *  <option value="2" {$form|select:"2"}>bar</option>
 *  </code>
 *  <code>
 *  <option value="1" selected>foo</option>
 *  <option value="2" >bar</option>
 *  </code>
 *
 *  @param  string  $string セレクトボックスに渡されたフォーム値
 *  @param  string  $value  <option>タグに指定されている値
 *  @return string  $stringが$valueにマッチする場合は"selected"
 */
function smarty_modifier_select($string, $value)
{
    if ($string == $value) {
        return 'selected="true"';
    }
}
// }}}


line:509あたり

<?php //色づけ
// {{{ smarty_function_select
/**
 *  smarty function:セレクトフィールド生成
 *
 *  @param  array   $list   選択肢一覧
 *  @param  string  $name   フォーム項目名
 *  @param  string  $value  セレクトボックスに渡されたフォーム値
 *  @param  string  $empty  空エントリ(「---選択して下さい---」等)
 *  @deprecated
 */
function smarty_function_select($params, &$smarty)
{
    extract($params);

    print "<select name=\"$name\">\n";
    if ($empty) {
        printf("<option value=\"\">%s</option>\n", $empty);
    }
    foreach ($list as $id => $elt) {
        printf("<option value=\"%s\" %s>%s</option>\n", $id, $id == $value ? 'selected="true"' : '', $elt['name']);
    }
    print "</select>\n";
}
// }}}


というわけで、携帯で、form_input系のヘルパーを使い場合には、ここを修正するなどしないと、携帯でちゃんと使えないです。


W3C的にはどうなのだろうか？
「Forms in HTML documents」
英語が苦手で XHTMLのドキュメントとかにたどり着けていない…
あとで、もうちょっと調べてみよう。


とりあえず、htmllintのタグ一覧を見ると、「selected = selected」になってる。
「サービス終了のお知らせ」

追記

wide系IRCサーバの %Ethnaチャンネルで、上記の件を伝えたところ、mumumu_nさんが即効修正してくださいました。
以下、許可をいただいて転載。
やはり、selected="selected" が正しいみたいです。

00:28:41 html 4.01 は
00:29:05 selected (selected) #IMPLIED だから、省略可能で、設定する時は selected の値をとる。
00:29:12 しかも CIだから case insensitive
00:29:15 ということだね
00:29:31 http://www.w3.org/TR/html401/interact/forms.html#adef-selected
00:35:33 http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd

00:35:48

00:35:51 %attrs;
00:35:57 selected (selected) #IMPLIED
00:36:11 http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd
00:36:17 これも同様
00:36:38 http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-frameset.dtd
00:36:42 framesetも同様
00:36:47 ----
00:36:52 以上、xhtml
00:40:10 ついでに
00:40:14 XHTML Basic もみておくと
00:40:18 http://www.w3.org/TR/2000/CR-xhtml-modularization-20001020/abstract_modules.html#s_sformsmodule
00:40:21 ここだね
00:40:57 http://www.w3.org/TR/2000/REC-xhtml-basic-20001219/#a_dtd
00:41:36 間違えた
00:41:39 http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_sformsmodule
00:41:44 最新版はこっちか
00:42:01 まあどちらにしても
00:42:04 option Common, selected ("selected"), value (CDATA)
00:42:07 とあるんで、selectedだね
00:42:11 なおしとくー
00:54:31 [580] - fixed bug smarty_modifier_select plugin return value is imcompatible with HTML Standards . (thanks: maru_cc)


こういうおかしなところを報告したときの反応速度はすごいです。
いま、ETHNA_UTF8_BRANCHというUTF8のブランチで、Ethna 2.5.0-preview1 が使えます！
が、まだまだバグとか洗い出していたりとか、新機能の追加とか随時行っているので、人柱になってくれる人は使ってみてくださいね。


次期バージョンに期待。