web-dev-qa-db-fra.com

Comment faire en sorte qu'un bouton type = soit utilisé comme un lien hypertexte et redirige à l'aide d'une requête get?

Comment faire en sorte qu'un <input type=button> se comporte comme un hyperlien et qu'il soit redirigé à l'aide d'une requête GET?

htmlbutton
135
Blankman

Il y a plusieurs façons de le faire. D'abord, insérez-le simplement dans un formulaire qui pointe à l'endroit souhaité.

<form action="/my/link/location" method="get">
    <input type="submit" value="Go to my link location" 
         name="Submit" id="frm1_submit" />
</form>

Cela a l’avantage de fonctionner même si javascript n’est pas activé.

Deuxièmement, utilisez un bouton autonome avec javascript:

<input type="submit" value="Go to my link location" 
    onclick="window.location='/my/link/location';" />

Cela échouera cependant dans les navigateurs sans JavaScript (Remarque: c'est vraiment mauvaise pratique - vous devriez utiliser des gestionnaires d'événements, pas un code en ligne comme celui-ci - c'est simplement la manière la plus simple d'illustrer le genre de la chose dont je parle.)

La troisième option consiste à styler un lien réel comme un bouton:

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

Cela a l’avantage de fonctionner partout et signifie ce que vous voulez probablement.

142
Sean Vieira

Vous pouvez créer la balise <button> pour effectuer les opérations suivantes:

<a href="http://www.google.com/">
   <button>Visit Google</button>
</a>

ou:

<a href="http://www.google.com/">
   <input type="button" value="Visit Google" />
</a>

C'est simple et aucun javascript n'est requis!

NOTE:

Cette approche n'est pas valide à partir de la structure HTML. Mais, cela fonctionne sur de nombreux navigateurs modernes. Voir la référence suivante:

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

Voici l'inverse, c'est plus simple que l'autre.

<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />

C'est plus simple.

6
phani_yelugula

Pour ceux qui tombent sur une recherche (Google) et tentent de traduire en code .NET et MVC. (comme dans mon cas)

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

Cela affichera un bouton intitulé "Process" et vous mènera à "/ Process/RemoveLostRolls". Sans "FormMethod.Get", cela fonctionnait, mais était perçu comme un "message".

4
Greg Little

Je pense que c'est ton besoin.

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

Ne fais pas ça. Je pourrais vouloir courir ma voiture sur du sang de singe. J'ai mes raisons, mais il est parfois préférable de continuer à utiliser les choses comme elles ont été conçues, même si cela ne correspond pas parfaitement au look que vous recherchez.

Pour étayer mon argument, je soumets ce qui suit.

  • Voyez comment cette image manque de la barre d'état en bas. Ce lien utilise le modèle onclick="location.href". (Ceci est un exemple de production réel de mon prédécesseur). Cela peut rendre les utilisateurs hésitants à cliquer sur le lien, car ils ne savent pas du tout où ils les conduisent.

Image

Vous rendez également l’IMO plus difficile pour l’optimisation des moteurs de recherche, ainsi que la complexification du débogage et de la lecture de votre code/HTML. Un bouton d'envoi devrait soumettre un formulaire. Pourquoi devriez-vous (la communauté de développement) essayer de créer une interface utilisateur non standard?

2
Doug Chamberlain