Űrlap továbbítása CGI programoknak.

Ellenőrzését, csak azoknál az ablakoknál érdemes elvégeztetni JavaScript programmal, melyeket felhasználó billentyűzetről tölt fel, adattal.
Például a következő mezőknél:

<input type="text"....>
<input type="password"....>
<textarea .....>

JavaScript programmal ellenőrzött, majd egy CGI programmal, jelen esetben PHP programmal feldolgozható űrlapok bemutatása.

Űrlap, közvetlen a html fájlban van.
Ellenőrzése nem kötelező JavaSript programmal.
Közvetlen is elküldhető a szerveren lévő feldolgozó fájlhoz.
Ellenőrzés nélküli hibás adatok továbbítása, leterheli a szervert, de a feldolgozás előbb vagy utóbb végrehajtódik.

Űrlapot ellenőrző JavaScript, lehet ugyan azon html fájlban, melyben az űrlap is van, vagy külön JS fájlban.
Ellenőrzés esetében, csak formailag helyes adatok továbbítódnak, melyek megkönnyítik a szerveren történő feldolgozást.

Űrlapot feldolgozó CGI program fájl,(Például: PHP) a szerveren van (ez lehet bérelt vagy saját tárhelyen, valamint a saját számítógépünkre telepített APACHE szerveren gyakorlás céljából is.)
Megjegyzés:
Rendkívüli biztonsági szempontokat figyelembe véve, feldolgozó fájl is, tartalmazhatja az űrlapot.

Bemutató pédák.

Figyelem!
A kezdő form elemekben, meg van határozva a feldolgozó fájl elérési címe, valahogy így: action="valami-fájlnén.php"
Jelenleg a bemutató példákhoz, nem tartozik feldolgozó PHP fájl (CGI program)

Ezért, a submit küldő gombra kattintva, a küvetkező hibaüzenet fog megjelenni:

        Not Found! A fájl nem található!

     A Firefox nem találja a fájlt a(z) .............. helyen.
	 
     Ellenőrizze a fájlnevet, hogy jól írta-e.
     Ellenőrizze, hogy a fájlt áthelyezték-e, átnevezték-e vagy eltávolították-e.

A fenti hibaüzenet megjelenésekor, kattintsunk a böngésző ablakában lévő vissza nyílra!

Teszt:
Elsőként ne írjunk be semmit, csak kattintsunk a submit küldő gombra.
Másodikként írjunk be valamit, és kattintsunk a submit küldő gombra.

Hogyan történik az ellenőrzés, JavaScript programmal.
A kezdő form elemben, elhelyezünk egy onSubmit utasítást, ez akkor aktiválódik, ha a gombra kattintunk.
Idézőjelek között, meghatározzuk, hogy mi történjen.

A return, JavaScript programunk ide küldje vissza, a kiértékelés eredményét.

ellenoriz(), ez egy előre, általunk elkészített JavaScript függvény neve, melyben meghatároztuk, hogy mit ellenőrizzen a script.

A return hatására visszatérő kiértékelés eredménye false (hamis), akkor az ürlap nem továbbítódik,
ha true (igaz), akkor továbbítódik a feldolgozó CGI programnak

1. Az imput szövegterület.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="imput_ablak" id="imput_ablak" method="GET" action="imputablak.php" onSubmit="return ellenoriz()">
<p> Melyik a kedvenc tantárgyad? <br />
<input type="text" name="Tantargy" value="">

<input type="submit" name="submit" value="Küldőgomb">
<input type="reset" name="reset" value="Törlés">
</form>
</body>

Fenti programunk alapján, űrlapunk így jelenik meg.

Az adatokat ellenőrző JavaScript fájl.
Most, csak azt ellenőrizzük elküldés előtt, hogy az ablak üres vagy sem.
Ha üres, akkor nincs továbbítás. Ha nem üres, akkor továbbítható a feldolgozó PHP fájlnak.

function uresCheck(mezo)
{
   if (mezo.value != "") return true;
   else
    {
     alert("A(z) "+ mezo.name +" ablakban nincs adat!");
     return false;
    }
}

/*Submit gombra történő kattintáskor, ezt a függvényt hívjuk meg.*/
function ellenoriz()
{
  if (uresCheck(document.imput_ablak.Tantargy))
     { return true; }
  else return false;
}

Az adatokat feldolgozó PHP fájl, XHTML fájl formátumú, kiterjesztése php.
PHP fájl neve és kiterjesztése: imputablak.php

<body>
<p> Ezt írtad: <br />
<?php
echo $_GET['Tantargy'];
?>
</p>
</body>

Megjegyzés:
A fent látható imput szöveges ablak mérete, az alpforma.
Ha ettől, elakarunk térni, azaz szélesebb ablakot szertnénk megjeleníteni, akkor a "size" utasítással megtehetjük.
PÉLDA:
<input type="text" name="Tantargy" size="85">

Megjelenési ablakméret, ez lesz:

2. A textarea szövegterület.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="formText" id="formText" method="POST" action="szovegablak.php" onSubmit="return textAblak()">

Tájékoztató vagy közlendő szöveget, a következő ablakba írja!
<textarea name="szovegAblak" cols="80" rows="6"></textarea>

<input type="submit" name="submit" value="Küldőgomb">
<input type="reset" name="reset" value="Törlés">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.

function uresCheck(mezo)
{
   if (mezo.value != "") return true;
   else
    {
     alert("A(z) "+ mezo.name +" ablakban nincs adat!");
     return false;
    }
}

/*Submit gombra történő kattintáskor, ezt a függvényt hívjuk meg.*/
function textAblak()
{
  if (uresCheck(document.formText.szovegAblak))
     { return true; }
  else return false;
}

Az adatokat feldolgozó PHP fájlunk, XHTML fájl formátumú, kiterjesztése php.
PHP fájl neve és kiterjesztése: szovegablak.php

<body>
<p> Ezt írtad, a szövegablakba: <br />
<?php
echo $_POST['szovegAblak'];
?>
</p>
</body>

Megjegyzés:
A textarea ablak méreteinek meghatározása:
- cols, az ablak szélessége.
- rows, az ablak magassága, azaz mennyi szövegsor jeleníthető meg, egymás alatt.

3. Jelölőnégyzet. ( checkbox )

Egy választási lehetőség kijelölése.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="jelolonegyzet" method="POST" action="jelolonegyzet.php" id="jelolonegyzet">
<p> Írtál már, PHP programot? <br />
<input type="checkbox" name="Valasz">
</p>

<input type="submit" value="Küldőgomb">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.
(Ha, a jelölőnégyzetet üresen hagyjuk, akkor azt jelenti, hogy nem, ha kipipájuk, akkor igen a válasz.)

Az adatokat feldolgozó fájlunk, XHTML fájl formátumú, kiterjesztése php.

<body>
<p> Ezt választottad: <br />
<?php
echo $_POST['Valasz'];
?>
</p>
</body>

4. Jelölőnégyzetek. ( checkbox )

Több választási lehetőség is, kijelölhető.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="jelolonegyzetek" method="POST" action="jelolonegyzetek.php" id="jelolonegyzetek">
<p> Van már, weblapod? <br />
<input type="checkbox" name="Valasz01">
</p>

<p> Ismered a JavaScript programot? <br />
<input type="checkbox" name="Valasz02">
</p>

<p> Írtál már, PHP programot? <br />
<input type="checkbox" name="Valasz03">
</p>

<input type="submit" value="Küldőgomb">
</form>

Fenti programunk az űrlapon, így jelenik meg.

Az adatokat feldolgozó fájlunk, XHTML fájl formátumú, kiterjesztése php.

<body>
<p> Ezt választottad:
<?php
echo "$_POST[Valasz01] <br />" ;
echo "$_POST[Valasz02] <br />" ;
echo "$_POST[Valasz03] <br />" ;
?>
</p>
</body>

5. Rádiógombok. ( radio )

Több választási lehetőség is megadunk, de ezek közül, csak egy jelölhető ki.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="radiogombok" method="GET" action="radiogombok.php" id="radiogombok">
<p> Melyik témakör a kedvenced? </p>
<p>
<input type="radio" name="Kerdes01">
Matematika? <br />
</p>

<p>
<input type="radio" name="Kerdes02">
Fizika? <br />
</p>

<p>
<input type="radio" name="Kerdes03">
Kémia? <br />
</p>

<input type="submit" value="Küldőgomb">
</form>

Fenti programunk az űrlapon, így jelenik meg.

Az adatokat feldolgozó fájlunk, XHTML fájl formátumú, kiterjesztése php.

<body>
<p> Ezt választottad:
<?php
echo "$_GET[Kerdes01] <br />" ;
?>
</p>
</body>

6. Űrlap listaelemek. ( select )

Rádiógombokhoz hasonlóan működnek.
Két külön témakör választási lehetőségei közül, minegyiknél csak egy jelölhető ki, azaz, egy - egy ajánlat választható.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="select" method="POST" action="select.php" id="select">
<p> Melyik témakör a kedvenced? </p>

<select name="Temakorok">
<option> Matematika </option>
<option> Fizika </option>
<option> Kémia </option>
<option> Történelem </option>
</select>
<br /><br />
<p> Milyen osztályzatot kaptál utoljára, a kedvenc témakörödre? </p>

