web-dev-qa-db-ja.com

input type =ボタンをハイパーリンクのように機能させ、getリクエストを使用してリダイレクトする方法

どうやって<input type=button>をハイパーリンクのように振る舞い、GETリクエストを使ってリダイレクトするのですか？

htmlbutton
131
Blankman

それにはいくつかの異なる方法があります - まず、単純にそれを行きたい場所を指すフォームの中に入れるだけです。

<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のないブラウザでは失敗します（注意：これは本当に悪い習慣です - このようなインラインコードではなく、イベントハンドラを使うべきです - - これは私が話していることの種類を説明するための最も簡単な方法です。）

3番目のオプションは、ボタンのように実際のリンクをスタイルすることです。

<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>

これにはどこでもとを動かすという利点があります。

141
Sean Vieira

<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構造からは無効です。しかし、それは現代の多くのブラウザで動作します。次の参考文献を参照してください。

127
Wayan Wiprayoga
    <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';" />

もっと簡単です。

6
phani_yelugula

検索（Google）からこれに遭遇して、そして.NETとMVCコードに翻訳しようとしている人々のために。 （私の場合のように）

@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
     <input type="submit" value="Process" />
}

これにより、「Process」というラベルの付いたボタンが表示され、「/ Process/RemoveLostRolls」に移動します。 「FormMethod.Get」がなくても動作しましたが、「投稿」と見なされていました。

4
Greg Little

それがあなたの必要性だと思います。

a href="#" onclick="document.forms[0].submit();return false;"
2
diogo

それをしません。私は車を猿の血で走らせたいと思うかもしれません。私には理由がありますが、「絶対に完全に」あなたが運転している正確な外観と一致しないとしても、物事をそれらが設計された方法で使うことに固執する方が良いです。

私の主張を裏付けるために、私は以下を提出する。

  • この画像の下部にステータスバーが表示されない様子をご覧ください。このリンクはonclick="location.href"モデルを使用しています。 （これは私の前任者からの実際の生産の例です）これは彼らがそれをどこに持っているのかわからないので、ユーザーがリンクをクリックするのを躊躇することができます。

enter image description here

あなたはまた、検索エンジン最適化をより困難なIMOにしているだけでなく、あなたのコード/ htmlのデバッグと読み取りをより複雑にしています。送信ボタンでフォームを送信してください。なぜあなた（開発コミュニティ）は非標準のUIを作成しようとするべきですか？

1
Doug Chamberlain