Az űrlapok nagyon hasznos segédeszközök, segítségükkel készülhettek el az első,
már interaktívnak nevezhető oldalak. Mikor a webszerkesztő űrlapot tesz az lapjára,
mindig valami olyasféle a célja, hogy közvetlen kapcsolatot teremtsen munkája olvasójával.
Ebben a részben a hivatalos referencia adta lehetőségeket ismertetjük.
FORM
Használata:
<FORM>...</FORM>
Attribútumai:
- ACTION= URI Az űrlap kezelő címe
- METHOD=[ get | post ] (HTTP metódus az űrlap elküldéséhez)
- ENCTYPE= ContentType (a tartalom típusa)
- ACCEPT-CHARSET= Charsets(a támogatott karaktercsomagok)
- TARGET= FrameTarget (a keret (frame), ahol az űrlap elküldésének eredménye megvalósul)
- ONSUBMIT= Script (elküldött űrlap)
- ONRESET= Script (törölt űrlapmező)
A HTML 4.0 "pontos" változatában egy vagy több SCRIPT elemet, illetve blokkszintű elemeket
tartalmazhat. Az átmeneti referencia szerint már soron belüli elemeket is tartalmazhat, de mindkét esetben
tilos újabb FORM tag befoglalása. (Egymásba ágyazás.)
A FORM elemet a következő elemek tartalmazhatják: APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET,
IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD és TH.
A FORM tag egy interaktív űrlapot definiál. Az elem űrlap vezérlőket tartalmazhat,
méghozzá az interakciós igénytől függően. (INPUT, SELECT, TEXTAREA, és BUTTON.)
Az űrlap az INPUT, vagy BUTTON elem segítségével küldhető el, amelynél a TYPE=submit értéket állítottuk
be. A tartalom pédául egy e-mail címre, vagy egy CGI szkriptnek küldhető el, ha
az ACTION attribútumnál megadtuk a megfelelő URI-t (Uniform Resource Identifier - Egységesített Forrás Azonosító).
Az ACTION attribútum természetesen mutathat egy Java szerver oldali szkriptre is, amely
az űrlap anyagát kezelni hivatott.
A mailto URI (pl.: mailto:worldwideworx@freemail.hu) is megengedett az ACTION attribútum értékeként,
de ezt a lehetőséget nem minden böngésző támogatja. Az ilyen böngészők (pl. M$ Internet Explorer 3.0) rendszerint
megnyitják az alapértelmezett levelezőprogramot egy üres törzsű levéllel. Ezen kívül
az egyébként a FORMot támogató böngészők között is akad, amelyik nem ad visszajelzést a felhasználónak
az űrlap elküldése után.
Az űrlapon összegyűjtött adatok küldésének mikéntje a METHOD, illetve ENCTYPE attribútumok
értékeitől függ.Ha a METHOD értéke get (ez az alapértelmezett), az űrlap
tartalma HTTP GET kérésként továbbítódik, a ?form_data és az ACTIONnél megadott URI
adatok öszefűzésével.
A get metódus használata megengedi, hogy a teljes információt egy URL-ben tároljuk el.
Ez előnyös egyfelől azért, mert lehetővé teszi a mostani böngészőknek, hogy
felvegyék ezt az URL-t a könyvjelzői közé, másfelől azért, mert ezzel megakadályozhatjuk az
űrlapot nem ASCII karakterek (pl.: "é", vagy "©") tárolásában. Ilyenformán viszont szembe
kell nézni azzal a problémával, hogy a bekért adat hossza nem lépheti túl a feldolgozó szerver, illetve
a böngésző URL feldolgozó kapacitását. Ha 100 karakternél hosszabb az elküldendő anyag, vagy
szükséges elküldeni a speciális karaktereket is (márpedig mifelénk ez utóbbi alapvető igény),
a METHOD értéke legyen post.
A METHOD=post segítségével az adatok HTTP POST kérésként továbbítódnak,
a kérés törzsében. Néhány nagyon ritka kivételtől eltekintve a böngészők ilyenkor nem tudják
könyvjelzőként eltárolni a kérést, de cserébe nincsenek megkötések a szöveg
hosszára, illetve a karakterkódolásra.
Az ENCTYPE attribútum adja meg a küldéskor használt tartalomformátumot, ez alapértelmezésben
application/x-www-form-urlencoded. Ezek a tartalomtípus eredmények
név/érték formátumban kerülnek küldésre a szerver felé a következőképpen:
név1=érték1&név2=érték2&.... Az üres karakterek "+"-szal, a kiegészítő karakterek (pl.: "#")
pedig "%HH"-val lesznek helyettesítve, ahol a HH az ASCII karakter hexadecimális kódja.
A sortörések a "%0D%0A" karakterláncolattal lesznek helyettesítve (egy "kocsivissza" és utána egy
"újsor" parancs).
Ha az űrlap INPUT tagjénél a TYPE=file attribútum van beíllítva, az ENCTYPE-nak
is más értéket kell kapnia: ebben az esetben multipart/form-data lesz az érték. Módosul továbbá
a METHOD is, amely ilyenkor kötelezően post értékű. A multipart/form-data típusú
adatkérés részletes formátuma a
RFC 1867 szabványban van lefektetve.
Az ACCEPT-CHARSET attribútum egy listát definiál azokról a karakterkódolás fajtákról,
amelyeket az űrlapkezelő támogat. Értéke egy lista, amelyben az elfogadott karakterkódolások találhatóak,
egymástól vesszővel, vagy szünettel elválasztva. Az alapértelmezett érték unknown (ismeretlen)
és általában azt az értéket veszi fel, amelyet a FORM-ban található adatok átviteléhez használtunk.
A TARGET attribútumot keretek használatakor kell igénybe venni, meghatározza, hogy a FORM-ra
adott válasz melyik FRAME-re lesz hatással. Ha nincs a megadott névvel rendelkező keret,
a felhasználó beavatkozása nélkül új ablak nyílik. Van néhány speciális érték is, amelyet
itt adunk meg:
- __blank - a választ egy új, név nélküli ablakban jelenítjük meg,
- _self - a jelenlegi keretre lesz hatással az akció,
(Ez az opció jól használható a BASE elem eseti hatástalanítására.)
- _parent - a hatás a FRAMESET-ben beállított "szülő ablakban" lesz látható,
- _top - ugyanabban az ablakban keletkezik, ahol a FORM volt, de az összes
FRAME felett.
Általánosságban a FORM attribútumhoz kapcsolódik egy sor kliensoldali szkript attribútum, ezek megegyeznek
a többi elemhez is használható általános esemény-attribútummal. Itt csak kettőt emelnénk ki,
ezek az INPUT-hoz kapcsolódnak:
- onSubmit, ha az űrlapot elküldte a felhasználó;
- és onReset, ha az űrlap tartalmát a felhasználó törölte.
A hidden attribútum lehetővé teszi a webfejlesztőnek, hogy a felhasználó
tudta nélkül is szerepeltessen úrlap adatokat, elemeket a dokumentumban. Jó példa erre, ha
az úrlapot e-mail címre küldetjük, és nem akarjuk a felhasználó elé tárni feltétlenül a címet.
Sok CGI szkript használja ezt az attribútumot változók észrevétlen definiálására.
A következő példában láthatjuk, hogyan kell az e-mail címet és a levél tárgyát
észrevétlenül elhelyezni az űrlapban.
<INPUT TYPE=hidden NAME=recipient VALUE="worldwideworx@freemail.hu">
<INPUT TYPE=hidden NAME=subject VALUE="Vélemények, kérdések a HTML-lel kapcsolatban.">
Természetesen ezek az adatok nincsenek megvédve komolyan, hiszen ha valaki elolvassa
a HTML dokumentumunk forrását, rögtön hozzájut a "rejtett" információhoz.
A reset típus egy gombot definiál, amely az eredeti állapotába állítja
vissza az űrlapot. A VALUE attribútum itt arra szolgál, hogy a böngésző által automatikusan
kiírt felirat helyett egyéni szöveg kerüljön az ilyen típusú gombra.
A submit típusú gomb lelke legtöbbször az űrlapoknak, ezzel küldhető el a rendeltetési
helyére. A VALUE értéke szabja meg a feliratot a gombon. A NAME attribútummal adhatunk meg egy kulcsnevet
a gombnak, erre azért van szükség, hogy több submit gombot definiálhassunk, ha más és más funkciót
szeretnénk megvalósítani mindegyikkel.
Az image típus arra való, hogy a gombunk helyett egy általunk megadott képet
használjunk submit gomb helyett. Az SRC attribútumban adható meg a kép elérési útvonala,
az ALT pedig az alternatív szöveg definiálására való. Az ALT új elem a HTML 4.0-ban, a régebbi böngészők
a NAME és VALUE párt mutatják sok esetben helyette. Szöveges böngészők esetére
itt találhatunk megoldásokat.
Egy grafikus submit gombra kattintva a kattintás koordinátái
is küldésre kerülnek, méghozzá a következő formában: név.x=x-érték
és név.y=y-érték, ahol a név a NAME attribútumban,
az "x vagy y"-érték pedig a VALUE attribútumban megadottaknak felel meg.
Az x értéket a kép bal szélétől, az y értéket pedig annak tetejétől értjük.
A USEMAP és a TYPE=image kifejezés kombinációjával a gombból
elvileg kliensoldali térkép készíthető, de ez az eljárás nagyon gyengén támogatott.
A USEMAP attribútum adja meg a MAP-nek az elérési utakat (URI).
A nem javasolt ALIGN attribútum adja meg a grafikus gomb igazításának módját.
A top, middle és bottom értékek
a körülvevő szöveg figyelembe vételével jelölik ki az igazítás módját. A left és right
értékek "lebegő gombot" definiálnak, ami azt jelenti, hogy a kép a margóhoz igazodik,
a szöveg pedig mindenképp körülfutja. Ha mindenképp a gomb alá szeretnénk valmilyen tartalmat
helyezni, de igazítani is akarjuk azt, a következő kódrészletet használjuk a gomb után:
<BR CLEAR=left|right|all>
Mint a legtöbb igazításnál, a CSS ez esetben is sokkal bővebb eszköztárat ad kezünkbe.
A button típus egy egyszerű gombot definiál, amelyen a feliratot
a VALUE attribútummal, a funkciót pedig az onClick() esemény felhasználásával
állíthatjuk be. Az onClick() tipikusan egy gomb lenyomásához
rendelt funkció meghatározására alkalmas. Ez a függvény egyszerűen attribútumként használható.
Nézzünk egy példát:
<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">
Ebben a példában a toggle() függvény előre definiált. Végrehajtása
a gombra kattintással kezdeményezhető. Amióta <INPUT TYPE=button>
lehetőség rendelkezésre áll a HTML-ben, egyre népszerűbb; aki csak teheti, ezt az eljárást
választja, hogy elkerülje a rosszul, vagy egyáltalán nem funkcionáló gombokat.
Az előző példa részletesen a következőképpen néz ki:
SCRIPT TYPE="text/javascript">
<!--
document.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\""
+ "ID=toggler ONCLICK=\"toggle()\">");
// -->
</SCRIPT>
A BUTTON elem sokkal bővebb lehetőségeket rejt, de jelen pillanatban messze
nem olyan széles körű a támogatottsága, mint az INPUT különböző formáinak.
Az ACCESSKEY és TABINDEX attribútumok minden beviteli eszköznél használhatóak, kivéve
természetesen a hidden attribútummal ellátottakat.Az ACCESSKEY
gyorsbillentyűt definiál, amellyel könnyebben érhető el az adott beviteli mező.
Itt használható bármilyen Unicode karakter, de az ékezeteseket a következő formában kell megadni:
(é).
A TABINDEX attribútum leírása itt található meg.
Az INPUT tagnél is több eseményt lehet szkripttel kezelni, ezek a következők:
- onFocus, ha az elemre irányul a fókusz;
- onBlur, ha az elem elveszíti a fókuszt;
- onSELECT, ha text vagy password típusú szöveget jelölt ki a felhasználó;
- onChange, ha az elem elvesztette a fókuszt, vagy ha megváltozott az értéke, mióta ráirányult a fókusz.