<select name="OsztalyzatErteke[ ]" multiple>
<option> 2-es, elégséges</option>
<option> 3-as, közepes </option>
<option> 4-es, jó </option>
<option> 5-ös, kiváló </option>
</select>
<input type="submit" value="Küldőgomb">
</form>

Fenti programunk az űrlapon, így jelenik meg.

Az adatokat feldolgozó fájlunk, XHTML fájl formátumú, kiterjesztése php.

<body>
<p>
<?php
echo = "Témakör: $_POST[Temakorok]";
$Valasz0 = $_POST['OsztalyzatErteke'] [0];
$Valasz1 = $_POST['OsztalyzatErteke'] [1];
$Valasz2 = $_POST['OsztalyzatErteke'] [2];
$Valasz3 = $_POST['OsztalyzatErteke'] [3];

echo "OsztalyzatErteke: $Valasz0, ";
echo "$Valasz1, ";
echo "$Valasz2, ";
echo "$Valasz3, ";

?>
</p>
</body>

Megjegyzés:
Kettő select típusú ablakunk is van.
- Az első normál formátum, ahol az ablaknyílra történő kattintással jelennek meg a további választási lehetőségek.
- Második select ablakba, multiple meghatározást írtunk be, melynek hatására több választási lehetőség jelenik meg egyszerre.
Ha sokkal több választási lehetőséget írunk be, akkor az ablak görgetősávjával lehet megtekinteni a további választási lehetőségeket.

7. Rejtet mezők

Két külön témakör választási lehetőségei közül, minegyiknél csak egy jelölhető ki, azaz, egy - egy ajánlat választható.

XHTML fájl formátum, kiterjesztése html. De, elhelyezünk benne egy kis PHP programot.

<body>

<?php
$Valasz1 = "Matematika";
$Valasz2 = "Fizika";
$Valasz3 = "Kémia";

echo "<form name='rejtett' method='GET' action='rejtett.php' id='rejtett'> ";
echo "<p> Melyik témakör a kedvenced? </p> ";

echo "<select name='Temak'> ";
echo "<option> Matematika </option>";
echo "<option> Fizika </option>";
echo "<option> Kémia </option>";
echo "</select>";

echo "<br /><br />";

echo "<input type='hidden' name='Rejtett1' value='Valasz1'> ";
echo "<input type='hidden' name='Rejtett2' value='Valasz2'> ";
echo "<input type='hidden' name='Rejtett3' value='Valasz3'> ";

echo "<input type='submit' value='Küldőgomb'> ";
echo "</form>";

?>

</body>

Fenti programunk az űrlapon, így jelenik meg.
NEM JELENIK MEG! Ez html fájl, és nem PHP
Megtekintéséhez kattints ide!

Az adatokat feldolgozó fájlunk, XHTML fájl formátumú, kiterjesztése php.

<body>
<p>

<?php
echo "A következő három témakörből lehetett választani";
echo "$_GET[Rejtett1]<br />";
echo "$_GET[Rejtett2]<br />";
echo "$_GET[Rejtett3]<br />";

echo "<br /> Ezt a témakört választottad:<br />";
echo "$_GET[Temak]";
?>

</p>
</body>

8. Jelszómező (password).

A password, azaz jelszó megadása is rejtve marad.
A beírt karakterek, pontok formájában jelennek meg.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="jelszoablak" method="POST" action="jelszoablak.php" id="jelszoablak">
<p> Írd be a jelszavad. <br />
<input type="password" name="Jelszo">

<input type="submit" value="Küldőgomb">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.

Az adatokat feldolgozó fájlunk, XHTML fájl formátumú, kiterjesztése php.

<body>
<p> Ezt írtad: <br />
<?php
echo $_POST['Jelszo'];
?>
</p>
</body>

9. Törlőgomb (reset).

Törlő, azaz visszaállító gomb szerepe:
- Felhasználó elrontotta az űrlap kitöltését, lehetősége van küldés előtt törölni az addig beírtakat.

XHTML fájl formátum, kiterjesztése html.

<body>
<form name="torlogomb" method="POST" action="jelszoablak.php" id="torlogomb">
<p> Írd be a jelszavad. <br />
<input type="password" name="Jelszo">

<input type="submit" value="Küldőgomb">

<input type="reset" value="Törlőgomb">
</form>
</body>

Fenti programunk az űrlapon, így jelenik meg.

Az adatokat feldolgozó fájlunk, XHTML fájl formátumú, kiterjesztése php.

<body>
<p> Ezt írtad: <br />
<?php
echo $_POST['Jelszo'];
?>
</p>
</body>