Home > HTML&XHTML > [XHTML]buttonタグの挙動について

[XHTML]buttonタグの挙動について

2008-06-10 (火) 16:17
HTML&XHTML
HTML&XHTML | IE | PHP

フォーム送信などするときに使うボタンはinputとbuttonがあります。
ボタン要素にもnameとvalueをつければ、ほかのフォームエレメントと同じように値を送信することが出来ます。

buttonタグだと、ボタン要素そのものにつける値とボタンに表示するラベルを違うものに出来るので、
送信ボタンとか作るときには便利なんですが、IEだけ挙動が違うので注意が必要です。

HTML:

<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とその他のブラウザで押してみると結果が違うのが分かるハズ。

iframe対応のブラウザでご覧ください

Sample1：inputとbutton

PLAIN TEXT

PHP:

<?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などは思い通りの結果。

PLAIN TEXT

HTML:

//inputを押す
input=>send
//buttonを押す
input2=>send

IE6だと、押してないbutton要素まで送信される上に、buttonのname="value"の関係が変わる。

PLAIN TEXT

HTML:

//inputを押す
input=>send
input2=>submit
//buttonを押す
input2=>submit
//本来値はsendであるべき

IE7は、押してないbutton要素は送信されないが、buttonの値が変わるのはそのまま。
確認はスタンドアロンのベータ版。

PLAIN TEXT

HTML:

//inputを押す
input=>send
//buttonを押す
input2=>submit
//本来値はsendであるべき

Sample2と3：テキストエリアでのEnter

さらに、テキストボックスとかに添えた時に

PLAIN TEXT

HTML:

<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使った方が無難。

Tags:
HTML&XHTML , IE , PHP

Newer: IE3からIE7まで共存・同時起動させる
Older: [XHTML]ValidなFlash表示ソース

Comments:0

Trackbacks:0

Trackback URL for this entry: http://tenderfeel.xsrv.jp/html-xhtml/223/trackback/
Listed below are links to weblogs that reference: [XHTML]buttonタグの挙動について from WebTecNote

Home > HTML&XHTML > [XHTML]buttonタグの挙動について

Search

Scripts

カテゴリー