Űrlapok készítése HTML-ben és PHP-ben

Célok

Ez a téma akár egy egész kurzust is megérdemelne, annyi mindenről lehetne itt beszélni. Itt most csak a legfontosabb elemekre szorítkozunk. Megjegyezzük továbbá, hogy minimális HTML programozási ismeretet feltételezünk a hallgatóktól, ugyanis az a rész előadáson is elhangzik.

Űrlapok készítése HTML-ben

Tekintsünk egy egyszerű weboldalt, amely egy nevet kér be a felhasználótól és utána megnyit egy másik oldalt, amely üdvözli a felhasználót. Ehhez készítünk egy űrlap oldalt, amely egy beviteli mezőt tartalmaz, valamint egy másik oldalt, amely feldolgozza a kapott adatot (jelen esetben kiírja a felhasználó nevét egy üdvözlő üzenetben).

Ügyeljünk arra, hogy a kódszerkesztőben is (ha van rá lehetőségünk), állítsuk be a fájl karakterkódolását UTF-8-ra, valamint a <HEAD>-ben is írjuk elő az UTF-8-as karakterkódolás használatát. Máskülönben hibásan jelenhetnek meg bizonyos karakterek.

Az űrlapunkat az index.html fájlban fogjuk létrehozni és a hello.php fájl fogja kiírni az üdvözlő üzenetet.

Az index.html fájlban az űrlap tartalmát egy <form method="..." action="hello.php"></form> elemben kell megadni. A method azt mondja meg, hogy milyen módon továbbítjuk az adatokat, az action pedig azt mondja meg, hogy melyik fájl fogja feldolgozni az adatokat. A leggyakrabban használt továbbítási metódusok a GET illetve a POST. A GET esetén a továbbított értékek látszódni fognak a böngésző címsorában, POST esetén viszont nem látszódnak. A példában itt a GET továbbítású metódust adjuk meg. Fontos megjegyezni, hogy minden űrlap elemnél meg kell adni a name mezőt, amely név egy továbbított változó neve lesz, az űrlap eleménének tartalma pedig a változó értéke lesz. Az űrlap értékeit a submit típusú elem (itt gomb) lenyomására tudjuk elküldeni. A submit típusú gomb feliratát a value mező megadásával tudjuk megadni.

Az action paraméternél megadott hello.php dolgozza fel a kapott információkat. A GET metódussal továbbított változók a PHP-ben egy $_GET nevű asszociatív tömbből érhetők el (indexként a változó nevét kell megadni, amely az űrlapelem name paramétereként szerepelt). Megjegyezzük, hogy a PHP fájlokban szabad HTML részeket írni, de a PHP nyelven írt részt <?php ... ?> között kell megadni. Amennyiben az űrlap értékeit POST metódussal továbbítottuk, úgy a PHP fájlban a $_POST globális asszociatív tömbben fognak szerepelni az értékek. A változó neveit itt is a tömb indexeként kell megadni.

index.html

<!DOCUMENT HTML>
<HTML>
<HEAD>
   <meta http-equiv="content-type" content="text/html; charset=UTF8" >
</HEAD>
<BODY>

   <h1>Kérem adja meg a nevét!</h1>
   <form method="GET" action="hello.php">
       <table>
           <tr>
               <td>Név:</td>
               <td><input type="text" name="nev" value="Írd ide a neved" /></td>
           </tr>
           <tr>
               <td></td>
               <td><input type="submit" value="Elküld" /></td>
           </tr>
       </table>
   </form>

</BODY>
</HTML>

hello.php

<!DOCUMENT HTML>
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF8" >
</HEAD>
<BODY>
<h1>Üdvözöllek <?php echo $_GET['nev'] ?>!</h1>

</BODY>
</HTML>