Comment Créer un Bouton HTML Agissant comme un Lien

Il y a plusieurs moyens de créer un bouton HTML agissant comme un lien (c’est-à-dire, en cliquant dessus, l'utilisateur est redirigé vers l'URL spécifiée).

Vous pouvez choisir un des moyens suivants pour ajouter un lien au bouton HTML.

1. Ajouter un événement onclick en ligne

  1. à la balise HTML <button> dans l'élément HTML <form> .

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
   </head>
   <body>
      <button onclick="window.location.href = 'https://fr.w3docs.com/';">Cliquez Ici</button>
   </body>
</html>
Cela peut ne pas fonctionner si le bouton est dans une balise de formulaire
  1. à la balise <input> dans l'élément HTML <form> .

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
   </head>
   <body>
      <form>
         <input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/>
      </form>
   </body>
</html>
Ces liens ne fonctionnent pas lorsque JavaScript est désactivé et que les moteurs de recherche peuvent ignorer ce type de liens.

2.Utilisez l'attribut action ou formaction dans l'élément <form>

  1. l'attribut action

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
   </head>
   <body>
      <form action="https://fr.w3docs.com/">
         <button type="submit">Cliquez sur moi</button>
      </form>
   </body>
</html>

Pour ouvrir le lien dans un nouveau tab, ajoutez l'attribut target="_blank.

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
   </head>
   <body>
      <form action="https://fr.w3docs.com/" method="get" target="_blank">
         <button type="submit">Cliquez sur moi</button>
      </form>
   </body>
</html>
Comme il n'y a pas de formulaire et qu'aucune donnée n'est soumise, cela peut être sémantiquement incorrect. Cependant, ce balisage est valide.
  1. L'attribut HTML5 formaction.

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
   </head>
   <body>
      <form>
         <button type="submit" formaction="https://fr.w3docs.com/">Cliquez sur moi</button>
      </form>
   </body>
</html>
L’attribut formaction est utilisé seulement pour les boutons avec type=”submit”. Comme cet attribut est spécifique à HTML5, la prise en charge dans les anciens navigateurs peut être médiocre.

3. Ajoutez un lien style comme un bouton HTML button (à l’aide de CSS)

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
      <style>
         .button {
         background-color: #1c87c9;
         border: none;
         color: white;
         padding: 20px 34px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 20px;
         margin: 4px 2px;
         cursor: pointer;
         }
      </style>
   </head>
   <body>
      <a href="https://www.w3docs.com/" class="button">Cliquez ici</a>
   </body>
</html>
Comme un style complexe est requis, cela peut ne pas fonctionner sur certains navigateurs.

Trouvez-vous cela utile?

Articles Associées