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 l’aimerai aussi donc il n’y a pas de caractères supplémentaires, ni de parameters dans l’URL.
Comment puis-je atteindre cet objective?
Sur la base des réponses affichées jusqu’à présent, je le fais actuellement:
mais le problème 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 existe deux autres solutions pour cela: Utiliser JavaScript ou styliser un lien pour qu’il ressemble à un bouton.
En utilisant JavaScript:
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 est la mauvaise solution. Ma suggestion est que vous devriez utiliser un lien et le styliser pour ressembler à un bouton .
Continue
La méthode HTML simple consiste à la placer dans un
où vous spécifiez l’URL cible souhaitée dans l’atsortingbut d’ action
.
Si nécessaire, définissez l’ display: inline;
CSS display: inline;
sur le formulaire pour le garder dans le stream avec le texte environnant. Au lieu de dans l’exemple ci-dessus, vous pouvez également utiliser
. La seule différence est que l’élément
permet aux enfants.
Vous vous attendez intuitivement à pouvoir utiliser le analogue à l’élément
, mais malheureusement non, cet atsortingbut n’existe pas selon les spécifications HTML .
Si CSS est autorisé, utilisez simplement un que vous stylez pour ressembler à un bouton en utilisant, entre autres, la propriété d’
appearance
( seul le support d’Internet Explorer est actuellement (juillet 2015) encore médiocre ).
Go to Google
a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; }
Ou choisissez l’une de ces nombreuses bibliothèques CSS comme Bootstrap .
Go to Google
Si JavaScript est autorisé, définissez window.location.href
.
Si c’est l’aspect visuel d’un bouton que vous recherchez dans une balise d’ancrage HTML de base, vous pouvez utiliser le framework Twitter Bootstrap pour formater n’importe lequel des liens / boutons de type HTML communs afin qu’ils apparaissent sous la forme d’un bouton. Veuillez noter les différences visuelles entre la version 2, 3 ou 4 du framework:
Link
Apparence de l’échantillon Bootstrap (v4) :
Apparence Bootstrap (v3) :
Apparence Bootstrap (v2) :
Utilisation:
Malheureusement, ce balisage n’est plus valide en HTML5 et ne validera ni ne fonctionnera toujours comme prévu. Utilisez une autre approche.
À partir de HTML5, les boutons prennent en charge l’atsortingbut formaction
. Mieux encore, aucun Javascript ni aucune supercherie ne sont nécessaires.
C’est très simple et sans utiliser aucun élément de formulaire. Vous pouvez simplement utiliser la balise 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"
.
Si vous utilisez un formulaire interne, ajoutez l’atsortingbut type = “reset” avec l’élément button. Cela empêchera l’action du formulaire.
Y at-il des inconvénients à faire quelque chose comme ceci?
Où a.nostyle
est une classe qui a votre style de lien (où vous pouvez vous débarrasser du style de lien standard) et span.button
est une classe qui a le style pour votre “bouton” (arrière-plan, bordure, dégradé, etc.) .
Il semble y avoir trois solutions à ce problème (toutes avec des avantages et des inconvénients).
Mais le problème est que dans certaines versions de navigateurs populaires tels que Chrome, Safari et Internet Explorer, il ajoute un point d’interrogation à la fin de l’URL. En d’autres termes, pour le code au-dessus de votre URL, cela ressemblera à ceci:
http://someserver/pages2?
Il existe un moyen de résoudre ce problème, mais cela nécessitera une configuration côté serveur. Un exemple d’utilisation d’ Apache Mod_rewrite serait de redirect toutes les requêtes avec un suivi ?
à leur URL correspondante sans le ?
. Voici un exemple d’utilisation de .htaccess, mais il y a un thread complet ici :
RewriteCond %{THE_REQUEST} \?\ HTTP [NC] RewriteRule ^/?(index\.cfm)? /? [R=301,L]
Des configurations similaires peuvent varier en fonction du serveur Web et de la stack utilisés. Donc, un résumé de cette approche:
Avantages:
Les inconvénients:
?
semble moche dans certains navigateurs. Cela peut être corrigé par un hack (dans certains cas) utilisant POST au lieu de GET, mais la méthode la plus propre consiste à avoir une redirection côté serveur. L’inconvénient de la redirection côté serveur est que cela provoquera un appel HTTP supplémentaire pour ces liens à cause de la redirection 304.
supplémentaire Vous pouvez utiliser JavaScript pour déclencher onclick et d’autres événements afin de reproduire le comportement d’un lien à l’aide d’un bouton. L’exemple ci-dessous pourrait être amélioré et retiré du HTML, mais c’est simplement pour illustrer l’idée:
Avantages:
Les inconvénients:
Styliser un lien comme un bouton est relativement facile et peut offrir une expérience similaire sur différents navigateurs. Bootstrap fait cela, mais il est également facile de réaliser vous-même en utilisant des styles simples.
Avantages:
pour travailler. Les inconvénients:
La solution n ° 1 ( bouton dans un formulaire ) semble être la plus transparente pour les utilisateurs avec un minimum de travail. Si votre choix n’est pas affecté par ce choix et que l’adaptation côté serveur est possible, c’est une bonne option pour les cas où l’accessibilité est la priorité absolue (par exemple, liens sur une page d’erreur ou messages d’erreur).
Si JavaScript n’est pas un obstacle à vos exigences en matière d’accessibilité, la solution n ° 2 ( JavaScript ) serait préférable à # 1 et # 3.
Si pour une raison quelconque, l’accessibilité est vitale (JavaScript n’est pas une option), mais que votre conception et / ou votre configuration de serveur vous empêchent d’utiliser l’option n ° 1, la solution n ° 3 ( style ancre comme un bouton ) est une bonne alternative pour résoudre ce problème avec un impact minimal d’utilisation.
La seule façon de le faire (à l’exception de l’idée ingénieuse de BalusC!) Consiste à append un événement JavaScript onclick
au bouton, ce qui n’est pas bon pour l’accessibilité.
Avez-vous envisagé de styliser un lien normal comme un bouton? Vous ne pouvez pas atteindre les boutons spécifiques à l’OS de cette façon, mais c’est toujours le meilleur moyen d’IMO.
En allant de pair avec ce que quelques autres ont ajouté, vous pouvez vous contenter d’utiliser une simple classe CSS sans PHP, sans code jQuery , avec de simples fichiers HTML et CSS.
Créez une classe CSS et ajoutez-la à votre ancre. Le code est ci-dessous.
.button-link { height:60px; padding: 10px 15px; background: #4479BA; color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); } .button-link:hover { background: #356094; border: solid 1px #2A4E77; text-decoration: none; } Press Here to Go
C’est ça. Il 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 .
@ Nicolas, a travaillé pour moi car vous n’aviez pas de type="button"
cause de quoi il a commencé à se comporter comme un type de soumission..étant donné que j’ai déjà un type de soumission.it n’a pas fonctionné pour moi …. vous pouvez soit append une classe au bouton, soit pour obtenir la mise en page requirejse:
Si vous voulez éviter d’avoir à utiliser un formulaire ou une entrée et que vous recherchez un lien par bouton, vous pouvez créer des liens de bouton esthétiques avec un wrapper div, une ancre et une balise h1
. Vous voudrez peut-être cela pour que vous puissiez librement placer le bouton-lien sur votre page. Ceci est particulièrement utile pour centrer horizontalement les boutons et avoir du texte centré verticalement à l’intérieur. Voici comment:
Votre bouton sera composé de trois parties nestedes: un wrapper div, une ancre et un h1, comme ceci:
Ensuite, en CSS, votre style devrait ressembler à ceci:
.link-button-wrapper { width: 200px; height: 40px; box-shadow: inset 0px 1px 0px 0px #ffffff; border-radius: 4px; background-color: #097BC0; box-shadow: 0px 2px 4px gray; display: block; border:1px solid #094BC0; } .link-button-wrapper > a { display: inline-table; cursor: pointer; text-decoration: none; height: 100%; width:100%; } .link-button-wrapper > a > h1 { margin: 0 auto; display: table-cell; vertical-align: middle; color: #f7f8f8; font-size: 18px; font-family: cabinregular; text-align: center; }
Voici un jsFiddle pour vérifier et jouer avec.
Avantages de cette configuration: 1. L’affichage div wrapper: block facilite le centrage (en utilisant la marge: 0 auto) et la position (tandis qu’un est en ligne et plus difficile à positionner et impossible à centrer).
Vous pouvez simplement afficher : le bloquer, le déplacer et le définir comme un bouton, mais l’alignement vertical du texte à l’intérieur devient alors difficile.
Cela vous permet d’afficher : inline-table et
Parfois, lorsque vous incorporez un dans un div, seul le texte est cliquable, cette configuration permet de cliquer sur tout le bouton.
Vous n’avez pas à gérer les formulaires si vous essayez simplement de passer à une autre page. Les formulaires sont destinés à saisir des informations et doivent être réservés pour cela.
Vous permet de séparer proprement le style de bouton et le style de texte les uns des autres (avantage d’étirement? Bien sûr, mais CSS peut sembler désagréable, il est donc agréable de le décomposer).
Cela m’a définitivement facilité la vie en créant un site Web mobile pour les écrans de taille variable.
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 du bouton (il n’ya donc pas de clic erroné de la part de l’utilisateur):
button, button a{position:relative;} button a{top:0;left:0;bottom:0;right:0;}
J’ai créé une démo ici .
Si vous souhaitez créer un bouton utilisé pour une URL n’importe où, créez une classe de bouton pour une ancre.
a.button { background-color: #999999; color: #FFFFFF !important; cursor: pointer; display: inline-block; font-weight: bold; padding: 5px 8px; text-align: center; -webkit-border-radius: 5px; border-radius: 5px; } .button:hover { text-decoration: none; }
Je sais qu’il y a eu beaucoup de réponses, mais aucune d’entre elles ne semblait vraiment résoudre le problème. Voici ma solution:
que l’OP commence par. Cela fonctionne très bien, mais il y a parfois un ajout ?
à l’URL. Le ?
est le principal problème. ?
ne se termine pas ajouté à l’URL. Cela se répercutera parfaitement sur la méthode
pour la très petite fraction des utilisateurs pour lesquels JavaScript n’est pas activé.
ou le
n’existent. J’utilise jQuery dans cet exemple, car il est rapide et facile, mais cela peut aussi être fait en JavaScript. action
. // Listen for any clicks on an element in the document with the `link` class $(document).on('click', '.link', function(e) { // Prevent the default action (eg submit the form) e.preventDefault(); // Get the URL specified in the form var url = e.target.parentElement.action; window.location = url; });
Form buttons as links
En ce qui concerne la réponse de BalusC ,
J’avais besoin d’append des variables au bouton et je ne savais pas trop comment. J’ai fini par utiliser le type d’entrée caché . J’ai pensé que cela pourrait être utile pour ceux qui ont trouvé cette page comme moi.
Utilisez-le comme data-href="index.html"
dans la balise button
.
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.
input[type = "submit"] { background-color:white; width:200px; border: 3px solid #c9c9c9; font-size:24pt; margin:5px; color:#969696; } input[type = "submit"]:hover { color: white; background-color:#969696; transition: color 0.2s 0.05s ease; transition: background-color 0.2s 0.05s ease; cursor: pointer; }
Travailler avec JSFiddle ici
Vous pouvez également utiliser un bouton:
Par exemple, dans la syntaxe ASP.NET Core :
// Some other tags // Other tags...
Les personnes ayant répondu à l’aide des atsortingbuts d’un
étaient utiles.
MAIS récemment, j’ai rencontré un problème lorsque j’ai utilisé un lien dans un
.
Le bouton est maintenant considéré comme / en tant que bouton d’envoi (HTML5). J’ai essayé de contourner le problème et j’ai trouvé cette méthode.
Créez un bouton de style CSS comme celui ci-dessous:
.btn-style{ border : solid 1px #0088cc; border-radius : 6px; moz-border-radius : 6px; -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0); -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0); box-shadow : 0px 0px 2px rgba(0,0,0,1.0); font-size : 18px; color : #696869; padding : 1px 17px; background : #eeeeee; background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee)); background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); }
Ou créez-en un nouveau ici: CSS Button Generator
Et créez ensuite votre lien avec une balise de classe nommée d’après le style CSS que vous avez créé:
Link
Voici un violon:
JS Fiddle
Vous pouvez également définir les boutons type-property
sur “button” (cela le fait ne pas soumettre le formulaire), puis l’imbriquer dans un lien (le fait redirect l’utilisateur).
De cette façon, vous pourriez avoir un autre bouton sous la même forme que le formulaire, au cas où vous en auriez besoin. Je pense aussi que cela est préférable dans la plupart des cas à définir la méthode de formulaire et l’action comme un lien (à moins que ce soit un formulaire de recherche, je suppose …)
Exemple:
This way the first button redirects the user, while the second submits the form.
Be careful to make sure the button doesn’t sortinggger any action, as that will result in a conflict. Also as Arius pointed out, you should be aware that, for the above reason, this isn’t ssortingctly speaking considered valid HTML, according to the standard. It does however work as expected in Firefox and Chrome, but I haven’t yet tested it for Internet Explorer.
If what you need is that it will look like a button, with emphasis on the gradient image , you can do this:
Button Text
If you want to redirect for pages which reside within your website, then then here’s my method – I’ve added the atsortingbute href to the button, and onclick assigned this.getAtsortingbute(‘href’) to document.location.href
** It won’t work if you reference for urls outsite of your domain because of ‘X-Frame-Options’ to ‘sameorigin’.
Exemple de code:
Why not just place your button inside of a reference tag eg
This seems to work perfectly for me and does not add any %20 tags to the link, just how you want it. I have used a link to google to demonstrate.
You could of course wrap this in a form tag but it is not necessary.
When linking another local file just put it in the same folder and add the file name as the reference. Or specify the location of the file if in is not in the same folder.
This does not add any character onto the end of the URL either, however it does have the files project path as the url before ending with the name of the file. par exemple
If my project structure was…
.. denotes a folder – denotes a file while four | denote a sub directory or file in parent folder
..public
| ..html
|
| -main.html
|
| -secondary.html
If I open main.html the URL would be,
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
However, when I clicked the button inside main.html to change to secondary.html, the URL would be,
http://localhost:0000/public/html/secondary.html
No special characters included at the end of the URL. J’espère que ça aide. By the way – (%20 denotes a space in a URL its encoded and inserted in the place of them.)
Note: The localhost:0000 will obviously not be 0000 you’ll have your own port number there.
Furthermore the ?_ijt=xxxxxxxxxxxxxx at the end off the main.html URL, x is determined by your own connection so obviously will not be equal to mine.
It might seem like I’m stating some really basic points but I just want to explain as best as I can. Thank you for reading and I hope this help someone at the very least. Happy programming.