2. modul · HTML alapok · 10. lecke
Az előző leckében egysoros mezőket használtunk. Most jön a többi: hosszú szöveg, legördülő lista, jelölőnégyzet, rádiógomb és gombok. Itt van az űrlapok egyetlen igazán trükkös szabálya is — a rádiógombok csoportosítása.
textarea-val.name köti csoportba a rádiógombokat.value attribútumot minden választható elemnek.fieldset-tel.
Ha a látogatónak hosszabb szöveget kell írnia — üzenet, megjegyzés, bemutatkozás —, akkor a
<textarea> kell. Két dologban tér el az
<input>-tól:
| Eltérés | Mit jelent? |
|---|---|
| Van záró tagja | Nem üres elem: <textarea>...</textarea> |
Nincs value attribútuma | A kezdőérték a nyitó és záró tag közé kerül. |
<form action="uzenet.php" method="post">
<p>
<label for="uz">Üzeneted:</label><br>
<textarea id="uz" name="uzenet"
rows="5" cols="34"
placeholder="Írd le, miben segíthetünk…"></textarea>
</p>
<button type="submit">Küldés</button>
</form>
rows a látható sorok száma, a cols a
szélesség karakterben. A jobb alsó sarokban van egy fogantyú: a látogató
átméretezheti a mezőt. Ez alapértelmezett viselkedés, CSS-sel kikapcsolható.
A textarea mindent megőriz, ami a két tag között van —
a szóközöket és a sortöréseket is. Ezért ez a két írásmód nem ugyanaz:
<textarea name="uz"></textarea>
<textarea name="uz"> </textarea>
A jobb oldali mező nem üres: egy sortörés már van benne. A záró tagot írd közvetlenül a nyitó után, ha üres mezőt akarsz.
Ha kezdőértéket akarsz, egyszerűen írd a tagek közé:
<textarea name="uz">Kedves Anna!</textarea>.
A value attribútum itt nem működik.
A <select> a keret, a benne lévő
<option> elemek a választható lehetőségek.
<form action="rendeles.php" method="post">
<p>
<label for="meret">Méret:</label>
<select id="meret" name="meret">
<option value="">-- válassz --</option>
<option value="s">Small (S)</option>
<option value="m">Medium (M)</option>
<option value="l" selected>Large (L)</option>
<option value="xl">Extra large (XL)</option>
</select>
</p>
<button type="submit">Küldés</button>
</form>
selected.
Küldd el, és nézd meg: a szerver meret=l-t kap — nem azt, ami
a képernyőn látszik.
Az <option>-nek két oldala van:
value attribútum → ez megy a szerverre (rövid, gépi: l)Large (L))
Akkor a böngésző a látható szöveget küldi el. Ez működik, de törékeny: ha
átfogalmazod a feliratot („Nagy méret"), megváltozik az elküldött adat is, és a szerveroldali
kód elromlik. Mindig adj value attribútumot.
A <option value="">-- válassz --</option> trükk:
ha nem tennéd oda, a lista az első valódi elemmel indulna, és a látogató
véletlenül azt küldhetné el anélkül, hogy döntött volna. Ha a select-en
required is van, az üres értékű elem kiválasztása hibának számít —
vagyis tényleg választania kell.
Hosszú listát <optgroup>-pal tagolhatsz, a
multiple attribútummal pedig több elem is választhatóvá válik.
<form action="mentes.php" method="post">
<p>
<label for="v">Város:</label>
<select id="v" name="varos">
<optgroup label="Magyarország">
<option value="bp">Budapest</option>
<option value="szg">Szeged</option>
</optgroup>
<optgroup label="Ausztria">
<option value="wien">Bécs</option>
<option value="graz">Graz</option>
</optgroup>
</select>
</p>
<p>
<label for="ny">Nyelvek (több is):</label><br>
<select id="ny" name="nyelvek" multiple size="4">
<option value="en">angol</option>
<option value="de">német</option>
<option value="fr">francia</option>
<option value="es">spanyol</option>
</select>
</p>
<button type="submit">Küldés</button>
</form>
optgroup felirata nem választható — csak
csoportcímke. A többszörös listában Ctrl+kattintással jelölhetsz ki többet;
elküldve mindegyik kiválasztott érték külön nyelvek= párként megy el.
A Ctrl+kattintás sok felhasználónak nem magától értetődő, érintőképernyőn pedig kifejezetten nehézkes. Ha többet is választhatnak, gyakran jobb megoldás néhány jelölőnégyzet — az következik.
A type="checkbox" egy be- és kikapcsolható négyzet.
Minden jelölőnégyzet önálló: egymástól függetlenül állítható.
<form action="mentes.php" method="post">
<p>Milyen feltétet kérsz?</p>
<p>
<input type="checkbox" id="s" name="feltet"
value="sajt">
<label for="s">Extra sajt</label>
</p>
<p>
<input type="checkbox" id="g" name="feltet"
value="gomba" checked>
<label for="g">Gomba</label>
</p>
<p>
<input type="checkbox" id="h" name="feltet"
value="hagyma">
<label for="h">Hagyma</label>
</p>
<button type="submit">Küldés</button>
</form>
feltet= párként megy el. A be nem jelöltek
egyáltalán nem szerepelnek az adatban — nem „üresen" mennek el, hanem sehogy.
Szövegmezőnél a value a beírt szöveg. Jelölőnégyzetnél viszont
nincs mit beírni — csak be van pipálva vagy nincs. Ezért neked kell megadnod,
mit jelentsen a bepipált állapot.
Ha lehagyod, a böngésző az on szót küldi el — vagyis
feltet=on, amiből a szerver nem tudja, melyikre gondoltál.
<form action="mentes.php" method="post">
<p>
<input type="checkbox" id="a" name="hirlevel"
value="igen">
<label for="a">Van value attribútuma</label>
</p>
<p>
<input type="checkbox" id="b" name="ertesites">
<label for="b">Nincs value attribútuma</label>
</p>
<button type="submit">Küldés</button>
</form>
hirlevel=igen&ertesites=on. Az
on a böngésző tartaléka — működik, de semmit nem mond. Írj mindig
beszédes value attribútumot.
Igen/nem jellegű döntéshez: „Elfogadom az adatvédelmi tájékoztatót",
„Feliratkozom a hírlevélre". Ilyenkor egyetlen négyzet van, saját
name attribútummal. Ha az elfogadás kötelező, tedd rá a
required attribútumot.
A rádiógomb akkor kell, ha több lehetőség közül pontosan egyet szabad választani. A neve a régi rádiók gombsorából jön: ha egyet benyomsz, a többi kiugrik.
Az azonos name köti egy csoportba a rádiógombokat.
Nem az, hogy egymás mellett vannak, nem az, hogy közös dobozban — hanem kizárólag a
name. Ha két rádiógombnak ugyanaz a name attribútuma,
egyszerre csak az egyik lehet kiválasztva.
<form action="mentes.php" method="post">
<p><strong>Tészta:</strong></p>
<p>
<input type="radio" id="v" name="teszta"
value="vekony" checked>
<label for="v">Vékony</label>
</p>
<p>
<input type="radio" id="vs" name="teszta"
value="vastag">
<label for="vs">Vastag</label>
</p>
<p><strong>Méret:</strong></p>
<p>
<input type="radio" id="k" name="meret"
value="kicsi">
<label for="k">Kicsi</label>
</p>
<p>
<input type="radio" id="n" name="meret"
value="nagy">
<label for="n">Nagy</label>
</p>
<button type="submit">Küldés</button>
</form>
name
érték (teszta és meret) dönti el.
<form action="mentes.php" method="post">
<p>Mindhárom KÜLÖN nevet kapott:</p>
<p>
<input type="radio" id="a" name="valasz1"
value="a">
<label for="a">A válasz</label>
</p>
<p>
<input type="radio" id="b" name="valasz2"
value="b">
<label for="b">B válasz</label>
</p>
<p>
<input type="radio" id="c" name="valasz3"
value="c">
<label for="c">C válasz</label>
</p>
<button type="submit">Küldés</button>
</form>
name értékek.
Ha egyszer választott, a látogató nem tud visszatérni a „semmi sincs kiválasztva"
állapotba — csak másikra válthat. Ezért vagy adj egy checked
alapértelmezést, vagy tegyél be egy „Nem kívánok válaszolni" lehetőséget.
Ugyanaz a helyzet, mint a jelölőnégyzetnél: value nélkül a kiválasztott
gomb on értékkel megy el, és a szerver nem tudja, melyiket választották.
| checkbox | radio | |
|---|---|---|
| Hány választható? | Akárhány — akár egy sem | Pontosan egy a csoportból |
| Kikapcsolható? | Igen, újra rákattintva | Nem, csak másikra váltható |
A name szerepe |
Lehet azonos (akkor több érték megy el ugyanazon a néven) vagy külön | Kötelezően azonos egy csoporton belül |
| Példa | Feltétek, érdeklődési körök, feltételek elfogadása | Nem, fizetési mód, méret, igen/nem kérdés |
„Választhat többet is?" Igen → jelölőnégyzet. Nem, pontosan egyet →
rádiógomb. Ha sok (mondjuk ötnél több) lehetőség van és csak egy választható, akkor pedig
inkább select — kevesebb helyet foglal.
Az űrlapot el kell tudni küldeni. Erre a <button> elem való, ami
három különböző dolgot csinálhat a type attribútumtól függően.
<form action="mentes.php" method="post">
<p>
<label for="n">Név:</label>
<input type="text" id="n" name="nev"
value="Kovács Anna">
</p>
<button type="submit">Küldés</button>
<button type="reset">Alaphelyzet</button>
<button type="button">Nem csinál semmit</button>
</form>
| type | Mit csinál? |
|---|---|
submit | Elküldi az űrlapot. Ez az alapértelmezés a form-on belül. |
reset | Visszaállítja az összes mezőt a kezdőértékére. |
button | Semmit — JavaScript kapcsolódik hozzá. |
Jó ötletnek tűnik, de a gyakorlatban ártalmas: a Küldés mellett van, hasonlóan néz ki, és aki véletlenül rányom, annak eltűnik minden addig beírt adata — figyelmeztetés és visszavonás nélkül. Szinte soha nincs rá valódi igény.
Mindkettő elküldi az űrlapot, de nem egyformán kényelmesek:
<button type="submit"> Küldés </button>
<input type="submit"
value="Küldés">
A <button>-nek van tartalma, ezért tehetsz bele
képet, ikont, több elemet — és a felirat sem attribútumban lóg. Az
<input type="submit"> üres elem, a felirata csak a
value lehet.
Ha a <button> nem űrlapban van, mindig írd ki a
type="button"-t. Űrlapon belül ugyanis a
submit az alapértelmezés — egy „Bezár" feliratú gomb
véletlenül elküldheti az egész űrlapot.
Hosszabb űrlapot érdemes szakaszokra bontani. Erre való a
<fieldset>, aminek a címét a
<legend> adja meg.
<form action="mentes.php" method="post">
<fieldset>
<legend>Személyes adatok</legend>
<p>
<label for="n">Név:</label>
<input type="text" id="n" name="nev">
</p>
<p>
<label for="e">E-mail:</label>
<input type="email" id="e" name="email">
</p>
</fieldset>
<fieldset>
<legend>Kapcsolattartás módja</legend>
<p>
<input type="radio" id="m1" name="mod"
value="email" checked>
<label for="m1">E-mailben</label>
</p>
<p>
<input type="radio" id="m2" name="mod"
value="telefon">
<label for="m2">Telefonon</label>
</p>
</fieldset>
<button type="submit">Küldés</button>
</form>
legend
pedig beleül a keret vonalába. Ez az alapértelmezett megjelenés — CSS-sel teljesen átalakítható.
Egy rádiógomb-csoportnál minden gombnak van saját label felirata („E-mailben",
„Telefonon"), de magának a kérdésnek nincs hova kerülnie. A
legend pontosan ezt a szerepet tölti be: a képernyőolvasó a csoport
címét is bemondja, így a felhasználó tudja, mire válaszol.
Most már minden építőkövet ismersz. Íme egy valósághű rendelési űrlap — ez felel meg annak a szintnek, amit a 3. gyakorlófeladatban is elvárunk majd.
<h2>Pizzarendelés</h2>
<form action="rendeles.php" method="post">
<fieldset>
<legend>Kapcsolat</legend>
<p>
<label for="nev">Név *</label><br>
<input type="text" id="nev" name="nev" required>
</p>
<p>
<label for="tel">Telefon *</label><br>
<input type="tel" id="tel" name="telefon"
placeholder="+36 30 123 4567" required>
</p>
</fieldset>
<fieldset>
<legend>A pizza</legend>
<p>
<label for="fajta">Fajta *</label>
<select id="fajta" name="fajta" required>
<option value="">-- válassz --</option>
<option value="margherita">Margherita</option>
<option value="sonkas">Sonkás</option>
<option value="negysajtos">Négysajtos</option>
</select>
</p>
<p><strong>Méret:</strong></p>
<p>
<input type="radio" id="m1" name="meret"
value="26" checked>
<label for="m1">26 cm</label>
<input type="radio" id="m2" name="meret"
value="32">
<label for="m2">32 cm</label>
</p>
<p><strong>Extra feltét:</strong></p>
<p>
<input type="checkbox" id="f1" name="extra"
value="sajt">
<label for="f1">Extra sajt</label>
<input type="checkbox" id="f2" name="extra"
value="gomba">
<label for="f2">Gomba</label>
</p>
<p>
<label for="db">Darab *</label>
<input type="number" id="db" name="darab"
value="1" min="1" max="10" required>
</p>
</fieldset>
<p>
<label for="megj">Megjegyzés</label><br>
<textarea id="megj" name="megjegyzes"
rows="3" cols="34"></textarea>
</p>
<p>
<input type="checkbox" id="aszf" name="aszf"
value="elfogadva" required>
<label for="aszf">Elfogadom a feltételeket *</label>
</p>
<button type="submit">Megrendelem</button>
</form>
név=érték párt.
Próbáld ki üresen is: a required mezőknél (a feltételek elfogadását
is beleértve) a böngésző megállít.
| Hiba | Mi történik, és mi a megoldás? |
|---|---|
Rádiógomboknak külön name |
Mind bejelölhető, és egyik sem kapcsolható ki. Egy csoport = egy name. |
Checkbox/radio value nélkül |
A böngésző az on értéket küldi, amiből nem derül ki, melyikről van szó. |
<option> value nélkül |
A látható szöveg megy el. Ha átfogalmazod a feliratot, elromlik a szerveroldali kód. |
<textarea value="..."> |
Nem működik. A kezdőérték a nyitó és a záró tag közé kerül. |
Sortörés a textarea tagjei között |
A mező nem üresen indul. Írd a záró tagot közvetlenül a nyitó után. |
Nincs <option value=""> a lista elején |
Az első elem „választásnak" számít, pedig a látogató nem döntött. |
<button> type nélkül űrlapban |
Elküldi az űrlapot, akkor is, ha nem ez volt a szándék. Írd ki: type="button". |
| Reset gomb a Küldés mellett | Véletlen kattintásra eltűnik minden beírt adat. Ne tegyél reset gombot az űrlapra. |
Hiányzó label a jelölőnégyzeteknél |
Csak a pici négyzetre lehet kattintani. Labellel a felirat is kattintható. |
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Négy rádiógombot készítettél, de mind a négy egyszerre bejelölhető. Mi a hiba?
Nem ugyanaz a name attribútumuk. A rádiógombokat kizárólag az azonos name köti egy csoportba — nem az, hogy egymás mellett vannak.
2. Mi megy el a szerverre ebből: <input type="checkbox" name="hirlevel">, ha be van pipálva?
hirlevel=on — az on a böngésző tartaléka value hiányában. Ha nincs bepipálva, semmi nem megy el ezen a néven. Helyesen: value="igen".
3. Mi a különbség az <option> value attribútuma és a látható szövege között?
A value megy el a szerverre (rövid, gépi: l), a tagek közti szöveget látja a látogató (emberi: Large (L)). Ha nincs value, a látható szöveg megy el.
4. Előre ki szeretnél tölteni egy textarea-t. Hogyan?
A szöveget a nyitó és a záró tag közé írod: <textarea name="uz">Kedves Anna!</textarea>. A value attribútum a textarea-nál nem működik.
5. „Hány főre foglalsz?" — 1-től 8-ig. Rádiógomb, jelölőnégyzet vagy legördülő lista?
Pontosan egy értéket lehet választani, tehát nem jelölőnégyzet. Nyolc lehetőség már sok nyolc rádiógombnak, ezért legördülő lista a jobb — vagy még egyszerűbben egy type="number" mező min="1" max="8"-cal.
6. Egy <button>-t teszel az űrlapba type nélkül, „Súgó" felirattal. Mi történik, ha rákattintanak?
Elküldi az űrlapot — űrlapon belül a submit az alapértelmezett típus. Ha nem ezt akarod, írd ki: type="button".
7. Miért érdemes fieldset+legend egy rádiógomb-csoport köré?
Mert az egyes gomboknak van feliratuk, de magának a kérdésnek nincs hova kerülnie. A legend adja meg a csoport címét, amit a képernyőolvasó is bemond — így derül ki, hogy mire vonatkozik a választás.
8. Miért ne tegyél „Alaphelyzet" gombot az űrlapra?
Mert a Küldés mellett áll, hasonlóan néz ki, és véletlen kattintásra figyelmeztetés nélkül törli az összes beírt adatot. Valódi igény szinte soha nincs rá.
<textarea>: több soros szöveg. Van záró tagja, és a kezdőérték a tagek közé kerül — nem a value attribútumba.textarea mindent megőriz a tagek között: üres mezőhöz írd őket egymás mellé.<select> + <option>: legördülő lista. A value megy a szerverre, a szöveg látszik.<option value="">-- válassz --</option> elemet.<optgroup> csoportosít, a multiple több választást enged — de kényelmetlen, gyakran jobbak a jelölőnégyzetek.name köti csoportba a rádiógombokat — ez a lecke legfontosabb szabálya.value kötelező, különben on megy el.submit (küld), reset (ne használd), button (JS-hez). Űrlapban a submit az alapértelmezés.<fieldset> + <legend>: szakaszokra bontás — rádiógomb-csoportnál különösen fontos.