Как создать кнопку "Отмена HTML", которая перенаправляет URL-адрес

Я играю с кнопками в редакторе Try3 для w3schools, и я пытаюсь выяснить, как сделать мой браузер перенаправлен на 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>

Ответ 1

cancel не является допустимым значением для атрибута типа, поэтому кнопка, вероятно, имеет значение submit и продолжает отправлять форму. Вероятно, вы имеете в виду type="button".

(javascript:следует удалить, хотя он не наносит никакого вреда, это абсолютно бесполезно label)

У вас нет функциональности, подобной кнопке, поэтому было бы лучше:

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

... возможно, с некоторым CSS, чтобы он выглядел как кнопка.

Ответ 2

В html нет button type="cancel". Вы можете попробовать как это

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

Вы можете сделать его похожим на кнопку, используя свойства стиля CSS.

Ответ 3

Здесь есть несколько проблем.

Прежде всего, нет такой вещи, как <button type="cancel">, поэтому она рассматривается как просто a <button>. Это означает, что ваша форма будет отправлена вместо кнопки, введя вас в другое место.

Во-вторых, javascript: требуется только в атрибутах href или action, где ожидается URL-адрес, чтобы назначить код JavaScript. Внутри onclick, где JavaScript уже ожидается, он просто выступает в качестве метки и не служит реальной цели.

Наконец, просто лучше создать ссылку на отмену, а не кнопку отмены. Поэтому вы можете просто сделать это:

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

С помощью CSS вы можете даже сделать его похожим на кнопку, но с этим HTML абсолютно бесполезно, что он должен делать.

Ответ 4

он по умолчанию отправляет форму, самым простым способом является добавить "return false"

<button type="cancel" onclick="window.location='http://stackoverflow.com';return false;">Cancel</button>

Ответ 5

<input class="button" type="button" onclick="window.location.replace('your_url')" value="Cancel" />

Ответ 6

Просто поместите type = "button"

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

Поскольку ваша кнопка находится внутри формы, она принимает значение по умолчанию в качестве submit и type = "cancel" не существует.

Ответ 7

Вот что я использую, попробуйте.

<a href="index.php"><button style ="position:absolute;top:450px;left:1100px;height:30px;width:200px;"> Cancel </button></a>

Ответ 8

Нет кнопки типа отмены https://www.w3schools.com/jsref/prop_pushbutton_type.asp

Для достижения отмены я использовал историю DOM

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

Ответ 9

<button onclick=\"window.location='{$_SERVER['PHP_SELF']}';return false;\">Reset</button>

Не хватает репутации, чтобы проголосовать за Костяна. Здесь мое окончательное решение (требуется кнопка reset).

Еще раз спасибо Костяну за то, что он ответил на заданный вопрос, не предложив метод "обходного пути" (отнимающего много времени) для "создания кнопки" со стилями.

Это кнопка (которую зритель ожидает увидеть), и она работает точно так, как было запрошено. И он смешивается с другими кнопками на странице. Без сложности.

Я удалил "type = cancel", который, по-видимому, был бесполезным. Так что еще меньше кода.:)

Ответ 10

Здесь я использую ссылку в форме кнопки для операции CANCEL.

<button><a href="main.html">cancel</a></button>

Ответ 11

С помощью JQuery:

$(".cancel-button").click(function (e) {
  e.preventDefault();
});