Űrlapok

Az űrlapok az interaktivitás legfontosabb elemei. Segítségükkel az olvasó kifejezheti véleményét, kommunikálhat az íróval, vagy más olvasókkal. Ilyen lehetőségek például a vendégkönyv, fórum, de még sok más hasznos lehetőséget rejt magában.

A kérdőív összes eleme a ‹FORM› elemen belül helyezkedik el. A gombok, szövegmezők mind külön elemek.

1. ‹FORM›

Action – Itt egy URL-t kell megadnunk, ami segít eldönteni az elküldéskor végrehajtandó feladatot. Két lehetőség van.
Az egyik e–mail címre történő elküldés, amikor a következőt írjuk „mailto:felvesz@citromail.hu”.
A második lehetőség egy állomány megadása „http://szerver.hu/cgi-bin/feldolgoz.cgi”.

Method – Amennyiben az Action paraméter egy CGI programra mutat, megadhatjuk hogy milyen módon küldje át a megjelenítő az adatokat a szervernek. Alapesetben a GET típus az aktív, ha nem adjuk meg, hogy mi melyik módot választjuk.

Enctype – Az elküldött adatok kódolási módszerét állíthatjuk be. Alapesetben ez application/x-www-form-urlencoded, ami gyakorlatilag azt eredményezi, hogy a mezőnevek és értékük közé = jelet tesz, az ilyen értékpárokat & jellel választja el, a szóközöket + jelekre cseréli és a speciális karaktereket pedig egy %XX típusú jelre cseréli, ahol XX a karakterek hexadecimális ASCII kódjának felel meg. Levélküldés esetében ez elég furcsának tűnhet, ezért javasolt inkább a text/plain kódolás használata. Ha az űrlapunk fájlt is tartalmaz akkor a multipart/form-data típust kell használnunk.

A kérdőívek legfontosabb eleme az ‹INPUT›, aminek a TYPE paraméterével állíthatjuk be, hogy milyen típusban jelenjen meg. Ezeket a típusokat akár külön elemek ként is kezelhetjük, én úgy fogom bemutatni őket a továbbiakban.

Kezdő tag: kötelező
Záró tag: kötelező

Paraméterek:
Action –URL – kötelező
Method –küldés típusa – elhagyható
Enctype – Mime típus – elhagyható

2. ‹INPUT TYPE=TEXT›

Ez egy egyszerű szövegbekérő mező. A NAME paraméter a mező azonosítására szolgál. A VALUE paraméter a mező alapértékét tartalmazza ami lehet üres is. Inicializáláskor és az első megjelenéskor van szerepe, mert a VALUE paraméter értéke jelenik meg a mezőben először.

A SIZE paraméter a karakterekben mért szélességét adja meg. Ha a szöveg túllóg ezen a méreten akkor a megjelenítő görgeti az ablak tartalmát. A MAXLENGTH paraméter segítségével a maximálisan beírható karakterek számát adhatjuk meg.

Kezdő tag: kötelező
Záró tag: tilos

Paraméterek:
Name – név – elhagyható
Value – alapérték – elhagyható
Size – méret – elhagyható
Maxlength – hossz – elhagyható

Példa:

1
2
3
4

<form action="/cgi-bin/feldolgoz.cgi">
 Vezetéknév: <input type=text name=vezeteknev size=30 maxlength=80 value="vezetéknév"><br>
 Keresztnev: <input type=text name=keresztnev size=30 maxlength=60>
</form>

Ahogy látható a ‹form› elemen belül szerepelhetnek még egyéb HTML elemek és sima szöveg is.

3. ‹INPUT TYPE=PASSWORD›

Ez az elem szinte teljesen megegyezik az előzővel, csupán annyi az eltérés, hogy a begépelt karakterek helyett * -okat jelenít meg. Ez tipikusan jelszavak bekérésénél használatos. A VALUE paraméter használata nem túlságosan célravezető. Esetleg akkor használható, ha például megengedjük, hogy vendégek is írhassanak egy fórumba, ebben az esetben a jelszó mező lehet előre kitöltött.

