Form, azaz, űrlap elkészítése

Megjegyzés:
Mezőcsoport elnevezésnél, olyan szöveget írjunk be, mely az ottani adatgyűjtésre jellemző.
Például:
- Ön adatai, és elérhetősége.
- Írja meg észrevételeit.
- Technikai tájékoztatás.
- stb.

A form, parancsfájl bemutatása

Űrlap teszteléséhez, az űrlap küldőgombjára ("Küldés mehet") kell kattintani.
Tesztelhetjük a már beírt adatokkal, vagy írjunk be, tetszőleges adatokat.

Űrlapadatok lekérdezése és kiíratása, JavaScript meghatározással.
Inputok_adatai: Password (jelszó) : Textarea (vélemény) : Select (kamera típusa) : Radio (garancia) :	Név lekérdezéséhez kattints a button gombra: Program leírását, lásd ezen oldal alján!

Figyelj!
PHP script meghatározásokat, php fájlban kell elhelyezni és eredményei, csak szerverről jelennek meg!
PHP otthoni gyakorlásához, telepíteni kell az APACHE és PHP programokat.

PHP lekérdezés print_r() függvénnyel:

<?php
    $tomb = array($_POST);
      echo"<pre>";
      print_r($tomb);
      echo"</pre>";
?>

PHP lekérdezés foreach() ciklussal:

<?php
$tomb = array($_POST);
   foreach($tomb as $tomb02)
    {
      foreach($tomb02 as $i=>$elem02)
       {
        if($i!="selectmultiple") {echo $i." = ".$elem02."<br>";}
         else {echo "selectmultiple = ".$elem02[0]."<br>";}
       }
    }
?>

Minden űrlapelemnek (űrlapmezőnek), egyedi name és id azonosítóval kell rendelkezni.
- Elemek azonosításakor, a name és id azonosítóknak, egyforma egyedi elnevést írjunk be.
- Kivétel a radio gombok, itt a name="nev" mindegyiknél ugyanaz, az id="valami" más és más egyedi azonosító.

Kezdő form elemnél kell meghatározni, milyen URL-címen, azaz, hól található az űrlap adatait feldolgozó fájl:
Példák:
- A http:// vagy https:// akkor kell, ha a feldolgozó fájl másik szerveren van, mint az űrlapot tartalmazó fájl.
- action="http://feldolgozófájl-elérési-útvonala" -----(Itt, http tárhelyen van a feldolgozó fájl.)
- action="https://feldolgozófájl-elérési-útvonala" ----- (Itt, https tárhelyen van a feldolgozó fájl.)
Saját tárhelyünkön, vagy számítógépünkön van az űrlap és a feldolgozó fájl is, akkor elég így is:
- action="feldolgozófájl-elérési-útvonala" ----- ( Ez lehet az a "fájl-név.kiterjesztés" is, melyben az űrlap is van. )

Gyakran alkalmazott, input elem típusai:

input type="text" --------- Űrlapmezőbe szöveg, szám, vagy ezek kombinációi írhatók.
input type="number" ----- Űrlapmezőbe csak számok írhatók. ( Matematikai műveletekhez. )
input type="radio" -------- Űrlapmező nem jelenik meg, helyette választható, azaz, kijelölhető alakzat jelenik meg.
input type="hidden" ------- A weboldalon nem jelenik meg.
Erre felhasználónak nincs is szüksége, mert csak az űrlapot feldolgozó fájl használja a program készítője által meghatározott value="valami-értéket". Erre is csak akkor van szükség, ha egy oldalon több űrlap is található, és a feldolgozó program ez alapján dönti el, hogy mikor és melyik űrlapot kell feldolgoznia.
Az input type="hidden" elemet, elhelyezhetjük az űrlapelemek elején vagy a végén is.
input type="submit" ----- Kattintható gomb. Űrlap adatokat, szerveroldali programnak küldjük feldolgozásra.
input type="button" ----- Kattintható gomb. Űrlap adatokat, JavaScript programnak küldjük feldolgozásra.
input type="reset" ------- Kattintható gomb. Űrlap adatok törlése. Ezt a küldőgomb előtt vagy után helyezzük el.

Megjegyzés:
A kezdő <form> meghatározásai és a küldőgomb meghatározás attól függ, hogy szerveroldali vagy JavaScript program fogja feldolgozni az adatokat.

Pédák:
1. Szerveroldali feldolgozó program felé, kell a method és action meghatározás.
Küldő gomb típusa submit.

