Visszalép

Űrlap form meghatározása és elemei



Űrlap területe.

Űrlap területét, a kezdő <form> és záró </form> elem határolja.
Kezdő <form> és záró </form> közé kell elhelyezni az űrlap elemeket, és minden olyan szöveget, mely a felhasználót segíti adatok bevitelében.


Kezdő <form> elemhez, minták:

Az action meghatározás lehet:
- relatív hivatkozás: action="../fájl_neve.php"
- abszolút hivatkozás: action="http ://www.example.com/fájl_neve.php"

  1. Szerveroldali programnak küldjük feldolgozásra, mint például a PHP:
    <form name="teszturlap" id="teszturlap" method="POST" action="feldolgozó-URL-címe">

  2. Elküldés előtti ellenőrzésnél, helyes kitöltésnél mehet, hibás kitöltésnél nem mehet.
    Milyen címre, mikor mehet és mikor nem, ezt a JavaSript ellenoriz() function meghatározásunk dönti el.
    <form name="teszturlap" id="teszturlap" method="POST" action="nincs" onSubmit="return ellenoriz()">

  3. Email címre, szerveroldali program küldi. ( JavaScript nem továbbít, email-t. )
    <form name="teszturlap" id="teszturlap" method="POST" enctype="text/plain" action="mailto:XXXXXXXXXX@YYY.hu" >

  4. JavaScript programnak, ha egy oldalon egy vagy több űrlap is van.
    (Több űrlap mesetén, name és id azonosítók más elnevezést kapjanak. Feldolgozó program ezek alapján dönti el,
    melyik űrlapot kell feldolgozni.)
    <form name="teszturlap" id="teszturlap">


Adatbeviteli mezők a
kezdő és záró <form> elemek között.

Leggyakoribb beviteli mező az input elem, melynek mindig meg kell határozni
típusát, name és id azonosítóját.
value és size meghatározás nem kötelező, de ajánlott.

value="" ----- Alapértelmezettként nem jelenik meg semmi, azaz, üres mező, melyet felhasználó módosíthat.
value="Szöveg" ----- Alapértelmezettként ez a szöveg jelenik meg, melyet felhasználó módosíthat.
size=50 ----- Inputablak szélességét határozza meg.
maxlength="10" ----- Inputablakba, az itt meghatározott számú string írható be.

Ha maxlength érték nincs meghatározva, input mezőbe hosszabb adat is írható, mint annak szélességi mérete, de a beírt adatból, csak annyi lesz látható, amekkora az ablak szélességi mérete.



Űrlapot formázó elemek.

Formázó elemek elhelyezése nem kötelező, de ajánlott.
Űrlapot formázó elemek a felhasználót segítik, az űrlap jobb áttekinthetőségére és egyértelművé teszik annak felhasználását.

Űrlapok több felhasználási területtel is rendelkezhetnek:
- Személyes adatokkal.
- Több, egymástól elkülönülő adatgyűjtéssel.

Formázó elemek, melyeknek stílus meghatározást is alkalmazhatunk,
nevükkel vagy class vagy id azonosítóval:

  1. <fieldset> Egy területet jelöl ki, ugyan úgy mint a div elem <fieldset>
  2. <legend> Egy terület címsorát határozza meg. </legend>
  3. <label for="azonosító"> Egy-egy elem azonosítását és tájékoztató szövegét határozza meg. </label>
    Ez az elem nem formáz, de adatok feldolgozásában segít.
    Ezért a for="azonosítója" egyezzen meg az input vagy más elem name azonosítójával.
  4. Belső elrendezéshez használhatunk, <p> <br> jelölőelemeket, és táblázatokat (<table>).

1. fieldset minta:

<fieldset>
     <p>A fieldset elem, egy területet jelöl ki kerettel.</p>
</fieldset>

A fieldset elem, egy területet jelöl ki kerettel.



2. legend minta:

<fieldset>    <legend> Terület címsora. </legend>
     <p>A fieldset elem területet jelöl ki kerettel.<br>
	 A legend elem, megjeleníti terület címsorát.</p>
</fieldset>

Terület címsora.

A fieldset elem területet jelöl ki kerettel.
A legend elem, megjeleníti terület címsorát.




3. label és input minta:

<fieldset>    <legend> Őn elérhetősége. </legend>
     <label for="neve">Neve </label>     <input type="text" name="neve" id="neve"/>  <br><br>
     <label for="cime">Címe </label>     <input type="text" name="cime" id="cime"  size=60/>
</fieldset>

Őn elérhetősége.




4. táblázati minta:

<style>
     .csoport{width: 90%; border: 1px solid #ccc; padding: 10px; margin-left: auto; margin-right: auto;}
     .csoport td{border:none; padding:3px;}
</style>



<table class="csoport">  <caption> Őn elérhetősége. </caption>
<tr><td>
     <label for="neve">Neve </label>   </td><td>    <input type="text" name="neve" id="neve"> </td> 
</tr>
<tr>	<td> 
     <label for="cime">Címe </label>   </td><td>   <input type="text" name="cime" id="cime"  size=60>  </td>
</tr>	 
</table>

Őn elérhetősége.



Űrlap adatait küldó gombok.

Szerveroldali programnak küldjük feldolgozásra.

<input type="submit" name="submit" id="submit" value="Küldés" >


JavaScript programnak küldjük feldolgozásra.
Itt, csak a function feldolgozo() meghívása a fontos!

<input type="button" value="Küldés" onClick="feldolgozo()";>

Vagy így:

<button type="button" onClick="feldolgozo()";> Küldés </button>


JavaScript jQuery programnak küldjük feldolgozásra.
Itt, csak az id azonosító a fontos!

<input type="button" id="btn" value="Küldés" >

Vagy így:

<button type="button" id="btn"> Küldés </button>




Megjegyzés:

A <button> elemmel történő adatok továbbítása nem szerveroldali programokhoz,
hanem JavaScript programhoz továbbítódig.
Ezért a button <button> elem lehet az űrlap területén, vagy az űrlap területen kívül, dokumentum tetszőleges területén is.

A JavaScript-et nem érdekli a kezdő form elemben általunk meghatározottak.
JavaSript function, csak azon meghatározásokat értékeli ki, melyeket a functionnál meghatározunk.























































url(Nincs-hatterkep.xxx)