Űrlapok

Ű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>

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>

<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>

<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>

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>

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>

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>

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>

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>