Question Comment créer un bouton HTML qui agit comme un lien?


Je voudrais créer un bouton HTML qui agit comme un lien. Ainsi, lorsque vous cliquez sur le bouton, il redirige vers une page. Je voudrais qu'il soit aussi accessible que possible.

Je voudrais aussi qu'il n'y ait pas de caractères supplémentaires ou de paramètres dans l'URL.

Comment puis-je atteindre cet objectif?


Basé sur les réponses postées jusqu'à présent, je suis en train de faire ceci:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

mais le problème avec ceci est que dans Safari et Internet Explorer, il ajoute un caractère point d'interrogation à la fin de l'URL. J'ai besoin de trouver une solution qui n'ajoute aucun caractère à la fin de l'URL.

Il existe deux autres solutions pour cela: Utiliser JavaScript ou créer un lien pour ressembler à un bouton.

Utiliser JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Mais cela nécessite évidemment JavaScript, et pour cette raison, il est moins accessible aux lecteurs d'écran. Le point d'un lien est d'aller à une autre page. Donc essayer de faire agir un bouton comme un lien est la mauvaise solution. Ma suggestion est que vous devriez utiliser un lien et le style pour ressembler à un bouton.

<a href="/link/to/page2">Continue</a>

1369
2018-05-25 16:39


origine


Réponses:


HTML

La façon simple de HTML est de le mettre dans un <form> dans lequel vous spécifiez l'URL cible souhaitée dans action attribut.

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

Si nécessaire, définissez CSS display: inline; sur la forme pour le garder dans le flux avec le texte environnant. Au lieu de <input type="submit"> dans l'exemple ci-dessus, vous pouvez également utiliser <button type="submit">. La seule différence est que le <button> élément permet aux enfants.

Vous vous attendriez intuitivement à pouvoir utiliser <button href="http://google.com"> analogue à la <a> élément, mais malheureusement non, cet attribut n'existe pas selon Spécification HTML.

CSS

Si CSS est autorisé, utilisez simplement un <a> que vous style ressembler à un bouton en utilisant entre autres le appearance propriété (seul le support d'Internet Explorer est actuellement (juillet 2015) encore faible).

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Ou choisissez une de ces nombreuses bibliothèques CSS comme Bootstrap.

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Si JavaScript est autorisé, définissez le window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

1578
2018-05-25 16:40



<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

406
2018-05-25 16:44



Si c'est l'aspect visuel d'un bouton que vous recherchez dans une balise d'ancrage HTML basique, vous pouvez utiliser le Twitter Bootstrap cadre pour mettre en forme l'un des liens / boutons de type HTML courants suivants pour apparaître sous la forme d'un bouton. Veuillez noter les différences visuelles entre la version 2, 3 ou 4 du framework:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) l'apparence de l'échantillon:

Sample output of Boostrap v4 buttons

Bootstrap (v3) l'apparence de l'échantillon:

Sample output of Boostrap v3 buttons

Bootstrap (v2) l'apparence de l'échantillon:

Sample output of Boostrap v2 buttons


396
2017-12-05 08:59



Utilisation:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Malheureusement, ce balisage n'est plus valide en HTML5 et ne validera ni ne fonctionnera toujours comme potentiellement attendu. Utilisez une autre approche.


130
2018-05-25 16:42



À partir de HTML5, les boutons prennent en charge le formaction attribut. Le meilleur de tous, aucun Javascript ou tricherie n'est nécessaire.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Avertissements

  • Doit être entouré de <form> Mots clés.
  • <button> type doit être "soumettre" (ou non spécifié), je ne pouvais pas le faire fonctionner avec le type "bouton". Ce qui amène le point ci-dessous.
  • Remplace l'action par défaut dans un formulaire. En d'autres termes, si vous le faites sous une autre forme, cela va provoquer un conflit.

Référence: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Support du navigateur: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


90
2017-07-02 19:03



C'est très simple et sans utiliser d'éléments de formulaire. Vous pouvez simplement utiliser la balise <a> avec un bouton à l'intérieur :).

Comme ça:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

Et il va charger le href dans la même page. Voulez-vous une nouvelle page? Juste utiliser target="_blank".


41
2018-02-11 15:29



Si vous utilisez un formulaire interne, ajoutez l'attribut type = "réinitialiser" avec l'élément de bouton. Cela empêchera l'action de formulaire.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

35
2018-01-24 06:59



<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

24
2018-05-25 16:41



Vous pouvez simplement mettre un tag autour de l'élément:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


22
2018-01-16 04:24