12. Ûrlapok

Az ûrlap segítségével adatokat továbbíthatunk. Az ûrlap kitöltése önmagában nem elegendõ, az adott szerveren egy programnak (többnyire cgi-script -nek) kell kezelnie a kitöltött ûrlapot. Ezen ok miatt itt csak arról lesz szó, hogy hogyan lehet kitölteni egy ûrlapot, használni valaki csak akkor tudja, ha gépének rendszergazdájával konzultál.

Az ûrlapot a <form> és a </form> TAG-ek közé tesszük. Elsõként tisztáznunk kell a módszert - ez a method paraméter ( method = módszer) - ahogy a szerver kezeli az ûrlapot. A módszereknél a leggyakoribb forma a post ( post = postázás), az action paraméter ( action = akció) azt a programot jelzi, amelyik az ûrlapot fogja feldolgozi. A probléma az szokott lenni, hogy ilyen programok elhelyezésére legtöbb helyen csak a rendszergazda jogosult. Ezen két szerverspecifikus dologgal bõvebben nem foglalkozunk, helyette sorra vesszük a szerverfüggetlen lehetõségeket. Az ûrlapunknak nevet is tudunk adni a name paraméterrel ( name = név).

Adatbeviteli mezõk, nyomógombok:
Elõször is kezdjük a legegyszerûbbel: az adatbeviteli mezõvel. A minden ilyen ûrlapot alkotó elem TAG-je mindig a a <form> és </form> TAG-ek közé kerül, így alkotva egy egységes ûrlapot. Az adatbeviteli mezõnél a következõ TAG-et kell beírnunk: <input> ( input = bemenet). A mezõnek megadhatjuk a nevét, a name paraméterrel, és a hosszát a size paraméterrel ( name = név; size = méret). A méretnél számokat írunk be értéknek, mellyel azt jelezzük, hogy hány karakternyi helyet foglal el a beviteli mezõ. A beviteli mezõ - mint ahogy azt megszokhattuk az interneten való regisztrációkkor, bejelentkezésekkor - két féle lehet, lehet olyan, amibe szöveget íunk, és olyan amibe a jelszót szoktuk írni (itt a begépelt szöveg betûi helyett * karakterek jelennek meg a beviteli mezõben). Erre a funkcióra szolgál a type nevû paraméter ( type = tipus). Értéke hatféle lehet, ezekbõl kettõ: a text és a password ( text = szöveg; password = jelszó).

Az <input> TAG-et nem csak beviteli mezõ létrehozására használjuk, hanem ha a type paramétert pl. submit -re állítjuk ( submit = benyújt), akkor ez létrehozza az ûrlap elküldéséhez szükséges nyomógombot. A gomb feliratát a value paraméterrel állíthatjuk be ( value = érték). Ha a type értéke reset ( reset = visszaállít), akkor az is egy nyomógombot hoz létre, viszont ennek az a funkciója, hogy az összes ûrlapon kitöltött/kitöltetlen mezõt visszaállítja alapértelmezetbe.

A value paramétert az adatbeviteli mezõben is használhatjuk. Ha valamilyen szöveget állítunk be, akkor abban az adatbeviteli mezõben meg fog jelenni az általunk beírt szöveg, mint alapértelmezett. Tehát, ha használjuk a reset gomb funkcióját, akkor a törlés ennek a szövegnek a kiirását is eredményezi az adott mezõben.

Be tudjuk állítani azt is, hogy mennyi karaktert engedünk meg egy adatbeviteli mezõben. Erre használjuk a maxlength paramétert ( maxlength = maximal length = legnagyobb hossz).

<form name="urlap1" method="post" action="">
Neved: <input type="text" name="szmezo" size="10" maxlength="25"><br>
Jelszód:<input type="password" name="jmezo" size="8" maxlength="15"><br>
Születési éved :<input type="text" name="szev" size="4" value="19" maxlength="4"><br>
<input type="submit" value="Elküld">
<input type="reset" value="Töröl">
</form>

"Választó"-listák:
Még mindig az <input> TAG segítségével hozzuk létre az ilyen listákat. Az elõbb már volt említve a type paraméter négy fajta értéke. Most lesz tárgyalva a még megmaradt két érték. Tehát két fajta választási listáról beszélhetünk: az egyik az amikor csak egy választási lehetõségünk van, a másik amikor többet is kiválaszthatunk a listából. Kezdjük azzal a választási listával, amelyiknél többet is kiválaszthatunk. Ilyenkor a type paraméternek a checkbox értéket adjuk ( checkbox = jelölõnégyzet). Ha azt szeretnénk, hogy a kis négyzet, ami ilyenkor megjelenik már elõre kipipálva legyen akkor a checked paramétert is be kell írnunk ( checked = kijelõlve). Ha az elküldõrendszer mükõdik, akkor ilyenkor a TAG name és a value paraméterek értékét küldi el. Nézzük a következõ példát:

<form name="urlap2" method="post" action="">
<p> Milyen programozási nyelvet tanultál ? </p>
<p><input type="checkbox" name="Pascal" value="tanult"> Pascal -t </p>
<p><input type="checkbox" name="C++" value="tanult"> C++ -t </p>
<p><input type="checkbox" name="PHP" value="tanult"> PHP -t </p>
<p><input type="checkbox" name="Egyeb" value="tanult" checked> Egyebet </p>
<input type="submit" value="Elküld">
<input type="reset" value="Töröl">
</form>

Az elküldés irányító program csak azokat az adatokat fogja elküldeni, amelyeket kiválasztottunk. Így ha kiválasztjuk pl. az elsõt és a másodikat, akkor a küldõprogram ezt fogja elküldeni: Pascal=tanult C++=tanult.

A második fajta választási lista az, amelyiknél több választási lehetõség közül csak egyet tudunk kiválasztani. Ilyenkor a type paraméter értéke radio lesz ( radio = rádió). Ilyenkor egy kis kör jelenik meg, amelyet ha kiválasztunk egy pötty tölt ki. Ha ilyen listát készítünk, fontos, hogy az egy témakörbe tartozó lehetõségetnek ugyanaz legyen a name paraméter értékük. Itt is alkalmazható a checked paraméter, amely ugyanolyan funkcióval bír, mint az elõbbi listafajtánál.

<form name="urlap2" method="post" action="">
<p> Hol forgatták A Gyûrûk Ura címû filmet? </p>
<p><input type="radio" name="film" value="rossz"> Írországban </p>
<p><input type="radio" name="film" value="jo"> Új-Zélandon </p>
<p><input type="radio" name="film" value="rossz"> Izlandon </p>

<p> Ki írta A Gyûrûk Ura címû könyvet? </p>
<p><input type="radio" name="konyv" value="rossz"> Göncz Árpád</p>
<p><input type="radio" name="konyv" value="rossz"> J.K. Rowling </p>
<p><input type="radio" name="konyv" value="jo"> J.R.R. Tolkien </p>
<input type="submit" value="Elküld">
<input type="reset" value="Töröl">
</form>

Szövegdoboz:
Ha nagyobb szöveget szeretnénk bevinni, akkor az <input> TAG helyett a <textarea> </textarea> TAG-párt kell használnuk, itt is megadhatjuk a szövegdoboz nevét, a name paraméterrel. Tisztáznunk kell a szövegdoboz méretét. Eszerint meg kell határoznunk hogy a szövegdoboz hány sornyi ill hány oszlopnyi helyet foglal el. A sorok számát a rows nevû paraméterrel, az oszlopokét a cols -al adjuk meg ( rows = sorok; cols = columns = oszlopok). Amit a záró TAG elé írunk, az meg fog jelenni a szövegdobozban.

<form name="urlap3" method="post" action="">
Ez itt egy szövegdoboz: <textarea name="szdoboz" cols="28" rows="6"> Ez már a szövegdobozba kerül </textarea>
</form>

Listák:
Létre tudunk hozni ilyen listát, ha a <select> </select> TAG-párt használjuk ( select = kiválasztás). Ez a TAG-pár közé helyezzük el a lista elemeket külön-külön. Erre használjuk az <option> TAG-et, mögéje írjuk a listában szereplõ elemet. Elõre maghatározhatjuk, hogy az opciók közül melyik jelenjen meg a képernyõn alaphelyzetben (melyik legyen kiválasztva). Ha nem írunk be semmit, akkor az elsõ fog megjelenni. Amelyiket szeretnénk, hogy a kiválasztott legyen, annak a TAG-jének paramétereként beírjuk a selected -et ( selected = kiválasztott). Ha nem írunk be semmilyen méretet sem, akkor a lista úgy fog megjelenni, mint egy legördülõ menü, de választhatunk méretet is a listának a size paraméterrel ( size = méret). Ha pl. a size értéke 2, akkor a listán két elemet láthatunk mindig, a többit a mellette levõ nyilakkal tekinthetjük meg, ill választhatjuk ki. Ha azt szeretnénk, hoogy a listában több elemet is ki lehessen választani, akkor a <select> TAG - be be kell írni a multiple paramétert ( multiple = többszörös). A többszörös választást úgy érhetjük el, ha az egeret az egyik elemnél lenyomjuk, és a listában le- vagy fel mozogva rajtahagyjuk majd elengedjük az egér bal gombját.Esteleg, ha nem egymásmelleti elemeket szeretnénk kiválasztani, akkor a CTRL billentyût lenyomva, kattintunk azokra az elemekre, amelyeket ki szeretnénk választani.

<form name="urlap4" method="post" action=""> Ez egy lista: <select name="lista"> <option> Elsõ elem <option> 2. elem <option selected> 3. elem <option> 4. elem</selection> </form>		Ez egy lista:
<form name="urlap5" method="post" action=""> Ez egy lista: <select name="lista" multiple size="2"> <option> Elsõ elem <option> 2. elem <option selected> 3. elem <option> 4. elem</selection> </form>		Ez egy lista:

Nyomtatás: