Űrlapok készítése


Honlapírás során bizonyára mindenki szembekerül azzal a problémával, hogy hogyan kaphat visszajelzéseket a felhasználótól. Például hogyan tudhatja meg nevét, esetleg életkorát stb. Nos ilyenkor van szükség a kérdőívek, angolul form-ok használatára. Ezek az űrlapok különböző adatközlő mezőket tartalmazhatnak: választógombokat, jelölőnégyzeteket, szövegmezőket és gombokat. A HTML sajnos csak ezek létrehozására és formázására nyújt lehetőséget, ezek kiértékelésére, visszaküldésére rendszerint egy JavaScript vagy egy CGI Script programra van szükségünk. Ezekről a további fejezetekben lesz szó. De most lássuk a HTML formjait!
Az űrlap mezőit tartalmazó utasításoknak egy <FORM> és egy </FORM> parancs közé kell kerülniük. Ezen belül adhatók meg az űrlapelemek és különböző tulajdonságaik. Maga a <FORM> tag három opcióval rendelkezik:


   NAME="azonosító név" - Az űrlap azonosító nevét adja meg, mely az adatok kezeléséhez szükséges.
   METHOD="küldés módja" - Értékei POST vagy GET, attól függően, hogy levélben (POST) vagy URL címként (GET) küldjük az adatokat.
   ACTION="esemény" - A form küldésekor elvégzendő eseményt adja meg, legtöbbször egy "mailto:e-mail cím" utasítás, de lehet egy külső program futtatása is. Ezen opció használatakor az űrlapnak tartalmaznia kell egy Submit gombot, melynek lenyomásakor hajtódik végre a parancs.


Az űrlap minden egyes elemének kevés kivételtől eltekintve ugyanaz a tulajdonsága lehet. Ezek értéke viszont nem feltétlenül egyezik.
Minden egyes adatbeviteli mezőt az <INPUT> utasítás vezet be, ennek opciói a következők:


   TYPE="típus" - Az adatbeviteli mezők (űrlapelemek) típusát adja meg, értékei lehetnek: RADIO, TEXT, CHECKBOX , BUTTON, PASSWORD, IMAGE, HIDDEN, FILE, SUBMIT, RESET.
   NAME="azonosító név" - Az adott űrlapelem azonosító neve.
   VALUE="érték" - A mező értéke.
   CHECKED - Megadja, hogy RADIO vagy CHECKBOX típus esetén megjelölt-e alapállapotban a mező.
   onSelect="JavaScript utasítás(ok)" - Az űrlapmező kijelőlése esetén elvégzendő JavaScript utasítások kezelője. (Használható az onClick és az onFocus utasítás is.)


Ha TEXT típusú mezőt szerkesztünk, a MAXLENGTH="karakterszám" opcióval a mezőbe maximálisan írható karakterek számát, a SIZE="szélesség" opcióval a mező szélességét adhatjuk meg a karakterek száma alapján.
Néhány szó az <INPUT> parancs további típusaitról. A TEXT a már említett funkcióval bír, a TYPE="típus" opcióban megadott érték RADIO esetén választógombokat (ilyenkor az összetartozó választási lehetőségekhez ugyanaz a NAME-beli név tartozik; ld. a példát!), CHECKBOX esetén jelölőnégyzetet, BUTTON esetén egy egyszerű gombot, PASSWORD esetén jelszóbeviteli mezőt jelenít meg. Ha ez az érték IMAGE, akkor egy kép kerül a kérdőív belsejébe, HIDDEN esetében pedig egy rejtett szövegrész (a mező értéke). Ha a mező típusa FILE, akkor az űrlappal együtt elküldésre kerülő külső fájlt csatolhatjuk a kérdőívhez.
Ezeken kívül választómenü és nagyobb terjedelmű szöveg bevitelére alkalmas szövegmező is beilleszthető egy formba. Az előbbit a <SELECT > tag, utóbbit a <TEXTAREA> szerkeszti.
A <SELECT> parancs opciója a NAME, melynek működése és funkciója megegyezik az <INPUT>nál tárgyaltéval. Ha több lehetőség választható, a MULTIPLE paraméterrel beállíthatjuk ezt; a SIZE opcióval a választható pontok egyszerre megjelenített számát adhatjuk meg. Hasznos az onChange="JavaScript parancs(ok)" tulajdonság is, ami a kijelölés megváltozását kezelő JavaScript utasítás.
A <SELECT> </SELECT> blokknak mindig kell tartalmaznia annyi <OPTION> taget, ahány menüpontot szeretnénk létrehozni. Ezek az altagek csak a <VALUE="érték"> és a <SELECTED> opcióval rendelkezhetnek. Utóbbiból általában egy <SELECT> blokkon belül csak egy lehet. A <VALUE>-ben megadott érték csak az adatok elküldése után, mint az adatok azonosítója jelenik meg. Magának a menüpontnak az értéke az <OPTION> utasítás után adható meg. (Lásd a példát!) A tagnek nincs zárópárja.
A <TEXTAREA> mező négy opcióval rendelkezik, ezek a következők:


   NAME="azonosító név" - A már megismert jelentőséggel bír.
   COLS="oszlopok száma" - A beviteli mező oszlopainak számát (szélességét) adja meg.
   ROWS="sorok száma" - A mező sorainak számát (magasságát) határozza meg.
   VALUE="érték" - A szövegmező kezdeti értékét állíthatjuk be vele.


