如何使输入类型=按钮像超链接一样使用获取请求进行重定向？ [复制]
Posted
技术标签:
【中文标题】如何使输入类型=按钮像超链接一样使用获取请求进行重定向？ [复制]【英文标题】：How to make an input type=button act like a hyperlink and redirect using a get request? [duplicate] 【发布时间】：2011-03-19 05:39:10 【问题描述】：如何使<input type=button> 像超链接一样使用GET 请求进行重定向？
【问题讨论】：
【参考方案1】：有几种不同的方法可以做到这一点——首先，只需将它放在一个指向你想要它去的地方的表单中：
<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>
这具有即使没有打开 javascript 也可以工作的优点。
其次，使用带有javascript的独立按钮：
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
然而，这在没有 JavaScript 的浏览器中会失败（注意：这是真的不好的做法——你应该使用事件处理程序，而不是这样的内联代码——这只是最简单的方法说明我正在谈论的那种事情。）
第三个选项是像按钮一样设置实际链接的样式：
<style type="text/css">
.my_content_container a
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
// :hover and :active styles left as an exercise for the reader.
</style>
<div class="my_content_container">
<a href="/my/link/location/">Go to my link location</a>
</div>
这具有在任何地方都可以工作的优势并且意味着您最可能想要的意思。
【讨论】：
为什么这是不好的做法？只有 2%（美国）的用户禁用了 Javascript：***.com/questions/9478737/…。 “非常糟糕的做法”评论是关于我的内联onclick 处理程序 - 也就是说，您不能右键单击该按钮并在新窗口中打开它，无论您是否启用了 JS，所以无论如何我更喜欢a 标签解决方案。每个人在他们生命中的某个时刻都是at least situationally disabled【参考方案2】：
不要这样做。我可能想用猴子血来开我的车。我有我的理由，但有时最好坚持按照设计的方式使用事物，即使它与您所追求的确切外观不“绝对完美”匹配。
为了支持我的论点，我提交以下内容。
看看这张图片底部缺少状态栏的原因。此链接使用onclick="location.href" 模型。 （这是我前任的一个真实的制作示例）这可能会让用户犹豫点击链接，因为他们不知道它会将他们带到哪里，首先。
您还使 IMO 的搜索引擎优化更加困难，并使您的代码/html 的调试和阅读更加复杂。提交按钮应提交表单。为什么你（开发社区）应该尝试创建一个非标准的 UI？
【讨论】：
嗯，我猜一个带我们去有形部门，另一个带我们去客户服务部。大多数用户甚至不看状态行（甚至不了解它是什么）。开发人员会，但用户不会。用户喜欢按钮，但不信任链接（因为链接会将它们带到某个地方，所以按钮只是必需品）。访问亚马逊等热门网站并查看按钮。 不是答案。好点，但仍然不能回答所提出的问题。【参考方案3】： <script type="text/javascript">
<!--
function newPage(num)
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>
这是另一种方式，它比另一种方式更简单。
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
更简单。
【讨论】：
对于一个简单的例子来说有点太复杂了，但事实上是正确的。欢迎来到 SO。 更好 :) 现在编辑你的帖子以包含它 - 我想我刚刚对你投了足够多的票来编辑你自己的帖子 - 随意探索这个社区！ @phani_yelugula 我刚刚实现了这个，但是当我点击按钮时，整个页面内容向左跳了大约10px。任何想法为什么会这样/如何避免这种情况发生？提前致谢。【参考方案4】：你可以让<button>标签做这样的动作：
<a href="http://www.google.com/">
<button>Visit Google</button>
</a>
或：
<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>
很简单，不需要javascript！
注意：
这种方法在 HTML 结构中无效。但是，它适用于许多现代浏览器。请参阅以下参考：
For<button>;和 For<input type="button />
【讨论】：
这不是这个问题的答案吗？完美。 因为"The interactive elementbutton must not appear as a descendant of the a element."。但是，它适用于大多数浏览器。
@MaëlNison 我错了，看来“The interactive element input must not appear as a descendant of the a element”也是。所以，没有:)。
@YaK 好的，我也会为input type=button 添加验证参考。感谢您的意见，朋友！
这添加了一个不需要的下划线，所以我不得不使用text-decoration: none;。很好的解决方案，除此之外。【参考方案5】：
我认为这是你的需要。
a href="#" onclick="document.forms[0].submit();return false;"
【讨论】：
这不是一个按钮，不回答问题。【参考方案6】：对于那些通过搜索 (Google) 偶然发现此内容并尝试将其转换为 .NET 和 MVC 代码的人。 （就我而言）
@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get))
<input type="submit" value="Process" />
这将显示一个标有“处理”的按钮并带您到“/Process/RemoveLostRolls”。 如果没有“FormMethod.Get”，它可以工作，但被视为“帖子”。
【讨论】：
以上是关于如何使输入类型=按钮像超链接一样使用获取请求进行重定向？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章