Az űrlapoknak fontos szerep jut egy weblap esetén, hiszen a felhasználók ezen keresztül küldhetnek információkat (vélemény, kérdőív, stb.). Nézzük meg, milyen lehetőségek vannak erre KompoZerben!
Űrlapokat legtöbbször arra használunk, hogy weblapokon keresztül különböző információkat kérjünk a felhasználóktól. Ha megfelelően van beállítva az űrlap elküldésének a módja, akkor a szerver oldalon megfelelő eszközökkel fel lehet dolgozni a beküldött válaszokat. Ez persze már nem tartozik az OKTV versenyek követelményei közé. Itt megelégszünk azzal is, ha az űrlap információi egy e-mail címre továbbítódnak. Nézzük meg, hogy lehet ilyet a KompoZerben készíteni!
Űrlap beszúrását, és szerkesztésének megkezdését a Beszúrás → Űrlap menüben érhetjük el.
Egy űrlap különböző beviteli mezőkből, és gombokból áll. Ezeket az űrlapelemeket foglalja magába egy-egy űrlap. Ezért előbb egyfajta blokkot hozunk létre, melyben később elhelyezzük a további szükséges űrlapelemeket.
32. ábra: Űrlap tulajdonságainak beállításaiVálasszuk ki a Beszúrás → Űrlap → Űrlapkészítés menüpontot! Ekkor megjelenik az Űrlap tulajdonságai párbeszédablak, mellyel megkezdhetjük az űrlap felépítését, az űrlap egészére vonatkozó alapbeállítások elvégzését.
A KompoZer a szerkesztő felületen az űrlap határait világoskék, szaggatott vonallal jelzi (lásd a lenti ábrát). Böngészőben viszont semmi nem utal arra, hogy hol kezdődik, és végződik egy űrlap. Éppen ezért érdemes valamilyen felirattal feltüntetni, hogy egy űrlapról van szó.
33. ábra: Szerkesztés alatt levő űrlap. Az űrlap határait világoskék, szaggatott vonal jelzi.Általában az űrlapok végére szokták helyezni az Elküld ill. Alaphelyzet gombokat. Előbbi az űrlap tartalmának elküldésére szolgál, utóbbi pedig az össze űrlap mező kitörléséhez.
Az Űrlap tulajdonságai párbeszédablak Űrlap neve mezőbe írjuk be a kívánt űrlap nevet.
Erre a címre küldené el a weblap a kitöltött űrlap mezőinek értékét. Ha az OKTV feladat nem rendelkezik másképp, töltsük ki tetszőlegesen.
Ez már fontosabb a verseny szempontjából: Űrlap tulajdonságai ablak, Módszer legördülő menüjéből választhatjuk ki, hogy POST vagy GET metódussal történjen-e a feldolgozás. Válasszuk ki a megfelelőt!
A GET metódus alkalmazása során a kitöltött űrlapelemek adatai a webcímben kerülnek továbbításra, míg a POST metódus használatakor a webcímben nem látszanak az adatok.
Tapasztalhattuk, hogy a KompoZer közvetlenül nem ad lehetőséget arra, hogy a kitöltött űrlap tartalmát e-mailben küldjük el. Itt is bele kell nyúlnunk a kódba! Két féleképp is eljárhatunk: vagy Felosztás nézetbe váltunk, hogy annak a html tagnek a kódját lássuk, amiben éppen állunk a szerkesztőfelületen, vagy átváltunk Forrás nézetbe, hogy csak a puszta HTML kódot lássuk.
Az űrlapot a <form> HTML tag jelöli. Ezt a tag-et módosítsuk a következőképp!
A valaki@pelda.com helyére írjuk a kért e-mail címet: ide fog továbbítódni az űrlap tartalma, amennyiben elküldjük azt (erről később még bővebben beszélünk).
A CGI-vel (Common Gateway Interface) való feldolgozás elvi lényege, hogy az űrlap adatokat nem a böngésző dolgozza fel, hanem a szerver, amire továbbítjuk az adatokat. Nézzük, hogy tudjuk ezt az adott űrlapon beállítani!
Ahogy e-mail küldés esetén, itt is bele kell nyúlnunk a kódba. Tetszőlegesen vagy Felosztás nézetben, vagy Forrás nézetben menjünk az űrlap kódjához (az űrlap kódját a <form> tag vezeti be, és a </form> zárja le). Az űrlap kódját módosítsuk az alábbi módon:
Ahol a CGI fájl elérési útja értelemszerűen a CGI fájl elérési útja, fájlnévvel együtt.
Nagyon fontos, hogy az űrlapmezőket a korábban említett, világoskék, szaggatott vonallal jelzett űrlap határvonalon belül helyezzük el: ugyanis ha ezen kívül helyezünk el egy űrlap elemet, akkor annak a mezőnek a tartalma nem lesz továbbítva az űrlap tartalmának elküldése esetén.
A legtöbb űrlapmező (a szövegterület kivételével) elérhető a Beszúrás → Űrlap → Űrlapmező menüponton keresztül. A megjelenő, Űrlapmező tulajdonságai párbeszédablakban adhatjuk meg - ugyanezen párbeszédablakban levő -, Mezőtípus legördülő menüben kiválasztott űrlap mező tulajdonságait.
34. ábra: Űrlapmező tulajdonságai párbeszédablakAz Űrlapmező tulajdonságai párbeszédablak beviteli mezői aszerint változnak, hogy milyen Mezőtípust választottunk ki. A megfelelő mezők funkcióiról alább lehet olvasni (csak a legfontosabbakról teszünk említést).
Az egy űrlapmezőkhöz nem tartoznak felirat címkék, ezért azokról nekünk kell külön gondoskodnunk (begépeljük eléjük a megfelelő szöveget).
A szövegmező egy kis szövegterület, amibe rövid szöveges tartalmat lehet beleírni (pár szavas szövegekre kell gondolni, pl. valakinek a neve).
Űrlapmező tulajdonságai párbeszédablak Mezőtípus legördülő menüjében válasszuk ki a Szöveg opciót! A Mezőnévben adhatjuk meg, hogy az űrlapon belül milyen névvel szeretnénk ellátni ezt a mezőt.
35. ábra: Szerkesztés alatt álló egyszerű űrlap két, szövegmezővelA További tulajdonságok gombra kattintva elérhetővé válik a Mező mérete opció - amivel a szövegdoboz hossza állítható be -, valamint a Maximális hossz opció, mellyel korlátozhatjuk, hogy (karakterek számában mérve) milyen hosszú szöveget írhatnak be ebbe a szövegdobozba. Értéke tehát egy pozitív, egész szám.
A választókapcsoló egy olyan beviteli mező, ahol több lehetséges választási lehetőség közül egyet lehet kiválasztani.
A KompoZerben választókapcsolót több, Rádiógomb beszúrásával lehet készíteni. Egy-egy Rádiógombot beszúrni az Űrlapmező tulajdonságai párbeszédablak Mezőtípus legördülő menüjében a Rádiógomb opcióját választva tudunk.
36. ábra: Szerkesztés alatt levő űrlap választókapcsolója és annak tulajdonságai. A csoport nevének minden, a választókapcsolóhoz tartozó rádiógombnak egyeznie kell!Meg kell adnunk a Csoport nevet: ez nagyon fontos!
Minden újabb beszúrt Rádiógomb esetén ugyanazt a csoport nevet kell megadni (lásd a fenti ábrát). Így tudjuk biztosítani, hogy a válaszlehetőségek közül csak egy választ lehessen bejelölni.
Érdemes ékezet nélküli csoportnevet választani!
A Mező értéke mezőbe kell azt az értéket beírni, amit továbbításkor elküld a böngésző. Ez az érték a honlapon nem látható, de az űrlap küldésekor fontos szerepe van. . Hogy a felhasználó tisztában legyen azzal, melyik opció milyen válasz lehetőséget takar, a megfelelő szövegek elhelyezéséről gondoskodnunk kell (lásd a fenti ábrát).
A jelölőnégyzetekkel egy olyan beviteli mező csoportot lehet létrehozni, ahol egy kérdésre több lehetséges választási lehetőség közül többet is ki lehet választani.
Ahogy eddig is, az Űrlapmező tulajdonságai párbeszédablak Mezőtípus legördülő menüjében a Jelölőnégyzet opcióját választva tudunk Jelölőnégyzetet beszúrni.
A Mező értéke ismét olyan tartalommal töltsük fel, amit az űrlap adatainak elküldésekkor láttatni szeretnénk szerver oldalon.
A szövegterület egy olyan beviteli mező, amely hosszabb, folytonos szöveg bevitelét teszi lehetővé.
Beszúrásához válasszuk a Beszúrás → Űrlap → Szövegterület opciót! A megjelenő, Szövegmező tulajdonságai párbeszédablakban a következő, főbb tulajdonságokat adhatjuk meg:
37. ábra: Szerkesztés alatt álló szövegmező, kezdőszöveggelA legördülő menü segítségével előre meghatározott értékek közül választhatunk, melyek egy lenyíló panelen helyezkednek el. A KompoZer a legördülő menüt Választólista néven teszi elérhetővé. Beszúrásához válasszuk ki a Beszúrás → Űrlap → Választólista opciót!
38. ábra: Választó lista tulajdonságainak beállításaEkkor megjelenik a Választólista tulajdonságai párbeszédablak. Elsőre kicsit bonyolultnak tűnhet. Először adjuk meg a Lista neve mező értékét! Ezt is érdemes ékezet nélkül megadni.
Ha megadtuk a Lista neve mező értékét, kattintsunk a Lehetőség hozzáadása gombra! Ezután a fenti listában meg is jelenik az így hozzáadott választólista neve. Ennek a listának köszönhetően könnyebben át tudjuk majd tekinteni a választólistánkat.
Miután rákattintottunk a Lehetőség hozzáadása gombra, megváltozik az ablak felülete: a hozzáadott lehetőség tulajdonságait tudjuk szerkeszteni.
39. ábra: Választólista lehetőségeinek szerkesztéseA Szöveg mezőbe kell beírnunk azt, amit a Választólistában látni szeretnénk majd, az Érték mezőbe pedig azt, amit majd továbbítunk az űrlap elküldése esetén – ide érdemes ékezet nélküli értékeket megadni. Újabb lehetőség hozzáadásához kattintsunk a Lehetőség hozzáadása gombra, és töltsük ki a szükséges értékekkel a Szöveg és Érték mezőket!
Az egyes lehetőségek egymás alatt, rendezetten jelennek meg a szerkesztőablakban (lásd az előző ábrán). Alapértelmezett értéket is megadhatunk: a kérdés választólista (ha még nem választottunk értéket) ezen az értéken fog állni. Ehhez csak válasszuk ki a listából a megfelelő Lehetőséget, és pipáljuk be az Alapértelmezett kiválasztása jelölőnégyzetet (lásd az előző ábrán)!
Az Alaphelyzet gomb szolgál arra, hogy az egész űrlap összes mezőjét alaphelyzetbe állítsa, azaz a szövegmezők tartalmár kitörli, ill. az egyéb beviteli mezőket alapértelmezett értékre állítja. Ez fontos, hisz nem lenne jó, ha egyenként kéne az össze beviteli mező tartalmát kitörölni, ha a felhasználó úgy dönt, hogy elölről kezdi az űrlap kitöltését.
Az Elküldés gomb a legfontosabb űrlapelem. Ezzel tudjuk elküldeni a szervernek a kitöltött űrlapot.
Gépeljük be előre azt a feliratot, amit a gombon látni szeretnénk, arra a helyre, ahová majd a gombot el szeretnénk helyezni! Jelöljük ki ezt a szöveget: ezt fogjuk gombbá alakítani! Alaphelyzet gombnál érdemes az Alaphelyzet szöveget beírni, Elküldés gomb esetén pedig az Elküldés szöveget.
Válasszuk a Beszúrás → Űrlap → Gomb beszúrása opciót! Ekkor megjelenik a Gomb tulajdonságai párbeszédablak, ahol megadhatjuk a beszúrandó gomb legfontosabb tulajdonságait.
40. ábra: Gomb tulajdonságainak megadásaA Típus legördülő menüben választhatjuk ki, milyen gombot szeretnénk beszúrni (Elküldés, Alaphelyzet, Gomb).
A Név mezőbe írjuk azt a nevet, amellyel az űrlapon belül azonosítani szeretnénk a gombot, az Érték mezőbe a már megszokott, ékezet nélküli értéket írjuk.
41. ábra: Különböző űrlapelemekből elkészített űrlap szerkesztői nézetben
 |
 |
 |
| Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP-4.1.2.B.2-13/1-2013-0007 pályázat keretében. | ||
A tananyag az ELTESCORM keretrendszerrel készült