Tilføjelse af links til HTML-knapper er afgørende for at skabe interaktive webgrænseflader. I denne artikel vil vi udforske forskellige metoder, herunder inline-hændelser, formularattributter og CSS-styling sammen med praktiske eksempler og kodestykker.
Lad os først oprette en prøve HTML-knap med grundlæggende stil:
HTML
Opret en HTML-knap, der fungerer som en linktitel><style>.GFG { width:100px; højde:50px; baggrund:grøn; grænse:ingen; farve: hvid; } stil> hoved> <body> <h1>techcodeview.comh1> <button>Klik her knap> body> html>></pre> </code> <p dir='ltr'><span>Lad os nu udforske hver metode sammen med det nødvendige</span> <b> <strong>syntaks</strong> </b> <span>og</span> <b> <strong>eksempel</strong> </b> <span>koder.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/advantages-disadvantages-instagram">fordelene ved instagram til personlig brug</a>
</blockquote> <h2><span>Metoder til at tilføje et link til en HTML-knap</span></h2><h3> <b> <strong>1. Inline</strong> </b> <b><code class='hljs'> onclick></code></b> <b> <strong>Begivenhed:</strong> </b> </h3><p dir='ltr'><span>Brugen af en inline onclick-begivenhed. Den knytter en JavaScript-funktion til knapelementets onclick-attribut. Når der klikkes på den, omdirigerer funktionen brugeren til en specificeret URL ved hjælp af window.location.href.</span></p> <p dir='ltr'> <b> <strong>Syntaks:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/gimp-change-colors">gimp erstatte farve</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'> <b> <strong>Eksempel</strong> </b> <span>: I dette eksempel opretter vi en HTML-knap med CSS. Ved klik omdirigeres den til techcodeview.com IDE ved hjælp af en inline onclick-begivenhed.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Ved at bruge Inline, klik på Begivenhedstitel><style>.GFG { baggrundsfarve: hvid; kant: 2px ensfarvet sort; farve: grøn; polstring: 5px 10px; markør: pointer; } stil> hoved> <body> <button>Klik her knap> 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 Hændelseseksempel output</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/javascript-void">ugyldig 0</a>
</blockquote> <h3> <b> <strong>2. Brug af knapmærke indeni <a>tag:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Denne metode opretter en knap inde i ankermærket. Ankertagget omdirigerer websiden til den givne placering.</span> <b> <strong>Erstat nedenstående kodestykke med knapelement, der er angivet i ovenstående eksempelknapkode.</strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Syntaks:</strong> </b> </p> </a> <pre class='hljs'> Syntax: Example : HTML <html> <head> <title>Opret en HTML-knap, der fungerer som en linktitel><style>.GFG { width:100px; højde:50px; baggrund:grøn; grænse:ingen; farve: hvid; } stil> hoved> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Klik på mea> body> html> Output : Brug af anker-tag som et knaplink 4. Brug af form-tags En anden fremgangsmåde er at bruge handlingen eller formaction-attributten i et element. Denne metode er mere semantisk korrekt og fungerer godt selv inde i formularer. Erstat nedenstående uddrag i body-tagget med det knapelement, der er angivet i ovenstående eksempelknapkode. Klik mig Eksempel : HTML<html> <head> <title>Opret en HTML-knap, der fungerer som en linktitel><style>.GFG { width:100px; højde:50px; baggrund:grøn; grænse:ingen; farve: hvid; } stil> hoved> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Klik på mebutton> form> body> html> Output: Brug af formular-tags Bemærk: Outputtet vil være det samme for hver metode. Output:></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="/tcs/">Tcs</a> </li><li> <a href="/interview-experiences/">Interviewoplevelser</a> </li><li> <a href="/java-drivermanager/">Java Drivermanager</a> </li><li> <a href="/cpp-pointer/">Cpp-Pointer</a> </li><li> <a href="/strings/">Strenge</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Geeks Premier League 2023</a> </li><li> <a href="/python-numpy-linear-algebra/">Python Numpy-Lineær Algebra</a> </li><li> <a href="/python-math-library-functions/">Python Matematik-Bibliotek-Funktioner</a> </li><li> <a href="/python-input-output/">Python-Input-Output</a> </li><li> <a href="/prime-number/">Primtal</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">100+ gode comebacks, stege og one-liners [2024]</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Med en blanding af smarte comebacks, sjove stege og hurtige vittigheder, løber du aldrig tør for ting at sige. Uanset om du hænger ud med venner, til en fest eller bare har en afslappet samtale, vil disse linjer hjælpe dig med at lette stemningen og vise din sans for humor.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/100-good-comebacks-roasts-one-liners"> <i class="fa fa-external-link"></i> Læs Mere</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/countries-that-start-with-b">Lande, der starter med B</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-argmax-python">numpy.argmax() i Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-gravitational-potential-energy">Forskellen mellem tyngdepotentialeenergien og tyngdepotentialet</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/set-java">Indstillet i Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/open-source-operating-system">Open Source operativsystem</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ære Indlæg</h2>
<div class="content">
<ul class="list"> <li><a href="/footnotes-markdown">markdown fodnoter</a>
</li><li><a href="/java-string-substring">streng understreng</a>
</li><li><a href="/how-check-null-java">java check er null</a>
</li><li><a href="/java-list">java oprettelsesliste</a>
</li><li><a href="/selection-sort-java">java udvælgelsessortering</a>
</li><li><a href="/javascript-global-variable">javascript global variabel</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 Alle Rettigheder Forbeholdes | <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Os</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</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>