A <TEXTAREA> parancs a <SELECT>-hez hasonlóan rendelkezik zárópárral. Valójában a szövegmező kezdeti értéke a kezdő- és zárótag között adható meg, a VALUE opciót csak a JavaScript kezeli rendesen.
Ezek mellett persze gombokkal is lehetséges az adatbevitel. Mint fentebb láttuk, a gombok az <INPUT> utasításban hozhatók létre, mégpedig úgy, hogy a TYPE="típus" opciónak a "BUTTON" értéket adjuk. Ilyenkor a VALUE="érték" a gombon megjelenő szöveget fogja jelenteni. A gombok esetén nagyon fontos a JavaScript onClick eseménykezelője, hiszen ezzel adhatunk funkciót egy gombnak.
Léteznek különleges gombok is, ezeket az <INPUT TYPE="típus"> parancs segítségével adhatjuk meg, ahol a "típus" a SUBMIT vagy a RESET értéket kaphatja. Az előbbi esetben egy a kérdőívet elküldő gombot, utóbbi esetben egy az űrlapba bevitt adatok törlését végző gombot kapunk. A törléskor a form alapértelmezett (a kérdőív készítője által megadott) értékei állnak vissza.
Miután minden szükséges adatbeviteli mezőt elkészítettünk, zárjuk le a megkezdett <FORM> tagot!


<html>
  <head>
    <title>Űrlapok készítése - Példa</title>

  </head>

<body bgcolor="black" text="lightyellow" link="lightblue" vlink="lightgreen" alink="red">
<h4 align="center">Kérdőív, ami tartalmát levélben küldi el</h4>
<br>
<form name="urlap_1" method="post" action="mailto:myd@netposta.net">
<b>Választógombok</b>
<br>
<input type="radio" name="valasztogomb_1" checked>1. választógomb
<input type="radio" name="valasztogomb_1">2. választógomb
<input type="radio" name="valasztogomb_1">3. választógomb
<br>
<input type="radio" name="valasztogomb_2" checked>1. választógomb
<input type="radio" name="valasztogomb_2">2. választógomb
<input type="radio" name="valasztogomb_2">3. választógomb
<br><br><br>
<b>Jelölőnégyzetek</b>
<br>
<input type="checkbox" name="jelolonegyzet_1" checked>1. jelölőnégyzet
<input type="checkbox" name="jelolonegyzet_2">2. jelölőnégyzet
<input type="checkbox" name="jelolonegyzet_3" checked>3. jelölőnégyzet
<br><br><br>
<b>Szövegmezők</b>
<br>
<input type="text" name="szovegmezo_1" value="1. szövegmező" size="13">
<input type="text" name="szovegmezo_2" value="2. szövegmező" size="20">
<input type="text" name="szovegmezo_3" value="123" maxlength="3" size="3">
<br><br><br>
<b>Gombok</b>
<br>
<input type="button" name="gomb_1" value="1. gomb" onClick="alert('1. gomb lenyomva!')">
<input type="button" ma,e="gomb_2" value="2. gomb" onClick="alert('2. gomb lenyomva!')">
<br><br><br>
<b>Választómenü</b>
<br>
<select name="valasztomenu_1" onChange="alert('Megváltozott a kijelölés!')">
   <option name="menupont_1" value="1">1. menüpont
   <option name="menupont_2" value="2" selected>2. menüpont
   <option name="menupont_3" value="3">3. menüpont
   <option name="menupont_4" value="4">4. menüpont
</select>
<br><br><br>
<b>Nagyobb szövegmező</b>
<br>
<textarea cols="20" rows="5" name="szovegmezo_4" value="Nagyobb szövegmező">Nagyobb szövegmező</textarea>
<br><br><br>
<b>Speciális gombok</b>
<br>
<input type="submit" value="Elküldés">
<input type="reset" value="Törlés">
</form>
<br>
<hr align="center" width="90%">
<br>
<h4 align="center">Kérdőív, ami egy külső fájlt használ</h4>
<br>
<form name="urlap_2" method="'post" action="cgi-bin/kerdoiv_elkuldo.cgi">
<input type="text" name="szovegmezo_1" value="1. szövegmező (2. form!)" size="24">
<br>
<input type="checkbox" name="jelolonegyzet_1" checked>1. jelölőnégyzet (2. form!)
<br><br>
<input type="submit" value="Elküldés - 2. form">
<input type="reset" value="Törlés - 2. form">

</form>

</body>
</html>



 Példadokumentum 
 Következő fejezet 
 Vissza az előző oldalra 
 Vissza a főoldalra