Az űrlapokat a form-elem meghatározásával lehet definiálni. Az összes elem, amely az form elemen belül van, az adott űrlaphoz tartozik.
<form> … </form>
Az inicializáló <form> elembe a action attribútumot várják. Ezen keresztül lehet megadni, mi történjen az űrlapadatokkal. Általában PHP alkalmazásról van szó.
<form method="post" action="form.php"> … </form>
Ügyeljetek arra, hogy a megadott fájl valóban megtalálható legyen. Tehát helyesen kell beállítanotok az elérési utat.
Egy script helyett egy e-mail címet is megadhattok.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
Ebben az esetben az űrlapadatokat e-mailben küldik el. Hölgyeim és uraim, ez nem különösebben elegáns, ezért általában a scriptes verziót választják. Azonban ha éppen nincs kéznél script, akkor az űrlapot szükség esetén e-mailben is elküldhetitek.
Az method páratlan fontosságú attribútum a form elem számára. Ezen keresztül állíthatjuk be az HTTP átviteli módot az űrlap tartalmának elküldéséhez. Két különböző változat áll rendelkezésre.
• post = Az űrlapadatokat ebben az esetben két lépésben küldik az előírt címre. Először a böngésző kapcsolatba lép a megadott címmel. Ha ez sikeres volt, akkor az űrlapadatokat átadják a scriptnek.
• get = Ebben a módszerben az űrlapadatokat az URL végéhez fűzik, amit az action attribútumnak adtak meg. Ennek következtében az űrlapadatok többek között a böngésző címsorában is láthatók lesznek.
Természetesen felmerül a kérdés, hogy e két verzió közül melyiket használjuk az űrlapadatok elküldésére. Alapvetően mindkettő használható. Különösen, ha nagy adatmennyiségről és fájlok feltöltéséről van szó, akkor mindenképpen a post módszer mellett érdemes dönteni.
Egyszerű űrlapelemek
Eddig csak az űrlap külső vázát határoztuk meg. A böngészőben az űrlap maga azonban még nem látható.
<form method="post" action="form.php"> … </form>
Tehát most arról van szó, hogy az űrlapot tartalmával élettel kell megtölteni.
Az egyik leggyakrabban szükséges mezőtípus egy egysoros beviteli mező. Ezeket például a keresztnév, vezetéknév és az e-mail cím lekérdezésére használják. Az egysoros beviteli mezők az alábbi módon vannak definiálva:
<input type="text" name="keresztnev" />
Az input elemhez a type="text" attribútum-érték kombináció van hozzárendelve. Emellett minden beviteli mezőhöz meg kell adni egy belső azonosítót. Ez az azonosító egyedien kell azonosítani a dokumentumban. Különösen fontos, amikor az űrlapadatok feldolgozásáról egy script segítségével van szó. Az azonosítóban ne használjatok szóközt és speciális karaktereket.
Ha megnézitek az eredményt a böngészőben, a következő kép fogad titeket:
Egyelőre nem túl látványos az egész. De ha a szövegmezőbe kattintotok, észre fogjátok venni, hogy már elkezdhetitek a beírásokat.
Azért, hogy a látogatók tudják, mit kell beírniük a mezőbe, természetesen szükség van egy feliratra is.
Keresztnév: <input type="text" name="keresztnev" />
Egy pillantás a böngészőbe újra a várt eredményt mutatja.
Az size attribútum segítségével meghatározhatjátok a mező szélességét.
Keresztnév: <input type="text" name="keresztnev" size="30" /> <br /> Irányítószám: <input type="text" name="irszam" size="5" />
A size attribútumnak adható meg a kívánt mezőszélesség.
Ebben az összefüggésben az 5 pontosan öt karaktert jelent. Ezzel kapcsolatban érdemes megemlíteni a maxlength attribútumot is. Ez segítségével megadhatjátok, hogy a mezőbe írható karakterek maximálisan hány száma lehet. Egy példa erre:
Keresztnév: <input type="text" name="keresztnev" size="30" maxlength="40" />
Ha a megadott maxlength érték nagyobb, mint a size értéke, akkor hosszabb beírások esetén a mező automatikusan görget. Az value attribútum segítségével előzetesen kitölthető a mező.
Vezetéknév: <input type="text" name="vezeteknev" value="Neved" />
Az értéket a mező alapértékének tekintik.
A felhasználók törölhetik az alapértelmezett értéket.
Amúgy megakadályozhatod, hogy az értékeket a mezőkből töröljék. Ehhez definiálnod kell egy olyan beviteli mezőt, amely valójában nem is beviteli mező. Ezeket a mezőket gyakran kimeneti célokra használják. Érdekes lehet például az általuk szkripttel meghatározott értékek megjelenítése. Gondolj itt például egy zsebszámológépre. Ugyanúgy kézzel is feltöltheted egy szöveggel a mezőt, amelyet a látogató már nem változtathat meg. (Megjegyzés: Az Euro jel a PDF nézetben sajnos nem jelenik meg helyesen).
<input name="ar" type="text" value="€ 699.-" readonly />
Egy mezőt csak olvashatóvá tenni az readonly attribútummal lehet. Itt ismét egy pillantás az eredményre:
Az előre meghatározott szöveg közvetlenül látható. Azonban ezt nem lehet törölni.
Jelszómezők definíciója
Nyilván ismeritek a jelszómezőket. Mindenhol, ahol regisztráltok, meg kell adnotok egy jelszót. (Általában még kétszer is be kell írni).
A beírt adatok a beviteli mezőben nem láthatóak, hanem a böngésző automatikusan csillagokkal/pontokkal helyettesíti azokat. Ennek a változatnak az előnye: azok a személyek, akik véletlenül meglátják a jelszót, amikor beírod, nem tudják kikövetkeztetni. Azonban tévhit, hogy a jelszómezők automatikusan biztonságosak. Valójában a jelszavakat a szokásos HTTP esetén szövegesen továbbítják az űrlap elküldésekor.
A jelszómezők a következő módon definiálhatók:
<input type="password" name="jelszo" />
A type attribútumnak a jelszó értéket kell adni. Itt ismét egy pillantás az eredményre.
Ha valamit beírsz oda, akkor a böngészők közvetlenül a beírás közben láthatatlanná teszik.
