HTML Formok
A Formok bemutatása, használata, működésük
- Főoldal
/
- Kurzusok
/
- Webfejlesztés
/
- HTML
/
- HTML kezdőknek
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:
- input (típusok: text, checkbox, radio, file)
- select
- textarea
- Előző lecke: Táblázatok
- Következő lecke: A HTML Object tag
Részletek
- Megtekintve: 489
- Haszontalannak jelölve: 0
- Hasznosnak jelölve: 1
- Értékelés: