ボタン

属性:インライン要素

書式: 
<button type="submit" value="new">
  <strong>送信</strong>
</button>
<input type="submit" value="送信">

button要素かinput要素で作成します。
button要素は開始タグと終了タグに囲まれた内容をボタンのラベルとして表示します。 書式の例では強調した「送信」という文字がボタン内に表示されます。 ここに画像を指定することも可能です。
input要素ではvalue属性の値がラベルとして表示されます。 書式の例では「送信」とボタン内に表示されます。

ボタンの種類

送信(submit)

ボタンを押すことで、フォームを送信します。提出します。 フォームは1個以上の送信ボタンを含むことができます。

リセット(reset)

ボタンを押すことで、フォーム内のコントロールを全て初期値に戻します。

汎用(button)

汎用的なボタンを作成します。 上の二つのように動作が規定されていないので、JavaScriptなどで動作が指定してある場合が多いようです。

IEの挙動不審

IEはbutton要素を上の仕様のとおりに解釈をしてくれません。
IEでも動作するようにする場合、input要素で書いた方が無難です(場合によってはそれなりの動作はします)。
以下に注意する点などを説明します。

1つのform要素内に2つ以上のbutton要素がある場合、 全てのbutton要素の内容が送られてしまう

例えば、以下のように記述された「button1」と「button2」のボタンがあるとします。


<form action="test.cgi" method="get">
  <button type="submit" name="button1" value="1">1</button>
  <button type="submit" name="button2" value="2">2</button>
</form>

「button1」を押した場合には「test.cgi?button1=1」という内容が送られると予想できます。 実際、FirefoxやOperaはそのように動作します。
しかし、IEは「test.cgi?button1=1&button2=2」と「button1」「button2」の値を送ってしまいます (name属性が同じ場合はページ内で下側に書いてある値を送ります)。
IEでもinput要素の属性をsubmitにした場合には押下したinput要素の内容のみが送られます。
1つのフォーム内にボタンが1つしかない場合はbutton要素で書いても判定に使えます (ページを始めて表示したときには値が入っていないため)が、ボタンが2つ以上の場合、 判定に使うことは出来ません。

button開始タグ内のvalue属性を無視する

通常、button要素で記述された場合、name属性の値をフィールド名、 value属性の値をフィールドの値として送信します。
しかし、IEはvalue属性を無視し、ラベルとして表示している文字 (button開始タグ、終了タグで囲まれている文字列)をフィールドの値として送信します。
以下に例を書いておきます。


<form action="test.cgi" method="get">
  <button type="submit" name="button1" value="1">button_test1</button>
</form>

例の場合、FirefoxやOperaは「test.cgi?button1=1」と送ります。
しかしIEは「test.cgi?button1=button_test1」と送ってしまいます。

IEの実装はおバカと言う話でした。