<form name="urlap1" id="urlap1" method="POST" action="feldolgozófájl-URL-címe">
<input type="submit" value="Küldés mehet" >
</form>

2. JavaScipt feldolgozó program felé, nem kell a method és action meghatározás.
Küldő gomb típusa button, onClick meghatározással.

<form name="urlap1" id="urlap1">
<input type="button" value="Küldés mehet" onClick="Feldolgozó-function-neve()">
</form>

Űrlap megírása, html fájlban.

<head>
<title> Űrlap minta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="css_fájl_neve.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    #urlapminta { width: 80%; margin-left: auto; margin-right: auto; padding-left: 20px; background: #ffc; border: 1px dotted #3FF;}
    .kiertekeles{ width: 100%; margin-left: auto; margin-right: auto;}
    .kiertekeles td{vertical-align: top;}
</style>
</head>

<body>

<h1>A form, parancsfájl bemutatása</h1>

<div id="urlapminta">

<form name="urlap1" id="urlap1" method="POST" action="feldolgozófájl-URL-címe">

          <input type="hidden" name="feldolgozonak" id="feldolgozonak" value="mintaurlap1" />

<fieldset>
<legend> 1. Mezőcsoport elnevezése.</legend>
<p>
<label for="vezetekneve"> Ön vezetékneve:</label> 
          <input type="text" name="vezetekneve" id="vezetekneve" value="Kővágó"/> 
</p>
<p>
<label for="utoneve"> Ön utóneve:</label>
          <input type="text" name="utoneve" id="utoneve" value="Műköves"/> 
</p>
<p>
<label for="password">Írja be, jelszavát:</label> 
          <input type="password" name="password" id="password" value=""/>
</p>
</fieldset>

<fieldset>
<legend> 2. Mezőcsoport elnevezése. </legend>
<p>
<label for="textablak">Véleményed, írd ide :</label><br>
          <textarea name="textablak" id="textablak" cols="30" rows="5"> </textarea>
</p>
<p>
<label for="camera">Select.</label><br> Válassza ki, a kamera típusát!
        <select name="camera" id="camera">
            <option value="videoton" selected="selected">Videoton</option>
            <option value="lg">LG</option>
            <option value="samsung">Samsung</option>
            <option value="sony">Sony</option>
        </select>
</p>


<p>Választógomb<br> Van még garancia a készülékre?<br>
<label for="yes">Yes</label>    <input type="radio"  name="garancia"  value="Yes"  id="radio1" />
<label for="no">No</label>       <input type="radio"  name="garancia"  value="No"    id="radio2" />
</p>

</fieldset>
<br><br>

         <input type="button"   id="btn_urlap"   value="Küldés mehet" />
		 
</form>
<br>
</div>

Megjegyzés, űrlapot küldő gombokról:

Szerveroldali feldolgozó programoknak, mint például a PHP-is,  type="submit" gombot alkalmazunk.
              <input type="submit"  value="Küldés mehet" />
			  
JavaScrip programnak, button gombot alkalmazunk, onClick meghatározással vagy id azonosítóval.

JavaScrip function meghívásához:
<input type="button" value="Küldőgomb" onClick="Kiértékelő függvény_neve();">


JavaScrip jquery alkalmazásakor:
              <input type="button"  id="btn_urlap"  value="Küldés mehet" />
            Vagy így:
              <button type="button" id="btn_urlap"> Küldés mehet </button>


A submit küldőgombnál, meghatározhatunk egy ellenőrző onSubmit meghatározást is, a kezdő form elemben:

<form  name="urlap"   id="urlap" method="POST"   action="fájl_neve.php"   onSubmit="return ellenoriz()">
 
Akkor alkalmazzuk, ha az űrlapadatok elküldése előtt, JavaScript programmal ellenőriztetni akarjuk, az űrlap helyes kitöltését.
Helyes kitöltés esetén továbbíthatók az adatok, helytelen kitöltés esetén nem.

Űrlapadatok lekérdezéséhez,
JavaScript meghatározások leírása.

JavaScript meghatározásokat elhelyezhetjük közvetlen az űrlapot tartalmazó fájl head szakaszában, vagy külső, js kiterjesztésű JavaScript fájlban.

<head>
<!--  Ezt a jquery script-et, a head szakaszban kell elhelyezni.  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<!--  Következő script, elhelyezhető a head szakaszban, vagy külön js fájlban is. -->

