Att lägga till länkar till HTML-knappar är viktigt för att skapa interaktiva webbgränssnitt. I den här artikeln kommer vi att utforska olika metoder, inklusive inline-händelser, formulärattribut och CSS-stil, tillsammans med praktiska exempel och kodavsnitt.
Låt oss först skapa ett exempel på HTML-knapp med grundläggande stil:
HTML
Skapa en HTML-knapp som fungerar som en länktitel><style>.GFG { width:100px; höjd:50px; bakgrund:grön; border:ingen; färg vit; } stil> huvud> <body> <h1>techcodeview.comh1> <button>Klicka här knappen> body> html>></pre> </code> <p dir='ltr'><span>Låt oss nu utforska varje metod tillsammans med de nödvändiga</span> <b> <strong>syntax</strong> </b> <span>och</span> <b> <strong>exempel</strong> </b> <span>koder.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-convert-string-json-object-java">sträng till jsonobject</a>
</blockquote> <h2><span>Metoder för att lägga till en länk till en HTML-knapp</span></h2><h3> <b> <strong>1. Inline</strong> </b> <b><code class='hljs'> onclick></code></b> <b> <strong>Händelse:</strong> </b> </h3><p dir='ltr'><span>Användningen av en inline onclick-händelse. Den associerar en JavaScript-funktion med knappelementets onclick-attribut. När den klickas omdirigerar funktionen användaren till en angiven URL med hjälp av window.location.href.</span></p> <p dir='ltr'> <b> <strong>Syntax:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-replaceall">sträng ersätt allt java</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'> <b> <strong>Exempel</strong> </b> <span>: I det här exemplet skapar vi en HTML-knapp utformad med CSS. Vid klick omdirigerar den till techcodeview.com IDE med hjälp av en inline onclick-händelse.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Använd Inline och klicka på Händelsetitel><style>.GFG { bakgrundsfärg: vit; kant: 2px helt svart; färg: grön; stoppning: 5px 10px; markör: pekare; } stil> huvud> <body> <button>Klicka här knappen> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Inline onclick Event Exempel Utdata</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/dijkstras-algorithm">dijkstra</a>
</blockquote> <h3> <b> <strong>2. Använd knapptagg inuti <a>märka:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Denna metod skapar en knapp inuti ankartaggen. Ankartaggen omdirigerar webbsidan till den angivna platsen.</span> <b> <strong>Ersätt kodavsnittet nedan med knappelement som anges i ovanstående exempelknappkod.</strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Syntax:</strong> </b> </p> </a> <pre class='hljs'> Syntax: Example : HTML <html> <head> <title>Skapa en HTML-knapp som fungerar som en länktitel><style>.GFG { width:100px; höjd:50px; bakgrund:grön; border:ingen; färg vit; } stil> huvud> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Klicka på mea> body> html> Output : Använda ankartagg som en knapplänk 4. Använda formulärtaggar Ett annat tillvägagångssätt är att använda attributet action eller formaction inom ett element. Denna metod är mer semantiskt korrekt och fungerar bra även inuti formulär. Ersätt kodavsnittet nedan i body-taggen med knappelementet som anges i ovanstående exempelknappkod. Klicka på mig Exempel : HTML<html> <head> <title>Skapa en HTML-knapp som fungerar som en länktitel><style>.GFG { width:100px; höjd:50px; bakgrund:grön; border:ingen; färg vit; } stil> huvud> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Klicka på mebutton> form> body> html> Output : Använda formulärtaggar Obs: Utdata kommer att vara samma för alla metoder. Utdata:></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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/aws-tutorial/">Handledning För Aws</a> </li><li> <a href="/how-install/">Hur Man Installerar</a> </li><li> <a href="/project/">Projekt</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Geeks Premier League 2023</a> </li><li> <a href="/java-array-programs/">Java-Array-Program</a> </li><li> <a href="/max-heap/">Max-Hög</a> </li><li> <a href="/minecraft-blogs/">Minecraft-Bloggar</a> </li><li> <a href="/dbms-join/">Dbms-Gå Med</a> </li><li> <a href="/greedy/">Girig</a> </li><li> <a href="/us-gk/">Us Gk</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Vad är den fullständiga formen av PA</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> PA Full Form med MBPS står för, betyder, Full Forms, vad är MBPS, beskrivning, exempel, förklaring, akronym för, förkortning, definitioner, fullständigt namn</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-full-form-pa"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/python-split-list-into-lists-particular-value">Python | Dela upp listan i listor efter ett visst värde</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/microsoft/">Microsoft</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-update-chrome-ubuntu">Hur installerar och uppdaterar jag Chrome i Ubuntu?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-hawk">Skillnaden mellan Hawk och Eagle</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-insert-placeholder-word-document">Hur man infogar en platshållare i Word-dokument</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">Populära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/difference-between-vb">vb och vb nät</a>
</li><li><a href="/amplitude-modulation">amplitudmodulering</a>
</li><li><a href="/java-database-connectivity-with-5-steps">ansluta till databasen i java</a>
</li><li><a href="/string-array-java">sträng som en array</a>
</li><li><a href="/difference-between-object">klass vs objekt java</a>
</li><li><a href="/how-convert-string-json-object-java">konvertera sträng till json java</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 Alla Rättigheter Förbehållna | <a href="//sk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>