如何使输入类型=按钮像超链接一样使用get请求重定向?

Bla*_*man 138 html button

如何<input type=button>使用GET请求进行超链接和重定向?

Sea*_*ira 143

有几种不同的方法可以做到这一点 - 首先,只需将其放在指向您希望的位置的表单中:

<form action="/my/link/location" method="get">
    <input type="submit" value="Go to my link location" 
         name="Submit" id="frm1_submit" />
</form>
Run Code Online (Sandbox Code Playgroud)

即使没有打开javascript,这也具有工作的优势.

其次,使用带有javascript的独立按钮:

<input type="submit" value="Go to my link location" 
    onclick="window.location='/my/link/location';" />       
Run Code Online (Sandbox Code Playgroud)

然而,这在没有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>
Run Code Online (Sandbox Code Playgroud)

这样做的好处是可以在任何地方工作,并且意味着您最想要的意思.

  • 为什么这是不好的做法?只有 2%(美国)的用户禁用了 Javascript:/sf/ask/663511621/。 (2认同)
  • “非常不好的做法”评论是关于我的内联onclick处理程序的-说,无论您是否启用了JS,您都无法右键单击该按钮并在新窗口中打开它,所以我想无论如何,还是更喜欢`a`标签解决方案。每个人[至少在某些情况下都处于残疾状态](https://twitter.com/howiemeg/status/730152631562207232) (2认同)

Way*_*oga 135

你可以让<button>tag做这样的动作:

<a href="http://www.google.com/">
   <button>Visit Google</button>
</a>
Run Code Online (Sandbox Code Playgroud)

要么:

<a href="http://www.google.com/">
   <input type="button" value="Visit Google" />
</a>
Run Code Online (Sandbox Code Playgroud)

它很简单,不需要javascript!


注意:

这种方法在HTML结构中无效.但是,它适用于许多现代浏览器.请参阅以下参考:

  • 因为["交互式元件`button`不能出现作为`A`元件的后代."](http://www.w3.org/TR/html-markup/button.submit.html#button.submit -constraints).但是,它适用于大多数浏览器. (19认同)
  • 这怎么不是这个问题的答案?完善. (6认同)

小智 6

    <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>
Run Code Online (Sandbox Code Playgroud)

这是另一种方式,它比另一种方式更简单.

<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
Run Code Online (Sandbox Code Playgroud)

它更简单.