HTML űrlapok alapjai
Hogyan hozzunk létre beviteli mezőket?
A weboldalak egyik legfontosabb interaktív eleme az űrlap. Segítségével adatokat gyűjthetünk a felhasználóktól, például regisztrációs adatokat, visszajelzéseket vagy akár rendelési információkat. De hogyan is működik egy HTML űrlap? Nézzük meg az alapokat! 🚀
🏗️ Mi az az űrlap a HTML-ben?
Az űrlap egy <form> címkével kezdődik, amely tartalmazza a beviteli mezőket. Minden űrlap célja, hogy a felhasználó által megadott adatokat elküldje egy szerverre, ahol azokat feldolgozhatjuk.
Alapvető szerkezete így néz ki:
<form action=”feldolgozas.php” method=”post”>
<label for=”nev”>Név:</label>
<input type=”text” id=”nev” name=”nev”>
<label for=”email”>E-mail:</label>
<input type=”email” id=”email” name=”email”>
<button type=”submit”>Küldés</button>
</form>
🔹 A action attribútum határozza meg, hova küldjük az adatokat.
🔹 A method="post" azt jelzi, hogy az adatokat nem az URL-ben továbbítjuk, hanem biztonságosabb módon, a HTTP POST metódussal.
✍️ Beviteli mezők típusai
A HTML-ben többféle beviteli mezőt használhatunk, attól függően, hogy milyen típusú adatokat szeretnénk bekérni. Lássunk néhány alapvető mezőt! 🔽
📌 Szövegmező (<input type="text">)
<labe<label for=”nev”>Név:</label>
<input type=”text” id=”nev” name=”nev” placeholder=”Írd be a neved…”>
✅ Egy egyszerű szövegmező, például név vagy egyéb rövidebb adatok megadásához.
✉ E-mail cím megadása (<input type="email">)
<<label for=”email”>E-mail:</label>
<input type=”email” id=”email” name=”email” placeholder=”Írd be az e-mail címed…”>
✅ Az type="email" használatával a böngésző ellenőrzi, hogy a megadott adat valóban e-mail cím-e.
🔒 Jelszó mező (<input type="password">)
<label for=”jelszo”>Jelszó:</label>
<input type=”password” id=”jelszo” name=”jelszo” placeholder=”Adj meg egy jelszót…”>
✅ A beírt karaktereket a böngésző csillagokkal vagy pontokkal rejti el.
📅 Dátum választása (<input type="date">)
Lehetővé teszi egy dátum kiválasztását egy naptárból.
<<label for=”datum”>Születési dátum:</label>
<input type=”date” id=”datum” name=”datum”>
🎚️ Csúszka (<input type="range">)
<label for=”ertek”>Válassz egy értéket:</label>
<input type=”range” id=”ertek” name=”ertek” min=”1″ max=”100″>
✅ Hasznos például értékelésekhez vagy beállításokhoz.
🔘 Kiválasztási lehetőségek
Nemcsak szöveges adatokat kérhetünk be, hanem előre megadott opciókat is választhat a felhasználó.
✅ Jelölőnégyzet (<input type="checkbox">)
<input type=”checkbox” id=”feltetelek” name=”feltetelek”>
<label for=”feltetelek”>Elfogadom a feltételeket</label>
✅ Ha egy vagy több dolgot szeretnénk kijelölni (például érdeklődési körök).
⚡ Rádiógomb (<input type="radio">)
<<label>Nem:</label>
<input type=”radio” id=”ferfi” name=”nem” value=”ferfi”>
<label for=”ferfi”>Férfi</label>
<input type=”radio” id=”no” name=”nem” value=”no”>
<label for=”no”>Nő</label>
✅ Ha csak egy opció választható.
🎭 Legördülő menü (<select> tag)
<label for=”orszag”>Válaszd ki az országodat:</label>
<select id=”orszag” name=”orszag”>
<option value=”hu”>Magyarország</option>
<option value=”de”>Németország</option>
<option value=”us”>USA</option>
</select>
✅ Ha több választható lehetőséget szeretnénk megadni.
📩 Adatküldés a szerverre – A küldés gomb
Az űrlap nem működik megfelelően egy submit gomb nélkül! A <button> vagy a <input type="submit"> segítségével lehet elküldeni az adatokat:
<button type=”submit”>Küldés</button>
🔹 Az űrlap elküldése után az adatok egy szerverre kerülnek, ahol feldolgozhatók (pl. PHP, Node.js vagy más backend technológia segítségével).
🎯 Összegzés – Mire jó egy űrlap?
✅ A weboldal interaktívvá válik.
✅ A felhasználók adatokat adhatnak meg (regisztráció, kapcsolatfelvétel, rendelés).
✅ Az adatokat egy szerver dolgozhatja fel.
✅ A böngészők beépített ellenőrzési funkciói segítenek (pl. e-mail formátum).