IE のフォームがタコい件について。
$Id: input-type-submit.php,v 1.8 2008/07/23 01:56:52 isaki Exp $
フォームの書き方によって、ブラウザごとに挙動が違うらしく、 時に致命的なバグになる (というか遭遇した)。 慌てていろいろまとめサイトを調べてみたけど、結局自分のところで 起きてる現象の解決に必要なだけの情報は自分で調べないと 分からないので、 まずは起きている現象を把握するために調べてみた。 このへん詳しくないので 解決方法が適当かどうかはよく知らない(ぉ。
テスト A
IE6、IE7 の <button> が使いものにならないという話。 これについては こちら が 詳しい。 A3 は、A2 の結果を踏まえて、こんなコードを書いて、 このフォームを受け取るのが PHP の $_REQUEST (のような連想配列) だったら、 IE6 ではこう見えてびっくりするよね、という話。 結果参照。

A1 <button type=submit name="button1" value="value1">ボタン1</button>

A2 <button type=submit name="button1" value="value1">ボタン1</button>
<button type=submit name="button2" value="value2">ボタン2</button>

A3 <button type=submit name="button" value="value1">ボタン1</button>
<button type=submit name="button" value="value2">ボタン2</button>

テスト B
IE では、 <input type=text> (テキストボックス) と <input type=submit> の数によって テキストボックスで Enter 押した時の挙動が違うとかいう話。

B1 <input type=text name="text1" value="テキスト1">

B2 <input type=text name="text1" value="テキスト1">
<input type=text name="text2" value="テキスト2">

B3 <input type=submit name="input1" value="送信1">

B4 <input type=text name="text1" value="テキスト1">
<input type=submit name="input1" value="送信1">

B5 <input type=text name="text1" value="テキスト1">
<input type=text name="text2" value="テキスト2">
<input type=submit name="input1" value="送信1">

B6 <input type=submit name="input1" value="送信1">
<input type=submit name="input2" value="送信2">

B7 <input type=text name="text1" value="テキスト1">
<input type=submit name="input1" value="送信1">
<input type=submit name="input2" value="送信2">

B8 <input type=text name="text1" value="テキスト1">
<input type=text name="text2" value="テキスト2">
<input type=submit name="input1" value="送信1">
<input type=submit name="input2" value="送信2">

テスト C
テスト B を <input type=button> にして onClick= でサブミットするように変えた場合、 テキストボックスでの Enter 押下がどうなるかのテスト。 一部、サブミットが発生したことを分かりやすくするために hidden を追加してある。 B と同じパターン全部やったほうがいい?

C1 <input type=hidden name="hidden" value="dummy">
<input type=button name="input1" value="送信1" onClick="submit();">

C2 <input type=text name="text1" value="テキスト1">
<input type=button name="input1" value="送信1" onClick="submit();">

C3 <input type=text name="text1" value="テキスト1">
<input type=text name="text2" value="テキスト2">
<input type=button name="input1" value="送信1" onClick="submit();">


結果はこちら。

操作の「送信n」は「送信n」ボタンをクリック、 「テキストn」は「テキストn」のテキストボックスで Enter を入力。
N/S はサブミットが発生してないの意。
相違のあるところは色をつけて示してある。 1つ目の相違は赤、2つ目の相違は紫。

テスト項目操作firefoxIE7IE6Opera9
A1ボタン1 button1=value1button1=ボタン1button1=ボタン1button1=value1
A2ボタン1 button1=value1button1=ボタン1button1=ボタン1
button2=ボタン2
button1=value1
ボタン2 button2=value2button2=ボタン2button1=ボタン1
button2=ボタン2
button2=value2
A3ボタン1 button=value1button=ボタン1button=ボタン2button=value1
ボタン2 button=value2button=ボタン2button=ボタン2button=value2
テスト項目操作firefoxIE7IE6Opera9
B1テキスト1 text1=テキスト1text1=テキスト1text1=テキスト1text1=テキスト1
B2テキスト1 N/SN/SN/Stext1=テキスト1
text2=テキスト2
テキスト2 N/SN/SN/Stext1=テキスト1
text2=テキスト2
B3送信1 input1=送信1input1=送信1input1=送信1input1=送信1
B4テキスト1 text1=テキスト1
input1=送信1
text1=テキスト1text1=テキスト1text1=テキスト1
input1=送信1
送信1 text1=テキスト1
input1=送信1
text1=テキスト1
input1=送信1
text1=テキスト1
input1=送信1
text1=テキスト1
input1=送信1
B5テキスト1 text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
テキスト2 text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
送信1 text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
B6送信1 input1=送信1input1=送信1input1=送信1input1=送信1
送信2 input2=送信2input2=送信2input2=送信2input2=送信2
B7テキスト1 text1=テキスト1
input1=送信1
text1=テキスト1text1=テキスト1text1=テキスト1
input1=送信1
送信1 text1=テキスト1
input1=送信1
text1=テキスト1
input1=送信1
text1=テキスト1
input1=送信1
text1=テキスト1
input1=送信1
送信2 text1=テキスト1
input2=送信2
text1=テキスト1
input2=送信2
text1=テキスト1
input2=送信2
text1=テキスト1
input2=送信2
B8テキスト1 text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
テキスト2 text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
送信1 text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
text1=テキスト1
text2=テキスト2
input1=送信1
送信2 text1=テキスト1
text2=テキスト2
input2=送信2
text1=テキスト1
text2=テキスト2
input2=送信2
text1=テキスト1
text2=テキスト2
input2=送信2
text1=テキスト1
text2=テキスト2
input2=送信2
テスト項目操作firefoxIE7IE6Opera9
C1送信1 hidden=dummyhidden=dummyhidden=dummyhidden=dummy
C2テキスト1 text1=テキスト1text1=テキスト1text1=テキスト1text1=テキスト1
送信1 text1=テキスト1text1=テキスト1text1=テキスト1text1=テキスト1
C3テキスト1 N/SN/SN/Stext1=テキスト1
text2=テキスト2
テキスト2 N/SN/SN/Stext1=テキスト1
text2=テキスト2
送信1 text1=テキスト1
text2=テキスト2
text1=テキスト1
text2=テキスト2
text1=テキスト1
text2=テキスト2
text1=テキスト1
text2=テキスト2

firefox : firefox 2.0.0.*/WinXP SP2
IE7 : IE 7.0/WinXP SP2
IE6 : IE 6.0/WinXP SP2
Opera9 : Opera 9.26/WinXP SP2


まとめ。
変更履歴
2008/07/23
まとめ、解決方法を加筆。
2008/03/30
初稿。

isaki@NetBSD.org