web-dev-qa-db-ja.com

input type = "submit"対buttonタグは交換可能ですか?

input type="submit"buttonタグは交換可能ですか?または、違いがある場合は、input type="submit"を使用するタイミングとbuttonを使用するタイミング

そして、違いがない場合、なぜ同じ目的のために2つのタグがあるのですか?

206
Jitendra Vyas

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

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

したがって、機能のみについては交換可能です!

(忘れないでください、type="submit"buttonのデフォルトなので、そのままにしてください!)

116
MatTheCat

<input type="button">は単なるボタンであり、それ自体では何もしません。 <input type="submit">は、フォーム要素内にある場合、クリックされるとフォームを送信します。

別の便利な「特別な」ボタンは、フォームをクリアする<input type="reset">です。

60
theprogrammer

<input type = "button" ..>の代わりに<button>タグを使用します。 bootstrap 3で推奨される方法です。

http://getbootstrap.com/css/#buttons-tags

「クロスブラウザレンダリング

ベストプラクティスとして、可能な限り<button>要素を使用して、ブラウザ間のレンダリングを一致させることを強くお勧めします。

特に、Firefoxのバグにより、<input>ベースのボタンの行の高さを設定できないため、Firefoxの他のボタンの高さと正確に一致しません。」

36
rolfk

<input type='submit' />は、内部のHTMLをサポートしていません。これは、単一の自己終了タグであるためです。一方、<button>は、タグペア<button><img src='myimage.gif' /></button>であるため、内部でHTML、画像などをサポートします。 <button>は、CSSスタイリングに関しても柔軟性があります。

<button>の欠点は、古いブラウザーでは完全にサポートされていないことです。たとえば、IE6/7は正しく表示されません。

特別な理由がない限り、おそらく<input type='submit' />に固執することをお勧めします。

24
Jared Ng

両方の要素が機能的に同じ結果*を提供しますが、<button>を使用することを強くお勧めします

  • はるかに明確で読みやすい。 inputは、コントロールが編集可能であるか、ユーザーが編集できることを示します。 buttonは、サービスの目的に関してはるかに明示的です。
  • CSSでのスタイル設定が簡単です。前述のように、FIrefoxとIEには、場合によってはinput[type="submit"]が正しく表示されないという癖があります
  • 予測可能なリクエスト:IEは、POST/GETリクエストでサーバーに値が送信されると非常に振る舞います
  • マークアップ対応。アイコンなどのアイテムをボタン内にネストできます。
  • HTML5、先進的;開発者として、公式に承認された新しい仕様を採用するのは私たちの責任です。 HTML5は、現時点で1年以上公式になっており、多くの場合boost SEOと示されています。

<button type="button">を除き、デフォルトでは動作が指定されていません。

要約すると、<input type="submit" />の使用を強くお勧めします

23
user1429980

これは古い質問だと思いますが、mozilla.orgでこれを見つけて、それが当てはまると思います。

ボタンには、送信、リセット、ボタンの3つのタイプがあります。送信ボタンをクリックすると、フォームのデータが要素のaction属性で定義されたWebページに送信されます。

リセットボタンをクリックすると、すべてのフォームウィジェットがすぐにデフォルト値にリセットされます。 UXの観点から、これは悪い習慣と見なされます。

ボタンボタンをクリックしても、何も起こりません。馬鹿げているように聞こえますが、JavaScriptでカスタムボタンを作成すると非常に便利です。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_ <button> _to_finish

11
Jere.me

<button><input type="submit">よりも新しく、よりセマンティックで、スタイル設定が簡単で、内部のHTMLをサポートします。

9
Acaz Souza

他の答えは素晴らしく、質問に答えますが、input type="submit"buttonを使用する際に考慮すべきことが1つあります。 input type="submit"を使用すると、入力でCSS擬似要素 使用不可 が、ボタンの場合はcanになります!

これは、スタイリングに関して、入力に対してbutton要素を使用する1つの理由です。

7
L84

これがバグなのか機能なのかはわかりませんが、(少なくとも場合によっては)非常に重要な違いがあります。<input type="submit">はリクエストにキーと値のペアを作成し、<button type="submit">は作成しません。 ChromeおよびSafariでテスト済み。

フォームに複数の送信ボタンがあり、どのボタンがクリックされたかを知りたい場合は、buttonを使用せず、代わりにinput type="submit"を使用してください。

2
Ivan Yarych