button 要素と IE のバグ
フォーム関連要素は使う機会が少ないので今まで気付かなかったが、IE の button 要素の実装にしてやられたという気がした。以下のコードを見て頂きたい。
<form> <ul> <li><button type="submit" name="btn1" value="1">Prev</button></li> <li><button type="submit" name="btn2" value="1">Next</button></li> </ul> </form>
2 つの提出（submit）ボタンを持った、ごくありふれた小さなフォームである。これを Netscape（Mozilla）*1で開いて[Next]ボタンを押すと、以下のフォームデータが Web サーバに提出される。
btn2=1
サーバサイドスクリプトは、送られたキーを基準にユーザの要求を正しく判別することができる。しかし IE 6.0 で同様に [Next] ボタンを押してみると、
btn1=Prev&btn2=Next
と、押すか押さないかに関わらず全てのボタンに割り当てられたフォームデータを送信してしまう。これではどちらのボタンが押されたか全く判別できない。正しく判別させるにはクライアントサイドスクリプトを用いるか、提出ボタンを一つにして select 要素等で選択させるしかない。 HTML 4.01 の仕様書によると、
1つのフォームに複数の提出ボタンがある場合、アクティブにされた提出ボタンのみが満足となる。
とあるので、IE の動作は明らかに間違った実装だ。実際、そんな事をやらかされると大いに困る。
もう一つ気が付く点として、IE は初期値として設定した value 属性の値を無視し、内容のみ送信した。悪い予感がしたので、このようなボタンを作って試してみた。
<button type="submit" name="btn" value="1" > <img src="./btn.png" alt="Submit" /> </button>
この画像ボタンを含んだフォームデータの送信文字列は、IE では
btn=%3CIMG+alt%3DSubmit+src%3D%22.%2Fbtn.png%22%3E
となる。予感は的中、見事に img タグを丸々送信してくれている。そんな馬鹿な。ボタンに画像を用いることの有用性は別として、これでは全く使い物にならない。
BUTTON要素が生成するボタンとINPUT要素が生成するボタンは、機能的には同等だが、 BUTTON要素の方がレンダリング能力が高い。
BUTTON要素は内容を持てる。例えば、画像を内容に持つBUTTON要素の機能は、type属性が"image"のINPUT要素とそっくり同じだが、BUTTON要素型は内容を持てるのだ
とあるが、IE がある以上かえって button 要素の方が使い難くなっている。もちろん Moz や Opera はそんな馬鹿なことはしない。 これらの問題点は、伝統的な input 要素を用いれば解決する。しかし折角 button 要素があるのにわざわざそちらを用いるのは今ひとつ潔しとしない。
button 要素を用いる具体的なメリットとして、たとえば属性セレクタを用いなくても押しボタンに CSS の規則を与えることができるというものだある。input 要素ではテキストフィールドやラジオボタンにまで同じスタイルが指定されているため、属性セレクタに対応していない IE では別途 class を当てるなどして割り振らなければならない。
IE のために button 要素を使いたいのに、やっぱり IE にそれを阻まれるというのは皮肉な話だ。JScript の style プロパティから JSSS もどきなスタイル指定をしても良いが、内部的には style 属性によるインラインスタイルシートと同様な扱いをされているということに気付いて使う気が失せた。最も、送信ボタンのスタイルを無闇にデフォルトスタイルから変更するのは、ユーザビリティ的な観点からしてあまり好ましくないのだが。
比較的 MS 製品支持派の私でも、久しぶりに IE がかなり嫌いになった。これでは button 要素を他の人に勧めようがない*2。提出ボタンはユーザインタフェース上のかなりクリティカルな位置を占める要素なので、後方互換性は最大限に考慮しなければならないだろう。またしても我々は IE に足を引っ張られるのだろうか。
