フォームを送信しないボタンを作ることはできますか?

2つのボタンを持つフォームを用意しました。

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

このボタンにもjQuery UIのボタンを使っています。

$('button').button();

しかし、最初のボタンはフォームを送信するものです。私は、type="submit"が付いていなければ、そうならないと思っていました。

もちろん、次のようにすることもできます。

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

しかし、JavaScriptの介入なしに、フォームを送信するための戻るボタンを停止する方法はありますか?

正直なところ、ボタンを使ったのは、jQuery UIでスタイルを決められるようにするためです。リンク上でbutton()を呼び出してみましたが、期待通りには動作しませんでした(かなり醜く見えました!)。

ソリューション

button要素のtype属性][1]のデフォルト値は、*"submit"です。type="button"に設定すると、フォームを送信しないボタンを作成することができます。

Submit

HTML Standard]1の言葉を借りれば、 "Does nothing."

解説 (5)

button`要素のデフォルトタイプはsubmitです。

typeを button に設定することで、何もしないようにすることができます。

Cancel changes
解説 (2)

昔ながらのHTMLを使えばいいのです。

<input type="button" value="Submit" />

必要に応じて、リンクのサブジェクトとしてラップしてください。

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

または、javascriptで他の機能を提供したいと判断した場合。

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
解説 (12)