L'ajout de liens vers des boutons HTML est essentiel pour créer des interfaces Web interactives. Dans cet article, nous explorerons diverses méthodes, notamment les événements en ligne, les attributs de formulaire et le style CSS, ainsi que des exemples pratiques et des extraits de code.
Créons d’abord un exemple de bouton HTML avec un style de base :
HTML
Créez un bouton HTML qui agit comme un titre de lien><style>.GFG {largeur : 100 px ; hauteur : 50 px ; arrière-plan : vert ; bordure : aucune ; Couleur blanche; } style> tête> <body> <h1>techcodeview.comh1> <button>Cliquez ici bouton> corps> html>></pre> </code> <p dir='ltr'><span>Maintenant, explorons chaque méthode ainsi que les éléments nécessaires</span> <b> <strong>syntaxe</strong> </b> <span>et</span> <b> <strong>exemple</strong> </b> <span>codes.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/javac-is-not-recognized">javac n'est pas reconnu</a>
</blockquote> <h2><span>Méthodes pour ajouter un lien vers un bouton HTML</span></h2><h3> <b> <strong>1. En ligne</strong> </b> <b><code> onclick></code></b> <b> <strong>Événement:</strong> </b> </h3><p dir='ltr'><span>L'utilisation d'un événement onclick en ligne. Il associe une fonction JavaScript à l'attribut onclick de l'élément bouton. Lorsque vous cliquez dessus, la fonction redirige l'utilisateur vers une URL spécifiée à l'aide de window.location.href.</span></p> <p dir='ltr'> <b> <strong>Syntaxe:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/constructors-java">constructeur en java</a>
</blockquote> <pre>Click Here></pre><p dir='ltr'> <b> <strong>Exemple</strong> </b> <span>: Dans cet exemple, nous créons un bouton HTML stylisé avec CSS. Au clic, il redirige vers l'IDE techcodeview.com à l'aide d'un événement onclick en ligne.</span></p>HTML<code> <pre> <html> <head> <title>Utilisation du titre de l'événement Inline onclick><style>.GFG { couleur d'arrière-plan : blanc ; bordure : 2px noir uni ; la couleur verte; remplissage : 5px 10px ; curseur : pointeur ; } style> tête> <body> <button>Cliquez ici bouton> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="BoutonLien"><p>Exemple de sortie d'événement onclick en ligne</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>2. Utilisation de la balise de bouton à l'intérieur <a>étiqueter:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Cette méthode crée un bouton à l’intérieur de la balise d’ancrage. La balise d'ancrage redirige la page Web vers l'emplacement indiqué.</span> <b> <strong>Remplacez l'extrait ci-dessous par l'élément de bouton indiqué dans l'exemple de code de bouton ci-dessus.</strong> </b> </a> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-sort-an-array-java">tableau java trié</a>
</blockquote> <a> <p dir='ltr'> <b> <strong>Syntaxe:</strong> </b> </p> </a> <pre> Syntax: Example : HTML <html> <head> <title>Créez un bouton HTML qui agit comme un titre de lien><style>.GFG {largeur : 100 px ; hauteur : 50 px ; arrière-plan : vert ; bordure : aucune ; Couleur blanche; } style> tête> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Cliquez sur mea> body> html> Sortie : Utilisation de la balise Anchor comme lien de bouton 4. Utilisation des balises form Une autre approche consiste à utiliser l'attribut action ou formaction dans un élément. Cette méthode est sémantiquement plus correcte et fonctionne bien même à l’intérieur des formulaires. Remplacez l'extrait ci-dessous dans la balise body par l'élément bouton indiqué dans l'exemple de code de bouton ci-dessus. Cliquez moi Exemple : HTML<html> <head> <title>Créez un bouton HTML qui agit comme un titre de lien><style>.GFG {largeur : 100 px ; hauteur : 50 px ; arrière-plan : vert ; bordure : aucune ; Couleur blanche; } style> tête> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Cliquez sur moibouton> formulaire> corps> html> Sortie : Utilisation des balises de formulaire Remarque : La sortie sera la même pour chaque méthode. Sortie :></pre></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/es6-tutorial/">Tutoriel Es6</a> </li><li> <a href="/directi/">Directeur</a> </li><li> <a href="/python-selenium-exercises/">Exercices Python Selenium</a> </li><li> <a href="/mysql-tutorial/">Tutoriel Mysql</a> </li><li> <a href="/node-js-misc/">Node.js-Divers</a> </li><li> <a href="/gmail/">Gmail</a> </li><li> <a href="/hadoop-tutorial/">Tutoriel Hadoop</a> </li><li> <a href="/spring-cloud-tutorial/">Tutoriel Spring Cloud</a> </li><li> <a href="/calculus-maq/">Calcul - Maq</a> </li><li> <a href="/php-array-function/">Fonction De Tableau Php</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Comment démarrer, arrêter et redémarrer les services sous Linux à l'aide de la commande systemctl</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portail informatique pour les geeks. Il contient des articles sur l'informatique et la programmation bien écrits, bien pensés et bien expliqués, des quiz et des questions pratiques/de programmation compétitive/d'entretien d'entreprise.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-start-stop-restart-services-linux-using-systemctl-command"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/cm-feet-converter">Convertisseur CM en Pieds</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/shift-operators-c">Opérateurs de décalage en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-arrays-fill">Remplissage des tableaux Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/movie-reviews/">Critiques De Films</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sas-tutorial/">Tutoriel Sas</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/php-preg_match-function">preg_match</a>
</li><li><a href="/java-database-connectivity-with-5-steps">connecter la base de données Java</a>
</li><li><a href="/difference-between-throw">lancer des lancers en java</a>
</li><li><a href="/c-strings">gestion des chaînes en C++</a>
</li><li><a href="/python-program-find-difference-between-two-strings">différence entre deux chaînes python</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Tous Les Droits Sont Réservés | <a href="//hu.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
</body>
</html>