IE のフォームがタコい件について。

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つ目の相違は紫。

テスト項目	操作	firefox	IE7	IE6	Opera9
A1	ボタン1	button1=value1	button1=ボタン1	button1=ボタン1	button1=value1
A2	ボタン1	button1=value1	button1=ボタン1	button1=ボタン1 button2=ボタン2	button1=value1
A2	ボタン2	button2=value2	button2=ボタン2	button1=ボタン1 button2=ボタン2	button2=value2
A3	ボタン1	button=value1	button=ボタン1	button=ボタン2	button=value1
A3	ボタン2	button=value2	button=ボタン2	button=ボタン2	button=value2

テスト項目	操作	firefox	IE7	IE6	Opera9
B1	テキスト1	text1=テキスト1	text1=テキスト1	text1=テキスト1	text1=テキスト1
B2	テキスト1	N/S	N/S	N/S	text1=テキスト1 text2=テキスト2
B2	テキスト2	N/S	N/S	N/S	text1=テキスト1 text2=テキスト2
B3	送信1	input1=送信1	input1=送信1	input1=送信1	input1=送信1
B4	テキスト1	text1=テキスト1 input1=送信1	text1=テキスト1	text1=テキスト1	text1=テキスト1 input1=送信1
B4	送信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=送信1	input1=送信1	input1=送信1	input1=送信1
B6	送信2	input2=送信2	input2=送信2	input2=送信2	input2=送信2
B7	テキスト1	text1=テキスト1 input1=送信1	text1=テキスト1	text1=テキスト1	text1=テキスト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

テスト項目	操作	firefox	IE7	IE6	Opera9
C1	送信1	hidden=dummy	hidden=dummy	hidden=dummy	hidden=dummy
C2	テキスト1	text1=テキスト1	text1=テキスト1	text1=テキスト1	text1=テキスト1
C2	送信1	text1=テキスト1	text1=テキスト1	text1=テキスト1	text1=テキスト1
C3	テキスト1	N/S	N/S	N/S	text1=テキスト1 text2=テキスト2
	テキスト2	N/S	N/S	N/S	text1=テキスト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

まとめ。

テスト A。 <button type=submit> は、正しくは name=value を送信すべきだが、 IE は value の代わりに中身を送っちゃってるのが痛い。
テスト A2。 <button type=submit> が複数あると、 IE6 ではどちらを押したか区別がつかないのでこれじゃ使えない。
→ <button> は使いものにならないので、使わない。
テスト B。テキストボックスが1つ、かつ submit ボタンが1つ以上のフォーム (テスト B4・B7) では、 IE で、テキストボックスで Enter 押しても <input type=submit> の name=value が飛んでこない。当然 <input type=submit> の onClick= イベントも呼ばれない。
→ 隠し <input type=text> を1つ以上用意して、最初からテキストボックスが合計2つ以上になるようにして B5 の形式に丸めるのがよさそう。隠しテキストボックスはこんな感じ。
<input type="text" name="dummy" style="display: none;">
テスト B2、C3 の Opera のようなことがあるので、テキストフォームを 2つ以上にして、テキストボックス Enter での送信を防ぐみたいな技は考えずに、テスト B5 の形式に丸めたほうがよいか。

変更履歴

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

isaki@NetBSD.org