Je voudrais créer un bouton HTML qui agit comme un lien. Ainsi, lorsque vous cliquez sur le bouton, il redirige vers une page. J'aimerais qu'elle soit aussi accessible que possible.
J'aimerais 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?
Sur la base des réponses publiées jusqu'à présent, je fais actuellement ceci:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
mais le problème avec cela est que dans Safari et Internet Explorer , il ajoute un caractère de 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 ce faire: Utiliser JavaScript ou styliser un lien pour ressembler à un bouton.
Utilisation de 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 but d'un lien est d'aller sur une autre page. Donc, essayer de faire agir un bouton comme un lien n'est pas la bonne solution. Ma suggestion est d'utiliser un lien et de le styliser pour ressembler à un bouton .
<a href="/link/to/page2">Continue</a>
?
sur l'URL. Cela est dû au fait que le formulaire esttype="GET"
, changez-le entype="POST"
et?
à la fin de l'URL disparaît. En effet, GET envoie toutes les variables dans l'URL, d'où le?
.GET
ce que cela échoue. Je pense toujours que l'utilisation d'un lien a du sens avec la mise en garde qu'il ne réagira pas à la "barre d'espace" lorsqu'il est actif comme le fait le bouton. De plus, certains styles et comportements seront différents (comme ceux qui peuvent être déplacés). Si vous voulez la véritable expérience de "lien de bouton", avoir des redirections côté serveur pour que l'URL se termine par?
le supprimer pourrait également être une option.Réponses:
HTML
Le moyen HTML simple consiste à le mettre dans un
<form>
dans lequel vous spécifiez l'URL cible souhaitée dans l'action
attribut.Si nécessaire, définissez 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 également utiliser<button type="submit">
. La seule différence est que l'<button>
élément permet aux enfants.Vous vous attendriez intuitivement à pouvoir utiliser
<button href="https://google.com">
un<a>
élément analogue à l' élément, mais malheureusement non, cet attribut n'existe pas selon la spécification HTML .CSS
Si CSS est autorisé, utilisez simplement un
<a>
style que vous stylisez pour ressembler à un bouton utilisant entre autres laappearance
propriété ( il n'est pas pris en charge dans Internet Explorer ).Ou choisissez l'une de ces nombreuses bibliothèques CSS comme Bootstrap .
Javascript
Si JavaScript est autorisé, définissez le
window.location.href
.Au lieu de
<input type="button">
dans l'exemple ci-dessus, vous pouvez également utiliser<button>
. La seule différence est que l'<button>
élément permet aux enfants.la source
display: inline
au formulaire pour garder le bouton dans le flux.Notez que l'
type="button"
attribut est important, car sa valeur manquante par défaut est l'état du bouton Soumettre .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 Twitter Bootstrap framework pour formater l'un des liens / boutons de type HTML courants suivants pour apparaître comme un bouton. Veuillez noter les différences visuelles entre les versions 2, 3 ou 4 du framework:
Exemple d' apparence de Bootstrap (v4) :
Exemple d' apparence de Bootstrap (v3) :
Exemple d' apparence de Bootstrap (v2) :
la source
Utilisation:
Malheureusement, ce balisage n'est plus valide en HTML5 et ne validera pas et ne fonctionnera pas toujours comme prévu. Utilisez une autre approche.
la source
target
attribut est imo sur le bord.Depuis HTML5, les boutons prennent en charge l'
formaction
attribut. Mieux encore, aucun Javascript ou tromperie n'est nécessaire.Avertissements
<form>
étiquettes.<button>
le type doit être «soumettre» (ou non spécifié), je n'ai pas pu le faire fonctionner avec le type «bouton». Ce qui soulève le point ci-dessous.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 / élément / bouton # Browser_compatibility
la source
formaction
est compatible depuis " IE world " depuis la version 10 et supérieure<button formaction>
===<form action>
?<form>
dans chacun de nos exemples. Estformaction
-ilbutton
censé ajouter le?
à une soumission GET vide? Dans ce JSBin, il semble que le HTML se comporte exactement de la même manière pour les deux.C'est vraiment très simple et sans utiliser aucun élément de formulaire. Vous pouvez simplement utiliser la balise <a> avec un bouton à l'intérieur :).
Comme ça:
Et il chargera le href dans la même page. Vous voulez une nouvelle page? Utilisez simplement
target="_blank"
.ÉDITER
Quelques années plus tard, alors que ma solution fonctionne toujours, gardez à l'esprit que vous pouvez utiliser beaucoup de CSS pour lui donner l'apparence que vous voulez. C'était juste un moyen rapide.
la source
<button type="button">...
pour qu'il ne fonctionne pas par défaut en tant que SubmitSi vous utilisez un formulaire interne, ajoutez l'attribut type = "reset" avec l'élément bouton. Cela empêchera l'action de formulaire.
la source
type="button"
la source
input
n'a pas de balise de fin.input
élément est un élément void. Il doit avoir une balise de début mais ne doit pas avoir de balise de fin.Il semble y avoir trois solutions à ce problème (toutes avec des avantages et des inconvénients).
Solution 1: bouton dans un formulaire.
Mais le problème est que dans certaines versions de navigateurs populaires tels que Chrome, Safari et Internet Explorer, il ajoute un caractère de point d'interrogation à la fin de l'URL. En d'autres termes, le code au-dessus de votre URL finira par ressembler à ceci:
Il existe un moyen de résoudre ce problème, mais cela nécessitera une configuration côté serveur. Un exemple utilisant Apache Mod_rewrite serait de rediriger toutes les demandes avec un suivi
?
vers leur URL correspondante sans le?
. Voici un exemple utilisant .htaccess, mais il y a un fil complet ici :Des configurations similaires peuvent varier en fonction du serveur Web et de la pile utilisés. Donc, un résumé de cette approche:
Avantages:
Les inconvénients:
?
semble moche dans certains navigateurs. Cela peut être résolu par un piratage (dans certains cas) en utilisant POST au lieu de GET, mais la bonne façon est d'avoir une redirection côté serveur. L'inconvénient de la redirection côté serveur est qu'elle provoquera un appel HTTP supplémentaire pour ces liens en raison de la redirection 304.<form>
élément supplémentaireSolution 2: utilisation de JavaScript.
Vous pouvez utiliser JavaScript pour déclencher un clic et d'autres événements pour imiter le comportement d'un lien à l'aide d'un bouton. L'exemple ci-dessous pourrait être amélioré et supprimé du HTML, mais il est là simplement pour illustrer l'idée:
Avantages:
Les inconvénients:
Solution 3: ancre (lien) de style bouton.
Styliser un lien comme un bouton est relativement facile et peut offrir une expérience similaire sur différents navigateurs. Bootstrap le fait, mais il est également facile à réaliser par vous-même en utilisant des styles simples.
Avantages:
<form>
pour fonctionner.Les inconvénients:
keypress
événements sur les boutons.Conclusion
Solution n ° 1 ( bouton dans un formulaire ) semble être la plus transparente pour les utilisateurs avec un minimum de travail requis. Si votre mise en page n'est pas affectée par ce choix et que le réglage côté serveur est réalisable, c'est une bonne option dans les cas où l'accessibilité est la priorité absolue (par exemple les liens sur une page d'erreur ou des messages d'erreur).
Si JavaScript n'est pas un obstacle à vos exigences d'accessibilité, la solution n ° 2 ( JavaScript ) sera préférée aux n ° 1 et n ° 3.
Si pour une raison quelconque, l'accessibilité est vitale (JavaScript n'est pas une option) mais que vous êtes dans une situation où votre conception et / ou la configuration de votre serveur vous empêchent d'utiliser l'option n ° 1, alors la solution n ° 3 ( ancre de style bouton ) est une bonne alternative pour résoudre ce problème avec un impact d'utilisation minimal.
la source
Pourquoi ne pas simplement placer votre bouton à l'intérieur d'une balise de référence, par exemple
Cela semble fonctionner parfaitement pour moi et n'ajoute aucune balise% 20 au lien, comme vous le souhaitez. J'ai utilisé un lien vers Google pour démontrer.
Vous pouvez bien sûr envelopper cela dans une balise de formulaire, mais ce n'est pas nécessaire.
Lorsque vous liez un autre fichier local, placez-le simplement dans le même dossier et ajoutez le nom de fichier comme référence. Ou spécifiez l'emplacement du fichier s'il ne se trouve pas dans le même dossier.
Cela n'ajoute pas non plus de caractère à la fin de l'URL, mais il a le chemin du projet de fichiers comme URL avant de se terminer par le nom du fichier. par exemple
Si la structure de mon projet était ...
.. dénote un dossier - dénote un fichier alors que quatre | désigne un sous-répertoire ou un fichier dans le dossier parent
..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html
Si j'ouvre main.html, l'URL serait,
Cependant, lorsque j'ai cliqué sur le bouton à l'intérieur de main.html pour passer à Secondary.html, l'URL serait,
Aucun caractère spécial n'est inclus à la fin de l'URL. J'espère que ça aide. Soit dit en passant - (% 20 désigne un espace dans une URL codé et inséré à leur place.)
Remarque: le localhost: 0000 ne sera évidemment pas 0000, vous aurez votre propre numéro de port là-bas.
De plus, le? _Ijt = xxxxxxxxxxxxxx à la fin de l'URL main.html, x est déterminé par votre propre connexion donc ne sera évidemment pas égal au mien.
Il peut sembler que j'énonce des points vraiment basiques, mais je veux juste expliquer le mieux possible. Merci d'avoir lu et j'espère que cela aidera au moins quelqu'un. Bonne programmation.
la source
Vous pouvez simplement mettre une balise a autour de l'élément:
https://jsfiddle.net/hj6gob8b/
la source
<button>
intérieur<a>
.La seule façon de le faire (à l'exception de l'idée de forme ingénieuse de BalusC!) Est d'ajouter un JavaScript
onclick
événement au bouton, ce qui n'est pas bon pour l'accessibilité.Avez-vous envisagé de créer un lien normal comme un bouton? Vous ne pouvez pas atteindre des boutons spécifiques au système d'exploitation de cette façon, mais c'est toujours le meilleur moyen IMO.
la source
En suivant ce que quelques autres ont ajouté, vous pouvez vous déchaîner en utilisant simplement une classe CSS simple sans PHP, sans jQuery code , juste HTML et CSS simples.
Créez une classe CSS et ajoutez-la à votre ancre. Le code est ci-dessous.
C'est ça. C'est très facile à faire et vous permet d'être aussi créatif que vous le souhaitez. Vous contrôlez les couleurs, la taille, les formes (rayon), etc. Pour plus de détails, consultez le site sur lequel j'ai trouvé ceci .
la source
Si vous voulez éviter d'avoir à utiliser un formulaire ou une entrée et que vous recherchez un lien vers un bouton, vous pouvez créer de bons liens vers un bouton avec un wrapper div, une ancre et un
h1
balise. Vous voudriez potentiellement cela afin que vous puissiez placer librement le bouton de lien autour de votre page. Cela est particulièrement utile pour centrer horizontalement les boutons et pour y avoir du texte centré verticalement. Voici comment:Votre bouton sera composé de trois pièces imbriquées: un wrapper div, une ancre et un h1, comme ceci:
Voici un jsFiddle pour le vérifier et jouer avec.
Avantages de cette configuration: 1. Rendre l'affichage du wrapper div: le bloc facilite le centrage (en utilisant la marge: 0 auto) et la position (alors qu'un <a> est en ligne et plus difficile à positionner et impossible à centrer).
Vous pouvez simplement faire afficher le <a> bloc: le déplacer, le déplacer et le styliser comme un bouton, mais l'alignement vertical du texte à l'intérieur devient difficile.
Cela vous permet de faire le <a> display: inline-table et le <h1> display: table-cell, qui vous permet d'utiliser vertical-align: middle sur le <h1> et de le centrer verticalement (ce qui est toujours agréable sur un bouton). Oui, vous pouvez utiliser un remplissage, mais si vous souhaitez que votre bouton se redimensionne dynamiquement, ce ne sera pas aussi propre.
Parfois, lorsque vous intégrez un <a> dans un div, seul le texte est cliquable, cette configuration rend le bouton entier cliquable.
Vous n'avez pas à gérer les formulaires si vous essayez simplement de passer à une autre page. Les formulaires sont destinés à la saisie d'informations et doivent être réservés à cet effet.
Vous permet de séparer proprement le style des boutons et le style du texte (avantage d'étirement? Bien sûr, mais CSS peut avoir un aspect désagréable, il est donc agréable de le décomposer).
Cela m'a vraiment facilité la vie en créant un site Web mobile pour des écrans de taille variable.
la source
@ Nicolas, la suite a fonctionné pour moi car la vôtre n'avait pas eu
type="button"
raison de laquelle elle a commencé à se comporter comme type de soumission .. puisque j'ai déjà un type de soumission. Cela n'a pas fonctionné pour moi .... et maintenant vous pouvez soit ajouter une classe bouton ou<a>
pour obtenir la disposition requise:la source
Une autre option consiste à créer un lien dans le bouton:
Ensuite, utilisez CSS pour styliser le lien et le bouton, de sorte que le lien occupe tout l'espace dans le bouton (donc il n'y a pas de mauvais clic par l'utilisateur):
J'ai créé une démo ici .
la source
Si vous souhaitez créer un bouton utilisé pour une URL n'importe où, créez une classe de bouton pour une ancre.
la source
Je sais qu'il y a eu beaucoup de réponses soumises, mais aucune ne semblait vraiment résoudre le problème. Voici ma vision d'une solution:
<form method="get">
méthode avec laquelle l'OP commence. Cela fonctionne très bien, mais il ajoute parfois un?
à l'URL. le?
le principal problème.?
ne soit pas ajouté à l'URL. Il reviendra sans problème au<form>
méthode pour la très petite fraction des utilisateurs qui n'ont pas activé JavaScript.<form>
ou<button>
même exister. J'utilise jQuery dans cet exemple, car il est rapide et facile, mais il peut également être fait en JavaScript «vanilla».<form>
action
attribut.Exemple JSBin (l'extrait de code ne peut pas suivre les liens)
la source
7 façons de le faire:
window.location.href = 'URL'
window.location.replace('URL')
window.location = 'URL'
window.open('URL')
window.location.assign('URL')
la source
Pour HTML 5 et bouton stylisé avec fond d'image
la source
Vous pouvez également utiliser un bouton:
Par exemple, dans la syntaxe ASP.NET Core :
la source
si vous utilisez un certificat SSL
la source
Les personnes qui ont répondu en utilisant des
<a></a>
attributs sur un<button></button>
été utiles.MAIS récemment, j'ai rencontré un problème lorsque j'ai utilisé un lien dans un fichier
<form></form>
.Le bouton est maintenant considéré comme / comme un bouton d'envoi (HTML5). J'ai essayé de contourner ce problème et j'ai trouvé cette méthode.
Créez un bouton de style CSS comme celui ci-dessous:
Ou créez-en un nouveau ici: CSS Button Generator
Et puis créez votre lien avec une balise de classe nommée d'après le style CSS que vous avez créé:
Voici un violon:
JS Fiddle
la source
Je l'ai utilisé pour un site Web sur lequel je travaille actuellement et cela fonctionne très bien!. Si vous voulez aussi un style cool, je vais mettre le CSS ici.
Travailler JSFiddle ici .
la source
Vous pouvez également définir les boutons
type-property
sur "bouton" (cela ne leur permet pas de soumettre le formulaire), puis l'imbriquer dans un lien (cela redirige l'utilisateur).De cette façon, vous pourriez avoir un autre bouton dans le même formulaire qui envoie le formulaire, au cas où cela serait nécessaire. Je pense également que cela est préférable dans la plupart des cas plutôt que de définir la méthode et l'action du formulaire pour être un lien (sauf s'il s'agit d'un formulaire de recherche, je suppose ...)
Exemple:
De cette façon, le premier bouton redirige l'utilisateur, tandis que le second soumet le formulaire.
Veillez à ce que le bouton ne déclenche aucune action, car cela entraînerait un conflit. De plus, comme Arius l'a souligné, vous devez savoir que, pour la raison ci-dessus, ce n'est pas à proprement parler considéré comme du HTML valide, selon la norme. Il fonctionne cependant comme prévu dans Firefox et Chrome, mais je ne l'ai pas encore testé pour Internet Explorer.
la source
Vous pouvez utiliser javascript:
Remplacez
http://www.google.com
par votre site Web, assurez-vous d'inclurehttp://
avant l'URL.la source
En JavaScript
En HTML
la source
Tapez
window.location
et appuyez surenter
dans la console de votre navigateur. Ensuite, vous pouvez avoir une idée claire de ce quilocation
contientVous pouvez définir n'importe quelle valeur à partir d'ici.
Donc, pour rediriger une autre page, vous pouvez définir une
href
valeur avec votre lien.Dans ton cas-
la source
Si ce dont vous avez besoin, c'est qu'il ressemblera à un bouton, en mettant l'accent sur l'image en dégradé , vous pouvez le faire:
la source
Si vous souhaitez rediriger pour les pages qui résident sur votre site Web, alors voici ma méthode - j'ai ajouté l'attribut href au bouton et onclick assigné this.getAttribute ('href') à document.location.href
** Cela ne fonctionnera pas si vous référencez les URL hors site de votre domaine en raison de 'X-Frame-Options' à 'sameorigin'.
Exemple de code:
la source