Question

我试图通过将输入按钮包装在href中来获取链接到URL的按钮。当我单击按钮时，它根本不做任何事情，即使源显示它具有正确的语法。我也试过更改它以在按钮中使用onClick（）方法，但没有运气。

<a href='" . htmlentities($console) . "'><input type='button' style='width:100px' value='Provision'></a>

通过页面源查看时的URL显示为...

<a href='https://prov.domain.net/novnc/console.php?uuid=943b37ef-46a8'><input type='button' style='width:100px' value='Provision'></a>

Answer 1

对于那些寻找不需要javascript的解决方案的人：以单一目的形式包装按钮。对于OP的例子，解决方案是：

<form action="https://prov.domain.net/novnc/console.php?uuid=943b37ef-46a8" method="get">
    <button type="submit">Provision</button>
</form>

Answer 2

使用：

<input type="button" onclick="window.location.href = 'https://prov.domain.net/novnc/console.php?uuid=943b37ef-46a8'; return false;" style='width:100px' value='Provision'>

Answer 3

您可以使用onclick事件代替元素：

<input type='button' style='width:100px; cursor:pointer' onClick='gotoUrl(" . htmlentities($console) . ")' value='Provision'>

在您的客户端包含此功能

  <script>

    function gotoUrl(url){
       location.href = url;
    }
    </script>

Answer 4

简单地使用文本和CSS可能会更容易，但是，如果你想要按钮式外观，那么你有几个选择。第一种是使用类似的标签，而不是使用标签。按钮标记将允许HTML代码在其中。

<button name="button1"><a href="#">Insert Text Here</a></button>

这是一个简单的解决方案，但遗憾的是根据规范不再有效。供参考：http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html

另一个解决方案就是使用Javascript：

<input type="button" name="button1" value="Click Me" onClick="location.replace('http://example.org');">

当然，你不会知道你是否不了解JS。

最后，一个更有创意的解决方案是使用表单，但这会破坏您的按钮当前已经存在的任何形式。

<form name="form1" action="http://example.org">
<input type="submit" value="Go to example page">
</form>

你有它。

Answer 5

嵌套交互式元素（例如将input元素包装在a href元素中）的效果未定义且取决于浏览器。 HTML5 CR中明确禁止此类嵌套：a element不得包含交互式后代。

您尝试实现的目标似乎是一个看起来像按钮的链接。最好的方法是使用普通链接<a href=...>Provision</a>和CSS来设置它看起来像一个按钮（可能使它在不同的状态下看起来不同）。这样，该功能不会不必要地依赖于JavaScript，并且该元素看起来像是搜索引擎的链接。

在HREF中包装输入按钮

5 个答案: