<button>と<input type =“ button” />の比較。どちらを使用しますか？

ほとんどのサイト（SOを含む）を見ると、ほとんどのサイトで以下が使用されます。

<input type="button" />

の代わりに：

<button></button>

• 2つの主な違いは何ですか？
• 一方を他方の代わりに使用する正当な理由はありますか？
• それらを組み合わせて使用​​する正当な理由はありますか？
• を使用する<button>と互換性の問題が発生しますが、あまり使用されていませんか？

• これは違いを説明するページです（基本的にhtmlをに入れることができます<button></button>）
• そして、人々がなぜ避けるのかを説明する別のページ<button></button>（ヒント：IE6）

使用時の別のIE問題<button />：

IEについて話している間、ボタンの幅に関連するいくつかのバグがあります。スタイルを追加しようとすると、不思議なことに余分なパディングが追加されます。つまり、小さなハックを追加して物事を制御する必要があります。

補足として、<button>は暗黙的に送信します。送信せずにフォーム内のボタンを使用する場合、問題が発生する可能性があります。したがって、使用する別の理由<input type="button">（または<button type="button">）

編集 - 詳細

タイプがなければ、button暗黙的にのタイプを受け取りsubmitます。フォームに送信ボタンまたは入力がいくつあるかは関係ありません。明示的または暗黙的に送信と入力されたボタンをクリックすると、フォームが送信されます。

ボタンには3つのタイプがサポートされています

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

この記事は、違いのかなり良い概要を提供しているようです。

ページから：

BUTTON要素で作成されたボタンは、INPUT要素で作成されたボタンと同じように機能しますが、より豊かなレンダリングの可能性を提供します。BUTTON要素にはコンテンツが含まれる場合があります。たとえば、画像を含むBUTTON要素は、「画像」に設定されたタイプのINPUT要素と同様に機能しますが、BUTTON要素のタイプはコンテンツを許可します。

ボタン要素-W3C

<button>要素内には、テキストや画像などのコンテンツを配置できます。

<button type="button">Click Me!</button> 

これは、この要素とその<input>要素で作成されたボタンの違いです。

見積もり

重要：HTMLフォームでボタン要素を使用する場合、ブラウザーによって送信される値は異なります。Internet Explorerはタグ<button>と</button>タグの間のテキストを送信しますが、他のブラウザはvalue属性のコンテンツを送信します。input要素を使用して、HTMLフォームにボタンを作成します。

差出人：http : //www.w3schools.com/tags/tag_button.asp

私が正しく理解していれば、答えはブラウザ間の互換性と入力の一貫性です

アンカー、入力、ボタンの違いについての記事を引用します。

アンカー（<a>要素）は、ハイパーリンク、ユーザーがブラウザーでナビゲートまたはダウンロードできるリソースを表します。ユーザーが新しいページに移動したり、ファイルをダウンロードしたりできるようにする場合は、アンカーを使用します。

入力は、（<input>）データフィールドを表します：あなたは、サーバーに送信することを意味し、一部のユーザーデータなります。ボタンに関連するいくつかの入力タイプがあります。

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

それぞれに意味があります。たとえば、「file」はファイルのアップロードに使用され、「reset」はフォームをクリアし、「submit」はデータをサーバーに送信します。MDNまたはW3Schoolsの W3リファレンスを確認してください。

ボタン（<button>)要素は非常に汎用性があります：

• 画像、段落、ヘッダーなどの要素をボタン内にネストできます。
• ボタンには::before、::after疑似要素を含めることもできます。
• ボタンはdisabled属性をサポートします。これにより、電源のオンとオフを簡単に切り替えることができます。

再度、MDNまたはW3Schoolsの<button>タグのW3リファレンスを確認します。

HTMLマニュアルのフォームページの引用：

BUTTON要素で作成されたボタンは、INPUT要素で作成されたボタンと同じように機能しますが、より豊かなレンダリングの可能性を提供します。BUTTON要素にはコンテンツが含まれる場合があります。たとえば、画像を含むBUTTON要素は、「画像」に設定されたタイプのINPUT要素と同様に機能する場合がありますが、BUTTON要素のタイプはコンテンツを許可します。

フォームにボタンを作成する場合は、input要素のボタンを使用します。アクションのボタンを作成する場合は、ボタンタグを使用します。

<button>

• デフォルトでは、 "type =" submit "属性があるかのように動作します
• フォームなしでもフォーム内でも使用できます。
• 許可されるテキストまたはHTMLコンテンツ
• css疑似要素を許可（：beforeなど）
• タグ名は通常、単一のフォームに固有です

対

<input type='button'>

• 送信要素として動作するには、タイプを「送信」に設定する必要があります
• フォームでのみ使用できます。
• 許可されるテキストコンテンツのみ
• CSS疑似要素なし
• ほとんどのフォーム要素と同じタグ名（入力）

-
最新のブラウザでは、両方の要素をcssで簡単にbuttonスタイル設定できますが、ほとんどの場合、要素は内部のhtml要素と疑似要素でより多くのスタイルを設定できるため、優先されます

CSSスタイリングに関する限り、<button type="submit" class="Btn">Example</button>CSS :beforeおよびそれを助けることができる:after 疑似クラスを使用する機能を提供するので、より良いです。

以下のために<input type="button">、視覚的に異なるレンダリングする<a>か、<span>ときに私はそれらを避けるため、特定の状況でクラスとスタイル。

現在のトップの回答が2009年に書かれたことに注目することは非常に価値があります。IE6は今のところ問題ではないので<button type="submit">Wins</button>、私のスタイルの一貫性がトップに出てきます。

jQueryを使用している場合は、大きな違いがあります。jQueryは、ボタンよりも入力で多くのイベントを認識します。ボタンの場合、jQueryは「クリック」イベントのみを認識します。入力では、jQueryは「クリック」、「フォーカス」、および「ぼかし」イベントを認識します。

必要に応じて常にイベントをボタンにバインドできますが、jQueryが自動的に認識するイベントは異なることに注意してください。たとえば、ページに「focusin」イベントがあるたびに実行される関数を作成した場合、入力は関数をトリガーしますが、ボタンはトリガーしません。

<button>HTMLを含めることができるという点で柔軟性があります。さらに、CSSを使用してスタイルを設定する方がはるかに簡単で、実際にはすべてのブラウザーにスタイルが適用されます。ただし、Internet Explorerにはいくつかの欠点があります（Eww！IE！）。Internet Explorerは、タグのコンテンツを値として使用して、value属性を正しく検出しません。ボタンがクリックされたかどうかに関係なく、フォーム内のすべての値がサーバー側に送信されます。これは、それを<button type="submit">トリッキーで痛みとして使用します。

<input type="submit">一方、値や検出の問題はありませんが、のようにHTMLを追加することはできません<button>。また、スタイルを設定するのが難しく、すべてのブラウザでスタイルが常に適切に応答するとは限りません。これがお役に立てば幸いです。

ここで残りの回答に何かを追加したいだけです。入力要素は、空または空の要素と見なされます（他の空の要素は、area、base、br、col、hr、img、input、link、meta、およびparamです。ここで確認することもできます）。つまり、コンテンツを含めることはできません。コンテンツがないことに加えて、空の要素には:: afterや:: beforeなどの疑似要素を含めることはできません。これは主な欠点だと思います。

さらに、違いの1つは、ライブラリのプロバイダー、およびそれらがコーディングするものに由来する可能性があります。たとえば、ここで私はCordovaプラットフォームをモバイルアングルUIと組み合わせて使用​​しています。input/ div / etcタグはng-clickでうまく機能しますが、ボタンはVisual Studioデバッガーをクラッシュさせる可能性があります。MattCが同じ問題を回答していることに注意してください。jQueryは単なるライブラリであり、プロバイダーは、ある要素の一部の機能を考えていませんでした。そのため、ライブラリを使用しているときに、ある要素では問題が発生し、別の要素では発生しない場合があります。そして単にのような人気のあるものはinput、それがより人気があるという理由だけで、ほとんどが固定されたものになります。

これは非常に古い質問であり、関連性がなくなった可能性がありますが、<button>以前にタグで発生していた問題のほとんどは存在しないため、使用することを強くお勧めします。

さまざまな理由でそれができない場合は、アクセシビリティの時点でタグに属性role =” button”を追加することを覚えておいてください。この記事は非常に有益です：https : //www.deque.com/blog/accessible-aria-buttons/