Űrlapok

Az űrlapok az interaktivitás egyik legfontosabb elemei, a kommunikációt segít(het)ik elő. Az űrlapok/kérdőívek összes eleme egy <FORM> elemen belül helyezkedik el, ahol az egyes gombokat vagy szövegmezőket más más elemekkel definiáljuk.
A <FORM> tag paraméterei:
ACTION= URL | Az űrlap elküldésekor végrehajtandó feladat, amelyet egy URL segítségével adhatunk meg. Az egyszerűbb eset az (és mi főleg ezzel fogunk foglalkozni), amikor az adott űrlap kitöltése után az eredményt egy e-mail címre továbbítjuk. Ekkor az URL a "mailto:valaki@valalhol" típusú lesz. A második esetben az adott űrlapot egy szerveren futó CGI program dolgozza fel. Ekkor az URL pl. "http://www.saturnus.hu/cgi-bin/feldolgoz.cgi"
METHOD= küldéstípus (elhagyható) | Ha az ACTION paraméterrel egy CGI programra hivatkozunk, akkor ezzel adhatjuk meg, hogy a megjelenítő milyen módon küldje át az adatokat a szervernek. (GET vagy POST)
ENCTYPE= kódolás típusa | Az elküldött adatok kódolási módszerét állíthatjuk be. Ez alapállapotban a application/x-www-form-urlencoded. (ekkor a kérdőív egyes mezőinek nevei és az értékei közé = jelet rak, a szóközöket lecseréli + jelekre, a speciális karaktereket %xx alakú jelekké konvertálja, ahol az xx az adott karakter hexadecimális ASCII kódja. (ez a kódolás a CGI programok által történő feldolgozást könnyíti meg.) Ha az adott űrlap tartalmát email-en keresztül küldjük el, akkor célszerű text/plain kódolást beállítani, és így olvasható marad a szöveg.
A következőkben nézzük sorban a vezérlőelemeket, amelyek az űrlapok interaktív részét fogják megjeleníteni, és a <FORM> </FORM> elemeken belül helyezkednek el. Az információ beviteli lehetőségeket az <INPUT> tag használatával érhetjük el. A TYPE paraméter segítségével határozzuk meg, hogy milyen űrlapelem-típust használunk.
<INPUT TYPE=TEXT> Paraméterei: Name= név Value= alapérték Size= méret Maxlength= hossz | Egy egyszerű szövegbekérő ablak, amelyek rövid szövegek fogadására alkalmas A Name paraméter a mező azonosítására szolgál, a beírt adatok ehhez a névhez kapcsolódnak a kérdőív elküldésekor. A Value tartalmazza azt az alapértéket, amely az első megjelenéskor a szövegbekérő ablakban lesz. A Size a mező karakterekben mért szélessége, a Maxlength pedig a beírható szöveg maximális hosszát adja meg.
Ahhoz, hogy a fentieket mindjárt ki is tudjuk próbálni beszélnünk kell arról, hogy hogyan tudjuk elküldeni a kitöltött űrlapot. Ehhez ismernünk kell a következő paramétert:
<INPUT TYPE=SUBMIT> | Ez az elem hozza létre az űrlap elküldéséhez szükséges nyomógombot. A gomb feliratát a value paraméterrel állíthatjuk be.
<INPUT TYPE=RESET> | Ez az elem abban lesz a segítségünkre, hogy létrehoz a fentiekhez hasonló nyomógombot, amelynek az a feladata, hogy az összes mező értékét az alapértékre állítsa vissza.
Nézzünk egy egyszerű példát:
<form action="mailto:valaki@valahol" enctype="text/plain"> <hr> <b>Mi a neved?</b> <p> Vezetéknév: <input type=text Name=vezeteknev size=40 maxlength=80></p> <p> Keresztnév: <input type=text Name=keresztnev size=25 maxlength=40></p> <input value="Adatok elküdése" type=submit> <input value="Törlés" type=reset> <hr> </form> |  | Mi a neved? Vezetéknév: Keresztnév:
Ekkor a fent definiált e-mail címre a következő tartalmú levél fog megérkezni. vezeteknev=Kiss keresztnev=Péter Most nézzük meg, hogy mi a hatása annak ha a value paramétert is alkalmazzuk! Egészítsük ki a fenti példát úgy, hogy azt is kérdezzük meg az olvasótól, hogy melyik egyetemre jár. (Itt feltehetjük, hogy a válaszok többsége az KLTE IK lesz, ezért ezt vesszük alapértéknek.)
<form action="mailto:valaki@valahol" enctype="text/plain"> <hr> <b>Mi a neved?</b> <p> Vezetéknév: <input type=text Name=vezeteknev size=40 maxlength=80></p> <p> Keresztnév: <input type=text Name=keresztnev size=25 maxlength=40></p> <p> Melyik egyetemre jársz? <input type=text Name=egyetem Value="KLTE IK" size=20 maxlength=30></p> <input value="Adatok elküdése" type=submit> <input value="Törlés" type=reset> <hr> </form> |  | Mi a neved? Vezetéknév: Keresztnév: Melyik egyetemre jársz?
<INPUT TYPE=PASSWORD> | Ha ezt a mezőt alkalmazzuk, akkor a begépelt karakterek helyett a * karakter fog megjelenni. (ezért alkalmazható a jelszó (password) bekéréséhez.) .
<form action="mailto:valaki@valahol" enctype="text/plain"> <hr> <b>Belépés a rendszerbe!</b> <p> Azonosító: <input type=text Name=azonosito size=15 maxlength=15></p> <p> Jelszó: <input type=password Name=jelszo size=25 maxlength=40></p> <input value="Belépés" type=submit> <input value="Törlés" type=reset> <hr> </form> |  | Belépés a rendszerbe! Azonosító: Jelszó:
<INPUT TYPE=CHECKBOX> Paramétere: CHECKED | Egyszerű logikai értékek kijelölésére szolgál, ennek megfelelően két értéket vehet fel: igaz (checked) vagy hamis. Amikor a böngésző elküldi az adott kérdőívet, akkor ha az adott rubrika ki volt választva, akkor a NAME paraméter felveszi a VALUE értékét, egyébként pedig nem fog szerepelni az elküldött adatban.
<form action="mailto:valaki@valahol" enctype="text/plain"> <hr> <b>Könyvajánlat. </b></p> <p>Kérjük válassza ki azt a könyvet, amelyet mi postafordultával elküldünk Önnek</p> <p><input type=checkbox Name=autocad Value=megrendelem>Az AutoCAD 2000 újdonságai </p> <p><input type=checkbox Name=c_nyelv Value=megrendelem>Programozzunk C nyelven! </p> <p><input type=checkbox Name=OOP Value=megrendelem>Objektum-orientált programozás C++ nyelven</p> <input value="Adatok elküldése" type=submit> <input value="Törlés" type=reset> <hr> </form> |  | Könyvajánlat. Kérjük válassza ki azt a könyvet, amelyet mi postafordultával elküldünk Önnek Az AutoCAD 2000 újdonságai Programozzunk C nyelven! Objektum-orientált programozás C++ nyelven
Válasszuk ki az első két könyvet. Ekkor az elküldött levél törzse a következő adatokat tartalmazza: autocad=megrendelem c_nyelv=megrendelem
<INPUT TYPE=RADIO> Paramétere: CHECKED | Az előbbi elemhez képest a RADIO gomb alkalmazása több válaszlehetőséget kínál fel, amelyek közül egyet lehet kiválasztani. (legalábbis az azonos NAME paraméterűek közül)
<form action="mailto:valaki@valahol" enctype="text/plain"> <hr> <b>Angol teszt </b></p> <p>Kérjük válassza ki a helyes megoldást!</p> <p>1. "Can I speak to Mr. Doster, please?" "Just a moment, I'll put you ... as soon as he is free."</p> <p><input type=radio Name=kerd1 Value=rossz>A.over </p> <p><input type=radio Name=kerd1 Value=rossz>B.off </p> <p><input type=radio Name=kerd1 Value=rossz>C.across </p> <p><input type=radio Name=kerd1 Value=jo>D.through</p> <p>2. "When I was in that town, a new bridge was being built ... the river."</p> <p><input type=radio Name=kerd2 Value=rossz>A.along </p> <p><input type=radio Name=kerd2 Value=rossz>B.about </p> <p><input type=radio Name=kerd2 Value=jo>C.across </p> <p><input type=radio Name=kerd2 Value=rossz>D.through</p> <input value="Adatok elküldése" type=submit> <input value="Törlés" type=reset> <hr> </form> |  | Angol teszt Kérjük válassza ki a helyes megoldást! 1. "Can I speak to Mr. Doster, please?" "Just a moment, I'll put you ... as soon as he is free." A.over B.off C.across D.through 2. "When I was in that town, a new bridge was being built ... the river." A.along B.about C.across D.through
Tegyük fel, hogy az első kérdésre jól válaszoltunk, a másodikra pedig rosszul. Ekkor a következő tartalmú levelet kapjuk: kerd1=jo kerd2=rossz
<INPUT TYPE=IMAGE> Paramétere: SRC= URL ALIGN= igazítás típus ALT= szöveg | A SUBMIT gombot egy képpel is helyettesíthetjük, ekkor az IMAGE mezőt kell alkalmaznunk. A képeknél tárgyalt szokásos paraméterek mindegyike alkalmazható. (width, height, border...) A mező különlegessége az, hogy azt is elküldi, hogy a kattintás a kép melyik koordinátájú pontján történt. (name.x illetve name.y formában)
<form action="mailto:valaki@valahol" enctype="text/plain"> <hr> <b>Könyvajánlat. </b></p> <p>Kérjük válassza ki azt a könyvet, amelyet mi postafordultával elküldünk Önnek</p> <p><input type=checkbox Name=autocad Value=megrendelem>Az AutoCAD 2000 újdonságai </p> <p><input type=checkbox Name=c_nyelv Value=megrendelem>Programozzunk C nyelven! </p> <p><input type=checkbox Name=OOP Value=megrendelem>Objektum-orientált programozás C++ nyelven</p> <input value="Adatok elküldése" name=elkuld type=image src="mail.gif" align="middle"> Kattintson az ikonra, ha végzett! <hr> </form> |  | Könyvajánlat. Kérjük válassza ki azt a könyvet, amelyet mi postafordultával elküldünk Önnek Az AutoCAD 2000 újdonságai Programozzunk C nyelven! Objektum-orientált programozás C++ nyelven Kattintson az ikonra, ha végzett!
Tegyük fel, hogy az Objektum-orientált programozás C++ nyelven könyvet szeretnénk megrendelni. Ekkor a következő tartalmú levelet kapjuk: OOP=megrendelem elkuld.x=51 elkuld.y=26
<SELECT> Paramétere: NAME= név SIZE= méret MULTIPLE | Ezzel az elemmel listákat (vagy lehulló menüket) készíthetünk. A NAME paraméterrel adjuk meg azt a nevet, ami a VALUE értékhez kapcsolódik. A SIZE paraméter a megjelenítendő sorok számát tartalmazza. (ha az értéke 1, legördülő menüt kapunk) Ha a MULTIPLE paramétert is megadjuk, akkor a listából egyszerre több elem is kiválasztható. A SELECT elem tetszőleges számú de legalább egy <OPTION> elemet kell hogy tartalmazzon.
<OPTION> Paramétere: VALUE= érték SELECTED | Ezzel adhatjuk meg a lista tényleges elemeit. A VALUE tartalmazza a kiválasztás esetén elküldött értéket. Ha a SELECTED paraméter is jelen van, akkor a listában az adott elem már alapállapotban ki lesz jelölve.
<form action="mailto:valaki@valahol" enctype="text/plain"> <p><b>Kérlek add meg, hogy mivel foglalkozol legszívesebben a szabadidődben!</b></p> <select name=hobbi size=2> <option value=html>HTML szerkesztés <option value=zene>Zenehallgatás <option value=term selected>Természetjárás <option value=egyeb>Egyéb </select> <p><input value="Adatok elküldése" type=submit> <input value="Törlés" type=reset></p> <hr> </form> |  | Kérlek add meg, hogy mivel foglalkozol legszívesebben a szabadidődben!
Jó ha tudod, hogy ha a size paraméter értéke 1, akkor legördülő menüt kapsz. Próbáld ki!
MULTIPLE paraméter használata
<form action="mailto:valaki@valahol enctype="text/plain"> <p><b>Kérlek add meg, hogy mivel foglalkozol legszívesebben a szabadidődben!</b></p> <select name=hobbi MULTIPLE> <option value=html selected>HTML szerkesztés <option value=zene>Zenehallgatás <option value=term>Természetjárás <option value=egyeb>Egyéb </select> <p><input value="Adatok elküldése" type=submit> <input value="Törlés" type=reset></p> <hr> </form> |  | Kérlek add meg, hogy mivel foglalkozol legszívesebben a szabadidődben!
Tegyük fel, hogy az első három pontot választottuk ki. Ekkor a következő tartalmú levelet kapjuk: hobbi=html hobbi=zene hobbi=term
<TEXTAREA> Paramétere: ROW= sorok száma COLS= oszlopok száma | Ha hosszabb szöveget szeretnénk bevinni, akkor a <textarea> </textarea> parancsot kell használnunk, a sorok (rows) és oszlopok (cols=column) számának megadásával.
<form action="mailto:valaki@valahol" enctype="text/plain"> <p><b>Kérlek írd meg a véleményedet a honlapomról!</b></p> <textarea name="velemeny" rows=5 cols="40"> A honlap nagyon tetszett, mert ... </textarea> <p><input value="Adatok elküldése" type=submit> <input value="Törlés" type=reset></p> <hr> </form> |  | Kérlek írd meg a véleményedet a honlapomról! A honlap nagyon tetszett, mert ...