Űrlapok létrehozása

Szükséges előismeret: Alapok rész bevezetője

Az űrlapok kezelése alighanem a leglényegesebb feladata a PHP-nek. Szinte minden PHP oldal tartalmaz űrlapelemeket, például szövegmezőket, gombokat, stb. Ezeknek az űrlapelmeknek a létrehozása azonban HTML nyelven történik, így ebben a fejezetben még nem lesz szó PHP-ről. Ha nem igazán van fogalmad arról, hogy mi az az űrlap, csak nézz körül ezen az oldalon! Például a fórumban lévő szövegbeviteli mezők a gombokkal együtt egy űrlapot alkotnak, akárcsak a menü fölött lévő kereső. Látható tehát, hogy igen hasznos dolgokat fogunk tanulni ebben a fejezetben!

Űrlapelemek

Most szépen sorravesszük, hogy az egyes űrlapelemeket hogyan kell létrehozni HTML-ben, aztán az ez után jövő leckékben a PHP-vel való feldolgozásával foglalkozunk.
Először is: mivel egy weboldalon több, egymástól független űrlap is lehet, ezért tudni kell hogy melyiknek hol az eleje és vége: az űrlapot közre kell fogni <form>...</form> tegekkel. A ... helyére megy az űrlap. Persze a form tegek között nem csak űrlapelemek lehetnek, lehet szöveg, táblázat, képek vagy bármi egyéb.
A legtöbb űrlapelemet az <input> teggel hozzuk létre (de nem mindegyiket!) és ennek type paraméterével azonosítjuk a típusát. Az input tegnek nincsen zárópárja. Most pedig nézzük az egyes elemeket:

Szövegbeviteli mező (text)

Létrehozás: <input type="text" name="azonosító" value="szöveg" />

Így néz ki:

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 szerepeljen 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.

Jelszóbeviteli mező (password)

Létrehozás:

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

Így néz ki:

Ide szintén egysoros szöveg kerülhet, de a karakterek nem láthatóak, helyettük csillagok vagy gombócok jelennek meg (a böngészőtől és operációs rendszertől függően). Szinte minden esetben jelszavak bekérésére használják. Paramétereinek funkciója ugyanaz, mint a szövegbeviteli mező esetén.

Rádiógomb (radio)

Létrehozás:

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

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. Ha azt akarjuk, hogy az egyik gomb már be legyen jelölve mikor az oldal betöltődik, akkor a checked="checked" paramétert kell beírni az input tegbe:

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

Jelölőnégyzet (checkbox)

Létrehozás:

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

Így néz ki:

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.

Fájlfeltöltő mező (file)

Létrehozás:

<input type="file" name="azonosító" />

Így néz ki:

Ezekkel az elemekkel tud a látogató fájlokat feltölteni a tárhelyünkre. Ha a mező melletti gombra kattintunk, egy fájlválasztó ablak nyílik, melyben ha kiválasztunk egy fájlt, annak elérési útja bekerül a mezőbe. Ennek nincs value paramétere, a name pedig a feltöltött fájlt fogja azonosítani a PHP kódban.

Nyomógomb (button)

Létrehozás:

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

Így néz ki:

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ű. Hogy egy egyszerű nyomógombbal hogy tudunk eseményt kiváltani, az Űrlapok 4. leckében tudjuk meg.

Gomb (button)

Létrehozás:

<button type="button" name="azonosító">...</button>

Így néz ki:

A button teg szintén nyomógomb létrehozására szolgál, a fentitől annyiban különbözik, hogy szinte bármilyen HTML teget (vagy tegeket) is rakhatunk a gombra. Így a gombon nem csak szöveg lehet (mint a fenti esetben), hanem például egy kép, egy bekezdés vagy akár egy egész táblázat is.

Legördülő menü (select)

Létrehozás:

	<select name="azonosító">
		<option value="érték1">Első</option>
		<option value="érték2">Második</option>
		<option value="érték3">Harmadik</option>
	</select>

Így néz ki:

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 ilyet 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>

Így néz ki:

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.

Szövegmező (textarea)

Létrehozás:

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

Így néz ki:

Ez hasonlít a szövegbeviteli mezőre, a különbség az, hogy ide többsoros szöveget is írhatunk. A name paramé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.

Űrlap elküldése gomb (submit)

Létrehozás:

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

Így néz ki:

Űrlap törlése gomb (reset)

Létrehozás:

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

Így néz ki:

Végül a két legfontosabb elem: ezzel a nyomógombbal tudjuk elküldeni illetve törölni az űrlapot. A gombra a value paraméterbe írt szöveg kerül, ha nincs ilyen paraméter, akkor a type után írt szöveg (ami vagy submit vagy reset).
Az elküldő gombra való kattintás hatására megnyílik az űrlapfeldolgozó oldal, és átadódnak neki a kitöltött űrlapon szereplő adatok.
Ha a törlésre kattintunk, akkor az űrlap visszaáll az eredeti állapotába, vagyis az elemekbe az alapértelmezett értékek kerülnek (általában olyan a hatása, mintha frissítenénk az oldalt).

Most, hogy már elvileg tudunk űrlapokat készíteni, a következő két leckében megtanuljuk, hogyan kapcsolhatjuk össze ezt az űrlapot egy PHP fájllal, és ezzel hogyan nyerhetjük ki az elküldött adatokat. Házi feladatot nem adok, gyakorlásképpen érdemes készíteni egy-két űrlapot, mert hamarosan a saját oldalunkra is beépíthetjük őket!