いろいろな伝説がある。私は真実を知りたい。次の2つの例の違いは何ですか?
<input type='submit' value='text' />
<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" />
前者(submit)と同様に、フォームを送信しますが、任意の画像を使用できます。以前は、フォームの送信が必要なときに画像をボタンとして使うには、この方法が好まれていました。もっとコントロールしたい場合は、<button>
が使われます。これは、サーバーサイドイメージマップにも使えますが、最近ではめったにありません。usemap`-属性と(その属性があってもなくても)を使うと、ブラウザはマウスポインタのX/Y座標(より正確には、ボタンをクリックした瞬間のボタン内のマウスポインタの位置)をサーバに送信します。これらの余分なものを無視すれば、それは画像を装った送信ボタンに過ぎません。
ブラウザによって微妙な違いはありますが、上で説明したように<button>
タグを除いて、すべてのブラウザがvalue-attributeをサブミットします。