web-dev-qa-db-ja.com

<button>タグにはどのような欠点がありますか？

診断CSSスタイルシートの使用を開始しました。 http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/

提案されたルールの1つは、より意味的な解決策として<button>を使用することを推奨する、submitタイプの入力タグを強調しています。遭遇したタイプ送信（ブラウザ互換性など）での<button>の長所と短所は何ですか？

明確にするために、私は<button>の仕様を理解しています。開始と終了が定義され、さまざまな要素を含むことができますが、入力は一重項であり、内容を含めることはできません。私が本質的に知りたいのは、壊れているかどうかです。現在のボタンの使用可能性を知りたい。以下の最初の答えは、残念ながら、フォーム以外を使用する場合は壊れていることを暗示しているようです。

2015年の編集

風景が変わりました！私はもう6年以上ボタンを扱った経験があり、ブラウザはIE6とIE7からやや移行しました。そこで、私が見つけたものと提案したものを詳述する回答を追加します。

cssbuttontagsinternet-explorer-7diagnostics
64
Kzqai

ASP.NETの観点からの回答。

この質問 と、ModernButtonコントロールのコード（最終的に<button>コントロール）を見つけたとき、私は興奮しました。

そこで私はこれらのボタンのすべての種類を追加し始め、それらを際立たせるために<img />タグで装飾されました。そして、それはすべて、FirefoxとChromeでうまく機能しました。

その後、IE6を試して「潜在的に危険なRequest.Form値が検出されました」というメッセージを受け取りました。IE6がボタンの内側にhtmlを送信するためです。私の場合はhtmlタグが含まれています。この追加されたデータ検証が好きなので、validateRequestフラグを無効にしたくありません。

そこで、送信が発生する前にそのボタンを無効にするJavaScriptを作成しました。ボタンが1つあるテストページではうまく機能しましたが、他の<button>タグがある実際のページで試してみたところ、再び爆発しました。 IE6はボタンのすべてのhtmlを送信するためです。そのため、送信前にボタンを無効にするためのあらゆる種類のコードが用意されました。

IE7と同じ問題。ありがたいことに、IE8ではこれが修正されています。

うわぁ。 ASP.NETを使用している場合は、この道を歩かないことをお勧めします。

更新：

これを修正するのに有望なライブラリを見つけました。

このライブラリのie8.jsスクリプトを使用する場合： http://code.google.com/p/ie7-js/

うまくいくかもしれません。 IE8.jsは、IE5-7をボタンタグ付きIE8で高速化します。送信された値を実際の値にし、1つのボタンのみが送信されます。

17
slolife

ブラウザはデフォルトで異なるタイプを使用するため、<button>を使用する場合は常にタイプを指定します。

これはすべてのブラウザーで一貫して機能します。

  • <button type="submit">...</button>
  • <button type="button">...</button>

これにより、<button>のすべての利点を得ることができ、欠点はありません。

49
orip

知っておく必要があるすべて： W3Schools <button>タグ

このタグは、すべての主要なブラウザーでサポートされています。

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

13
David Brown

長所：

  • 表示ラベルは、送信された値と同じである必要はありません。国際化と「この行を削除」に最適
  • <em>や<img>などのマークアップを含めることができます

短所：

  • MSIEの一部のバージョンは、type="button"ではなくtype="submit"にデフォルト設定されるため、明示的に指定する必要があります
  • MSIEの一部のバージョンでは、すべての<button>sが成功したものとして処理されるため、複数送信ボタンフォームでクリックされたものを判別できません。
  • MSIEの一部のバージョンは、実際の値の代わりに表示テキストを送信します

から https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button ：

IE7にはバグがあり、Click meでフォームを送信すると、送信されたPOSTデータはmyButton = fooではなくmyButton = Click meになります。IE6にはフォームを送信するさらに悪いバグがあります。 IE7と同じバグで、ボタンはフォームのすべてのボタンを送信しますが、このバグはIE8で修正されました。

10
Quentin

重要な注意事項：<button/>要素を含むフォームでは、IE6およびIE7は<button/>要素がクリックされたときにフォームを送信しません。一方、他のブラウザはフォームを送信します。

対照的に、<input type="button"/>または<button type="button"/>要素がクリックされたとき、ブラウザはフォームを送信しません。そして当然、<input type="submit"/>または<button type="submit"/>要素がクリックされると、すべてのブラウザーがフォームを送信します。

@oripの答えが示すように、ブラウザー間で一貫した送信動作を得るには、<button type="button" />または<button type="submit" />要素内で常に<form/>を使用します。 type属性を除外しないでください。

9
Chris Calo

6年後の<button>の癖を少し経験したことがあるので、ここに私の提案を示します。

  • still supportIE6またはIE7、ボタンに非常に注意してください、これらのブラウザでは動作が非常にバグがあります。場合によっては、value = 'whatever'の代わりにinnerHtmlを送信し、1つだけの代わりにすべてのボタン値を送信します。したがって、これらのブラウザのために徹底的にテストするか、避けてください。

  • そうでない場合：IE8を引き続きサポートしている場合、<a href='http://example.com'><button></button></a>はうまく機能せず、おそらくボタンをクリック可能な要素。気をつけてね.

  • それ以外の場合：主にjavascriptをクリックする要素として<button>を使用していて、それがフォームの外にある場合は、<button type='button'>にすれば大丈夫です。

  • それ以外の場合：フォームで<button>を使用している場合、（ほとんどの場合）<button>のデフォルトタイプが実際に<button type='submit'>であることに注意してください。したがって、タイプとvalue、たとえば：<button type='submit' value='1'>Search</button>。

注：Bootstrapの.btnなどのボタン模倣クラスを使用すると、<div>や<a>、さらには<button>のようなものを思い通りに作成できます。 、および<a>の場合、より便利なフォールバック動作があります。悪いオプションではありません。

TLDR; Ok古代のブラウザを気にしない場合に使用しますが、Bootstrapは、見る価値のある、より堅牢なCSSの視覚的に類似した代替手段を提供します。

5
Kzqai

違いを説明するサイトは次のとおりです。 http://www.javascriptkit.com/howto/button.shtml

基本的に、inputタグはテキストのみを許可しますが（背景画像を使用できます）、ボタンは画像、表、divなどを追加できます。また、フォームタグ内にネストする必要もありません。

1
Chris Haas

また、これらの問題に遭遇する可能性があります。

別のことは、 sliding-door technique を使用してスタイリングすることに関連しています：別のタグを挿入する必要があります<span>動作させる。

1
moey

私が懸念している限り、送信タグとボタンタグの違いは次のとおりです。要素の値とは異なるテキストを表示するオプションを提供します

製品のリストがあり、ボタンで顧客のカートに追加する各製品の隣にあるとします。

product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>

あなたはこれを行うことができます：

<button name="buy" type="submit" value="product2"> add to cart </button>

問題は、IEはvalue = "product2"ではなくvalue = "add to cart"でフォームを送信することです

この問題を回避する最も簡単な方法は、onclick = "this.value = 'product2'"を追加することです

したがって、この：

<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>

すべての主要なブラウザでトリックを行います-私は実際に複数のボタンを持つフォームでこれを使用し、Chrome FirefoxおよびIEで動作します

0
George Panic