Formanyomtatványok Formanyomtatványok létrehozása létrehozása

DreamweaverrelDreamweaverrel

E-businessE-business

6. előadás6. előadás

A formanyomtatványoknak a felhasználóktól A formanyomtatványoknak a felhasználóktól valóvaló információ gyűjtésében van szerepük.információ gyűjtésében van szerepük.

FelhasználásukFelhasználásuk::– VéleménykutatásVéleménykutatás– On-Line vásárlásokOn-Line vásárlások– KeresőkKeresők

A formok működéséhez két dolog A formok működéséhez két dolog szükségesszükséges:: – aa HTML-kód, ami a Form megjelenítéséről HTML-kód, ami a Form megjelenítéséről

gondoskodik;gondoskodik;– és egy szerver oldali alkalmazás, v. script ill. és egy szerver oldali alkalmazás, v. script ill.

kliens oldali script (CGI), ami az adatok kliens oldali script (CGI), ami az adatok feldolgozásáról gondoskodik. DreamWeaverrel feldolgozásáról gondoskodik. DreamWeaverrel lehetőségünk van Formok létrehozására, kliens lehetőségünk van Formok létrehozására, kliens oldali ellenőrzésükre, vagy más típusú kliens oldali ellenőrzésükre, vagy más típusú kliens oldali feldolgozásra scriptek segítségéveloldali feldolgozásra scriptek segítségével

Formok létrehozásaFormok létrehozásaHasználhatjukHasználhatjuk::• az az InsertInsert menü menü FormForm

pontját, pontját, • vagy az vagy az Objects Objects

palettapaletta FormsForms részéről részéről a a FormForm ikonra ikonra kattintva, ill. azt a kattintva, ill. azt a dokumentum megfelelő dokumentum megfelelő helyére húzva is helyére húzva is létrehozhatunk létrehozhatunk formanyomtatványokat.formanyomtatványokat.

Formanyomtatványok Formanyomtatványok tulajdonságaitulajdonságai

• NévNév::A formanyomtatvány nevének a kliens oldali kezelésnél van értelme. A formanyomtatvány nevének a kliens oldali kezelésnél van értelme. Ez Ez az adat nem kerül majd a szerver felé elküldésre.az adat nem kerül majd a szerver felé elküldésre.

• ActionAction:: Itt kell megadnunk azt az Internet címet (linket), ahhol az a szerver oldali Itt kell megadnunk azt az Internet címet (linket), ahhol az a szerver oldali script vagy alkalmazás található, amely majd a Form feldolgozását fogja script vagy alkalmazás található, amely majd a Form feldolgozását fogja végezni. Ha a feldolgozást kliens oldalon végezzük, nem kell megadni, végezni. Ha a feldolgozást kliens oldalon végezzük, nem kell megadni, mert ilyenkor más módszereket használunk.mert ilyenkor más módszereket használunk.

• MethodMethod::Az adatátadási módszert állíthatjuk be.Az adatátadási módszert állíthatjuk be.– GetGet::

Az adatok az Action-nél megadott URL-hez hozzáfűzve kerülnek Az adatok az Action-nél megadott URL-hez hozzáfűzve kerülnek elküldésre. Ez a módszer több szempontból hátrányos. Egyrészt az elküldésre. Ez a módszer több szempontból hátrányos. Egyrészt az URL látható, tehát lehetőleg ha jelszavakat is küldünk ne alkalmazzuk URL látható, tehát lehetőleg ha jelszavakat is küldünk ne alkalmazzuk ezt a módszert. Másrészt mivel egy URL maximum 8192 karakter ezt a módszert. Másrészt mivel egy URL maximum 8192 karakter hosszúságú lehet, ezért így csak korlátozott mennyiségű információ hosszúságú lehet, ezért így csak korlátozott mennyiségű információ átadására van lehetőség. Vannak esetek, amikor mégis ezt érdemes átadására van lehetőség. Vannak esetek, amikor mégis ezt érdemes használni.használni.

– PostPost::Az adatok a Standard Bemeneten (<STDIN>) kerülnek átadásra.Az adatok a Standard Bemeneten (<STDIN>) kerülnek átadásra.

Formok elemei, és tulajdonságaikFormok elemei, és tulajdonságaik

Szövegmező (Textfield)Szövegmező (Textfield)A különböző szövegmezők szöveges adatok bevitelére szolgálnakA különböző szövegmezők szöveges adatok bevitelére szolgálnak

