A HREF中的换行输入按钮


Wrapping Input Button in A HREF

我正试图通过将输入按钮包装在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>

对于那些正在寻找不需要javascript的解决方案的人来说:将按钮包装成一个单一用途的表单。例如,OP的解决方案是:

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

使用:

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

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

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

并且在你的客户端包括这个功能

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

简单地使用文本和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>

就在这里。

嵌套交互式元素(例如将input元素包装在a href元素中(的效果是未定义的,并且取决于浏览器。这样的嵌套在HTML5CR中已经被明确禁止:a元素不能有交互式子元素。

看起来你想要实现的是一个看起来像按钮的链接。最好的方法是使用普通链接<a href=...>Provision</a>和CSS将其样式设置为按钮(可能会使其在不同状态下看起来不同(。这样,功能就不会不必要地依赖JavaScript,并且元素看起来就像是搜索引擎的链接。