CSS kódok: Formok CSS kódban

Egy form (magyarul űrlap) segítségével kérhetünk be adatokat a honlapot látogatóktól. Itt egy példa, a magyarázat később jön. Töltse ki a mezőket, aztán kattintson az „Elküld” gombra!

<form action="parser.php" method="post">
  <div>
    <label for="lastname">Vezetéknév: </label>
    <input type="text" name="lastname" id="lastname">
    <br>
    <label for="firstname">Keresztnév: </label>
    <input type="text" name="firstname" id="firstname">
    <br>
    <label for="email">E-mail: </label>
    <input type="text" name="email" id="email">
    <br>
    <input type="submit" value="Elküld">
  </div>
</form>

Vezetéknév:
Keresztnév:
E-mail:

A formunk még nem túl szép, de hamarosan megtanuljuk formázni stíluslapokkal!

Amikor a fentihez hasonló formot szeretnénk beágyazni a dokumentumba, az egészet a <form>...</form> címkék közé kell tenni.

Mivel Strict dokumentumtípusban írjuk művünket, ezért a <form>...</form> címkék közé nem szabad azonnal a label és azinput elemeket írni! A form tartalmát a <div>...</div> vagy <p>...</p> címkék közé írjuk, és így a W3C validátora el fogja fogadni az oldalunkat!

Miután kitöltöttük a fenti formot, de még nem nyomtuk meg az „Elküld” gombot, akkor a bevitt adatok még csak a saját gépünkön léteznek, hiszen a formot tartalmazó honlap is a saját gépünkön található, mert a böngésző letöltötte a szerverről. A gombot megnyomva a böngésző feltölti a megadott adatokat a szerver felé, amit egy erre képes program fog értelmezni. Az eredményt láthatja: visszakaptuk a szervertől a megadott adatokat.

A <form> címkének van egy kötelező attribútuma, amit mindenképpen meg kell adnunk, ez pedig az action. Értéke annak a programnak az elérési útvonala lesz a szerveren, amelyik képes a bevitt adatok feldolgozására. Ezt azért szükséges megadni, hogy a böngésző tudja, hova kell elküldeni az adatokat, hiszen „csak úgy” nem küldheti el a szervernek, hogy az kezdjen vele valamit.

Az adatok elküldésének két módja van. Ezt szintén érdemes beállítani a formunkban, amit a method attribútummal tudunk megadni. Értéke kétféle lehet:

GET

Kisebb méretű adatok, például néhány szó elküldéséhez használható csak. Titkos adatok, például jelszó elküldésére ne használjuk, mert az elküldés után megjelenő honlap URL-jében megjelenik az összes megadott adat!

POST

Az adatok mérete itt nincs limitálva, és titkos adatokat is csak a POST-tal küldhetünk el. Általában ezt szoktuk használni a GET hátrányai miatt, mi is POST-ot fogunk használni példáinkban.

Ezután nézzük, hogyan néz ki egy form alapja:

<form action="parser.php" method="post">
</form>

A parser.php az ezzel a honlappal azonos könyvtárban lévő, szerveroldalon lefutó program, ami kezelni fogja a formon bevitt adatokat. Ha használunk hírlevélküldő programot, és a formban elkérjük a látogató e-mail címét, akkor az action értékének a hírlevélküldő program leírásában megadottnak kell lennie. Például: action="http://hirlevelkuldoprogram.hu/?md=register", ami azt jelenti, hogy az általunk használt hírlevélküldő program részére adjuk át a bevitt adatokat.