在 HREF 中包装输入按钮答案

【问题标题】：Wrapping Input Button in A HREF在 HREF 中包装输入按钮
【发布时间】：2014-05-01 03:59:29
【问题描述】：

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

【问题讨论】：

为什么需要使用href？
你不能在锚点内有按钮。
正如两位指出的那样，为什么要使用按钮？而是使用文本或图像。

标签： javascript php html button hyperlink

【解决方案1】：

对于那些正在寻找不需要 javascript 的解决方案的人：将按钮包装在一个单一用途的表单中。对于 OP 的示例，解决方案是：

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

【讨论】：

【解决方案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'>

【讨论】：

不应该是window吗？
document.location 和 window.location 是等价的。
完美，谢谢。我实际上意识到我把代码放在了错误的按钮中，所以我点击了错误的按钮来测试它，但无论如何这更好。
这没有回答问题（如何将input 包装在a 中）。

【解决方案3】：

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

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

并在您的客户端包含此功能

  <script>

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

【讨论】：

【解决方案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>

你有它。

【讨论】：

【解决方案5】：

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

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

【讨论】：