Créer un lien dans le bouton HTML

Sushant Poudel 19 février 2023
  1. Utilisez les balises <a> et <button> pour créer un bouton qui agit comme un lien en HTML
  2. Utilisez l’attribut onclick dans la balise button pour créer un bouton qui agit comme un lien en HTML
  3. Utilisez les balises <a> et <input> pour créer un bouton qui agit comme un lien en HTML
  4. Utiliser un formulaire HTML pour créer un bouton qui agit comme un lien en HTML
Créer un lien dans le bouton HTML

Nous allons illustrer des méthodes pour créer un bouton HTML qui agit comme un lien.

Utilisez les balises <a> et <button> pour créer un bouton qui agit comme un lien en HTML

Nous pouvons créer un bouton HTML en utilisant la balise <button>. La balise <button> définit un bouton cliquable. Nous utilisons la balise d’ancrage <a> pour créer un lien hypertexte. Il relie une page à une autre page. Nous pouvons créer un bouton qui agit comme un lien en imbriquant la balise <button> à l’intérieur de la balise d’ancrage. On peut préciser l’adresse du lien grâce à l’attribut href.

Par exemple, créez un élément d’ancrage à l’intérieur du corps HTML. A l’intérieur de l’élément d’ancrage, écrivez l’attribut href et spécifiez l’URL https://www.youtube.com. Après cela, créez le bouton en utilisant la balise <button>. A l’intérieur de la balise <button>, écrivez le texte Youtube. Maintenant, fermez la balise de bouton suivie de la balise d’ancrage.

L’exemple ci-dessous montre le processus de création d’un bouton HTML qui fait office de lien. Cela créera un bouton qui redirigera vers Youtube.

Exemple de code :

<a href="https://www.youtube.com">
<button>Youtube</button>
</a> 

Utilisez l’attribut onclick dans la balise button pour créer un bouton qui agit comme un lien en HTML

Nous pouvons également utiliser l’attribut onclick à l’intérieur de la balise button pour créer un bouton qui agit comme un lien en HTML. Cet attribut se déclenche lors d’un clic de souris sur l’élément. Le script s’exécute lorsque la souris est cliqué. Cependant, dans ce processus, nous créons d’abord le bouton, puis ajoutons uniquement l’URL souhaitée. Nous utiliserons également un peu de JavaScript dans cette méthode. Nous utiliserons l’objet window.location pour obtenir l’adresse de la page actuelle et la rediriger vers une nouvelle page.

Par exemple, à l’intérieur du corps HTML, créez d’abord une balise <button>. À l’intérieur de la balise du bouton, utilisez l’attribut onclick et définissez-le sur window.location.href. Ensuite, spécifiez l’URL de destination https://www.facebook.com/ avec window.location.href. Ensuite, écrivez le texte Facebook entre la balise <button>.

Nous avons utilisé l’attribut onclick qui fait partie de l’attribut event en HTML. De cette façon, nous pouvons créer un bouton HTML qui agit comme un lien.

Exemple de code :

<button onclick="window.location.href='https://www.facebook.com/'">Facebook</button>

Utilisez les balises <a> et <input> pour créer un bouton qui agit comme un lien en HTML

Nous pouvons utiliser la balise <input> pour créer un bouton HTML. La balise <input> est également un élément de balise <form>. Il spécifie un champ de saisie où l’utilisateur peut saisir des données. On peut créer un bouton en utilisant l’attribut type et en le spécifiant avec la valeur button. On peut utiliser l’attribut value pour écrire le contenu du bouton. Ensuite, nous pouvons utiliser la balise d’ancrage pour envelopper la balise <input>. Ensuite, un bouton qui agit comme un lien est formé.

Par exemple, écrivez une balise d’ancrage en précisant l’URL de destination à l’intérieur via l’attribut href. Écrivez l’URL sous la forme https://www.facebook.com/. Ensuite, écrivez la balise <input> et spécifiez son attribut type comme button. Ensuite, précisez le texte Facebook dans l’attribut value. Fermez la balise d’ancrage.

L’exemple ci-dessous crée un bouton avec le nom Facebook. Il redirige vers Facebook lorsque vous cliquez dessus. Ainsi, nous pouvons créer un bouton qui fait office de lien.

Exemple de code :

<a href="https://www.facebook.com/">
<input type="button" value="Facebook">
</a>

Utiliser un formulaire HTML pour créer un bouton qui agit comme un lien en HTML

Dans cette méthode, nous allons utiliser la balise <form> pour créer un bouton qui fait office de lien. Nous utilisons l’attribut action pour spécifier l’URL de destination. L’attribut method indique comment envoyer les données du formulaire. Le formulaire est livré à la page spécifiée dans l’attribut action. Nous pouvons définir le bouton type sur submit car il soumet les données du formulaire.

Par exemple, à l’intérieur du corps HTML, créez la balise <form> et utilisez get pour l’attribut method. Maintenant, spécifiez votre URL souhaitée dans l’attribut action. Ensuite, créez le bouton à l’aide de l’élément <button> et définissez l’attribut type sur submit. Ensuite, spécifiez le texte que vous voulez sur votre bouton. Ensuite, fermez la balise <button> suivie de la balise <form>. Ensuite, fermez toutes les balises restantes ouvertes ci-dessus.

Exemple de code :

<form method="get" action="https://www.youtube.com/">
<button type="submit">Continue</button>
</form>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

Article connexe - HTML Button