TulajdonságaTulajdonságaii::• NévNév: : a mező tartalmához kötött név, ami majd paraméterként a mező tartalmához kötött név, ami majd paraméterként

átadásra kerül. Itt említjük meg, hogy egy formanyomtatvány átadásra kerül. Itt említjük meg, hogy egy formanyomtatvány minden egyes elemének más névvel kell rendelkeznie.minden egyes elemének más névvel kell rendelkeznie.

• Char WidthChar Width: : Megadja, hogy a mezőben maximum hány karakter Megadja, hogy a mezőben maximum hány karakter jeleníthető meg; azaz hány karakter szélességű az adott mező.jeleníthető meg; azaz hány karakter szélességű az adott mező.

• Max CharsMax Chars: : Itt adjuk meg, hogy az adott szövegmezőbe Itt adjuk meg, hogy az adott szövegmezőbe maximálisan hány karakter gépelhető be. maximálisan hány karakter gépelhető be. Ha a mező Multi Line Ha a mező Multi Line típusú, ez az opció nem jelenik meg.típusú, ez az opció nem jelenik meg.

• Num LinesNum Lines: : Beállíthatjuk, hogy a szöveges területünk hány Beállíthatjuk, hogy a szöveges területünk hány sor magasságú legyen. Ez az opció nem jelenik meg sor magasságú legyen. Ez az opció nem jelenik meg Egysoros- ill. Jelszó típusú szövegmezőknél.Egysoros- ill. Jelszó típusú szövegmezőknél.

• TypeType:: A szövegmező típusa: A szövegmező típusa:– Single LineSingle Line: : Egy soros beviteli mező.Egy soros beviteli mező.– Multi LineMulti Line: : Több soros beviteli mező.Több soros beviteli mező.– PasswordPassword: : Jelszó mező. Lényegében teljesen úgy működik, Jelszó mező. Lényegében teljesen úgy működik,

mint a Single Line típusú beviteli mező, de a begépelt mint a Single Line típusú beviteli mező, de a begépelt karakterek helyett majd csak valamilyen maszk-karakterek karakterek helyett majd csak valamilyen maszk-karakterek fognak megjelenni a weboldalon.fognak megjelenni a weboldalon.

• Init ValueInit Value: : Az adott mező alapértéke. Kiindulási állapotban Az adott mező alapértéke. Kiindulási állapotban a mezőben az itt megadott szöveg lesz, valamint ha a a mezőben az itt megadott szöveg lesz, valamint ha a felhasználó egy Reset típusú nyomógombra kattint, az itt felhasználó egy Reset típusú nyomógombra kattint, az itt megadott érték fog ismételten beíródni.megadott érték fog ismételten beíródni.

• WrapWrap: : (Csak Multi Line típusnál.) Itt kikapcsolhatjuk (Off) a (Csak Multi Line típusnál.) Itt kikapcsolhatjuk (Off) a szöveg automatikus tördelését, ill. különböző módszereket szöveg automatikus tördelését, ill. különböző módszereket adhatunk meg hozzá (Virtual, Physical).adhatunk meg hozzá (Virtual, Physical).

Formok elemei, és tulajdonságaikFormok elemei, és tulajdonságaik

Jelölőnégyzet (CheckBox):Jelölőnégyzet (CheckBox): Választási lehetőségeket tartalmazó opció-sorozatoknál használjuk, Választási lehetőségeket tartalmazó opció-sorozatoknál használjuk,

azokban az esetekben, amikor azt akarjuk, hogy az adott csoport azokban az esetekben, amikor azt akarjuk, hogy az adott csoport több eleme is választható legyen.több eleme is választható legyen.

TulajdonságaTulajdonságaii::• NévNév

• Checked Value:Checked Value: Azt az értéket adjuk meg, ami majd a Azt az értéket adjuk meg, ami majd a formanyomtatvány elküldésekor az azt feldolgozó alkalmazásnak formanyomtatvány elküldésekor az azt feldolgozó alkalmazásnak átadódik, abban az esetben, ha a felhasználó az adott átadódik, abban az esetben, ha a felhasználó az adott jelölőnégyzetet kipipálta.jelölőnégyzetet kipipálta.

