アリゾナではもう働きたくない社長の blog

HTML フォームの button 要素に対するブラウザの挙動差

HTML 4.01 の button[type="submit"] と input[type="submit"] をアクティベートした際の挙動がブラウザごとに異なるようです。

テストケース

<form method="get">
  <fieldset>
    <legend>フォーム</legend>
    <input name="foo" type="text" value="1" />
    <input name="bar" type="submit" value="ButtonA" />
    <button name="baz" type="submit" value="2">ButtonB</button>
  </fieldset>
</form>

テスト方法

1. ButtonA を押す
2. ブラウザが送信したクエリを記録する
3. ButtonB を押す
4. ブラウザが送信したクエリを記録する
5. 以上を複数のブラウザで行う

テスト結果

• IE 6 と IE 7 は button 要素の value 属性値ではなく内容を送信する
• IE 6 は button 要素の内容をこのボタンがアクティベートされていない場合にも送信する

期待される結果

name = cdata [CI]

This attribute assigns the control name.

value = cdata [CS]

This attribute assigns the initial value to the button.

http://www.w3.org/TR/html401/interact/forms.html#h-17.5

仕様書を見る限り、button[type="button"] がアクティベートされたときは input[type="button"] がアクティベートされた時と同じく value 属性値が送信されるべきなようです。

考えられる対処

• パラメタ送信用途には button 要素を使わない
• IE を今すぐ窓から投げ捨てる