input type="submit"
とbutton
タグは交換可能ですか?または、違いがある場合は、input type="submit"
を使用するタイミングとbutton
を使用するタイミング
そして、違いがない場合、なぜ同じ目的のために2つのタグがあるのですか?
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
BUTTON要素で作成されたボタンは、INPUT要素で作成されたボタンと同様に機能しますが、より豊富なレンダリングの可能性を提供します。BUTTON要素にはコンテンツが含まれる場合があります。たとえば、画像を含むBUTTON要素は、タイプが「image」に設定されているINPUT要素に似て機能しますが、BUTTON要素の種類ではコンテンツが許可されます。
したがって、機能のみについては交換可能です!
(忘れないでください、type="submit"
はbutton
のデフォルトなので、そのままにしてください!)
<input type="button">
は単なるボタンであり、それ自体では何もしません。 <input type="submit">
は、フォーム要素内にある場合、クリックされるとフォームを送信します。
別の便利な「特別な」ボタンは、フォームをクリアする<input type="reset">
です。
<input type = "button" ..>の代わりに<button>タグを使用します。 bootstrap 3で推奨される方法です。
http://getbootstrap.com/css/#buttons-tags
「クロスブラウザレンダリング
ベストプラクティスとして、可能な限り<button>要素を使用して、ブラウザ間のレンダリングを一致させることを強くお勧めします。
特に、Firefoxのバグにより、<input>ベースのボタンの行の高さを設定できないため、Firefoxの他のボタンの高さと正確に一致しません。」
<input type='submit' />
は、内部のHTMLをサポートしていません。これは、単一の自己終了タグであるためです。一方、<button>
は、タグペア<button><img src='myimage.gif' /></button>
であるため、内部でHTML、画像などをサポートします。 <button>
は、CSSスタイリングに関しても柔軟性があります。
<button>
の欠点は、古いブラウザーでは完全にサポートされていないことです。たとえば、IE6/7は正しく表示されません。
特別な理由がない限り、おそらく<input type='submit' />
に固執することをお勧めします。
両方の要素が機能的に同じ結果*を提供しますが、<button>
を使用することを強くお勧めします:
input
は、コントロールが編集可能であるか、ユーザーが編集できることを示します。 button
は、サービスの目的に関してはるかに明示的です。input[type="submit"]
が正しく表示されないという癖がありますPOST
/GET
リクエストでサーバーに値が送信されると非常に振る舞います* <button type="button">
を除き、デフォルトでは動作が指定されていません。
要約すると、<input type="submit" />
の使用を強くお勧めします。
これは古い質問だと思いますが、mozilla.orgでこれを見つけて、それが当てはまると思います。
ボタンには、送信、リセット、ボタンの3つのタイプがあります。送信ボタンをクリックすると、フォームのデータが要素のaction属性で定義されたWebページに送信されます。
リセットボタンをクリックすると、すべてのフォームウィジェットがすぐにデフォルト値にリセットされます。 UXの観点から、これは悪い習慣と見なされます。
ボタンボタンをクリックしても、何も起こりません。馬鹿げているように聞こえますが、JavaScriptでカスタムボタンを作成すると非常に便利です。
<button>
は<input type="submit">
よりも新しく、よりセマンティックで、スタイル設定が簡単で、内部のHTMLをサポートします。
他の答えは素晴らしく、質問に答えますが、input type="submit"
とbutton
を使用する際に考慮すべきことが1つあります。 input type="submit"
を使用すると、入力でCSS擬似要素 使用不可 が、ボタンの場合はcanになります!
これは、スタイリングに関して、入力に対してbutton
要素を使用する1つの理由です。
これがバグなのか機能なのかはわかりませんが、(少なくとも場合によっては)非常に重要な違いがあります。<input type="submit">
はリクエストにキーと値のペアを作成し、<button type="submit">
は作成しません。 ChromeおよびSafariでテスト済み。
フォームに複数の送信ボタンがあり、どのボタンがクリックされたかを知りたい場合は、button
を使用せず、代わりにinput type="submit"
を使用してください。