我正试图通过将输入按钮包装在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,并且元素看起来就像是搜索引擎的链接。