Első rész, a form objektum és az űrlap

A html fájl objektumai például a div szakaszok, melyek egy adott területet, azaz objektumot határoznak meg.
Html oldalon a form jelölőcímkével is kijelölhetünk egy adott területet, azaz objektumot.

A form jelölőcímkével kijelölt területeket, azaz objektumokat, egyaránt alkalmazhatjuk:

• Adatok gyűjtéséhez.
• Játékokhoz.
• Matematikához.
• Logikai feladatokhoz.
• Stb.

A továbbiakban, akár űrlapról, akár játékról vagy matematikáról olvasunk, a form objektum szempontjából teljesen mindegy.
Az, hogy mikor adatkérő űrlap és mikor más valami, ez attól függ, hogy a form jelölőcímkével behatárolt területről, hová küldjük az adatokat.

Egy adott html oldalon, több űrlapot is készíthetünk.

• Minden űrlapot egy adott form objektum képvisel a HTML oldalon és a JavaScriptben is.
• Minden form objektumnak egyedi névvel kell rendelkezni, melyet a name="....." és id="....." jellemző, azaz, az azonosítók
  idézőjelei között kell megadnunk. (tetszőleges elnevezéssel, name és id azonosítónév egyforma.)
• JavaScriptben a form objektumra, a name="valami" és id="valami" azonosító szóval hivatkozhatunk.

JavaScriptben az űrlapokra, a forms tömbbel is hivatkozhatunk.

• A forms tömbben, minden űrlapelemhez egy adott terület tartozik.
• A forms tömb sorszámozása 0-val kezdődik.

Példa, több form objektum, azaz terület esetén:
Az első form objektum, azaz terület azonosítójának a kezdő form címkéjében a következő elnevezést adjuk, form1.
<form name ="form1" id ="form1">

Ebben az esetben, JavaScript programunkban kétféleképpen is hivatkozhatunk rá.
document.form1
vagy
document.forms[0]

A tényleges űrlapokat html oldalon, csak form jelölőcímkével kijelölt területen készíthetjük el.

A kezdő form jelölőcímkének, a következő jellemzőkkel kell rendelkeznie:

• A "name" és "id" az adott űrlap egyedi elnevezése.
• A method, mely az adatokat továbbítja a kiszolgálóra. Értéke GET vagy POST
• Az action.
  Itt adjuk meg azon cgi, azaz, szerveroldali program nevét (URL-jét), melyhez elküldéskor az űrlap adatai kerülnek,
  vagy itt adjuk meg azon mailto: email címet, melyhez az adatokat e-mailben továbbítjuk
• Az enctype, az űrlap kódolásához használt MIME típus.
  - adat továbbítása cgi programok felé, nincs rá szükség
  - adatok továbbítása e-mailbe, alkalmazzuk, így az e-mail olvasható, egyszerű szöveges formátumban továbbítódik.

Példa egy árú rendelésére:
Az adatok cgi, azaz szerveroldali programhoz küldése. ( method="GET" vagy method="POST" )
<form name="rendeles" id="rendeles" method="GET" action="Feldolgozóprogram URL-címe"> ....... </form>

Az adatok e-mail címre küldése:
<form name="rendeles" id="rendeles" method="POST" action="mailto: e-mail cím" enctype="text/plain"> ....... </form>

Abban az esetben, ha az űrlap formátumot, csak JavaScript feldolgozásra készítjük.

A kezdő form jelölőelemben:

• method és az action jellemzők elhagyhatók.
• name="valami" id="valami" azonosító nevet, kötelező megadni.

Példák, egy adott JavaScript programhoz készült form objektumra, azaz területre, (a name azonosító névnek, tetszőleges elnevezés adható):

• <form name="form1" id="form1"> ....... </form>
• <form name="form2" id="form2"> ....... </form>
• <form name="matematika" id="matematika"> ....... </form>
• <form name="Matematika" id="Matematika"> ....... </form>
• <form name="szamologep" id="szamologep"> ....... </form>
• <form name="add_ossze" id="add_ossze"> ....... </form>

A kezdő form jelölőcímkében, id egyedi azonosítót is megadhatunk.

• Ebben az esetben, CSS, azaz stíluslapon meghatározhatjuk annak megjelenési formáját és elhelyezkedési pozícióját.
• Az id egyedi azonosítónak, itt is tetszőleges elnevezést adhatunk.
  Biztonságos, ha ugyanazon elnevezést kapja, mind amit a name jellemző után beírtunk.
  Így egyszerűbb a nyomon követése, HTML oldalon, JavaScriptben és CSS, azaz stíluslapon.

Példák az id egyedi azonosító alkalmazására.

Adatok cgi programhoz küldése.
<form name="rendeles" id="rendeles" method="GET" action="rendeles.cgi"> ....... </form>

Adatok e-mail címre küldése:
<form name="rendel" id="rendel" method="POST" action="mailto: e-mail cím" enctype="text/plain"> ....... </form>

Adatok, csak JavaScript programunhoz.
<form name="form1" id="form1"> ....... </form>
<form name="matematika" id="matematika"> ....... </form>
<form name="add_ossze" id="add_ossze"> ....... </form>

---

A kezdő form és záró form jelölőelemmel kijelölt objektumban, azaz területen, egy vagy több űrlapelem is elhelyezhető.

Ezek az űrlapelemek vagy adatbeviteli és adat megjelenítő elemek nem mások, mint az űrlap adatmezői.

• Szövegmezők
• Választógombok
• Jelölőnégyzetek
• Lenyíló listák
• Elküldő gombok

---

JavaScriptben a form objektumok,
a kezdő form elemben megadott name="valami" azonosítónevet veszik fel

---

A form objektumok, tulajdonsággal is rendelkeznek
A tulajdonságok legtöbbjét, html oldalon a kezdő form elemben határozzuk meg.
De a következő tulajdonságokat, JavaScriptből is beállíthatjuk.

• action: Azon program URL-je, melyhez az adatok továbbítódnak. (JavaScript-hez nem kell.)


• encoding: Ezt, az enctype jellemzője határoz meg. (Az űrlap MIME típusa. JavaScript-hez nem kell.)


• method: Meghatározza, hogy az űrlapadatok milyen formátumban legyenek elküldve, a
  feldolgozó programhoz. (GET vagy POST) (JavaScript-hez nem kell.)


• target: Egy ablakot határoz meg, a CGI programból származó adatok megjelenítésére.
  
  Az adatok megjelenítése, alapesetben a főablakban történik, az eredeti űrlap helyén.
  Ezzel a jellemzővel, megadhatunk egy előugró ablakot vagy keretet is.


• length: Lekérdezhetjük az adott űrlapban elhelyezkedő elemek számát.

Megjegyzés:
target.
A böngészők, egy adott html oldali objektum, megkeresésére is, alkalmazzák:
Azon objektum vagy hivatkozás, azaz link, ahól az esemény bekövetkezett.
Ezen objektumot, a name vagy id azonosító alapján azonosítja be, azaz határozza meg.

Vissza a lap elejére