Linkkien lisääminen HTML-painikkeisiin on välttämätöntä interaktiivisten verkkokäyttöliittymien luomiseksi. Tässä artikkelissa tutkimme erilaisia menetelmiä, kuten upotettuja tapahtumia, lomakemääritteitä ja CSS-tyyliä, sekä käytännön esimerkkejä ja koodinpätkiä.
Luodaan ensin malli-HTML-painike perustyylillä:
HTML Luo HTML-painike, joka toimii kuin linkin otsikko><style>.GFG { leveys: 100 pikseliä; korkeus: 50px; tausta: vihreä; border:ei mitään; väri valkoinen; } style> head> <body> <h1>techcodeview.comh1> <button>Napsauta tästä-painiketta> body> html>>></tag> <p dir='ltr'><span>Tutkitaan nyt jokaista menetelmää tarvittavien kanssa</span> <b> <strong>syntaksi</strong> </b> <span>ja</span> <b> <strong>esimerkki</strong> </b> <span>koodit.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/database-design">tietokannan suunnittelu dbms:ssä</a>
</blockquote> <h2><span>Menetelmät linkin lisäämiseksi HTML-painikkeeseen</span></h2><h3> <b> <strong>1. Upotettu</strong> </b> <b><code class='hljs'> onclick></pre> </code></b> <b> <strong>Tapahtuma:</strong> </b> </h3><p dir='ltr'><span>Sisäisen onclick-tapahtuman käyttö. Se yhdistää JavaScript-funktion painikeelementin onclick-attribuuttiin. Kun toimintoa napsautetaan, se ohjaa käyttäjän määritettyyn URL-osoitteeseen käyttämällä window.location.href.</span></p> <p dir='ltr'> <b> <strong>Syntaksi:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-wrap-text-css">css rivitysteksti</a>
</blockquote> <tag data-text-3='Click Here></code><p dir='ltr'> <b> <strong>Esimerkki</strong> </b> <span>: Tässä esimerkissä luomme CSS-tyylisen HTML-painikkeen. Napsautuksessa se ohjaa techcodeview.com IDE:hen käyttämällä upotettua onclick-tapahtumaa.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Inline onclick Tapahtuman otsikko><style>.GFG { taustaväri: valkoinen; reuna: 2px tasainen musta; väri: vihreä; täyte: 5px 10px; kohdistin: osoitin; } style> head> <body> <button>Napsauta tästä-painiketta> body> html>>></tag> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Sisäänrakennettu onclick-tapahtumaesimerkkitulostus</p> <h3> <b> <strong>2. Käytä painiketunnistetta sisällä <a>tag:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Tällä menetelmällä luodaan painike ankkuritunnisteen sisään. Ankkuritunniste uudelleenohjaa verkkosivun annettuun sijaintiin.</span> <b> <strong>Korvaa alla oleva katkelma painikeelementillä, joka on annettu yllä olevassa esimerkkipainikekoodissa.</strong> </b> </a> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/return-statement-java">java paluu komento</a>
</blockquote> <a> <p dir='ltr'> <b> <strong>Syntaksi:</strong> </b> </p> </a> <tag data-text-3=' Syntax: Example : HTML <html> <head> <title>Luo HTML-painike, joka toimii kuin linkin otsikko><style>.GFG { leveys: 100 pikseliä; korkeus: 50px; tausta: vihreä; border:ei mitään; väri valkoinen; } style> head> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Napsauta mea> body> html> Output : Ankkuritunnisteen käyttäminen painikelinkkinä 4. Lomaketunnisteiden käyttäminen Toinen tapa on käyttää elementin sisällä attribuuttia action tai formation. Tämä menetelmä on semanttisesti oikeampi ja toimii hyvin myös lomakkeiden sisällä. Korvaa alla oleva koodinpätkä body-tunnisteessa painikeelementillä, joka on annettu yllä olevassa esimerkkipainikekoodissa. Napsauta minua Esimerkki: HTML<html> <head> <title>Luo HTML-painike, joka toimii kuin linkin otsikko><style>.GFG { leveys: 100 pikseliä; korkeus: 50px; tausta: vihreä; border:ei mitään; väri valkoinen; } style> head> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Napsauta me-painiketta> lomake> body> html> Tulostus : Lomaketunnisteiden käyttäminen Huomautus: Tulos on sama jokaiselle menetelmälle. Lähtö:></pre> </code></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="">Luokka</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/cpp-strings-library/">Cpp-Strings-Kirjasto</a> </li><li> <a href="/java-keyword/">Java-Avainsana</a> </li><li> <a href="/python-numpy-statistics-functions/">Python Numpy-Tilastofunktiot</a> </li><li> <a href="/commerce-12th/">Kauppa - 12</a> </li><li> <a href="/puzzles/">Palapelit</a> </li><li> <a href="/r-matrix/">R-Matrix</a> </li><li> <a href="/geometry/">Geometria</a> </li><li> <a href="/windows-tutorial/">Windowsin Opetusohjelma</a> </li><li> <a href="/java-date-time/">Java-Päiväys-Aika</a> </li><li> <a href="/jpa-tutorial/">Jpa Opetusohjelma</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Kaikkien aikojen 15 vaikeinta SAT-matematiikan kysymystä</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Haluatko harjoitella todella kovia SAT-matematiikan tehtäviä saadaksesi täydelliset matematiikan tulokset? Tässä on 15 vaikeinta kysymystä, jotka olemme nähneet - jos uskallat.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/15-hardest-sat-math-questions-ever-13170"> <i class="fa fa-external-link"></i> Lue Lisää</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Mielenkiintoisia Artikkeleita</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/list-regions-united-states">Luettelo Yhdysvaltojen alueista</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/character-class-in-java">Character Class Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-bash">Mikä on Bash?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/quicksort-data-structure">QuickSort – Tietorakenteen ja algoritmin opetusohjelmat</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/apache-ant-tutorial">Apache Ant opetusohjelma</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">Suosittu Viestiä</h2>
<div class="content">
<ul class="list"> <li><a href="/how-compare-two-objects-java">java objektien tasa-arvo</a>
</li><li><a href="/pete-davidson">pete davidson</a>
</li><li><a href="/sql-update-with-join">päivitys sql:ssä liittymällä</a>
</li><li><a href="/string-array-java">merkkijono java-taulukko</a>
</li><li><a href="/candidate-key-dbms">ehdokasavain</a>
</li><li><a href="/what-is-100-km-h-mph">100 km/h - mph</a>
</li><li><a href="/java-swing-tutorial">java swing opetusohjelma</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 Kaikki Oikeudet Pidätetään | <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö</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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>