[解決済み] Difference between <input type='submit' /> and <button type='submit'>text</button>

Question

There are many legends about them. I want to know the truth. What are the differences between the two following examples?

1. <input type='submit' value='text' />

2. <button type='submit'>text</button>

How to solved?

Not sure where you get your legends from but:

Submit button with <button>

As with:

<button type="submit">(html content)</button>

IE6ではこのボタンのタグの間にあるすべてのテキストが送信され、他のブラウザでは値のみが送信されます。使用方法 <button> を使えば、ボタンのデザインに対してより自由なレイアウトが可能になります。あらゆる意味で、当初は優れていると思われましたが、様々なブラウザの癖によって、使いにくい時もあります。

あなたの例では、IE6 は text をサーバーに送信しますが、他のほとんどのブラウザは何も送信しません。クロスブラウザに対応させるためには <button type="submit" value="text">text</button> . HTMLを追加すると、サーバー側で何が受信されるかがかなり厄介になるからです。その代わり、もし余分な値を送らなければならないなら、hiddenフィールドを使いましょう。

ボタン <input>

と同じです。

<input type="button" />

デフォルトでは、これはほとんど何もしません。フォームを送信することもありません。ボタンにテキストを配置し、CSS でサイズと境界線を指定することだけが可能です。元々の（そして現在の）目的は、フォームをサーバーに送信することなくスクリプトを実行することです。

通常の送信ボタンで <input>

と同様です。

<input type="submit" />

前者と同様ですが、実際に周囲のフォームを送信します。

画像送信ボタンに <input>

と同様です。

<input type="image" />

前者（submit）と同じく、フォームを送信しますが、任意の画像を使用することができます。以前は、フォームの送信が必要なときにボタンとして画像を使用する方法として、これが好まれていました。よりコントロールするために <button> が使われるようになりました。また、これは サーバーサイドイメージマップ が、最近はめっきり少なくなりましたね。このような場合 usemap -属性と（その属性があってもなくても）、ブラウザはマウスポインタのX/Y座標をサーバーに送信します（より正確には、クリックした瞬間のボタン内部のマウスポインタの位置）。これらの余計なものを無視すれば、画像に見せかけた送信ボタン以外の何物でもありません。

ブラウザによって微妙な違いがありますが、value-属性は <button> タグを使用します。