如何创建重定向到 URL 的 HTML 取消按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18407832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a HTML Cancel button that redirects to a URL
提问by Red Cricket
I am playing with the Buttons in the w3schools Tryit editor, and I am trying to figure out how to make my browser redirect to an URL when I click on the "Cancel" button.
我正在w3schools Tryit 编辑器中使用按钮，并且我试图弄清楚当我单击“取消”按钮时如何使我的浏览器重定向到 URL。
Here's what I have tried:
这是我尝试过的：
<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>But it doesn't work. Any ideas?
但它不起作用。有任何想法吗？
回答by Quentin
cancelis not a valid value for a type attribute, so the button is probably defaulting to submitand continuing to submit the form. You probably mean type="button".
cancel不是 type 属性的有效值，因此按钮可能默认为submit并继续提交表单。你可能是说type="button"。
(The javascript:should be removed though, while it doesn't do any harm, it is an entirely useless label)
（虽然javascript:应该删除，虽然它不会造成任何伤害，但它是一个完全无用的标签）
You don't have any button-like functionality though, so would be better off with:
但是，您没有任何类似按钮的功能，因此最好使用：
<a href="http://stackoverflow.com"> Cancel </a>
… possibly with some CSS to make it look like a button.
...可能使用一些 CSS 使其看起来像一个按钮。
回答by RJ Anoop
There is no button type="cancel"in html. You can try like this
button type="cancel"html中没有。你可以这样试试
<a href="http://www.url.com/yourpage.php">Cancel</a>
You can make it look like a button by using CSS style properties.
您可以使用 CSS 样式属性使其看起来像一个按钮。
回答by Niet the Dark Absol
There are a few problems here.
这里有几个问题。
First of all, there is no such thing as <button type="cancel">, so it is treated as just a <button>. This means that your form will be submitted, instead of the button taking you elsewhere.
首先，没有这样的东西<button type="cancel">，所以它被当作只是一个<button>。这意味着您的表单将被提交，而不是按钮将您带到别处。
Second, javascript:is only needed in hrefor actionattributes, where a URL is expected, to designate JavaScript code. Inside onclick, where JavaScript is already expected, it merely acts as a label and serves no real purpose.
其次，javascript:只需要在href或action属性中，在需要 URL 的地方，指定 JavaScript 代码。在内部onclick，已经需要 JavaScript 的地方，它只是作为一个标签，并没有真正的用途。
Finally, it's just generally better design to have a cancel linkrather than a cancel button. So you can just do this:
最后，具有取消链接而不是取消按钮通常是更好的设计。所以你可以这样做：
<a href="http://stackoverflow.com/">Cancel</a>
With CSS you can even make it look the same as a button, but with this HTML there is absolutely no confusion as to what it is supposed to do.
使用 CSS 你甚至可以让它看起来和按钮一样，但是使用这个 HTML 绝对不会混淆它应该做什么。
回答by Konstantin
it defaults to submitting a form, easiest way is to add "return false"
它默认提交表单，最简单的方法是添加“return false”
<button type="cancel" onclick="window.location='http://stackoverflow.com';return false;">Cancel</button>
回答by Sobin Augustine
<input class="button" type="button" onclick="window.location.replace('your_url')" value="Cancel" />
回答by shadow0359
Just put type="button"
只需输入类型 =“按钮”
<button type="button"><b>Cancel</b></button>
Because your button is inside a form it is taking default value as submit and type="cancel" doesn't exist.
因为您的按钮位于表单内，所以它采用默认值作为提交，并且 type="cancel" 不存在。
回答by SoSen
There is no button type cancel https://www.w3schools.com/jsref/prop_pushbutton_type.asp
没有按钮类型取消 https://www.w3schools.com/jsref/prop_pushbutton_type.asp
To achieve cancel functionality I used DOM history
为了实现取消功能，我使用了 DOM 历史记录
<button type="button" class="btn btn-primary" onclick="window.history.back();">Cancel</button>For more details : https://www.w3schools.com/jsref/met_his_back.asp
回答by bhanu
Here, i am using link in the form of button for CANCEL operation.
在这里，我使用按钮形式的链接进行取消操作。
<button><a href="main.html">cancel</a></button>
回答by bhanu
Thats what i am using try it.
这就是我正在使用的尝试。
<a href="index.php"><button style ="position:absolute;top:450px;left:1100px;height:30px;width:200px;"> Cancel </button></a>
回答by TheSatinKnight
<button onclick=\"window.location='{$_SERVER['PHP_SELF']}';return false;\">Reset</button>
Not enough rep to Vote Up for Kostyan. Here's my final solution (needed a reset button).
没有足够的代表为 Kostyan 投票。这是我的最终解决方案（需要一个重置按钮）。
Thanks again to Kostyan for answering the question as asked without suggesting a "workaround" (time-consuming) method to "construct a button" with styles.
再次感谢 Kostyan 回答了所问的问题，而没有建议使用样式“构造按钮”的“解决方法”（耗时）方法。
This is a Button (which the viewer expects to see) and it works exactly as requested. And it mingles with the other buttons on the page. Without complexity.
这是一个按钮（观众希望看到的），它完全按照要求工作。它与页面上的其他按钮混合在一起。没有复杂性。
I did remove the "type=cancel" which apparently was useless. So even less code. :)
我确实删除了显然没用的“type=cancel”。所以代码更少。:)
