HTML输入按钮上的超链接

Question

HTML输入按钮上的超链接

4

我希望了解如何在HTML页面中给输入按钮添加链接。目前我正在尝试通过将超链接放置在按钮周围来创建一个带有链接的输入按钮，但是否可能使用其他方法导航到另一页？

目前我是这样做的：

<html>
   <head>
      <title>Practise 20</title>
      <style>
         input[type="submit"]{border:none; background:#000; color:#fff}
      </style>
   <body>
      Click on Button to navigate the Pages
         <form>
            <a href="http://www.google.com" target="self"><input type="submit" Value="Go"></a>
         </form>
   </body>
</html>

- user3197977

7个回答

1

属性formaction的功能非常好。以下是一个示例：

<input type="submit" formaction="login.html" value="Submit to another page">

- Mike.O

1

您可以通过使用简单的JavaScript使其更好地工作。

<script type="text/javascript">
function google() {
window.location = "http://google.com";
}
</script>

而就HTML部分而言：

<input type="submit" value="Go" onClick="google()">

- Cristian D

2

或者更简单的方式是 <input type="submit" value="前往" onClick="window.location = 'http://google.com';">。 - Milan and Friends

0

<form action="http://www.google.com"><input type="submit" Value="Go"></form>

请注意，您不应该将提交按钮用于超链接目的。提交按钮是用于提交表单的，因此将其链接到页面会向用户发送错误信息。但如果您需要这样做，仍然可以这样做。

- gurudeb

0

我想知道如何在HTML页面中将链接放在输入按钮上？

你不能这样做。链接是链接，按钮是按钮。在HTML中，一个不能被放置在另一个内部。

如果你想要一个看起来像按钮的链接，那么使用一个链接并应用CSS使其看起来像你想要的样子。

- Quentin

我想要一个输入按钮，当点击它时跳转到另一个页面。就像上面所说的，这两个答案对我都很有效。 - user3197977

0

这是完全可行的。您可以使用带有 post 操作的表单到路由，然后使用 Bootstrap 类来将输入伪装成导航链接。

<form action="/Rooms/Edit/:id" method="POST" style="margin: 0 1rem;">
      <input  class="btn btn-link" value="Edit Rooms" type="submit" style="font-weight: bold; text-dectoration:none">  
</form>

- d0rf47

-1

<a href="http://www.google.com" target="self"><input type="submit" Value="Go"></a>

非常简单！只需将一些Bootstrap类放入其中，并添加按钮角色即可。就这样！

<a class="btn btn-success" role="button" href="http://www.google.com" target="self"><input type="submit" Value="Go"></a>

- Sourav Sharma

这假设使用了Bootstrap工具包，但问题中没有表明这是情况。 - Cody Lohse

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SuRaj Creator · Accepted Answer

您可以通过JavaScript在输入按钮上放置链接..试试这样做：

<html>
   <head>
   <title>Practise 20</title>
   <style>
      input[type="submit"]{border:none; background:#000; color:#fff}
   </style>
   </head>
   <body>
      Click on Button to navigate the Pages
      <form>
         <input onClick="window.location.href='put your page url here'" type="submit" Value="Go">
      </form>
   </body>
</html>