Dodajanje povezav na gumbe HTML je nujno za ustvarjanje interaktivnih spletnih vmesnikov. V tem članku bomo raziskali različne metode, vključno z dogodki v vrstici, atributi obrazca in slogom CSS, skupaj s praktičnimi primeri in delčki kode.
Najprej ustvarimo vzorčni gumb HTML z osnovnim slogom:
HTML
Ustvarite gumb HTML, ki deluje kot naslov povezave><style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1> <button>Kliknite tukaj gumb> telo> html>></pre> </code> <p dir='ltr'><span>Zdaj pa raziščimo vsako metodo skupaj s potrebnimi</span> <b> <strong>sintaksa</strong> </b> <span>in</span> <b> <strong>primer</strong> </b> <span>kode.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/string-concatenation-java">java string append</a>
</blockquote> <h2><span>Metode za dodajanje povezave na gumb HTML</span></h2><h3> <b> <strong>1. V vrstici</strong> </b> <b><code class='hljs'> onclick></code></b> <b> <strong>dogodek:</strong> </b> </h3><p dir='ltr'><span>Uporaba vgrajenega dogodka onclick. Povezuje funkcijo JavaScript z atributom onclick elementa gumba. Ob kliku funkcija preusmeri uporabnika na določen URL z uporabo window.location.href.</span></p> <p dir='ltr'> <b> <strong>Sintaksa:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-tostring-method">metoda tostring</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'> <b> <strong>Primer</strong> </b> <span>: V tem primeru ustvarimo gumb HTML, oblikovan s CSS. Ob kliku se preusmeri na techcodeview.com IDE z vgrajenim dogodkom onclick.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Uporaba Inline onclick Naslov dogodka><style>.GFG { barva ozadja: bela; obroba: 2px polna črna; barva: zelena; oblazinjenje: 5px 10px; kazalec: kazalec; } slog> glava> <body> <button>Kliknite tukaj gumb> telo> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Izhod primera dogodka v vrstici onclick</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>2. Uporaba oznake gumba v notranjosti <a>oznaka:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Ta metoda ustvari gumb znotraj sidrne oznake. Sidrna oznaka preusmeri spletno stran na dano lokacijo.</span> <b> <strong>Zamenjajte spodnji delček z elementom gumba, podanim v zgornji vzorčni kodi gumba.</strong> </b> </a> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-username">primer uporabniškega imena</a>
</blockquote> <a> <p dir='ltr'> <b> <strong>Sintaksa:</strong> </b> </p> </a> <pre class='hljs'> Syntax: Example : HTML <html> <head> <title>Ustvarite gumb HTML, ki deluje kot naslov povezave><style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Kliknite mea> body> html> Output : Uporaba oznake Anchor kot povezave gumba 4. Uporaba oznak obrazca Drug pristop je uporaba atributa action ali formaction znotraj elementa. Ta metoda je bolj pomensko pravilna in dobro deluje tudi znotraj obrazcev. Zamenjajte spodnji delček v oznaki body z elementom gumba, podanim v zgornji vzorčni kodi gumba. Kliknite me Primer: HTML<html> <head> <title>Ustvarite gumb HTML, ki deluje kot naslov povezave><style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Kliknite mebutton> form> body> html> Output : Uporaba oznak obrazca Opomba: rezultat bo enak za vse metode. Izhod:></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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/randomized/">Naključno izbrano</a> </li><li> <a href="/technical-scripter-2022-cat/">Tehnični Skripter 2022</a> </li><li> <a href="/cpp-operator/">Cpp-Operator</a> </li><li> <a href="/photoshop-tutorial/">Vadnica Za Photoshop</a> </li><li> <a href="/html-xml/">Html In Xml</a> </li><li> <a href="/testng-tutorial/">Vadnica Testng</a> </li><li> <a href="/node-js-misc/">Node.js-Razno</a> </li><li> <a href="/excel-how/">Excel - Kako</a> </li><li> <a href="/coa-tutorial/">Vadnica Coa</a> </li><li> <a href="/2d-shapes/">2D-Oblike</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Kako odstraniti vodni žig v Excelu</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kako odstraniti vodni žig v Excelu s temami traku in zavihkov, orodne vrstice za hitri dostop, mini orodne vrstice, gumbov, delovnega lista, manipulacije s podatki, funkcije, formule, vlookup, isna in več.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-remove-watermark-excel"> <i class="fa fa-external-link"></i> Preberi Več</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zanimivi Članki</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/difference-between-teaspoon">Razlika med čajno in jedilno žlico</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/rxjs-tutorial/">Vadnica Rxjs</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-array/">C-Niz</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-alphanumeric">Kaj je alfanumerično?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/data-encryption-standard-set-1">Standard šifriranja podatkov (DES) | Komplet 1</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">Priljubljene Objave</h2>
<div class="content">
<ul class="list"> <li><a href="/css-bold-text">css krepko besedilo</a>
</li><li><a href="/how-convert-string-json-object-java">niz jsonobject</a>
</li><li><a href="/add-elements-array-java">dodajte v matriko v Javi</a>
</li><li><a href="/java-if-else-statement">java, če drugače</a>
</li><li><a href="/how-open-json-file">kako odpreti datoteko json</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 Vse Pravice Pridržane | <a href="//de.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti</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>