Adăugarea de link-uri la butoanele HTML este esențială pentru crearea interfețelor web interactive. În acest articol, vom explora diverse metode, inclusiv evenimente inline, atribute de formular și stil CSS, împreună cu exemple practice și fragmente de cod.
Să creăm mai întâi un exemplu de buton HTML cu stil de bază:
HTML
Creați un buton HTML care acționează ca un titlu de link><style>.GFG { lățime:100px; înălțime: 50px; fundal:verde; chenar:niciuna; culoare albă; } stil> cap> <body> <h1>techcodeview.comh1> <button>Faceți clic aici pe butonul> body> html>>></pre> </code> <p dir='ltr'><span>Acum, să explorăm fiecare metodă împreună cu cele necesare</span> <b> <strong>sintaxă</strong> </b> <span>și</span> <b> <strong>exemplu</strong> </b> <span>coduri.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-format">format de șir java lung</a>
</blockquote> <h2><span>Metode pentru a adăuga o legătură la un buton HTML</span></h2><h3> <b> <strong>1. Inline</strong> </b> <b><code class='hljs'> onclick></code></b> <b> <strong>Eveniment:</strong> </b> </h3><p dir='ltr'><span>Utilizarea unui eveniment onclick inline. Asociază o funcție JavaScript cu atributul onclick al elementului buton. Când se dă clic, funcția redirecționează utilizatorul către o adresă URL specificată folosind window.location.href.</span></p> <p dir='ltr'> <b> <strong>Sintaxă:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/mylivecricket-alternatives">livecricket.este</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'> <b> <strong>Exemplu</strong> </b> <span>: În acest exemplu, creăm un buton HTML cu stil CSS. La clic, acesta redirecționează către IDE-ul techcodeview.com folosind un eveniment onclick inline.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Folosind Inline onclick Titlu eveniment><style>.GFG { culoare de fundal: alb; chenar: 2px negru solid; culoare: verde; umplutură: 5px 10px; cursor: pointer; } stil> cap> <body> <button>Faceți clic aici pe butonul> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-char-string">char în șir java</a>
</blockquote> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="ButtonLink"><p>Ieșire exemplu de eveniment în linie la clic</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>2. Folosind eticheta de buton în interior <a>etichetă:</a> </strong> <a> </a> </b> <a> </a> </h3><p dir='ltr'> <a><span>Această metodă creează un buton în interiorul etichetei de ancorare. Eticheta de ancorare redirecționează pagina web în locația dată.</span> <b> <strong>Înlocuiți fragmentul de mai jos cu elementul de buton din exemplul de cod de buton de mai sus.</strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Sintaxă:</strong> </b> </p> </a> <tag data-text-3=' Syntax: Example : HTML <html> <head> <title>Creați un buton HTML care acționează ca un titlu de link><style>.GFG { lățime:100px; înălțime: 50px; fundal:verde; chenar:niciuna; culoare albă; } stil> cap> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Faceți clic pe mea> body> html> Output : Utilizarea etichetei Anchor ca link Button 4. Utilizarea etichetelor de formular O altă abordare este utilizarea atributului acțiune sau formație în cadrul unui element. Această metodă este mai corectă din punct de vedere semantic și funcționează bine chiar și în interiorul formularelor. Înlocuiți fragmentul de mai jos din eticheta body cu elementul buton din exemplul de cod al butonului de mai sus. Faceți clic pe mine Exemplu: HTML<html> <head> <title>Creați un buton HTML care acționează ca un titlu de link><style>.GFG { lățime:100px; înălțime: 50px; fundal:verde; chenar:niciuna; culoare albă; } stil> cap> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com> <button type='submit'>Faceți clic pe buton> formular> corp> html> Ieșire: Utilizarea etichetelor de formular Notă: Ieșirea va fi aceeași pentru fiecare metodă. Ieșire:>>></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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/best-apps/">Cele Mai Bune Aplicații</a> </li><li> <a href="/cube-puzzles/">Puzzle-Uri Cub</a> </li><li> <a href="/news/">Ştiri</a> </li><li> <a href="/jfreechart-tutorial/">Tutorial Jfreechart</a> </li><li> <a href="/category/">Categorie</a> </li><li> <a href="/max-flow/">Debit Maxim</a> </li><li> <a href="/java-arraylist/">Java-Arraylist</a> </li><li> <a href="/jackson-tutorial/">Tutorial Jackson</a> </li><li> <a href="/business/">Afaceri</a> </li><li> <a href="/c-list-function/">Funcția Listă C++</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Semnificația și definiția listei adiacentelor în DSA</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informatică pentru tocilari. Conține articole de informatică și programare bine scrise, bine gândite și bine explicate, chestionare și întrebări practice/programare competitivă/interviu pentru companie.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/adjacency-list-meaning-definition-dsa"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/whats-difference-131384">Care este diferența? GPA ponderat vs neponderat</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/verilog-gray-counter">Contor Verilog Grey</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/arrays-sort-java-with-examples">Arrays.sort() în Java cu exemple</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/trigonometric-substitution">Substituție trigonometrică: metodă, formulă și exemple rezolvate</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-convert-pandas-dataframe-into-list">Cum se convertesc Pandas DataFrame într-o listă?</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/prime-number-program-java">program numere prime în java</a>
</li><li><a href="/java-convert-int-string">convertiți un int într-un șir de caractere java</a>
</li><li><a href="/how-generate-random-number-java">generator de numere aleatoare java</a>
</li><li><a href="/how-reverse-string-java">java inversând un șir</a>
</li><li><a href="/how-see-blocked-number">cum se verifică numerele blocate pe Android</a>
</li><li><a href="/clustering-machine-learning">gruparea</a>
</li><li><a href="/how-print-java">tipărirea declarației în 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 Toate Drepturile Rezervate | <a href="//da.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>