Az űrlapokról

 

 

Ebben a fejezetben az űrlapokkal és használatukkal ismerkedünk meg.
Témák:


Az űrlapok fontos eszközei a weblapoknak. Interaktívvá tehetjük vele, azaz a felhasználó maga adatokat vihet velük be, amiket tovább lehet küldeni, hogy a szerveren egy program feldolgozza azt, vagy email-ként a címzett postafiókjába juttatni, illetve a lapon szereplő egyéb programok - javascriptek - ezeket az adatokat fel tudják dolgozni.

Ime egy űrlap:

- Írj levelet -
név:
email:
szöveg:
©TWM 

Ez egy egyszerű email küldő űrlap. Az űrlapba adatokat írhat be a felhasználó, amiket a küldés gomb megnyomására számítógépe email-üzenetként fog továbbítani a címzettnek.

Űrlapot használunk még a weblapon elhelyezett kérdőívek elkészítéséhez, vagy amikor a felhasználó által bevitt adatokat egy kliens vagy szerveroldali programmal akarjuk feldolgoztatni.

Az alábbiakban a legfontosabb, űrlapokkal kapcsolatos elemekkel ismerkedünk meg egy email küldő űrlap példáján végigvezetve, amelyekből saját űrlapunkat is össze tudjuk állítani:

fel...


Az űrlap szerkezete - a FORM elem

Ha űrlapot akarunk laponkra tenni, az elemeit - mintegy befoglaló keretbe - a <FORM> és </FORM> elemek közé kell elhelyezni. Az űrlap elemeit igény szerint válogathatjuk össze - azszerint, milyen adatokat akarunk feldolgoztatni. Tetszés szerinti számú, akár azonos - elemet használhatunk, szükségünk lesz még egy, a küldés funkciót aktiváló nyomógombra is.

Először ismerkedjünk meg az űrlap kereteként funkcionáló FORM elemmel.

<FORM>

...ide kerülnek az űrlapunk elemei...

</FORM>


Hogy az űrlapunkat használni tudjuk, a nyitó tagban néhány attribútummal mag kell határoznunk a küldés tulajdonságait.

  • ACTION ezzel tudjuk a küldés helyét megadni. Az ürlapunk az itt megadott címre lesz elküldve. Ez lehet egy szerveroldali program, vagy email címünk az alábbi formában:
    ACTION="mailto:az_en_nevem@domainom.com"
    ahol a mailto: jelzi, hogy email cím következik. Ezt az opciót a böngészők különbözőképpen kezelik, általában megnyitják az alapértelmezett levelezőprogramot az űrlapban előre meghatározott adatokkal kitöltve. Meg lehet adni több címet is erre itt találsz hasznos tippeket.
  • a METHOD attribútummal adhatjuk meg a küldés módját. Alapértelmezett értéke: GET, ha azonban a példánk szeint email-t akarunk küldeni, ennek az értékét így kell beállítani:
    METHOD="POST"
  • Az ENCTYPE attribútum adja meg a küldéskor használt tartalomformátumot, ez alapértelmezésben:
    ENCTYPE="application/x-www-form-urlencoded"
    Email küldéséhez így kell beállítanunk:
    ENCTYPE="text/plain"
  • Az opcionális TARGET határozza meg, az űrlapra adott válasz melyik keretre legyen hatással.
  • Az űrlap küldésekor elindíthatunk javascript alkalmazást, például az űrlapra beírt adatok küldés előtti ellenőrzésére (hibás email cím kiszűrése, üresen hagyott szövegmező...). A küldéskor indítandó scripteket az onSubmit, a törléskor végrehajtandókat az onReset attribútummal és a függvény nevével hívhatjuk meg. Például:
    onSubmit="ellenoriz()"

fel...


Az űrlap elemei

Az űrlapba számos elem közül választhatunk. Az elemeket mindig az űrlapon belül (a <FORM> ... </FORM>, elemek közé) kell elhelyezni.

<INPUT> (ennek az elemnek nincs zárótagja), <BUTTON>, <SELECT>, <TEXTAREA>.

Lássuk őket sorban:

A szövegviteli mezők <INPUT>

Egysoros szöveg beviteléhez az itt következő elemeket használhatjuk. Az attribútumai közül a type értékét kötelező megadni, a többi opcionális.

  • Szövegbeviteli mező egysoros szöveghez.
    Egy példa erre:

    <INPUT type="TEXT" name="elso" size="20" value="mi a neved">

    Ez így néz ki:
    Itt láthatjuk a használatos attribútumokat is:
    • a type= a szövegbeviteli mező típusát határozza meg.
      Egyszerű szövegbevitelnél értéke:type="TEXT". Ez kötelező, a többi opcionális attribútum.
    • a name= (név)-nél tetszés szerint elnevezhetjük elemünket, máshol pedig ezzel a névvel hivatkozhatunk rá. Az email-ben ez fog megjelenni az üzenet szövege (value értéke) mellett.
    • a value= előre meghatározhatjuk, milyen szöveg jelenjen meg a szövegmezőben. Ez a szöveg a felhasználó által természetesen felülírható. A value értéke lesz az űrlappal elküldve.
    • a size= a beviteli mező látható hosszát adja meg karakterszámban.

  • Jelszó bevitele. Használata hasonló az egyszerű szövegbeviteli mezőhöz, csak itt a beírt karakterek nem fognak a képernyőn megjelenni, helyükön * (csillag) helyettesítő karakter látszik. erre is egy példa:

    <INPUT type="PASSWORD" name="masodik" size="20">

    Próbáld ki, írj valamit ebbe a szövegmezőbe:
    Egyéb attribútumai az előző elemmel megegyeznek.

  • Rejtett szöveg bevitele. Ezt az elemet a böngésző nem jeleníti meg, ennek ellenére adatokat ugyanúgy tud kezelni, mint az előzőek. Használható akkor, ha az űrlapunkkal olyan állandó vagy változó adatokat is el akarunk küldetni, amiket nem akarunk az oldalon megmutatni.Így néz ki:

    <INPUT type="HIDDEN" name="harmadik" size="20">

    Egyéb attribútumai az előzőeknek megfelelhetnek, azonban itt nem szükséges azokat megadni.
    Erre az elemre a tisztelt olvasó engedelmével itt nem mutatnék mintát. (miért? ld. pár sorral feljebb...)

  • Fájl feltöltése is lehetséges INPUT elemmel. Ez a funkció csak ENCTYPE="multipart/form-data" beállítással használható. segítségével a felhasználó saját gépéről fájl-t küldhet el. Kiegészítő gombjára kattintva a szokásos tallózás funkcióval lehet a kívánt fájlt kiválasztani, ami be fog íródni a szövegmezőbe.
    Ezt pedig így írjuk:

    <INPUT type="FILE" name="negyedik" size="20">

    Megjelenítve így néz ki:

fel...

A kapcsolók

Ezekkel az elemekkel előre meghatározott lehetőségek közül ajánlhatunk választást oldalunk olvasóinak.
Itt három típusát ismertetjük, ezek közül a harmadik, a SELECT elem nem tartozik az INPUT elemek közé.

  • Opció kijelölése
    Itt előre meghatározott opciót lehet kijelölni - kipipálni - ami kijelölése esetén lesz elküldve. A kódja a következő:

    <INPUT type="CHECKBOX" name="elso" value="kivalasztva">

    És így néz ki:
    • a name funkcióját fentebb már megismertük.
    • a value értéke lesz elküldve az űrlappal, ha az elem ki van jelölve(kipipálva).
    • a checked érték nélküli attribútum meghatározza, hogy a lap betöltésekor az elem ki legyen-e jelölve.


  • Válaszás több lehetőség közül
    Vagylagos választás lehetséges a következő elemmel:

    <INPUT type="RADIO" name="elso" value="egyik_valasztas">
    <INPUT type="RADIO" name="elso" value="masik_valasztas">


    Ebből az elemből azonos name mellett legalább kettőt kell használni.
    Megjelenítve:
    Az azonos nevű radio gombok közül mindig csak egy lehet beklikkelve. Ha másikat jelölsz ki, az első kijelölése ugrik át a másodikra.

  • Legördülő menü
    Ezzel az elemmel olyan legördülő menüt készíthetünk, ahol a látogató előre beírt szövegek közül választhat. Ez az elem nem tartozik az INPUT elemek közé, a neve SELECT elem és van zárótagja. Így néz ki a kódja 3 választás esetén:
    <SELECT name="valami"">
    	<OPTION value="egyik"> egyik választás</OPTION>
    	<OPTION value="masik"> másik választás</OPTION>
    	<OPTION value="harmadik"> harmadik választás</OPTION>
    </SELECT>
    Erre a kódra ezt látjuk a képernyőn:
    Tartalmazza a kötelező OPTION elemet, annyit, amennyi választási lehetőség van. A SELECT nyitótagja tartalmazhatja még a
    • name attribútumot (lásd fent)
    • size attribútumot, ami itt meghatározza, hány sor legyen látható a menü csukott állapotában.
    Az OPTION tartalmazza:
    • value ennek az értéke lesz elküldve
    • selected akkor használatos, ha nem az első elem van előre kijelölve.

fel...


A nyomógombok

Űrlapunkon mindenképpen szükségünk van nyomógombra, amivel el tudjuk majd küldeni a beírt adatokat. Nyomógombként lehet INPUT elemet vagy új elemként a HTML 4.0 szabvány bevezetésével a BUTTON elemet alkalmazni. Itt a továbbiakban a gyakrabban alkalmazott INPUT elemet tárgyaljuk.

Háromféle nyomógombot ismerünk:

  • A Submit (küldés) gomb. Az űrlapok elküldéséhez használjuk. Így írjuk:

    <INPUT type="SUBMIT" value=" küldés ">

  • A Reset (törlés) gomb. Az űrlap mezőit visszaállítja alapértelmezett értékekre.

    <INPUT type="RESET" value=" mégsem ">

  • A Button, általánosan használt gomb.

    <INPUT type="BUTTON" value=" O K ">

    Tulajdonságként ezeknél a gomboknál csak a gomb feliratát szoktuk meghatározni a value értékével.
    Indítható a gombok megnyomásával más program, pl. javascript is.

  • Az Image (kép) gomb. Ezzel a gombtípussal a gomb helyére képet lehet tenni.

    <INPUT type="IMAGE" src="gomb.jpg" alt=" O K " border=0>

     O K


    Mint rendes képeknél, itt is megadhatod az ALT-ban a kép címét, de csak az IE fogja megmutatni kis sárga ablakban. A BORDER=0 fontos, mert egyébként egy keret lesz a gomb körül. E-mailedben egy x és egy y koordináta érték is lesz, ami a gomb lapon belüli helyét adja meg, de ezzel nem kell törődnöd.
    Ha azt akarod, hog a gombod az eredetihez hasonlóan klikkre benyomódjék, két gombot kell készítened: egy alaphelyzetűt és egy benyomottat. A két gombot klikkre egy javascript függvény, az onClick típusú eseménykezelő tudja váltogatni.

fel...


A többsoros szövegmező

<TEXTAREA> </TEXTAREA>

A többsoros szövegmezővel, mint nevéből is látható, hosszabb, szöveget tehet bevinni, aminek meghatározott számú, több sora is látható. Legfontosabb attribútumai:

  • név a name attribútum használata a fentebb elírtak szerinti.
  • sorok száma a rows értéke. Ennyi sor lesz állandóan látható, ha a szöveg ennél hosszabb, a görgetősávval lehet azt mozgatni.
  • szélessége a cols értéke. Ennyi karakter lesz egy sorba írható. Ha a beírt szó nem fér ki a sorba, automatikus sortöréssel a következő sorba kerül az egész szó.
  • a value értéke az előre meghatározot szöveg.

A TEXTAREA elemet így kell írni a forráskódban:

<TEXTAREA rows="10" cols="40"> előre megírt szöveggel </TEXTAREA>

vagy a szöveget beírhatjuk a value értkeként:

<TEXTAREA rows="10" cols="40" value="előre megírt szöveggel"> </TEXTAREA>

Megjelenítése pedig a következő:

fel...


Gyakorló példák

Ezzel áttekintettük a legfontosabb űrlap elemeket. Próbáljuk most a lap tetején látható űrlap kódját értelmezni.

Az űrlap forráskódja:


<FORM NAME="mail_form" action="mailto:nevem@domainom.com" METHOD="post" ENCTYPE="text/plain">

et a mező nem látható:
          <INPUT TYPE="hidden" SIZE="0" NAME="web-üzenet">

név:      <INPUT NAME="név" TYPE="text" SIZE="40" VALUE="a te neved">

email:    <INPUT NAME="e-mail" TYPE="text" SIZE="40" VALUE="e-mail címed">

szöveg:   <TEXTAREA NAME="szöveg" rows="10" cols="40" VALUE="szöveg"></TEXTAREA>

küldés gomb:      <INPUT TYPE="submit" VALUE="elküld">

törlés gomb:      <INPUT TYPE="reset" VALUE="töröl">

</FORM>

Láthatjuk a FORM elem beállítását: a nevem@domainom.com email címre fogja az űrlap tartalmát szöveges kódolású üzenetként elküldeni. Tartalmaz három egysoros szövegbeviteli mezőt és egy többsoros beviteli mezőt, valamint a küldés és törlés gombokat. (Az egyszerűség kedvéért ebben a kódban a befoglaló táblázat meghatározásai nem szerepelnek.)

Figyelmedbe ajánlom a webhelyen szereplő ŰRLAP VARÁZSLÓ kipróbálását is. Meghatározhatod benne az űrlapod szükséges elemeit, azok paramétereivel, a varázsló elkészíti neked az űrlap forráskódját, amit csak weblapodba be kell illesztened.

Itt terjedelmi okokból is csak áttekintő összefoglalást olvastál az űrlapokról. Az űrlapok elemeinek részletes leírását hamarosan megtalálod az elemek részletes ismertetésénél. (most készül)

fel...


Ezt a gyakorló űrlapunkat a befoglaló táblázattal és egy kicsit kibővítve beírtam ide is. Az alábbi kódban változtass kedved szerint, aztán nézd meg, amit alkottál:

   

 



fel...
előző: felsorolások, listák...
következő: a keretek...
tartalom...


ThomasWebMűhely
(c)Katona Tibor
2001-2002