<input type = 'submit' />と<button type = 'submit'> text </ button>の違い

それらについて多くの伝説があります。真実を知りたい。次の2つの例の違いは何ですか？

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

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

どこから伝説を手に入れるかはわかりませんが：

送信ボタン <button>

同様に：

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

IE6はこのボタンのすべてのテキストをタグの間に送信し、他のブラウザは値のみを送信します。を使用する<button>と、ボタンのデザインよりもレイアウトの自由度が高くなります。すべての意図と目的において、最初は優れているように見えましたが、さまざまなブラウザの癖により、使用が困難な場合があります。

あなたの例では、IE6はtextサーバーに送信しますが、他のほとんどのブラウザーは何も送信しません。ブラウザ間の互換性を持たせるには、を使用します<button type="submit" value="text">text</button>。さらに良いのは、値を使用しないことです。HTMLを追加すると、サーバー側で受信する内容がかなりトリッキーになります。代わりに、追加の値を送信する必要がある場合は、非表示フィールドを使用してください。

ボタン付き <input>

同様に：

<input type="button" />

デフォルトでは、これは何もしません。フォームを送信することすらありません。ボタンを使用してテキストを配置し、CSSを使用してボタンにサイズと境界線を付けることができます。その元の（そして現在の）意図は、サーバーにフォームを送信する必要なしにスクリプトを実行することでした。

通常の送信ボタン <input>

同様に：

<input type="submit" />

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

画像送信ボタン <input>

同様に：

<input type="image" />

前者（送信）と同様に、フォームも送信しますが、任意の画像を使用できます。これは、フォームの送信が必要なときに画像をボタンとして使用するための好ましい方法でした。より制御するために、<button>が使用されます。これはサーバー側のイメージマップにも使用できますが、最近では珍しいことです。あなたが使用する場合usemap-attributeおよび（またはその属性なし）を、ブラウザがサーバにマウスポインタがX / Y座標を送信します（より正確には、一瞬のボタン内部のマウスポインタの位置は、あなたがそれをクリックしてください）。これらの追加機能を無視するだけで、画像に偽装した送信ボタンに過ぎません。

ブラウザ間には微妙な違いがありますが、<button>上記で説明したタグを除いて、すべてが値属性を送信します。

では<button>、imgタグなどを使用できます。

<button type='submit'> text -- can be img etc.  </button>

<input>タイプ、あなたはテキストに限定されています

要約すれば ：

<input type="submit">

<button type="submit"> Submit </button>

デフォルトでは、どちらも同じアクションを実行するボタンを視覚的に描画します（フォームを送信します）。

ただし、<button type="submit">セマンティクスが向上し、ARIAサポートが向上し、スタイル設定が容易になるため、使用することをお勧めします。