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

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

j'aimerais aussi qu'il n'y ait pas de caractères ou de paramètres supplémentaires dans L'URL.

Comment puis-je y parvenir?


basé sur les réponses postées jusqu'à présent, je fais actuellement ceci:

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

mais le problème, c'est que dans Safari et Internet Explorer , il ajoute un point d'interrogation à la fin de l'URL. Je dois trouver une solution qui n'ajoute aucun caractère à la fin de L'URL.

il y a deux autres solutions pour faire cela: utiliser JavaScript ou styliser un lien pour ressembler à un bouton.

En Utilisant JavaScript:

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

mais ce 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 un bouton agir comme un lien est la mauvaise solution. Ma suggestion est que vous devriez utiliser un lien et style il pour ressembler à un bouton .

<a href="/link/to/page2">Continue</a>
1432
demandé sur Community 0000-00-00 00:00:00
la source

8 ответов

HTML

la manière HTML simple est de le mettre dans un <form> où vous spécifiez L'URL cible désirée dans l'attribut action .

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

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

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

CSS

si CSS est autorisé, il suffit d'utiliser un <a> que vous style pour ressembler à un bouton en utilisant entre autres le appearance propriété ( seul Internet Explorer support est actuellement (juillet 2015) toujours pauvre ).

<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éfinir le window.location.href .

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
1631
répondu BalusC 2016-08-04 13:53:36
la source
<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>
433
répondu Adam 2016-11-08 07:58:17
la source

si c'est l'apparence visuelle d'un bouton que vous recherchez dans une balise d'ancrage HTML de base, vous pouvez utiliser le cadre Bootstrap pour formater n'importe lequel des liens/boutons de type HTML courants suivants pour apparaître comme un bouton. Veuillez noter les différences visuelles entre la version 2, 3 ou 4 du cadre:

<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) aspect de l'échantillon:

Sample output of Boostrap v4 buttons

Bootstrap (v3) aspect de l'échantillon:

Sample output of Boostrap v3 buttons

Bootstrap (v2) aspect de l'échantillon:

Sample output of Boostrap v2 buttons

407
répondu Bern 2017-10-31 19:56:13
la source

utiliser:

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

malheureusement, ce markup n'est plus valable dans HTML5 et ne validera pas et ne fonctionnera pas toujours comme prévu. Utilisez une autre approche.

132
répondu RedFilter 2015-10-28 23:14:57
la source

à partir de HTML5, les boutons supportent l'attribut formaction . Mieux que tout, aucun Javascript ou ruse n'est nécessaire.

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

mises en garde

  • doit être entouré des étiquettes <form> .
  • <button> doit être du type "submit" (ou indéterminée), je ne pouvais pas le faire fonctionner avec le type "bouton."Ce qui nous amène au point ci-dessous.
  • Remplace l'action par défaut dans un formulaire. En d'autres termes, si vous faites ceci à l'intérieur d'une autre forme, il va provoquer un conflit.

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

94
répondu EternalHour 2018-04-02 16:30:26
la source

si vous utilisez un formulaire intérieur, ajoutez l'attribut type=" reset " avec l'élément bouton. Il empêchera l'action de forme.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>
35
répondu saravanabawa 2015-10-28 23:25:01
la source
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
25
répondu ghoppe 2014-07-21 19:22:44
la source

Autres questions sur html anchor hyperlink button htmlbutton