web-dev-qa-db-ja.com

URLにリダイレクトするHTMLキャンセルボタンを作成する方法

w3schools Tryitエディターのボタン で遊んでおり、「キャンセル」ボタンをクリックしたときにブラウザーがURLにリダイレクトする方法を見つけようとしています。

ここに私が試したものがあります：

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
  <button type="cancel" onclick="javascript:window.location='http://stackoverflow.com';">Cancel</button>
</form>

しかし、それは機能しません。何か案は？

javascripthtmlformshtmlbutton
30
Red Cricket

cancelはtype属性の有効な値ではないため、ボタンはおそらくsubmitにデフォルト設定され、フォームの送信を続行します。あなたはおそらくtype="button"を意味します。

（javascript:は削除する必要がありますが、害はありませんが、まったく役に立たない label ）

ただし、ボタンのような機能はないので、次の方法をお勧めします。

<a href="http://stackoverflow.com"> Cancel </a>

…ボタンのように見えるようにするために、おそらくCSSを使用します。

51
Quentin

Htmlにはbutton type="cancel"はありません。このように試すことができます

<a href="http://www.url.com/yourpage.php">Cancel</a>

CSSスタイルのプロパティを使用して、ボタンのように見せることができます。

20
RJ Anoop

ここにはいくつかの問題があります。

まず第一に、<button type="cancel">のようなものはないので、それはただ<button>として扱われます。これは、ボタンが他の場所に移動するのではなく、フォームが送信されることを意味します。

次に、javascript:は、URLが予期されるhrefまたはaction属性でのみ必要で、JavaScriptコードを指定します。 JavaScriptがすでに期待されているonclick内では、ラベルとして機能するだけで、実際の目的はありません。

最後に、キャンセルボタンよりもキャンセルリンクを使用する方が一般的に優れた設計です。だからあなたはこれを行うことができます：

<a href="http://stackoverflow.com/">Cancel</a>

CSSを使用すると、ボタンと同じように表示することもできますが、このHTMLを使用すると、何をすべきかについてまったく混乱することはありません。

13
Niet the Dark Absol

デフォルトではフォームを送信しますが、最も簡単な方法は「return false」を追加することです

<button type="cancel" onclick="window.location='http://stackoverflow.com';return false;">Cancel</button>
11
Konstantin
<input class="button" type="button" onclick="window.location.replace('your_url')" value="Cancel" />
5
Sobin Augustine

Type = "button"を置くだけです

<button type="button"><b>Cancel</b></button>

ボタンはフォーム内にあるため、submitとしてデフォルト値を使用しており、type = "cancel"は存在しません。

4
shadow0359

ボタンタイプのキャンセルはありません https://www.w3schools.com/jsref/prop_pushbutton_type.asp

キャンセル機能を実現するために、DOM履歴を使用しました

<button type="button" class="btn btn-primary" onclick="window.history.back();">Cancel</button>

詳細については、 https://www.w3schools.com/jsref/met_his_back.asp

0
SoSen