HTML Gomb
📌 HTML Gomb – Hogyan használjuk?
A gombok az egyik legfontosabb interaktív elemek egy weboldalon. Segítségükkel űrlapokat küldhetünk el, JavaScript eseményeket indíthatunk el, vagy éppen egy másik oldalra navigálhatjuk a látogatót.
A HTML-ben egy egyszerű gomb létrehozásához a <button> címkét használjuk. Nézzük, hogyan működik!
🔹 1. Hogyan néz ki egy alap HTML gomb?
A legegyszerűbb formában így hozhatunk létre egy gombot:
<button>Kattints ide!</button>
💡 Ez önmagában nem csinál semmit! A böngésző beépített stílusa szerint jelenik meg, de nem navigál sehova, és nem vált ki semmilyen műveletet.
🔹 2. Hogyan tehetünk bele egy linket?
Mivel a <button> önmagában nem tud navigálni, egy <a> (anchor) címkével kombinálhatjuk, így amikor a felhasználó rákattint, átirányítjuk egy másik oldalra.
<a href=”https://www.digitalisfelfedezok.hu” target=”_blank”>
<button>Kattints ide!</button>
</a>
Hogyan jelenik meg?
🔹 href="URL" – Megadja a céloldal címét
🔹 target="_blank" – Új lapon nyitja meg az oldalt
💡 Tipp: Ha egy weblap különböző részeire szeretnél navigálni gombokkal, a megfelelő URL-eket vagy azonosítókat használhatod.
🔹 3. Miért nem használjuk ezt a módszert minden esetben?
Bár a <button> egy linkkel kombinálva működik, nem ez a legjobb megoldás egy kattintható elemre. Ehelyett gyakran CSS-stílusokat vagy JavaScript eseményeket használunk egy szebb és dinamikusabb gomb létrehozására.
Példa egy CSS-sel formázott gombra (ezt egy későbbi következő bejegyzésben fogunk részletesen bemutatni):
<<a href=”https://www.digitalisfelfedezok.hu” target=”_blank” class=”btn”>Kattints ide!</a>
Hogyan jelenik meg?
🔹 4. Összegzés
✔ A <button> egy egyszerű gomb, de alapból nem csinál semmit.
✔ Ha egy másik oldalra akarunk navigálni, egy linkkel (<a>) kell kombinálnunk.
✔ Ha igazán szép és funkcionális gombokat szeretnénk, CSS és JavaScript segítségére lesz szükségünk.