トップ > メモ > IE6のフォームの挙動

IE6のフォームの挙動

Internet Explorer 6 はフォームのsubmit時に予想外の挙動をすることがあるようだ。気づいた点をメモしておく。

なお、IE7では動作が一部改善されているようだが、このページではIE7の挙動については触れていない。次のサイトでは、IE7やOpera9も含めた動作内容がまとめられている。

目次

動作確認に使用したブラウザのバージョンは、IEが6.0.2800.1106、Firefoxが1.0.6。

buttonタグで作ったボタンのvalue属性は無視される

buttonタグでは次のようにvalue属性を指定することができ、submit時にはvalue属性で指定した値がサーバへ送信されて欲しい所だ(参考:HTML 4.01 仕様書邦訳)。

<button type="submit" name="button" value="buttonvalue">ボタン</button>

しかし、IEはvalue属性の値ではなくbuttonタグの「内容」をサーバへ送信してしまうようである。(Firefoxはvalue属性の値を送信してくれる。)


(ボタンを押すと別ウィンドウに結果が表示されます)

buttonタグで作ったボタンは押されなくてもsubmitされる

フォームに複数のsubmitボタンを設置した場合、サーバへsubmitされるのは押されたボタンだけであることが期待される(参考:HTML 4.01 仕様書邦訳)。

IEは、ボタンがinputタグで作られている場合は期待される動作をしてくれるが、buttonタグを使ってボタンを作ると押されていないボタンもサーバへsubmitしてしまうようだ。(Firefoxは押されたボタンだけをサーバへsubmitしてくれる。)


(ボタンを押すと別ウィンドウに結果が表示されます)

(ボタンを押すと別ウィンドウに結果が表示されます)

テキストボックス内でのEnterキー押下でボタンがsubmitされないことがある

フォームにテキストボックスがあるとき、テキストボックスにフォーカスがある状態でEnterキーを押下するとボタンを押さなくてもフォームがsubmitされる。それはまあいいのだが、IEはテキストボックスの数によって次のように挙動が変わってしまうようだ。

(Firefoxだとテキストボックスの数に依らず最初のボタンがsubmitされる。)




ただし、上のようになるのはボタンをinputタグで作った場合だ。buttonタグを使ってボタンを作った場合は、テキストボックスが1つしかなくても先に書いた通り全てのボタンがsubmitされる。


さて、「テキストボックスは1つしかないがテキストボックスの中でEnterキーを押下したら最初のボタンだけをsubmitさせたい」というときはどうしたらいいだろうか。この場合は、次のように「見えないテキストボックス」を追加することで一応実現できる。


ここ→ ←に見えない(はずの)テキストボックスがあります

ただし、CSSに対応していなかったり無効にしているブラウザでアクセスした場合は見えないはずのテキストボックスが見えてしまうので注意が必要だ。