Űrlapok készítése

Űrlapok létrehozása

Az űrlapok a HTML egyetlen lehetőségei, hogy kapcsolatot tudjunk fenntartani a felhasználó és a weboldal között. Megkérdezhetünk a felhasználótól adatokat, majd ezeket (esetleges ellenőrzés után) elküldjük a megadott címre, vagy rögzítjük egy adatbázisban, vagy csak egyszerűen feldolgozzuk, s a feldolgozás eredményét adjuk vissza a felhasználónak. Egyetlen gond van csupán: minden akcióhoz szükség van egy másik nyelvre is, hogy az űrlap adatait feldolgozhassuk. Két lehetőségünk van: JavaScript-tel dolgozunk. Ebben az esetben az egész kommunikációs folyamat a kliens gépén zajlik, ebből következik, hogy semmilyen adattárolási/adatlekérdezési lehetőségünk nincs. Egyszerűbb kommunikációra használjuk, olyanra, amelyek eredményét nem kell tárolni, továbbá a feldolgozáshoz (esetlegesen) szükséges információk a HTML oldalban találhatóak.
A másik lehetőség egy szerver oldali nyelv használata. Ez lehet PHP, ASP, de ha keresünk, találunk egyéb lehetőségeket is. Ezen esetekben sokkal egyszerűbb a dolog: az űrlap adatait elküldjük a szerveren található CGI-nek, amely kiértékel, feldolgozza a küldött adatokat, majd vissza is küldi az eredményt, ha ez volt a feladat. Így működnek a portálok, az ingyenes levelezőrendszerek, vagy az online adatbázisok.
Az előző tananyagrészben már megismerkedtünk a <TABLE> tag-gel. Mint láthattuk, önmagában csak egy üres objektumot kapunk, aminek nincs megjeleníthető eredménye, csak akkor, ha sorokat és oszlopokat is definiálunk. Hasonlóan működik az űrlap is: egy űrlap önmagában csak egy üres objektum, űrlapelemeket kell létrehozzunk, csak akkor lesz látható. Elsőként lássuk, hogyan kell űrlapot létrehozni.
<FORM> attribútumleírás

name | Nem kötelező paraméter, de hasznát vehetjük a későbbiekben. Ez az attribútum nevet ad az űrlapnak, amennyiben több űrlapot is definiálunk egy oldalon, ezzel különböztetjük meg őket.
method | A kitöltött űrlap továbbításának módját határozhatjuk meg. Lehetséges értékei: get, ilyenkor az űrlap mezőinek értékei az URL-ben fognak továbbítódni, a másik lehetőség pedig a post, amely esetben egy, a felhasználó által láthatatlan adatcsomagban továbbítódnak az elküldött űrlap adatmezői. Az alapértelmezett érték a get. Egy példa a get metódusra: Figyeljük meg, hogy a cím mögött egy "?" jellel elválasztva láthatóak az űrlapmezők neve és értékei "név=érték" formában. Amennyiben több mezőt is küldünk (mint itt is!), az előbbi név-érték párosok "&" jellel vannak összekapcsolva: hl=li q=html btnG=Google+keres%C3%A9s meta= A btnG mező értékétől ne ijedjünk meg, a "%" jellel kezdődő értékek hexadecimálisan leírt karakterek, itt az "é" betűt jelentik (keresés). Az utolsó mező a meta nevű pedig láthatóan üres, mivel az egyenlőségjel jobb oldalán nincs érték.
action | Ez az attribútum határozza meg, mit kell tegyünk az elküldött űrlap adataival. Itt a legtöbb esetben egy szerver oldali program (script) neve áll, de használhatunk egy e-mail címet is, az alábbi formában: mailto:ide@oda.com. A mailto: rész mutatja meg, hogy az űrlap tartalma egy e-mailhez csatolva lesz elküldve. Sajnos, ennek vannak hátrányai, ugyanis a böngészőprogram megnyitja az alapértelmezett levelezőprogramot (pl. Outlook Express), majd egy új levél törzsébe illeszti be az űrlap adatait. Ha nincs alapértelmezett levelezőprogram beállítva vagy konfigurálva, a kérés nem teljesül. Másik gond, hogy a felhasználó a küldés előtt módosíthatja az e-mail szövegét, azaz az űrlap mezőinek értékeit. Csak a legritkább esetben használjuk!
enctype | Az attribútum adja meg a küldéskor használt tartalomformátumot (pontosabban a MIME típust), amit e-mail küldéshez, vagy szöveges üzenet továbbításhoz így kell beállítani: enctype="text/plain". Alaéprtelmezett értéke: application/x-www-form-urlencoded.

A <FORM> tag-nek van zárótag-je is, ahogyan azt a <TABLE> tag-nél is láthattuk:

    <FORM name="beviteli_form" action="feldolgoz.php" method="post">
       ...
       ...
       ...
    </FORM>

Ezzel létrehoztunk egy üres űrlapot. Ha begépeljük, semmit sem látunk, kivéve, ha a háromszor három pontot is begépeltük, amivel csupán a későbbiekben ide írandó sorokat szerettem volna szemléltetni. No töröljük csak szépen ki, és máris nem látunk semmit! :-) A hibákból is lehet tanulni: láthatjuk, hogy a <TABLE> tag-gel ellentétben, itt a nyitó- és zárótag-ek közé is írhatunk bármit, a kliens megjeleníti őket. Másik fontos különbség a többi tag-gel szemben: a <FORM> tag-ek soha nem ágyazhatóak egymásba! Mindig be kell zárni az első űrlapot, hogy egy másodikat nyithassunk! Ha nem tartjuk be, titokzatos hibákat tapasztalhatunk!
Ideje lesz űrlapmezőket létrehozni. Az űrlapmezőket 4 csoportba oszthatjuk:

- adatbeviteli mezők (input)
- kapcsolók (select)
- nyomógombok (button)
- többsoros szövegbeviteli mezők (textarea)

A következőkben ezeket az elemeket vesszük sorra.