Figyeljünk arra, hogy a begépelt jelszó ugyan nem látható a képernyőn, ettől függetlenül kódolatlanul jut el a szerverhez és hozzáértők számára látható.

Kezdő tag: kötelező
Záró tag: tilos

4. ‹INPUT TYPE=CHECKBOX›

Egyszerű logikai értékek jelölésére szolgál, általában két értéke lehet (igen/nem, 1/0). Alapesetben hamis értékkel rendelkezik amit a CHECKED paraméterrel felülbírálhatunk.

A rubrika mellett általában megtalálható valamiféle kérdés, ami alapján eldöntheti a felhasználó, hogy kiválasztja-e az adott rubrikát. Közvetlenül az ‹INDEX› elem mögött kell elhelyeznünk ezt a szöveget. Mivel ez az elem önmagában nem eredményez sortörést, így javasolt egy ‹br› vagy ‹p› elem használata.

Amikor a megjelenítő elküldi a kitöltött kérdőívet, és a rubrika be van ikszelve, akkor a NAME-nél megadott paraméter felveszi a VALUE értékét, ellenkező esetben nem fog szerepelni a változó-listában.

Kezdő tag: kötelező
Záró tag: tilos

Paraméterek:
Checked – elhagyható

Példa:

1
2
3
4
5
6
7
8

<form action="/cgi-bin/feldolgoz.cgi">
 Kérem válasszon, hogy milyen anyagokat vár heti hírlevelünkben. <br>
 <input type=checkbox name=hirek checked value="ok"> Hírek<br>
 <input type=checkbox name=ismertetok checked value="ok"> Ismertetők<br>
 <input type=checkbox name=css value="ok"> CSS<br>
 <input type=checkbox name=php value="ok">PHP<br>
 <input type=checkbox name=html value="ok">HTML/XHTML<br>
</form>

5. ‹INPUT TYPE=RADIO›

Az előző elemmel ellentétben nem eldöntendő kérdéseket kezel. Több lehetőség közül lehet választani, és az egyes csoportok azonos NAME paraméter értékkel rendelkeznek. Ha a felhasználó kiválaszt egy lehetőséget, akkor a megadott névhez az adott VALUE paraméterben szereplő érték rendelődik hozzá, ezét érdemes minden esetben más értéket adni az egyes lehetőségeknek. Ennél az elemnél a VALUE paraméter használata kötelező.

Kezdő tag: kötelező
Záró tag: tilos

Paraméterek:
Checked – elhagyható

6. ‹INPUT TYPE=SUBMIT›

Ez az elem hozza létre a kitöltött űrlaphoz tartozó elküldő gombot. A VALUE értékével adhatjuk meg a gombon szereplő feliratot, amennyiben ezt nem tesszük meg, általában valamilyen küldésre utaló felirat szerepel automatikusan a gombon. Ha kitöltjük a NAME paramétert akkor a megadott érték is elküldődik a választott néven. Akkor lehet jelentősége amikor egy kérdőívhez több gomb is tartozik, vagy egy feldolgozó programra több kérdőív is hivatkozik.

Kezdő tag: kötelező
Záró tag: tilos

7. ‹INPUT TYPE=RESET›

Ez az elem hasonlóan működik, mint az előző, de nem küld információkat, hanem a kérdőív alaphelyzetre állításának lehetőségét kínálja fel. Ha a VALUE paraméternek nem adunk értéket, akkor általában a „Reset” szó lesz az.

Kezdő tag: kötelező
Záró tag: tilos

8. ‹INPUT TYPE=IMAGE›

Ez a tag egy érdekes ötvözete a szerver oldali térképnek és a már imént említett Submit gombnak. A gomb nem az előzővel megegyező megjelenésű, hanem az általunk SRC paraméterben megadott kép. A megjelenítő ebben az esetben elküldi a képre kattintás paramétereit is. Használhatóak akár a HEIGHT, WIDTH és BORDER paraméterek is.

