HTML Formok

A HTML formok arra szolgálnak, hogy a weboldalunkon megjelenített szövegmezők-, checkboxok-, legördülő listák tartalmát (select), esetleg kiválasztott fájlokat el tudjunk küldeni a weboldalunkat működtető számítógépnek, hogy az feldolgozza. Pl. amikor egy weboldalon szeretnénk bejelentkezni, vagy amikor egy képet szeretnénk feltölteni, profil képet cserélni.

Így működnek pl. a bejelentkező felületek, regisztrációk, melyekben megjelenik néhány szövegmező, melyeket mi kitöltünk, majd megnyomjuk a mentés/küldés gombot, ezáltal elküldjük a weboldalnak a beírt adatokat, majd feldolgozás után érkezik a válasz, mint amikor levelet küldünk valakinek, megírjuk a levelet, elküldjük, majd várjuk a választ.

A formok jelölése: form használata egyszerű.

Két kötelező tulajdonsága van, amit be kell állítanunk:
 

• 1. action - melynek segítsével megadhatjuk a címet, hogy hova küldjük az adatainkat, ez lehet a weboldalon belül egy cím, vagy akár egy teljesen új weboldal is. Üresen hagyása esetén az aktuális oldalra küldi.
• 2. method - ennek a segítségével állítjuk be, hogy látható vagy rejtett formában küldje az adatokat. Látható mód a GET, rejtett a POST.

A két típus közti különbség az, hogy a GET esetében az elküldött adatok bekerülnek a linkbe, amelytől a link így fog kinézni pl: http://www.wannacode.hu/?username=user&password=pass. Ami bárki számára könnyedén leolvastható.
A POST esetében az elküldött adatok a háttérben fognak menni, ezért ezt csak pici hozzáértéssel lehet megnézni, de pl. ha a barátunk áll mellettünk miközben beírjuk a jelszavunkat és elküldjük, nem fogja látni.

    <form action="link ahova mennek az adatok" method="POST">

    </form>


        

Fontos megemlíteni, hogy listákat (tömböket) és fájlokat csak a POST metódussal lehet küldeni.

Az adatok elküldéséhez szükségünk van a form nyitó és záró tag közé beillesztett input-ra, melynek a típusa (type) submit. Ez beilleszt egy gombot, melyre kattintva el tudjuk küldeni az adatokat.

    <form action="" method="POST">
        <input type="submit" value="Küldés" />
    </form>


        

A formok nem jelennek meg a weboldalunkon, csak a forráskódban látszanak, ezáltal bármilyen elemeket rakhatunk form elembe, küldésnél csak az elküldhető adatokat fogja elküldeni. Pl. ha egy formban megjelenítünk egy képet, majd megnyomjuk a küldés gombot, attól a képet nem küldjük el a weboldalnak.

    <form action="" method="POST">
        <input type="text" name="text_input" />
        <img src="kep_linkje" name="image_to_upload" />
        <input type="submit" value="Küldés" />
    </form>


        

A küldés gomb megnyomása esetén, csak a szövegmezőbe beírt szöveg lesz elküldve.

Még 2 dolgot fontos megjegyezni:
 

• 1. Minden elküldhető elem name tulajdonságának értéket kell adni, mert azon a néven lesz elérhető az elküldött szöveg/érték
• 2. A képek feltöltéséhez a form tulajdonságai között be kell állítanunk az enctype="form/url-encoded" értéket.

Amelyik elem nem rendelkezik name tulajdonsággal, vagy a name értéke üres, annak az elemnek az értéke (value) nem lesz elküldve az adott címre.

Elemek melyeknek értékeit elküldhetjük a formok segítségével: