フォーム送信などするときに使うボタンはinputとbuttonがあります。
ボタン要素にもnameとvalueをつければ、ほかのフォームエレメントと同じように値を送信することが出来ます。
buttonタグだと、ボタン要素そのものにつける値とボタンに表示するラベルを違うものに出来るので、
送信ボタンとか作るときには便利なんですが、IEだけ挙動が違うので注意が必要です。
<input type="submit" name="test" value="send" /> <button type="submit" name="test" value="send">submit</button>
前のソースで送信すると、どちらの場合もPHPの場合$_POST[“test”]で値は”send”になるはずが、
IEだとbutton要素につけたvalueは無視されて、値がラベルになります。
つまり上のソースだと$_POST[“test”]で値が”submit”になってしまう。
さらに、inputとbuttonを併用してるときにinputのボタンを押すとbutton要素の値まで送信される様子。
挙動確認のサンプルソース。
IEとその他のブラウザで押してみると結果が違うのが分かるハズ。
Sample1：inputとbutton
<?php
if(isset($_POST)){
foreach($_POST as $key => $value ){
print $key."=>".$value."<br />";
}
}
?>
<form action="" method="post">
<input type="submit" name="input" value="send" />
<button type="submit" name="input2" value="send">submit</button>
</form>
inputを押すとinput=>send
buttonを押すとinput2=>sendになる
FireFox、Opera、Safariなどは思い通りの結果。
//inputを押す input=>send //buttonを押す input2=>send
IE6だと、押してないbutton要素まで送信される上に、buttonのname=”value”の関係が変わる。
//inputを押す input=>send input2=>submit //buttonを押す input2=>submit //本来値はsendであるべき
IE7は、押してないbutton要素は送信されないが、buttonの値が変わるのはそのまま。
確認はスタンドアロンのベータ版。
//inputを押す input=>send //buttonを押す input2=>submit //本来値はsendであるべき
Sample2と3：テキストエリアでのEnter
さらに、テキストボックスとかに添えた時に
<form action="" method="post"> <input name="text" type="text" size="20"> <input type="submit" name="input3" value="save" /> <button type="submit" name="input4" value="delete">削除</button> </form>
Enterを押すと、Firefoxはinputが送信されるが、IEはbuttonが送信される。
こういう場合、先頭にあるものが優先されるので並び順を変えた場合FireFoxはbuttonを送信するようになるが、
IEだと順序に関わらずinput要素がスルーされてbuttonが送信される。(Sample2)
上のソースだと、どんなにがんばってもsaveが取得出来ないという結果に・・・
ただし、テキストエリアを２つ以上並べると、IEもFireFoxとほぼ同じ挙動になる。(Sample3)
ボタンの値で動作を分岐させるようなプログラムなら、おとなしくinput使った方が無難。