Kezdő tag: kötelező
Záró tag: tilos

Paraméterek:
Src – URL – elhagyható
Align – igazítási-típus – elhagyható
Alt – szöveg – elhagyható

9. ‹INPUT TYPE=FILE›

Ez az elem lehetőséget nyújt a felhasználó számára, hogy a saját gépéről egy fájlt csatoljon a kitöltött kérdőívhez. Általában egy szövegbeviteli mező és mellette egy a kiválasztást segítő gomb jelenik meg, aminek a megnyomásával a felhasználó a saját gépén lévő könyvtárakból választhat egy fájlt, aminek a neve bekerül a szövegbeviteli mezőbe. Természetesen lehetőség van közvetlenül a mező írására is. A SIZE és a MAXLENGTH paraméterek megegyeznek az ‹INPUT TYPE=TEXT› elem esetében történő felhasználási móddal.

Kezdő tag: kötelező
Záró tag: tilos

10. ‹INPUT TYPE=HIDDEN›

A felhasználó ebből az elemből semmit sem lát, így nem tudja módosítani az értékét sem, mindössze adattárolási funkciói vannak. A megjelenítő az adatok elküldésénél természetesen ezeket az információkat is elküldi.

Kezdő tag: kötelező
Záró tag: tilos

11. ‹INPUT TYPE=ISINDEX›

Használatával jelezhető, hogy a dokumentum csak információkérő oldal. Kiír egy adatkérésre figyelmeztető szöveget, ami a PROMPT paraméter segítségével felülírható. Elég ritkán használt elem.

Kezdő tag: kötelező
Záró tag: tilos

12. ‹SELECT›

Ezzel az elemmel listákat és úgynevezett legördülő elemeket készíthetünk. Hasonló feladatokra használható, mint a már említett ‹INPUT TYPE=RADIO› és ‹INPUT TYPE=CHECKBOX› elemek. Míg az ‹INPUT› elem egyszerre kijelzi az összes lehetőséget és ezzel sok helyet foglal el, ezzel szemben a ‹SELECT› elem egyszerre csak kevés helyet foglal el az oldalból.

Ez az elem csak tároló feladatot lát el, a lista leíró elemei ezen belül helyezkednek el.

Name – Ezzel a paraméterrel egy olyan nevet adhatunk meg, amihez a kiválasztott listaelemek VALUE értékei kapcsolódhatnak elküldéskor.

Size – A megjelenítésre használt képernyőelem sorainak számát adhatjuk meg.

Multiple – Amennyiben szerepel ez a paraméter, a listából egyszerre több elem is kiválasztható.

Ez az elem tetszőleges számú, de minimálisan egy listaelemet kell hogy tartalmazzon, amit az ‹OPTION› elemmel definiálunk.

Kezdő tag: kötelező
Záró tag: kötelező

Paraméterek:
Name – név – elhagyható
Size – méret – elhagyható
Multiple – elhagyható

13. ‹OPTION›

Ezzel az elemmel adhatjuk meg magának a listának az elemeit. Magának a listaelemnek a szövegét az ‹OPTION› tag után kell elhelyeznünk.

Value – Az az elem az esteleges kiválasztás esetén a szerver számára elküldendő értéket tartalmazza, ami a ‹SELECT› elem NAME paraméteréhez fog kapcsolódni.

Selected – Ha jelen van ez a paraméter akkor a listaelem már kiválasztva jelenik meg. Több elemnek is adhatjuk ezt a paramétert abban az esetben, ha a ‹SELECTED› elemnél használtuk a MULTIPLE paramétert.

Kezdő tag: kötelező
Záró tag: elhagyható

Paraméterek:
Value – érték – elhagyható
Selected – elhagyható

Példa:

1
2
3
4
5
6
7
8

<form action="/cgi-bin/feldolgoz.cgi">
 Születési év: <br>
 <select name="szuletesiev">
  <option value=1900>1900
  <option value=1901>1901
  <option value=1902>1902
 </select>
</form>

14. ‹TEXTAREA›

Ez az elem hosszabb, többsoros szöveg bevitelére nyújt lehetőséget. Vízszintesen és függőlegesen is görgethető, illetve sortörésekre is lehetőség van, amivel már alapvető formázási lehetőségeket nyújt. Elsősorban akkor használatos, ha hosszabb véleményt várunk a felhasználótól.

Name –Az elem neve adható meg ezzel a paraméterrel.

Rows – A szövegbeviteli mező sorait kell megadnunk, ha az olvasó több sort szeretni beírni megjelenik a görgetősáv.

Cols – A szövegbeviteli mező szélességét kell megadnunk. Amennyiben a felhasználó túl hosszú sort ír, akkor a szöveg tördelésével, vagy az előbb említett görgetősávval biztosít elegendő helyet a böngésző.

A alapértelmezés szerint megjelenő tartalmat a kezdő ‹TEXTAREA› és záró ‹/TEXTAREA› közé írhatjuk. Ugyanúgy kell formáznunk a szöveget, mint a ‹PRE› elem esetében.

Kezdő tag: kötelező
Záró tag: kötelező

Paraméterek:
Name – név – elhagyható
Rows – sorok száma – kötelező
Cols – oszlopok száma – kötelező

Példa:

1
2
3
4
5
6
7

<form action="/cgi-bin/feldolgoz.cgi">
 Új bejegyzés a vendégkönyvbe: <br>
 <textarea name=uzenet cols=30 rows=5>
  Ide írhat a felhasználó,
  akár több sornyi üzenetet is.
 </textarea>
</form>
Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség
http://www.gdportal.hu/

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

22 HOZZÁSZÓLÁS

  1. Sziasztok!
    Olyan problémám van, hogy egy oldalba beépítettem egy form-ot. És szétviszi a design-t. Ha nem zárom le a form-ot akkor IE-ben tökéleteses, Mozillában úgy is szétviszi. Ha lezárom a form-ot, akkor mindkettő szétviszi. Mi lehet a baj? Azért nem értem, mert form nélkül a design-nak semmi baja, a form meg csak egy elméleti dolog, elvileg a desgin-t nem zavarhatná. De ha mégis, akkor miért jelenik meg máshogy, pontosabban jól IE-ben (ha nem irok be záró form tag-et)?
    Sajnos nem heccből csinálom ezt az oldalt, úgyhogy előre is nagyon megköszönném, ha tudna valaki segíteni mi lehet a baj.

    Köszi szépen!
    ————————–

  3. Nekem most csupán annyi kérdésem van, hogy IE-ben van-e valamilyen alapértéke a select inputnak, ugyanis épp űrlapot gyártok és esküszöm, van egy 1-2 px-es csúszása az input textekhez képest és megőrülök, mert nem tudom kinyírni, eltávolítani, stb., csak ha megint belebaromolok a css-be és a html-be és csúnya lesz. Amúgy css-ben lehet-e hivatkozni input-típusra? Pl. hogy csak a submitos inputra legyen érvényes, etc. Biztos hülye kérdés, de a hajam égnek áll, hogy mindig belerondít az életembe egy szó: valid:D

  5. Az lett végül, úgy látszik, nem vagyok elég türelmes. Azért érdeklődtem, mert olvasgattam kódokat és többfelé láttam olyat, hogy .submit input, .text input, stb., aztán el sem tudtam gondolni, hogymi, de akkor valszeg classba pluszba hozzáadták, csak az átláthatóság kedvéért volt e névadás, engem megzavartak teljesen:) Gondolhatnának a magamfajtára és igazán fűzhetnének a kódokba magyarázatokat, ilyesmi:P

  6. Sziasztok!
    Nekem két kérdésem lenne a formokkal kapcsolatban:
    1. ha nem e-mail-ben továbbítja az adatokat, akkor mit lehet velük kezdeni? Az a .cgi tárolja őket, vagy egy program, ami feldolgozza? Milyen móson ill formában?
    2. Meg lehet dinamikusan csinálni a formokat, vagy csak elvileg, de túl nagy munka. Arra gondolok, hogy a feljövő kérdések a szerint váltakozzanak, hogy milyen válaszokat adott korábban.

    Köszönöm a válaszokat!

    Kodmen

  7. Sziasztok!
    Nekem az lenne a problémám hogy nem küldi el a formot.
    action-t mailto ra állitottam bent van az emilem, de nem küldi el, ha a submitra nyomok nem csinál semmit.
    Mi lehet a probléma? Kezdő vagyok, ha esetleg nagyon láma érdés lett volna.
    Köszi
    Culram

  8. Sziasztok!
    Nekem az lenne a kérdésem, hogy email címre küldés esetében hogy lehet azt megcsinálni, hogy az űrlapba beírt emailcímet jelezze feladóként, illetve ha küldeni szerteném, akkor ezt ne írja ki a gépem: „Ezt az űrlapot Ön e-mailben küldi. Az űrlap elküldése felfedi az Ön e-mail címét a fogadó előtt. Az adatok küldése titkosítás nélkül történik. Folytathatja vagy megszakíthatja a küldést. Ok/Mégse” , és ha az „ok”ra megyek,akkor ne nyissa meg nekem az outlook-ot vagy semmilyen más levelezőprogit.
    Köszi

  9. Culram:

    a submit gomb a formon belül van? mert ha nem, akkor nem tudja a szerencsétlen böngésződ, hogy mit is akarsz csinálni és így természtesen nem is küld el semmit :)
    Tehát nagyjából így kellene kinéznie ahhoz, hogy működjön:

    1