• Initial State:Initial State: Beállíthatjuk, hogy alaphelyzetben ki legyen-eBeállíthatjuk, hogy alaphelyzetben ki legyen-e pipálva (Checked), vagy ne (Unchecked) az adott CheckBox.pipálva (Checked), vagy ne (Unchecked) az adott CheckBox.

Formok elemei, és tulajdonságaikFormok elemei, és tulajdonságaik

Opcióválasztó mező (Radio-Button):Opcióválasztó mező (Radio-Button): Akkor használjuk, ha azt akarjuk, hogy egy opció-csoportból egyszerre csak egy Akkor használjuk, ha azt akarjuk, hogy egy opció-csoportból egyszerre csak egy

elem legyen kiválasztható. Az ilyen opciócsoport egyik elemét kiválasztva az elem legyen kiválasztható. Az ilyen opciócsoport egyik elemét kiválasztva az összes ugyanazon csoportba tartozó lehetőség kiválasztása törlődik.összes ugyanazon csoportba tartozó lehetőség kiválasztása törlődik.

TulajdonságaTulajdonságaii::• Név:Név: Az ópciócsoport neve, amelybe majd az adott mező tartozni Az ópciócsoport neve, amelybe majd az adott mező tartozni

fog. MINDEN AZONOS csoportban lévő Radio-Buttonnak ugyanazzal fog. MINDEN AZONOS csoportban lévő Radio-Buttonnak ugyanazzal a Névvel KELL rendelkeznie.a Névvel KELL rendelkeznie.

• Checked Value:Checked Value: Azt az értéket adjuk meg itt, ami elküldésre kerül, Azt az értéket adjuk meg itt, ami elküldésre kerül, ha az adott opció van kiválasztva.ha az adott opció van kiválasztva.

• Initial State:Initial State: Beállíthatjuk, hogy kezdetben az adott opció ki van-e Beállíthatjuk, hogy kezdetben az adott opció ki van-e választva. Elméletileg lehetőség van egy csoport több elemét is választva. Elméletileg lehetőség van egy csoport több elemét is alapértelmezésként kiválasztani, de kerüljük az ilyen megoldást, alapértelmezésként kiválasztani, de kerüljük az ilyen megoldást, hiszen azért alkalmazunk ilyen típusú formanyomtatvány elemet, hiszen azért alkalmazunk ilyen típusú formanyomtatvány elemet, hogy ezt majd elkerüljük.hogy ezt majd elkerüljük.

Formok elemei, és tulajdonságaikFormok elemei, és tulajdonságaik

Listák és Menük:Listák és Menük: Használatukkal értéksorozatokat kínálhatunk a felhasználónak, amelyből Használatukkal értéksorozatokat kínálhatunk a felhasználónak, amelyből

majd szabadon választhat (egy vagy több lehetőséget).majd szabadon választhat (egy vagy több lehetőséget).A listáknak három fajtájuk van:A listáknak három fajtájuk van: • llegördülő (Menu), egördülő (Menu), • sima lista (List)sima lista (List)• lista több választási lehetőséggel (List).lista több választási lehetőséggel (List).

TulajdonságaTulajdonságaikik::• Type:Type: A lista típusát állíthatjuk be. (Menu v. List)A lista típusát állíthatjuk be. (Menu v. List)• Height:Height: Megadhatjuk, hogy hány sor magas legyen a lista (Menu Megadhatjuk, hogy hány sor magas legyen a lista (Menu

típusnál ez a pont nem jelenik meg).típusnál ez a pont nem jelenik meg).• Allow Multiple:Allow Multiple: Ezt a pontot bejelölve megadhatjuk, hogy a Ezt a pontot bejelölve megadhatjuk, hogy a

listának egyszerre több eleme is kiválasztható legyen.listának egyszerre több eleme is kiválasztható legyen.• List Values:List Values: Erre a nyomógombra kattintva a listát szöveggel, Erre a nyomógombra kattintva a listát szöveggel,

és a hozzá tartozó elküldendő érkekkel tudjuk feltölteni, illetve a és a hozzá tartozó elküldendő érkekkel tudjuk feltölteni, illetve a már megadott elemeit törölhetjük, módosíthatjuk, sorrendjüket már megadott elemeit törölhetjük, módosíthatjuk, sorrendjüket változtathatjuk meg.változtathatjuk meg.

