64

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

<button>提案されたルールの1つは、よりセマンティックなソリューションとして使用することを推奨する、submitタイプの入力タグを強調しています。<button>あなたが遭遇したタイプsubmit（ブラウザの互換性など）の長所と短所は何ですか？

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

2015年に編集

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

4

11 に答える 11

49

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

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

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

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

于 2009-12-14T22:21:26.480 に答える
17

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は、ボタンタグ付きのIE8でIE5-7を高速化します。送信された値が実際の値になり、ボタンが1つだけ送信されます。

于 2010-02-05T07:19:50.593 に答える
13

あなたが知る必要があるすべて：W3Schools<button>タグ

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

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

于 2009-12-14T21:07:02.180 に答える
10

長所：

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

短所：

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

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

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

于 2010-02-05T07:39:08.243 に答える
9

注意すべき重要な癖：要素を含むフォームでは、要素がクリック<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属性を省略しないでください。

于 2009-12-15T08:33:43.587 に答える
5

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

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

  • それ以外の場合：IE8をまだサポートしている場合は、<a href='http://example.com'><button></button></a>うまく機能しません。クリック可能な要素内にボタンをネストする他の方法もあります。だから、それに気をつけてください。

  • それ以外の場合：<button>主にJavaScriptをクリックするための要素として使用していて、それがフォームの外にある場合は、それ<button type='button'>を作成すれば、おそらく問題はありません。

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

注：Bootstrapのようなボタン模倣クラスを使用すると、好みの.btnように<div>、または正確に見せることが<a>でき、より便利なフォールバック動作が可能になります。悪い選択肢ではありません。<button><a>

TLDR; 古いブラウザを気にしない場合は使用してもかまいませんが、Bootstrapは、検討する価値のある、視覚的に類似したさらに堅牢なcssの代替手段を提供します。

于 2015-10-08T00:27:17.747 に答える
4

壊れているかどうか：

いつものように、答えは「すべての主要なブラウザで正常に動作しますが、IEでは次の癖があります。」しかし、それがあなたにとって問題になるとは思わない。

この<button>タグは、すべての主要なブラウザでサポートされています。唯一のサポートの問題は、ボタンを押したときにInternetExplorerが送信する内容にあります。

主要なブラウザは、value属性のコンテンツを送信します。Internet exploterは、<button>と</button>タグの間にテキストを送信しますが、クリックしたものだけでなく、フォーム内の他のすべての値も送信します。

あなたの目的のために、古いHTMLをクリーンアップするだけで、これは問題にはならないはずです。

出典：

  1. http://www.peterbe.com/plog/button-tag-in-IE
  2. http://www.w3schools.com/tags/default.asp
于 2009-12-14T22:10:01.843 に答える
1

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

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

于 2009-12-14T21:09:12.333 に答える
1

また、次の問題が発生する可能性があります。

もう1つは、引き戸のテクニックを使用したスタイリングに関連しています。たとえば、機能させるには、別のタグを挿入する必要があります<span>。

于 2011-09-18T00:40:40.973 に答える
0

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

商品のリストがあり、各商品の横にボタンを押して顧客のカートに追加するとします。

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="addtocart"を使用してフォームを送信することです。

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

したがって、この：

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

すべての主要なブラウザでトリックを実行します-私は実際に複数のボタンを備えたフォームでこれを使用し、ChromeFirefoxとIEで動作します

于 2012-02-13T00:08:18.513 に答える
-2

使用する主な理由<button>は、そのボタンのCSSマークアップと、画像を使用してボタンのスタイルを設定する機能を許可することであるように見えます（ここを参照：http ：//www.javascriptkit.com/howto/button.shtml ）

ただし、（X）HTML + CSSで見たより採用されたアプローチは、divを使用し、画像と：hover疑似クラスで完全にスタイルを設定することだと思います（ボタンの押し下げをシミュレートしています...複数追加することはできません）回答ごとにリンクしているので、「divボタン」をグーグルで検索すると、この例がたくさん表示されます）、JavaScriptを使用してフォームの送信またはAJAX呼び出しを行う...これは、HTMLフォームを使用しない場合にもさらに意味があります。そして、AJAXですべての提出を行います。

于 2009-12-14T21:12:40.923 に答える