<button> 対<input type="“button”" />.る。

StackOverflow https://stackoverflow.com/questions/469059

質問

がほとんどのサイトを含む）、その利用

<input type="button" />

代わりに：

<button></button>
  • その場合?
  • が有効な理由で使用ですか。
  • が有効な理由を使用せているのか。
  • 利用には <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>要素内には、テキストや画像など、コンテンツを置くことができます。

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

このは<input>要素で作成し、この要素とボタンの間の違いがある。

は、HTMLマニュアルのページフォーム：

  

単にINPUT要素で作成したボタンのようBUTTON要素の機能を使用して作成ボタンが、彼らは、より豊かな表現の可能性を提供します：BUTTON要素は内容を有することができます。例えば、のような画像機能を含み、そのタイプ「イメージ」に設定されているINPUT要素に類似し得るBUTTON要素が、BUTTON要素タイプは、コンテンツを可能にする。

フォームにボタンを作成したい場合は、

input要素からボタンを使用してください。あなたがアクションのボタンを作成したい場合は、ボタンのタグを使用します。

ま引用の条 の違いをアンカー等、入力ボタン:

アンカー （ <a> 要素を表すインターネット資源にできるナビゲートやダウンロードにはブラウザです。いくことのできないユーザーの当たりにしたページのファイルがダウンロードに使用させる仕組みであった。

An 入力 (<input> を表す）データ分野:一部のユーザーデータを利用することに送るサーバーです。ある複数の入力の種類に関連しボタン： <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
それぞれ意味があり、例えば"ファイル"使ってアップロードファイル"リセット"クリアを形にし、"提出"データを送信します。チェックW3参照 にMDN または にW3Schools.

の ボタン (<button>) 要素は非常に汎用性:

  • ネストすることができ要素内のボタンに画像など、段落、 ヘッダー;
  • ボタンを含むこともでき ::before や ::after 疑似要素
  • ボタンを支援 disabled 属性。ここで しています。

再度チェックW3参考のため <button> タグ にMDN または にW3Schools.

あなたはjQueryのを使用している場合は、

は大きな違いがあります。 jQueryのは、それがボタンの上よりも入力に多くのイベントを認識しています。ボタンで、jQueryのは、「クリック」イベントの唯一の認識しています。入力に、jQueryのは、「クリック」「フォーカス」、および「ぼかし」のイベントを認識しています。

必要に応じて、常にあなたのボタンにイベントを結合するが、ただのjQueryを自動的に認識しているイベントが異なっていることに注意してください可能性があります。あなたのページの「とfocusIn」イベントがあった時はいつでも実行された機能を作成した場合、例えば、入力機能をトリガだろうが、ボタンはないでしょう。

<button>
  • デフォルトのように動作すかった場合、"type="submit"属性
  • なく使用できる形にしてます。
  • テキストまたはhtmlコンテンツを許可
  • cssの疑似要素を許可（前)
  • タグの名前は、通常ならでは単一のフォーム

対

<input type='button'>
  • ようにするべきである設定の"提出"を行動として提出要素
  • でのみ使用できます。
  • テキストのみのコンテンツを許可
  • なcssの疑似要素
  • 同じタグ名としての形態の要素(入力)

--
モダンブラウザ両方の要素を簡単にstyleable cssで唯一の資産運用と公私年金制度, button 要素として好きなスタイル以内のhtmlおよび疑似要素

限りCSSスタイリングが<button type="submit" class="Btn">Example</button>それはあなたのCSSを使用することができますよう、より良いです:beforeと:after <のhref = "https://developer.mozilla.org/en/docs懸念しています助けることができるの/ウェブ/ CSS /コンテンツ」のrel = "nofollowをnoreferrer">疑似クラスます。

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

のために

これは現在のトップの答えを注目に非常に価値があります 2009年IE6で書かれていたことは、私の目にスタイリング一貫性が上に出てくる<button type="submit">Wins</button>ので、今日の関心事ではありません。

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

<input type="submit">他の手は、任意の値または検出の問題はありませんが、あなたは<=>でできるようにあなたは、しかし、HTMLを追加することはできませんで。また、スタイルに困難だ、とスタイリングは、常にすべてのブラウザ間でも応答しません。これは助けを願っています。

私を追加したいものは、回答ます。Input要素を考慮し、空ボイド（空き要素は、ベース,br,col,hr,img,入力、リンク、メタ、param.確認することもできます こちらのしていく、というものではないです。ほかにないコンテンツ、空要素 な疑似要素のように::、::前, ると考えるのは、大きな欠点.

加えて、相違点の一つは、ライブラリーの提供者から来ることができる、と彼らは何のコード。例えばここで私は、モバイル角度UIとの組み合わせでコルドバのプラットフォームを使用していて、入力/ DIVの/ etcタグがNGクリックでうまく動作している間、ボタンは確かにプログラマが発生していることの違いによって、クラッシュするには、Visual Studioデバッガを引き起こす可能性があります。同じ問題にそのMattC回答のポイントに注意し、jQueryのは、ちょうどlibです、そしてプロバイダがそのS /彼は他に提供し、一つの要素にいくつかの機能は考えていませんでした。あなたはライブラリを使用しているときに、あなたは別の顔ではないだろう一つの要素、との問題に直面する可能性があります。単にinputのような人気の1は、主にそれがより人気だという理由だけで、固定のいずれかになります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top