Űrlapok a HTML-oldalainkon

Ahhoz, hogy programozási feladatokat valósíthassunk meg, előbb-utóbb szükségünk lesz űrlapokra,
hiszen a HTML és majd a PHP ünmagában alkalmas arra, hogy adatokat jelenítsünk meg, de időnként
külső adatokkal is kell dolgoznunk.

Az adatok beviteléhez pedig HTML űrlap elemekre van szükségünk. A HTML csak az űrlapok
formázására kínál lehetőséget, az adatok kezelésére már a PHP-t fogjuk használni…

1. <FORM> </FORM>

 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, sokszor egy "mailto:e-mail
cím" utasítás, de lehet egy külső program vagy PHP-kód futtatása is. Ezen opció használatakor az
űrlapnak tartalmaznia kell egy Submit gombot, melynek lenyomásakor hajtódik végre a parancs.

2 . Beviteli mező: <INPUT>

 <input type="text" name="azonosító" value="szöveg">

Egy ilyen elembe egysoros szöveget írhatunk, itt szabadon ki is próbálhatod! A legtöbb
űrlapelemnek van value paramétere, amivel szövegbeviteli mező esetén a kezdőértéket
állíthatjuk be, vagyis azt, hogy az oldal betöltésekor milyen szöveg szere peljen benne.
Minden űrlapelem rendelkezik egy name paraméterrel, ami arra való, hogy a PHP
kódban hivatkozhassunk az elemre. Ide bármilyen szöveget, számot írhatunk, a fontos
az, hogy minden űrlapelemnek egy <form>...</form> páron belül egyedi azonosítója
legyen! Érdemes olyan azonosítónevet választani, ami tükrözi az űrlapelem típusát vagy
rendeltetését.

3. Jelszóbeviteli mező

 <input type="password" name="azonosító" value="szöveg">

4. Rádiógomb

 <input type="radio" name="azonosító" value="1">

 <input type="radio" name="azonosító" value="1" checked="checked">

Olyan gombok, melyek esetében egy adott csoportba tartozóak közül mindig csak egyet
tudunk kijelölni. Ha rákattintunk egyre, akkor a kijelölés eltűnik a másikról. Az itt lévő
példában két rádiógomb-csoport van, melyek függőleges vonallal vannak elválasztva,
ezek egymástól függetlenül viselkednek.
Azt, hogy egy rádiógomb melyik csoportba tartozik, a name paramétere határozza meg,
a value paraméter alapján tudhatjuk meg a PHP-ben hogy melyik lett kijelölve az adott
csoporton belül. Emiatt fontos, hogy ugyanolyan azonosítóval rendelkező (egy csoportba
tartozó) rádiógombok különböző value paramétert kapjanak! A rádiógomb után írt
szöveget az <input> tegen kívül (pl. utána írva) lehet megadni.
5. Jelölőnégyzet

 <input type="checkbox" name="azonosító" value="1">

Ez az űrlapelem szó szerint ugyanolyan mint a rádiógomb, a különbség csak annyi, hogy
egyszerre többet is kijelölhetünk. Ezek ugyanúgy csoportokat alkotnak és paramétereik is
ugyanúgy viselkednek.

6. Nyomógomb

 <input type="button" name="azonosító" value="Gomb felirata">

Ez egy gomb, amin a value paraméterben megadott szöveg látható. Az űrlapokon

általában valamilyen esemény kiváltására használják. A name paraméternek nincs nagy
jelentősége, mivel egy nyomógombbal nem tudunk információt átadni az űrlapfeldolgozó
oldalnak. Bizonyos speciális nyomógombok az űrlap elküldésére és törlésére
használhatóak, de ezeknél a type paraméter nem "button" értékű.

7. Legördülő lista <SELECT>

 <select name="azonosító">
<option value="érték1">Első</option>
<option value="érték2">Második</option>
<option value="érték3">Harmadik</option>
</select>
Ennek az űrlapelemnek tulajdonképpen két fajtája létezik. Az egyszerűbb az itt látható
egysoros változat, amit a size paraméterrel állíthatunk be. Ha például ennek az értéke
3, akkor egy másik típust kapunk:

 <select name="azonosító" size="3" multiple="multiple">

<option value="érték1">Első</option>
<option value="érték2">Második</option>
<option value="érték3">Harmadik</option>
<option value="érték4">Negyedik</option>
<option value="érték5">Ötödik</option>
</select>
Ebben az esetben többsoros listát kapunk. Ha a select tegben szerepel
a multiple="multiple" paraméter, akkor egyszerre több elemet is kiválaszthatunk,
ha nyomva tartjuk a Ctrl billentyűt. Az egysoros esetben mindenképp csak egy elem
lehet kiválasztva.
Az egyes elemeket az option teggel hozhatjuk létre. A PHP kódban a listát
a select teg name paramétere, az azon belül kiválasztott elemeket
az option teg value paramétere határozza meg. Ez a működés a rádiógombok esetén
látottakhoz hasonló. Ha a multiple paraméter meg van adva és többsoros a lista, akkor
a jelölőnégyzethez hasonló az űrlapelem viselkedése. Az option
teg selected="selected" paraméterével meghatározhatjuk, hogy az oldal
betöltődésekor mely elemek legyenek kijelölve illetve kiválasztva, multiple típus esetén
többet is.
8. Szövegmező <TEXTAREA>

 <textarea name="azonosító" rows="5" cols="20">Szöveg</textarea>

Ez hasonlít a szövegbeviteli mezőre, a különbség az, hogy ide többsoros szöveget is

írhatunk. A nameparaméter a PHP számára azonosítja az elemet, a rows a sorok
számát adja meg (ha hosszabb a szöveg, akkor lehet görgetni), a cols pedig azt, hogy
hány karakter szélességű a mező. A teg nyitó- és zárópárja közé írhatjuk az
alapértelmezett szöveget, amit az ablak betöltésekor láthatunk.

9. Űrlap elküldése

 <input type="submit" name="azonosító" value="Küldés">

10. Űrlap törlése

 <input type="reset" name="azonosító" value="Törlés">