2. modul · HTML alapok · 9. lecke
Eddig az oldalad mutatott valamit. Az űrlappal a látogató adatot ad neked: beír, kiválaszt, elküld. Ebben a leckében a keretet és a legfontosabb mezőtípust nézzük meg — és megértjük, mi történik a „Küldés" gomb megnyomásakor.
form és input elemekkel.action és a method.name a legfontosabb attribútum egy mezőn.label feliratot készítesz, és érted, miért kötelező.type értéket.required attribútummal.Az űrlap az egyetlen eszköz a HTML-ben, amivel a látogató adatot küldhet neked. Bejelentkezés, regisztráció, keresés, kapcsolatfelvétel, rendelés, szavazás — mind űrlap.
Azt, hogy mi történik az adattal a szerveren: ki menti el, ki küld róla e-mailt. Ahhoz szerveroldali programozás kell (PHP, Node.js, Python). Mi a kérdőívet készítjük el — nem azt, aki kiértékeli. Ez bőven elég egy teljes tananyagra.
A <form> a keret: minden mező, ami benne van,
együtt kerül elküldésre. Két attribútuma fontos.
| Attribútum | Mit jelent? |
|---|---|
action | Hova menjen az adat — egy szerveroldali program címe. |
method | Hogyan menjen: get vagy post. |
<form action="feldolgoz.php" method="post"> ... a mezők ... </form>
| GET | POST | |
|---|---|---|
| Hol utazik az adat? | A címsorban: kereses.php?q=alma&db=3 |
A kérés törzsében — a címsorban nem látszik |
| Látható? | Igen, bárki elolvashatja a képernyőn | Nem látszik a címsorban |
| Könyvjelzőzhető? | Igen — a cím tartalmazza az adatot | Nem |
| Mikor használd? | Keresés, szűrés — ahol jó, ha a találat linkelhető | Minden más: bejelentkezés, regisztráció, üzenetküldés |
GET esetén az adat bekerül a címsorba, onnan pedig a böngésző előzményeibe, a szerver naplóiba, sőt akár a válla fölött néző ember szemébe. Jelszó, személyes adat, üzenet mindig POST.
A POST csak azt jelenti, hogy nem a címsorban utazik az adat — attól még olvasható
útközben. A valódi védelmet a https:// adja. A POST a helyes
forma, a HTTPS a biztonság.
Nincs szerverünk, ami fogadná az adatot. Az élő példákban ezért az űrlap elküldésekor egy kis doboz jelenik meg, ami megmutatja, mit küldene el a böngésző. Ez pontosan az az adat, amit egy valódi szerver megkapna.
Az <input> a leguniverzálisabb elem a HTML-ben: a
type attribútumtól függően lehet szövegdoboz, jelszómező, dátumválasztó,
színválasztó, csúszka vagy gomb. Üres elem — nincs záró tagja.
<form action="feldolgoz.php" method="get"> <label for="nev">Neved:</label> <input type="text" id="nev" name="nev"> <button type="submit">Küldés</button> </form>
feldolgoz.php?nev=... — mivel
method="get", az adat a címsorba kerülne.
Ez a lecke legfontosabb szakasza. Az adat, ami elmegy a szerverhez, név–érték párokból áll:
name alapján tudja, melyik adat micsoda.
Ha egy mezőnek nincs name attribútuma, a tartalma
egyszerűen nem kerül elküldésre. A látogató kitölti, megnyomja a gombot, és az adat
nyomtalanul eltűnik. A böngésző nem szól — ez az egyik legalattomosabb űrlaphiba.
<form action="mentes.php" method="post">
<p>
<label for="a">Van name attribútuma:</label>
<input type="text" id="a" name="varos">
</p>
<p>
<label for="b">Nincs name attribútuma:</label>
<input type="text" id="b">
</p>
<button type="submit">Küldés</button>
</form>
varos= fog szerepelni — a második mező tartalma sehol nincs.
Ez pontosan az a hiba, amit soha nem vennél észre magadtól.
A value a mező értéke. Szöveges mezőnél megadhatod
előre kitöltött kezdőértékként:
<form action="mentes.php" method="post">
<label for="orszag">Ország:</label>
<input type="text" id="orszag" name="orszag"
value="Magyarország">
<button type="submit">Küldés</button>
</form>
name="email", nem name="mezo2".name="szuletesi-datum".
A <label> a mező felirata. Nem díszítés: a
for attribútum összekapcsolja a mezővel, és ettől
három dolog történik.
A label for attribútuma megegyezik a mező
id attribútumával. Nem a name attribútummal —
az id attribútummal! Ez a két attribútum különböző célt szolgál:
name → a szervernek: melyik adat ezid → az oldalon belül: melyik elem ez (a label és a CSS számára)<p> <label for="email">E-mail cím:</label> <input type="email" id="email" name="email"> </p> <p> Nincs label, csak szöveg: <input type="email" name="email2"> </p>
| Mit ad a label? | Miért számít? |
|---|---|
| Nagyobb kattintható felület | A feliratra kattintva is a mezőbe kerül a kurzor. Érintőképernyőn ez komoly könnyebbség. |
| Felolvasható kapcsolat | A képernyőolvasó bemondja a felirat szövegét, amikor a mezőre ér. Enélkül csak annyit hallani: „szerkesztőmező". |
| Egyértelmű jelentés | Nem csak „valami szöveg a mező mellett", hanem rögzített kapcsolat. |
<label for="nev">Neved:</label> <input type="text" id="nev" name="nev">
<label> Neved: <input type="text" name="nev"> </label>
Mindkettő működik. Az elsőt használjuk végig, mert így a felirat és a mező külön elem marad — CSS-sel könnyebb elrendezni őket (például a feliratot a mező fölé tenni).
Kivétel nélkül. Ha vizuálisan nem fér ki a felirat (például egy keresőmezőnél), akkor is tedd ki —
és CSS-sel rejtsd el úgy, hogy a képernyőolvasó még lássa. Ez a helyes megoldás; a
placeholder nem az.
A type attribútum dönti el, milyen mező lesz az
<input>-ból. Ez nem csak kinézet: a böngésző ez alapján
ellenőriz, és telefonon más billentyűzetet dob fel.
<p><label for="a">text</label><br> <input type="text" id="a" name="a"></p> <p><label for="b">email</label><br> <input type="email" id="b" name="b"></p> <p><label for="c">password</label><br> <input type="password" id="c" name="c"></p> <p><label for="d">number</label><br> <input type="number" id="d" name="d"></p> <p><label for="e">date</label><br> <input type="date" id="e" name="e"></p> <p><label for="f">color</label><br> <input type="color" id="f" name="f"></p> <p><label for="g">range</label><br> <input type="range" id="g" name="g"></p> <p><label for="h">file</label><br> <input type="file" id="h" name="h"></p>
password elrejti a karaktereket, a
number mellett nyilacskák jelennek meg, a
date naptárt nyit, a color színválasztót.
Ezt mind a böngésző adja — egy sor kódot sem írtál hozzá.
| type | Mire való, és mit ad hozzá a böngésző? |
|---|---|
text | Egysoros szöveg. Ez az alapértelmezés, ha nem adsz meg típust. |
email | E-mail cím. Ellenőrzi, hogy van-e benne @. Telefonon @-os billentyűzet. |
password | Jelszó. A beírt karakterek pontokká válnak. |
number | Szám. Léptetőnyilak; min, max, step adható meg. |
tel | Telefonszám. Nem ellenőriz (túl sokféle formátum van), de telefonon számbillentyűzetet ad. |
url | Webcím. Ellenőrzi, hogy van-e protokoll (https://). |
date | Dátum. A böngésző naptárt nyit. |
time | Időpont. |
color | Szín. Színválasztó ablak nyílik. |
range | Csúszka min és max között. Ha a pontos érték nem számít. |
file | Fájlfeltöltés. „Tallózás" gombot ad. |
hidden | Rejtett mező: nem látszik, de elküldődik. Technikai adatokhoz. |
Ha elgépeled (type="emial"), vagy egy régi böngésző nem ismeri a
típust, akkor sima szövegmező lesz belőle. Nem kapsz hibát — csak elmarad az
ellenőrzés és a kényelmi funkció. Ez a HTML „megbocsátó" természete.
Asztali gépen alig látszik a különbség. Telefonon viszont a
type="number" számbillentyűzetet dob fel, az
email pedig @-ot tesz a billentyűzetre.
Ez érezhetően kényelmesebb kitöltés.
A placeholder az a halvány szöveg, ami az üres mezőben
látszik, és eltűnik, amint gépelni kezdesz.
<p>
<label for="tel">Telefonszám:</label><br>
<input type="tel" id="tel" name="tel"
placeholder="+36 30 123 4567">
</p>
<p>
<input type="tel" name="tel2"
placeholder="Telefonszám">
</p>
label a helyén marad.
Ez a kezdők egyik leggyakoribb tévedése: „minek label, ha a placeholder is odaírja". Amiért ez rossz:
A label megmondja, mi az a mező. A
placeholder pedig példát mutat a formátumra:
Telefonszám + +36 30 123 4567.
Kiegészítik egymást, nem helyettesítik.
A böngésző ingyen ad egy alapszintű ellenőrzést — nem kell hozzá JavaScript.
A legfontosabb eszköze a required attribútum: ez azt jelenti, hogy a
mezőt kötelező kitölteni.
<form action="mentes.php" method="post">
<p>
<label for="n">Név (kötelező):</label><br>
<input type="text" id="n" name="nev" required>
</p>
<p>
<label for="e">E-mail (kötelező):</label><br>
<input type="email" id="e" name="email" required>
</p>
<p>
<label for="k">Kor (12 és 99 között):</label><br>
<input type="number" id="k" name="kor"
min="12" max="99">
</p>
<button type="submit">Küldés</button>
</form>
@ nélküli szöveget · (3) írj a korhoz 5-öt.
Mindháromnál a böngésző állít meg, saját nyelvű buborékkal — egy sor JavaScript nélkül.
| Attribútum | Mit ellenőriz? |
|---|---|
required | Kötelező kitölteni. Logikai attribútum — nincs értéke. |
min / max | Számnál és dátumnál a megengedett tartomány. |
minlength / maxlength | A szöveg hossza karakterben. |
pattern | Saját minta (reguláris kifejezés) — haladó téma. |
maga a type | email, url, number — a formátumot is ellenőrzi. |
Ez a kényelmet szolgálja, nem a védelmet. Az F12-vel bárki kiszedheti a
required attribútumot, vagy küldhet adatot az űrlap megkerülésével. Ezért egy
valódi alkalmazásban a szerver mindig újra ellenőriz mindent. A HTML-ellenőrzés
a normális felhasználót segíti — nem a rosszindulatút állítja meg.
A required önmagában nem látszik az űrlapon. Írd oda a
feliratba, hogy kötelező (csillaggal vagy szóval) — különben a látogató csak akkor tudja meg,
amikor már hibát kapott.
| Attribútum | Mit csinál? |
|---|---|
readonly | Nem szerkeszthető, de elküldődik. Például egy kiszámolt végösszeg. |
disabled | Nem szerkeszthető, halvány, és nem is küldődik el. Például egy még nem elérhető opció. |
autofocus | Betöltéskor ide ugrik a kurzor. Oldalanként csak egy mezőn! |
autocomplete | on / off, vagy pontos érték (email, tel) — segíti a böngésző automatikus kitöltését. |
step | Számnál a léptetés mértéke. step="0.5" vagy step="any". |
size | A mező szélessége karakterben. Inkább CSS-sel állítsd. |
A különbség egyetlen dolog: a readonly mező tartalma
elmegy a szerverhez, a disabled mezőé nem.
Ha az érték fontos, readonly kell.
Rakjuk össze, amit eddig tanultunk. Ez egy valósághű kapcsolatfelvételi űrlap — csak olyan elemekkel, amiket már ismersz.
<h2>Jelentkezés a tanfolyamra</h2>
<form action="jelentkezes.php" method="post">
<p>
<label for="nev">Teljes név *</label><br>
<input type="text" id="nev" name="nev"
placeholder="Kovács Anna" required>
</p>
<p>
<label for="email">E-mail cím *</label><br>
<input type="email" id="email" name="email"
placeholder="anna@example.com" required>
</p>
<p>
<label for="tel">Telefonszám</label><br>
<input type="tel" id="tel" name="telefon"
placeholder="+36 30 123 4567">
</p>
<p>
<label for="szul">Születési dátum *</label><br>
<input type="date" id="szul" name="szuletes"
required>
</p>
<p>
<label for="letszam">Hány főre? *</label><br>
<input type="number" id="letszam" name="letszam"
value="1" min="1" max="5" required>
</p>
<p><small>A * -gal jelölt mezők kötelezők.</small></p>
<button type="submit">Jelentkezem</button>
</form>
name=érték párt, amit egy
valódi szerver megkapna. Figyeld meg a mintát: minden mezőnél
label + id + name +
megfelelő type — ez a négy dolog mindig együtt jár.
Az űrlap jelenleg csupasz: egymás alatt sorakozó mezők. A 17. leckétől (dobozmodell) és a 20. leckétől (Flexbox) megtanulod szépen elrendezni. Most a szerkezet a fontos: ha az jó, a megjelenés már csak stíluskérdés.
| Hiba | Mi történik, és mi a megoldás? |
|---|---|
Hiányzó name |
A mező tartalma nem küldődik el, és semmi nem jelzi. Minden mezőnek adj nevet. |
A for a name attribútumra mutat |
A for az id attribútumhoz kapcsolódik, nem a name attribútumhoz. Ha eltér a kettő, a label nem működik. |
Ugyanaz az id több mezőn |
A label csak az elsőre kapcsolódik. Az id oldalanként egyedi. |
placeholder label helyett |
Gépelés közben eltűnik a felirat. Legyen label is. |
Jelszó method="get"-tel |
A jelszó bekerül a címsorba és az előzményekbe. Mindig POST. |
disabled a readonly helyett |
A disabled mező tartalma nem megy el a szerverhez. |
A mezők nincsenek <form>-on belül |
Megjelennek, de elküldeni nem lehet őket. A form a keret. |
Egymásba ágyazott <form> |
Érvénytelen. Egy űrlap nem tehető egy másikba. |
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. A felhasználó kitölti a mezőt, elküldi az űrlapot, de az adat nem érkezik meg a szerverre. A mező látszik, gépelni lehet bele. Mi a legvalószínűbb ok?
Hiányzik a name attribútum. Ilyenkor a böngésző egyszerűen kihagyja a mezőt a küldésből — és nem jelez semmit.
2. Mi a különbség az id és a name között egy mezőn?
A name a szervernek szól: ez alatt a néven érkezik meg az adat. Az id az oldalon belüli azonosító: ehhez kapcsolódik a label for, és ezzel céloz meg a CSS is. Gyakran ugyanaz a két érték, de a szerepük különböző.
3. Bejelentkezési űrlapot készítesz. GET vagy POST, és miért?
POST. GET esetén a jelszó bekerülne a címsorba, onnan pedig a böngésző előzményeibe és a szerver naplóiba. (És ettől függetlenül HTTPS is kell — a POST önmagában nem titkosítás.)
4. Miért nem elég a placeholder felirat gyanánt?
Mert eltűnik, amint gépelni kezdenek — pont akkor, amikor ellenőrizni kellene, mit is kér a mező. Ezen kívül halvány (rossz kontraszt), nem kattintható, és a képernyőolvasók eltérően kezelik. A label mondja meg, mi a mező; a placeholder legfeljebb formátumpéldát ad.
5. Egy mező értékét látni szeretnéd, szerkeszteni nem, de el kell küldeni. readonly vagy disabled?
readonly. A disabled mező tartalma nem kerül elküldésre.
6. Kitetted a required attribútumot minden fontos mezőre. Elég ez ahhoz, hogy a szerverre biztosan jó adat érkezzen?
Nem. A böngésző ellenőrzése kényelmi funkció: F12-vel kiszedhető, vagy meg lehet kerülni az űrlapot. Egy valódi alkalmazásban a szerver minden adatot újra ellenőriz.
7. Miért jobb type="number", mint type="text" egy életkormezőnél?
Mert a böngésző ellenőrzi, hogy tényleg szám-e, megadható hozzá min és max, léptetőnyilakat kapsz — telefonon pedig számbillentyűzet jelenik meg a teljes ábécé helyett.
8. Elgépeled: type="emial". Mi történik?
Semmi látványos: sima szövegmező lesz belőle, hibaüzenet nélkül. Csak az e-mail-ellenőrzés és a kényelmi funkciók maradnak el — ezért csalóka ez a hiba.
<form action="..." method="..."> — hova és hogyan menjen az adat.https:// adja.name nélkül a mező nem küldődik el.name = a szervernek · id = az oldalon belül (label, CSS).<label for="...">, ami a mező id attribútumára mutat.type nem csak kinézet: ellenőrzést és telefonos billentyűzetet is hoz. Ismeretlen típusból szövegmező lesz.placeholder nem label — formátumpéldát ad, nem feliratot.required, min/max, maxlength: ingyen ellenőrzés a böngészőtől — de ez nem biztonság.readonly elküldődik, disabled nem.