<script>
$(document).ready(function(){
	
         // Kiválasztott rádió gombot id azonosítója alapján, igazra állíthatjuk, de ez, nem kötelező.
                // document.getElementById("radio2").checked = true;	
	
	
// ---------- Tetszőleges kiválasztott input, adatának lekérdezése. ---------------------------------------------

	$("#nevinputAdat").click(function(){	
	  var Vnev= $("#vezetekneve").val();	
	  var Unev= $("#utoneve").val();
		var tartalom= "Kiválasztott input elemek tartalma= "+ Vnev +"  "+ Unev;
		$("#nevinput_adat").html(tartalom);
	});
	
// -----------------------------------------------------------------------------------------------------
	
	
	
// ------ Minden input adat kiíratása, és üres mezők kijelölése. -------------

  $("#btn_urlap").click(function(){ 
  
	  var torles='';   $("#inputok_adatai").html(torles);
  
             var tomb= new Array();
             var inputok_szama = $("input").length;
             var input_elem=$("input");
	
    // -------- Tömbbe íratjuk az adatokat.		
             for(i=0; i<inputok_szama; i++){
                  var xx=input_elem[i].value;
                      tomb[i]=xx;
					  
					  // Üres mezők kijelölése. Ezt, nem kötelező meghatározni!
                                         if(xx != ""){input_elem[i].style.backgroundColor="white"; }
                                         else{input_elem[i].style.backgroundColor="orange"; }
                }

        // -------- Input adatok lekérdezése, a tömbből.	
             for(i=0; i<inputok_szama; i++){
                     if(tomb[i] !=""){ tartalom=(i+".Input = "+tomb[i]+"<br>"); $("#inputok_adatai").append(tartalom);   }
                        else { tartalom=(i+".Input = Üres.<br>");  $("#inputok_adatai").append(tartalom);   }
                }

    // -------- Select adat lekérdezése. --------
     var select=$("#camera").val();	 
                $("#select_adat").html(select);

    // -------- Rádió adat lekérdezése. --------
     var radiov=document.urlap1.garancia.value;
                if(radiov == ''){  $("#radio_adat").html("Nincs választás");   }	
                else {  $("#radio_adat").html(radiov);  }

    // -------- Textarea adat lekérdezése. --------
     var textablak=document.urlap1.textablak.value;
                if(textablak == ''){  $("#textarea_adat").html("Véleményt, nem írt!");   }	
                else {  $("#textarea_adat").html(textablak);  }

    // -------- Password adat lekérdezése. --------
     var jelszo=document.urlap1.password.value;
                if(jelszo == ''){  $("#jelszo_adat").html("Nincs megadva!");   }	
                else {  $("#jelszo_adat").html(jelszo);  }
	
	
    });
	
	
});
</script>
</head>

Ha a JavaScript meghatározásokat elhelyeztük, akkor a következő meghatározásokat helyezzük el közvetlen az űrlapot követően, azaz, a záró </form> elem után.
JavaScript eredmények, itt fognak megjelenni!

<br><hr>

<table class="kiertekeles">
<caption><h4>Űrlapadatok lekérdezése és kiíratása, JavaScript meghatározással.</h4></caption>
<tr>
<td>
<p>
<strong>Inputok_adatai:</strong><br>  <span id="inputok_adatai"></span><br>
<strong>Password</strong> (jelszó) :   <span id="jelszo_adat"></span>  <br><br>
<strong>Textarea</strong> (vélemény) :<br> <span id="textarea_adat"></span>  <br><br>
<strong>Select</strong> (kamera típusa) : <span id="select_adat"></span>  <br><br>
<strong>Rádió</strong> (garancia) :   <span id="radio_adat"></span>   <br><br>
</p>
</td>

<td>
<p>Csak a név lekérdezéséhez, kattints a button gombra:<br></p>
       <button type="button" id="nevinputAdat">button Név lekérdezése. </button>
<p><span id="nevinput_adat"></span></p>
</td>
</tr>
</table>

Form, azaz, űrlap elkészítése

A form, parancsfájl bemutatása

Űrlap teszteléséhez, az űrlap küldőgombjára ("Küldés mehet") kell kattintani. Tesztelhetjük a már beírt adatokkal, vagy írjunk be, tetszőleges adatokat.

Űrlapadatok lekérdezése és kiíratása, JavaScript meghatározással.

Űrlap megírása, html fájlban.

Űrlapadatok lekérdezéséhez,JavaScript meghatározások leírása.

Űrlap teszteléséhez, az űrlap küldőgombjára ("Küldés mehet") kell kattintani.
Tesztelhetjük a már beírt adatokkal, vagy írjunk be, tetszőleges adatokat.

Űrlapadatok lekérdezéséhez,
JavaScript meghatározások leírása.