2
3
4

    <form action="mail:e-mail címed">
<input type="text" name="textbox">
<input type="submit" value="Elküld">
</form>

    Ha a formon belül van, akkor szerintem másold be ide a forráskódot, aztán megpróbálunk segíteni :)

    Zsia: ehhez sajnos már szerver oldali ismeretek szükségesek, ugyanis a böngésző oldali nyelvek (html, javascript…) szerver oldali támogatás nélkül (pl.: php, vagy cgi segítsége nélkül) többre nem képesek :)
    Ha az ilyen (szerver oldali) megoldás is érdekelne, akkor szívesen segítünk, habár a szerver odali része megérne egy tutorial-t itt.

  11. ehhez szükséged van egy kis javascript-re, ami megvizsgálja, hogy a beviteli mezők értekei NULL-ok -e (nem pedig nullák, mert ez már érték, szemben NULL-al, ami azt jelenti, hogy üres), és csak akkor engedélyezi az elküld gombot, ha mindegyik mező tartalmaz adatot.

    A javascript-hez itt egy kis segítség: http://www.kando-kkt.sulinet.hu/mirror/jshu/index.htm Igaz a leírás kicsit régi, de azért még használható. Ha véletlen nem sikerül magadtól megírni, akkor nyugodtan írj és segítünk összedobni.

  12. Sziasztok
    Nagyon köszönöm a gyors választ, de ez a „kis”javascript meghaladja a képességeimet,és azt hiszem nem is jól magyaráztam el a bajom.Nem azt akarom,hogy minden mezö ki legyen töltve,hanem azt szeretném ha választanának három illetve két lehetöség küzül egyet. de csak egyet.Tehát üres se maradjon,de többet se tudjanak választani.
    Itt láthatjátok:
    http://www.sakya.hu/magyar/contact.html
    Kösz,Vuli

  13. hali!

    összedobtam gyors a javascriptet neked :)
    mivel csak a radio gombok ellenőrzése kell, így a többi mezőhöz nincs megírva az ellenőrzés, de a script simán bővíthető utólag.

    a kód ez lenne:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    	function elleno(){
		var reg_check = 0;
		var checked_form = 0;
		var element_num = document.reg.elements.length;
 
		var last_name = "";
 
		for (i=0;i<element_num;i++){
			if (reg.elements[i].type == "radio"){
				if (reg.elements[i].name != last_name){
					reg_check++;
					last_name = reg.elements[i].name;
					}
				if (reg.elements[i].checked){
					checked_form++;
					}
				}
			}
 
		if (checked_form == reg_check){
			reg.submit_button.disabled = false;
			}
		}

    az űrlapodon pedig annyi módosítást kell csinálni, hogy a form action=”..” után még beírod, hogy name=”reg” (tehát adsz az űrlapnak egy nevet), megadod, hogy az elleno() függvényt minden kattintáskor futtassa le az onclick=”javascript:elleno()” segítségével, a submit gombot is elnevezed submit_button-nak, valamint alapértelmezetten kikapcsolod a küld gombot a disabled=”disabled” segítségével.

    tehát vhogy így nézzen ki a két sor:
    form method=”post” action=”distribution/phorm.php” name=”reg” onclick=”javascript:elleno()”
    input type=”submit” value=”Küld” name=”submit_button” disabled=”disabled”

    Remélem a fenti pár sorral már sikerül megoldanod :)

  15. örülök, hogy jó lett :)

    igaz még lehetne rajta mit fejleszteni, mert simán ki lehet játszani, de pár perc alatt ennyire voltam képes :D

  16. Sajnálatosan szolgáltatót kellett váltanom, az új szolgáltatónál nem fut CGI, ezt előre nem közölte, csak most. Van-e valami megoldás, hogy a már meglévő űrlapjaimat használni tudjam? A követelmény: az űrlap változóit (valamilyen kísérő szöveggel) küldje el nekem, esetleg a kitöltő személynek is. Ha van rá mód, a kitöltés mellé kerüljön oda az automatikus „jó válasz”!
    Minden megoldás érdekel, olyan segítőkész Java, PHP (tehát a CGI-t kikerülő) programozást ismerő „levelezőtárs” önzetlen közreműködését várom.
    vajdanet@teleline.hu

  17. Hello.

    Egy linkbeküldő formom van ahol egy nevet a linket és a kategóriát küldöm be egy mysql adatbázisba.

    A lényeg az lenne hogy hogyan tudom azt megadni hogy pl a név az minimum hány karakteres legyen, a link feltétlen http://xxx/-el kezdődjön. és hogy pl a név mezőben ne írjanak .mp3 szót.

    És ha pl kevés karakterből áll vagy lehagyják a hxxp://xxx/-t akkor hibaüzenetet kapjanak.

    Vagy ezt a feldolgozó phpben kellene megírni?

    üdv!

  18. Sziasztok!
    Űrlapot készítek (először FP-ben akartam, de aztán váltottam dreaweaverre). Szóval készen van, csak az elküldésnél akadt gondom. Egy email-re szeretném küldeni, de mikor megnyomom a küldés gombot átvált outlook-ra és ezt írja:

    címzett: xxx@xxx.hu (ez ok)
    tárgy: Ĺ°rlapkĂĽldĂ©s a FirefoxbĂłl (ez már nem ok)
    üzenet: nev=&telefon=&email=yyy%40yyy.hu&kerdes=Szia%21%0D%0A&B1=K%FCld%E9s
    (ez pedig végképp nem ok)

    Mit lehet tenni? Előrebocsátom, hogy sem php-hoz, sem javascripthez (fogalmam sincs lehet-e ebben a helyzetben bármelyiket használni).

    Minden segítséget nagyon köszönök! Ha szükséges mail-ben bármikor átküldöm a forrást.

  19. Az enctype-ot átírtam text/plain-re így egy fokkal jobb:
    nev=
    telefon=
    email=julia.varga@millefolium.hu
    kerdes=Szia!
    B1=Küldés

    De még mindig nem az igazi…

  22. Vagyis nem egészen…
    Csak IE-ben. Firefoxban az outlookot nyitja meg, és az előbbiekhez hasonló kódolással küldi el az üzenetet (ha rákattintunk a küldé gombra). Ez viszont lehet, hogy „megijeszt” valakit és mégsem küldi el. Hogyan lehet kiküszöbölni ezt?

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét