web-dev-qa-db-ja.com

<button>と<input type = "button" />。どちらを使う？

ほとんどのサイト（SOを含む）を見るとき、それらのほとんどは以下を使用します。

<input type="button" />

の代わりに：

<button></button>
  • もしあれば、両者の主な違いは何ですか？
  • 一方をもう一方の代わりに使用する正当な理由はありますか？
  • 組み合わせて使用​​する正当な理由はありますか？
  • <button>を使うことは互換性の問題がありますが、あまり使われていないのでしょうか。
htmlbuttoncompatibilityhtml-input
1522
Aron Rotteveel
  • これがページです 違いを説明しています（基本的にはHTMLを<button></button>に入れることができます）
  • そして別のページ なぜ人々は<button></button>を避けているのかを説明しています（ヒント：IE6）

<button />を使用するときの別のIE問題

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

619
Tamas Czinege

ちょっとしたメモとして、<button>は暗黙のうちに送信されます。送信せずにフォームでボタンを使用したい場合は問題が発生する可能性があります。したがって、<input type="button">（または<button type="button">）を使用するもう1つの理由

編集 - 詳細

型がないと、 buttonは暗黙的にsubmit の型を受け取ります。フォームに送信ボタンまたは入力がいくつあるかは問題ではなく、クリックされたときに明示的または暗黙的に送信として入力されたいずれか1つがフォームを送信します。

ボタンでサポートされているタイプは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"
292
Travis J

この記事 は、その違いの概要をかなりよく示しているようです。

ページから：

BUTTON要素で作成されたボタンは、INPUT要素で作成されたボタンと同じように機能しますが、より豊富なレンダリングの可能性を提供します。BUTTON要素にはコンテンツがあります。たとえば、imageを含むBUTTON要素は、typeが“ image”に設定されているINPUT要素と同じように機能し、似ていますが、BUTTON要素タイプではコンテンツを使用できます。

ボタン要素 - W3C

164
Noldorin

<button>要素の中には、テキストや画像などのコンテンツを入れることができます。

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

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

40
Santhosh

見積もり

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

から： http://www.w3schools.com/tags/tag_button.asp

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

37
user54579

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

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

input（<input>）はデータフィールドを表します。したがって、サーバーに送信するユーザーデータの一部です。ボタンに関連するいくつかの入力タイプがあります：<input type="submit">、<input type="image">、<input type="file">、<input type="reset">、<input type="button">。
それぞれに意味があります。たとえば、「file」はファイルのアップロードに使用され、「reset 「フォームをクリアし、「submit」がデータをサーバーに送信します。 W3リファレンスを確認してください MDNで または W3Schoolsで 。

button（<button>)要素は非常に多用途です：

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

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

16
Attilio

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

BUTTON要素で作成されたボタンは、INPUT要素で作成されたボタンと同じように機能しますが、より豊富なレンダリングの可能性を提供します。BUTTON要素にはコンテンツがあります。たとえば、imageを含むBUTTON要素は、typeが "image"に設定されているINPUT要素と同じように機能し、似ていますが、BUTTON要素タイプではコンテンツを使用できます。

16
gimel

フォームにボタンを作成したい場合はinput要素のbuttonを使用してください。また、アクション用のボタンを作成したい場合はbuttonタグを使用してください。

16
nickomarsa

JQueryを使用している場合は大きな違いがあります。 jQueryはボタ​​ンよりも入力に対するより多くのイベントを認識します。ボタンでは、jQueryは「クリック」イベントのみを認識します。入力に関して、jQueryは 'click'、 'focus'、および 'blur'イベントを認識しています。

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

8
MattC
<button>
  • デフォルトでは "type =" submit "属性を持っているかのように振る舞います
  • フォームがなくてもフォームなしで使用できます。
  • 許可されるテキストまたはHTMLコンテンツ
  • css擬似要素が許可されています（：beforeなど）
  • タグ名は通常、単一のフォームに固有のものです

vs.

<input type='button'>
  • 送信要素として動作するには、typeを 'submit'に設定する必要があります。
  • フォームでのみ使用できます。
  • テキストコンテンツのみが許可されています
  • css疑似要素はありません
  • ほとんどのフォーム要素（入力）と同じタグ名

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

7
Sergey Sklyar

CSSスタイルに関しては、<button type="submit" class="Btn">Example</button>のほうがCSS :beforeと:after擬似クラス を使うことができるのでより良いです。

特定の状況でクラスでスタイルを設定した場合、視覚的にレンダリングされる<input type="button">が<a>または<span>と異なるため、避けてください。

2009年に書かれた 現在のトップアンサー に注目する価値があります。IE6は最近の関心事ではないので、私の目には<button type="submit">Wins</button>スタイルの一貫性が上に出ています。

7
jnowland

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

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

6
Moh S.

ここで残りの回答に何か追加したいだけです。入力要素は空要素または無効要素と見なされます（他の空要素は、area、base、br、col、hr、img、input、link、meta、およびparamです。また、 here をチェックすることもできます）。コンテンツ。コンテンツを持たないことに加えて、空の要素 に:: afterや:: before のような擬似要素を含めることはできません。これは大きな欠点と考えています。

4
Roumelis George

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

3
deadManN