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><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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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><!--//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="/discrete-mathematics/">Diskreetti Matematiikka</a> </li><li> <a href="/backtracking/">Perääntyminen</a> </li><li> <a href="/python-numpy-indexing/">Python Numpy-Indeksointi</a> </li><li> <a href="/stl/">Stl</a> </li><li> <a href="/jsp-tutorial/">Jsp Opetusohjelma</a> </li><li> <a href="/c-file-handling/">C-Tiedoston Käsittely</a> </li><li> <a href="/javascript/">Javascript</a> </li><li> <a href="/picked/">Valittu</a> </li><li> <a href="/max-heap/">Max-Kasa</a> </li><li> <a href="/excel-formulas/">Excelin Kaavat</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Java Matcher group() -menetelmä</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java Matcher group() -menetelmä ja esimerkkejä javasta, matcher appendTail()-metodi, end()-metodi, find()-metodi, group()-menetelmä, aloitus()-menetelmä, appendReplacement()-metodi jne.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-matcher-group-method"> <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="/how-go-full-screen-windows-11">Kuinka siirtyä koko näytön tilaan Windows 11:ssä?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-bitset-interesting-facts">C++ bitset mielenkiintoisia faktoja</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/http">HTTP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-inductive">Ero induktiivisen ja deduktiivisen päättelyn välillä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-fix-session-has-expired-error-internet">Kuinka korjata Istunto on vanhentunut -virhe Internetissä?</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="/inorder-traversal">binääripuu inorder traversal</a>
</li><li><a href="/postorder-traversal">postimyynnin läpikulku</a>
</li><li><a href="/java-math-random-method">java math.random</a>
</li><li><a href="/c-int-string">c++ int merkkijonoon</a>
</li><li><a href="/postman-tutorial">postinkantaja</a>
</li><li><a href="/exception-handling-java">poikkeusten käsittely java</a>
</li><li><a href="/java-if-else-statement">if-lause 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 Kaikki Oikeudet Pidätetään | <a href="//lv.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>
</body>
</html>