如何创建重定向到 URL 的 HTML 取消按钮

Posted 2023-02-24

技术标签:

【中文标题】如何创建重定向到 URL 的 HTML 取消按钮【英文标题】：How to create a HTML Cancel button that redirects to a URL 【发布时间】：2013-08-26 19:12:31 【问题描述】：

我正在使用Buttons in the w3schools Tryit editor，我试图弄清楚当我点击“取消”按钮时如何让我的浏览器重定向到一个 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://***.com';">Cancel</button>
</form>

但它不起作用。有什么想法吗？

【问题讨论】：

【参考方案1】：

没有按钮类型取消 https://www.w3schools.com/jsref/prop_pushbutton_type.asp

为了实现取消功能，我使用了 DOM 历史记录

&lt;button type="button" class="btn btn-primary" onclick="window.history.back();"&gt;Cancel&lt;/button&gt;

更多详情：https://www.w3schools.com/jsref/met_his_back.asp

【讨论】：

比其他的更干净【参考方案2】：

这就是我正在使用的尝试。

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

【讨论】：

【参考方案3】：

只需输入 type="button"

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

因为您的按钮位于表单内，所以它采用默认值作为提交并且 type="cancel" 不存在。

【讨论】：

html 不允许在 <a> 元素中使用 <button> 元素。这个按钮现在什么都不做，除非你绑定一些 JavaScript 到它。【参考方案4】：

这里，我使用按钮形式的链接进行取消操作。

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

【讨论】：

HTML 不允许在 <button> 元素内使用 <a> 元素。【参考方案5】：

html 中没有button type="cancel"。你可以这样试试

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

您可以使用 CSS 样式属性使其看起来像一个按钮。

【讨论】：

为避免按钮的标签像链接一样带有下划线，请使用<button type="button">Cancel</button> 而不是输入。为什么要在链接中放置一个按钮？如果这行得通，那绝对是一种古怪的行为……实际上，HTML 标准甚至不允许这样做：w3.org/TR/html-markup/… 此标记非常无效，令我担心的是，有 21 人认为这是一个好建议。请更新您的答案或将其删除，以免有人在生产环境中使用此代码。您 2016 年 5 月的编辑应该保留原始的 20 次赞成的答案，然后解释了为什么您现在认为它是错误的。替换您的原始答案看起来似乎是这个答案赢得了赞成票，它使 cmets 感到困惑，而且它的指导性较差。它还会使此答案成为最佳答案的副本。【参考方案6】：

使用 Jquery：

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

【讨论】：

【参考方案7】：

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

没有足够的代表投票给 Kostyan。这是我的最终解决方案（需要重置按钮）。

再次感谢 Kostyan 回答了所提出的问题，但没有提出使用样式“构建按钮”的“解决方法”（耗时）方法。

这是一个按钮（查看者希望看到的），它完全按照要求工作。它与页面上的其他按钮混合在一起。没有复杂性。

我确实删除了显然没用的“type=cancel”。所以代码更少。 :)

【讨论】：

不要让你的风格决定你的标记。编写您的 html 并为其设置样式。编写 html 以实现某些样式是解决方法。（假设您想要蓝色下划线文本，因此您使用带有 `href='javascript:return false;' 的 a 标记而不是设置文本样式）这里的问题是您似乎认为耗时=解决方法。这不是真的。你弄丢了我。我的目标是一个显示“重置”一词的按钮，与其他按钮（用户体验/外观和感觉）混合，当然没有提交表单。这三个都很好地完成了。碰巧的是，它也与发布的问题相匹配，因为所需要的只是用任何其他 URL 替换 php_self 部分。【参考方案8】：

默认是提交表单，最简单的方法是添加“return false”

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

【讨论】：

如果是这种情况，它会转到 url，而是提交表单，返回 false 阻止表单提交，然后它实际上会重定向。我投了你一票。感谢您回复我的问题。【参考方案9】：

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

【讨论】：

要求取消“按钮”以重定向到一个网址，然后为什么要投反对票我投了你一票。感谢您回复我的问题。也许您应该考虑在您的代码行中添加一些解释。上下文总是有帮助的——你可以告诉 OP 他们的方法出了什么问题，以及为什么你的答案可以解决问题。请参阅 Kolink 或 Quentin 的答案以了解想法。完美。当我们可以使用此方法时，无需花时间添加 CSS 代码。太棒了。【参考方案10】：

这里有一些问题。

首先，没有<button type="cancel">这样的东西，所以它被视为只是一个<button>。这意味着您的表单将被提交，而不是按钮将您带到其他地方。

其次，javascript: 仅在需要 URL 的 href 或 action 属性中需要，以指定 JavaScript 代码。在 onclick 内部，已经需要 JavaScript，它只是充当标签，没有实际用途。

最后，使用取消链接而不是取消按钮通常是更好的设计。所以你可以这样做：