Html 如何使 input type=button 像超链接一样使用 get 请求重定向？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3303675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an input type=button act like a hyperlink and redirect using a get request?
提问by Blankman
How do I make a <input type=button>act like a hyperlink and redirect using a GETrequest?
我如何做出<input type=button>像超链接一样的行为并使用GET请求重定向？
回答by Sean Vieira
There are several different ways to do that -- first, simply put it inside a form that points to where you want it to go:
有几种不同的方法可以做到这一点——首先，简单地将它放在一个指向你想要它去的地方的表单中：
<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>
This has the advantage of working even without javascript turned on.
这具有即使没有打开 javascript 也能工作的优点。
Second, use a stand-alone button with javascript:
其次，使用带有 javascript 的独立按钮：
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
This however, will fail in browsers without JavaScript (Note: this is reallybad practice -- you should be using event handlers, not inline code like this -- this is just the simplest way of illustrating the kind of thing I'm talking about.)
然而，这将在没有 JavaScript 的浏览器中失败（注意：这是非常糟糕的做法——你应该使用事件处理程序，而不是像这样的内联代码——这只是说明我正在谈论的事情的最简单的方法.)
The third option is to style an actual link like a button:
第三个选项是像按钮一样设置实际链接的样式：
<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>
This has the advantage of working everywhere andmeaning what you most likely want it to mean.
这具有在任何地方工作的优势，并且意味着您最可能想要的意思。
回答by Wayan Wiprayoga
You can make <button>tag to do action like this:
你可以让<button>标签做这样的动作：
<a href="http://www.google.com/">
<button>Visit Google</button>
</a>
or:
或者：
<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>
It's simple and no javascript required!
这很简单，不需要javascript！
NOTE:
This approach is not valid from HTML structure. But, it works on many modern browser. See following reference :
笔记：
这种方法在 HTML 结构中无效。但是，它适用于许多现代浏览器。请参阅以下参考：
回答by phani_yelugula
<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>
Here's the other way, it's simpler than the other one.
这是另一种方式，它比另一种更简单。
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
It's simpler.
它更简单。
回答by Greg Little
For those who stumble upon this from a search (Google) and are trying to translate to .NET and MVC code. (as in my case)
对于那些从搜索 (Google) 中偶然发现并试图转换为 .NET 和 MVC 代码的人。（就像我的情况）
@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}
This will show a button labeled "Process" and take you to "/Process/RemoveLostRolls". Without "FormMethod.Get" it worked, but was seen as a "post".
这将显示一个标记为“Process”的按钮，并将您带到“/Process/RemoveLostRolls”。没有“FormMethod.Get”它可以工作，但被视为“帖子”。
回答by diogo
I think that is your need.
我认为这就是你的需要。
a href="#" onclick="document.forms[0].submit();return false;"
回答by Doug Chamberlain
Do not do it. I might want to run my car on monkey blood. I have my reasons, but sometimes it's better to stick with using things the way they were designed even if it doesn't "absolutely perfectly" match the exact look you are driving for.
不要做。我可能想用猴子的血开我的车。我有我的理由，但有时最好坚持按照设计的方式使用事物，即使它与您所追求的外观并不“绝对完美”匹配。
To back up my argument I submit the following.
为了支持我的论点，我提交以下内容。
- See how this image lacks the status bar at the bottom. This link is using the
onclick="location.href"model. (This is a real-life production example from my predecessor) This can make users hesitant to click on the link, since they have no idea where it is taking them, for starters.
- 看看这张图片如何缺少底部的状态栏。此链接正在使用该
onclick="location.href"模型。（这是我前任的一个真实的生产示例）这会让用户在点击链接时犹豫不决，因为对于初学者来说，他们不知道链接在哪里。
You are also making Search engine optimization more difficult IMO as well as making the debugging and reading of your code/HTML more complex. A submit button should submit a form. Why should you(the development community) try to create a non-standard UI?
您还使 IMO 搜索引擎优化变得更加困难，并使代码/HTML 的调试和阅读更加复杂。提交按钮应该提交一个表单。为什么你（开发社区）应该尝试创建一个非标准的 UI？
