フォームを送信しないHTMLボタン

フォームがあります。そのフォームの外に、ボタンがあります。次のようなシンプルなボタン：

<button>My Button</button>

それにもかかわらず、それをクリックすると、フォームが送信されます。コードは次のとおりです。

<form id="myform">
    <input />
</form>
<button>My Button</button>

このボタンで実行する必要があるのはJavaScriptです。しかし、上記のコードのように見えても、フォームを送信します。タグボタンをスパンに変更すると、完全に機能します。しかし、残念ながら、それはボタンである必要があります。そのボタンがフォームを送信しないようにブロックする方法はありますか？例えば

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

これは、HTMLの最も厄介な小さな特殊性だと思います...そのボタンは、送信しないように「ボタン」タイプである必要があります。

<button type="button">My Button</button>

2019年2月5日更新：HTML Living Standard（およびHTML 5仕様）に従って：

欠損値のデフォルトと無効な値のデフォルトは、サブミットボタンの状態です。

return false;onclickハンドラーの最後でこの処理を行います。ただし、単純にを追加type="button"する方が良い<button>です。これにより、JavaScriptがなくても適切に動作します。

デイブ・マークルは正しいです。W3Schoolのウェブサイトから：

常にボタンのtype属性を指定します。Internet Explorerのデフォルトのタイプは「ボタン」です​​が、他のブラウザ（およびW3C仕様）では「送信」です。

つまり、使用しているブラウザはW3Cの仕様に従っています。

デフォルトでは、htmlボタンはフォームを送信します。

これは、フォームの外側にあるボタンでも送信者として機能するためです（W3Schools Webサイトを参照してください：http : //www.w3schools.com/tags/att_button_form.asp）。

つまり、ボタンタイプはデフォルトで「送信」です。

<button type="submit">Button Text</button>

したがって、これを回避する簡単な方法は、ボタンタイプを使用することです。

<button type="button">Button Text</button>

その他のオプションには、ボタンがクリックされたときのonclickまたはその他のハンドラーの最後にfalseを返すことや、代わりに<input>タグを使用することが含まれます。

詳細については、Mozilla Developer Networkのボタンに関する情報をご覧ください。https：//developer.mozilla.org/en/docs/Web/HTML/Element/button

<Button>タグを使用しないことをお勧めします。<Input type='Button' onclick='return false;'>代わりにタグを使用してください。（「return false」を使用しても、フォームは送信されません。）

いくつかの参考資料

アクセシビリティの理由から、私は複数のtype=submitボタンでそれを引き出すことができませんでした。だけでネイティブの仕事への道form複数のボタンではなくONLY当たったときに1がフォームを送信することができますEnterキーは、それらの一方のみがであることを確認することですtype=submit他の人のような他のタイプにいる間type=button。このようにして、キーボードサポートの観点から、ブラウザー上のフォームを処理する際のユーザーエクスペリエンスが向上します。

私にとってうまくいったもう1つのオプションは、onsubmit = "return false;"を追加することでした。フォームタグに。

<form onsubmit="return false;">

意味的には、ボタンの種類を変更する上記の方法ほど良い解決策ではないかもしれませんが、フォーム要素を送信したくないだけの場合は、オプションのようです。