HTML alapok › 7. modul: Űrlapok › Gyorsítópálya
🚀 HTML alapok · 7. modul · Gyorsítópálya
Űrlapok – gyorsítópálya
A 7. modul teljes tudása egyetlen leckében: űrlap, címkék, mezőtípusok, többsoros szöveg, lenyíló lista és gombok. Ha valahol elakadsz, a részletes leckék egy kattintásra vannak.
Mikor válaszd?
- ha gyorsan haladsz, és egy órában szeretnéd átvenni a modult;
- ha ismételsz, például dolgozat előtt;
- ha érettségire készülsz, és egy tömör áttekintés kell.
Részletesen
7.1 Űrlapok alapjai →
7.2 Az input mezőtípusai →
7.3 textarea és select →
7.4 A gomb →
Puska
| Elem, attribútum | Lényeg |
|---|---|
form + action, method | Hová és hogyan küld. GET: a webcímben (keresés); POST: a kérésben (jelszó, személyes adat). |
label for + id | Kattintható, felolvasható címke. A helyőrző nem címke! |
name, value | Az elküldött név=érték pár. Name nélkül a mező nem megy el. |
input type | text, email, password, number, tel, date, color, range, checkbox, radio, file. |
fieldset + legend | Összetartozó mezők csoportja; választógombok azonos name-mel. |
required, min, max, maxlength, autocomplete | Beépített ellenőrzés és kitöltési segítség. A szerveren is ellenőrizni kell! |
textarea, select + option | Többsoros szöveg; lenyíló lista (üres első opció + required). |
button type | submit (alapértelmezés az űrlapban), reset, button. Link, ha máshova visz; gomb, ha csinál valamit. |
Villámkérdések
Előbb gondold végig a választ, csak utána nyisd ki!
Mi kerül a webcímbe GET esetén, ha a mező neve becenev és a tartalma Anna?
?becenev=Anna
Milyen típusú mező kell a telefonszámhoz?
tel (nem number).
Mitől lesznek egy csoport a választógombok?
Azonos name-től.
Hová kerül a textarea kezdő szövege?
A nyitó és a záró címke közé.
Mit csinál egy type nélküli gomb az űrlapban?
Elküldi az űrlapot (submit).
Gyorsfeladatok
Mezőválasztó
Melyik mező kell? a) jelszó; b) születési év; c) póló mérete (S, M, L, XL); d) melyik napokon érsz rá (több is lehet); e) megjegyzés.
Megoldás
a) password; b) number min és max értékkel; c) választógombok (4 lehetőség) vagy select; d) jelölőnégyzetek; e) textarea.
Adatdiéta
Egy online kvíz regisztrációja ezeket kéri: becenév, e-mail, lakcím, születési dátum, iskola, telefonszám. Mi hagyható el?
Egy lehetséges megoldás
Egy kvízhez a becenév és (ha értesítés kell) az e-mail elég. A lakcím, a születési dátum, az iskola és a telefonszám elhagyható (adattakarékosság, GDPR).
Vegyes hibavadászat
A
<input id="email" type="email">
Mi a baj?
Nincs name, így nem megy el; és címke sincs hozzá.
B
<form method="get"> … jelszó …
Mi a baj?
A jelszó a webcímbe kerülne: POST kell.
C
<form> … <button>Súgó</button>
Mi a baj?
Type nélkül elküldi az űrlapot: type="button" kell.
D
<textarea value="…"></textarea>
Mi a baj?
A textarea-nak nincs value attribútuma; a szöveg a címkék közé kerül.
Záróprojekt: jelentkezés az iskolai e-sport-bajnokságra
Készíts egy jelentkezes.html oldalt egy (kitalált) iskolai e-sport-bajnokság jelentkezési lapjával.
- Csapatnév (kötelező, 3–20 karakter), kapitány e-mail-címe (email, autocomplete).
- Játék kiválasztása selecttel (üres első opció, optgroup a műfajoknak).
- Csapatlétszám number mezővel (min 3, max 5), időpontok jelölőnégyzetekkel fieldsetben.
- Megjegyzés textarea-ban (maxlength), és egy jelölőnégyzet: „Elfogadom a versenyszabályzatot” (required).
- POST módszer, igével kezdődő „Jelentkezünk!” submit gomb, és csak annyi adat, amennyi kell.
Kész vagy, ha…
…a W3C validátor nem talál hibát, minden mező címkézett, billentyűzettel kitölthető, hiányos adatokkal nem küldhető el, és egy társad szerint sincs benne fölösleges személyes adat.
Tudom, hogy…
Pipáld ki gondolatban! Ahol bizonytalan vagy, ott a zárójelben lévő lecke segít.
- …mire való a form, az action, a method, a name és a label. (7.1)
- …mi a GET és a POST különbsége, és mit jelent az adattakarékosság. (7.1)
- …melyik input-típus milyen adathoz illik, és hogyan működik a beépített ellenőrzés. (7.2)
- …hogyan készül többsoros szövegmező és lenyíló lista. (7.3)
- …milyen gombtípusok vannak, és mikor kell gomb, mikor link. (7.4)
Tanároknak
Mire jó a gyorsítópálya?
Differenciálásra, ismétlésre, dolgozat előtti összefoglalásra és érettségi-felkészítésre. A jelentkezési lap a modul minden elemét egy, a diákokat érdeklő helyzetben kéri, és az adattakarékosság szempontját is értékeli.
Időterv (45 perc)
Puska és villámkérdések: 12 perc. Gyorsfeladatok: 12 perc. Hibavadászat: 6 perc. Záróprojekt elkezdése: 15 perc.
Értékelés
A „Tudom, hogy…” lista önértékelésre, a jelentkezési lap a validátor, a billentyűzetes kitöltés és a „Kész vagy, ha…” szempontjai szerint, akár társértékeléssel.