Kuriant interaktyvias žiniatinklio sąsajas būtina pridėti nuorodas į HTML mygtukus. Šiame straipsnyje mes išnagrinėsime įvairius metodus, įskaitant įtrauktus įvykius, formos atributus ir CSS stilių, kartu su praktiniais pavyzdžiais ir kodo fragmentais.
Pirmiausia sukurkime HTML mygtuko pavyzdį su pagrindiniu stiliumi:
HTML
Sukurkite HTML mygtuką, kuris veiktų kaip nuorodos pavadinimas><style>.GFG { plotis: 100 taškų; aukštis: 50px; fonas: žalias; border:none; spalva: balta; } style> head> <body> <h1>techcodeview.comh1> <button>Spustelėkite mygtuką čia> body> html>>></tag> <p dir='ltr'><span>Dabar panagrinėkime kiekvieną metodą kartu su būtinu</span> <b> <strong>sintaksė</strong> </b> <span>ir</span> <b> <strong>pavyzdys</strong> </b> <span>kodai.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/difference-between-mb">skirtumas tarp gigabaito ir megabaito</a>
</blockquote> <h2><span>Metodai, kaip pridėti nuorodą į HTML mygtuką</span></h2><h3> <b> <strong>1. Inline</strong> </b> <b><code class='hljs'> onclick></pre> </code></b> <b> <strong>Renginys:</strong> </b> </h3><p dir='ltr'><span>Eilutinio onclick įvykio naudojimas. Jis susieja „JavaScript“ funkciją su mygtuko elemento „onclick“ atributu. Spustelėjus funkcija nukreipia vartotoją į nurodytą URL naudojant window.location.href.</span></p> <p dir='ltr'> <b> <strong>Sintaksė:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/polymorphism-java">polimorfizmas Java</a>
</blockquote> <tag data-text-3='Click Here></code><p dir='ltr'> <b> <strong>Pavyzdys</strong> </b> <span>: Šiame pavyzdyje sukuriame HTML mygtuką su CSS stiliumi. Spustelėjus jis nukreipia į techcodeview.com IDE, naudodamas tiesioginį onclick įvykį.</span></p>HTML<tag data-text-1=' <html> <head> <title>Naudodami tiesioginį onclick Event title><style>.GFG {fono spalva: balta; kraštinė: 2px vientisa juoda; spalva: žalia; pamušalas: 5px 10px; žymeklis: rodyklė; } style> head> <body> <button>Spustelėkite mygtuką čia> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Inline onclick įvykio pavyzdžio išvestis</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/git-checkout">atsiskaitymas su git</a>
</blockquote> <h3> <b> <strong>2. Mygtuko žymės naudojimas viduje <a>žyma:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Šiuo metodu sukuriamas mygtukas inkaro žymos viduje. Inkaro žyma nukreipia tinklalapį į nurodytą vietą.</span> <b> <strong>Pakeiskite toliau pateiktą fragmentą mygtuko elementu, pateiktu aukščiau esančiame mygtuko kodo pavyzdyje.</strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Sintaksė:</strong> </b> </p> </a> <tag data-text-3=' Syntax: Example : HTML <html> <head> <title>Sukurkite HTML mygtuką, kuris veiktų kaip nuorodos pavadinimas><style>.GFG { plotis: 100 taškų; aukštis: 50px; fonas: žalias; border:none; spalva: balta; } style> head> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Spustelėkite mea> body> html> Output : Inkaro žymos naudojimas kaip mygtuko nuoroda 4. Formos žymų naudojimas Kitas būdas yra elemente naudoti veiksmo arba formavimo atributą. Šis metodas semantiškai teisingesnis ir gerai veikia net formų viduje. Pakeiskite toliau pateiktą teksto žymos fragmentą mygtuko elementu, pateiktu aukščiau pateiktame mygtuko kodo pavyzdyje. Spustelėkite mane Pavyzdys: HTML<html> <head> <title>Sukurkite HTML mygtuką, kuris veiktų kaip nuorodos pavadinimas><style>.GFG { plotis: 100 taškų; aukštis: 50px; fonas: žalias; border:none; spalva: balta; } style> head> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Spustelėkite mebutton> forma> body> html> Output : Formos žymų naudojimas Pastaba: Išvestis bus vienoda kiekvienam metodui. Išvestis:>>></tag></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="/python-json/">Python-Json</a> </li><li> <a href="/gta-5-cat/">Gta 5</a> </li><li> <a href="/node-js-misc/">Node.js-Misc</a> </li><li> <a href="/python-turtle-programming/">Python Turtle Programavimas</a> </li><li> <a href="/cpp-pointer/">Cpp Rodyklė</a> </li><li> <a href="/best/">Geriausias</a> </li><li> <a href="/mysql/">Mysql</a> </li><li> <a href="/linux-system-admin/">Linux Sistemos Administratorius</a> </li><li> <a href="/programs/">Programos</a> </li><li> <a href="/python-array/">Python Masyvas</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Kas yra Java SE?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java SE | „Java Standard Edition“ su oi, eilutė, išimtys, daugiagija, rinkiniai, jdbc, rmi, pagrindai, programos, swing, javafx, io srautai, tinklai, lizdai, klasės, objektai ir kt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-java-se"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/difference-between-groovy">Skirtumas tarp Groovy ir Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/every-great-gatsby-character-you-have-know-1311538">Kiekvienas puikus Getsbio personažas, kurį turite žinoti: visas sąrašas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/add-element-array-c">Pridėti elementą į masyvą C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-switch">„JavaScript“ jungiklis</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/queue-interface-java">Eilės sąsaja Java</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/difference-between-throw">mesti metimus java</a>
</li><li><a href="/java-convert-string-char">eilutė į char java</a>
</li><li><a href="/quick-access-toolbar">Word greitosios prieigos įrankių juosta</a>
</li><li><a href="/difference-between-table">vaizdai ir stalai</a>
</li><li><a href="/java-convert-string-int">styga ti tarpt</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 Visos Teisės Saugomos | <a href="//bg.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</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>