• Initially Selected:Initially Selected: A lista alapértelmezettként kiválasztott A lista alapértelmezettként kiválasztott pontját (ill. többszörös választás engedélyezése esetén pontjait) pontját (ill. többszörös választás engedélyezése esetén pontjait) állíthatjuk be.állíthatjuk be.

Formok elemei, és tulajdonságaikFormok elemei, és tulajdonságaikNyomógombok (Button)Nyomógombok (Button):: Funkció szerint háromféle nyomógombot különböztetünk meg:Funkció szerint háromféle nyomógombot különböztetünk meg:• Elküldő – gomb (Submit)Elküldő – gomb (Submit)• Alaphelyzetbe állító gomb (Reset)Alaphelyzetbe állító gomb (Reset)• Sima gomb (None)Sima gomb (None)

TulajdonságaTulajdonságaikik::• NévNév

• LabelLabel: : A gombon található feliratA gombon található felirat

• ActionAction: : A gomb működéseA gomb működése

• Submit formSubmit form: : A gomb a form -ot fogja elküldeni feldolgozásraA gomb a form -ot fogja elküldeni feldolgozásra

• Reset formReset form: : A gomb alaphelyzetbe állítja a formanyomtatványtA gomb alaphelyzetbe állítja a formanyomtatványt

• NoneNone: : Alaphelyzetben semmit sem csinál, nekünk kell majd Alaphelyzetben semmit sem csinál, nekünk kell majd valamilyen kliens-oldali scripttel leírni a működését.valamilyen kliens-oldali scripttel leírni a működését.

Formok elemei, és tulajdonságaikFormok elemei, és tulajdonságaikFile Feltöltés (File Upload):File Feltöltés (File Upload):

A File feltöltés mező tulajdonságai megegyeznek az A File feltöltés mező tulajdonságai megegyeznek az Egysoros (Single Line) szöveges mező tulajdonságaival. Egysoros (Single Line) szöveges mező tulajdonságaival. Ilyen mező beillesztésekor a mező mellett meg fog jelenni Ilyen mező beillesztésekor a mező mellett meg fog jelenni egy nyomógomb is, aminek segítségével a felhasználó egy nyomógomb is, aminek segítségével a felhasználó majd megkeresheti a feltölteni kívánt file-t gépén.majd megkeresheti a feltölteni kívánt file-t gépén.

EEz a mező csak akkor fog működni, ha az adott szerveren z a mező csak akkor fog működni, ha az adott szerveren engedélyezve van a névtelen (anonymous) feltöltés.engedélyezve van a névtelen (anonymous) feltöltés.

Abban az esetben, ha használjuk ezt a mezőt, manuálisan be Abban az esetben, ha használjuk ezt a mezőt, manuálisan be kell írnunk a <FORM> tag-be az kell írnunk a <FORM> tag-be az ENCTYPE=”multipart/form-data” ENCTYPE=”multipart/form-data” paramétert, hogy paramétert, hogy biztosítsuk a feltölteni kívánt file megfelelőbiztosítsuk a feltölteni kívánt file megfelelő

Formok elemei, és tulajdonságaikFormok elemei, és tulajdonságaik

Kép-mező (Image-field):Kép-mező (Image-field):

Segítségével egy képet illeszthetünk a formanyomtatványba Segítségével egy képet illeszthetünk a formanyomtatványba (ezt egyébként egy sima képpel is megtehetjük).(ezt egyébként egy sima képpel is megtehetjük).

Rejtett mező (Hidden field):Rejtett mező (Hidden field):

Az ilyen típusú mezőket a böngésző nem fogja megjeleníteni. Az ilyen típusú mezőket a böngésző nem fogja megjeleníteni.

Szerepe:Szerepe: A formmal együtt még egy név-érték párost tudunk küldeni A formmal együtt még egy név-érték párost tudunk küldeni a feldolgozó alkalmazásnak. Ennek például akkor lehet szerepe, ha a feldolgozó alkalmazásnak. Ennek például akkor lehet szerepe, ha egy alkalmazás több formanyomtatvány feldolgozását is elvégzi. egy alkalmazás több formanyomtatvány feldolgozását is elvégzi. Ilyenkor ezzel tudjuk azonosítani az adott formanyomtatványt Ilyenkor ezzel tudjuk azonosítani az adott formanyomtatványt (ugyanis formanyomtatvány neve NEM kerül elküldésre).(ugyanis formanyomtatvány neve NEM kerül elküldésre).