8. Lecke: Űrlapok

- Ismerje az űrlapok szerepét a weboldalakon
- Ismerje az űrlapok létrehozásának módszertanát
- Ismerje és tudja létrehozni a fontosabb űrlapelemeket
- Ismerje az űrlapok formázásának lehetőségeit
- Űrlapok szerepe
- Űrlapok létrehozása
- Űrlap elemek
- Űrlapok formázása
Űrlapok szerepe a weboldalon
Az űrlapok olyan HTML blokkok, amelynek elemeivel adatokat tud a felhasználó a weboldalon keresztül visszajuttatni. Ilyen adatok lehetnek szövegesek, számok, listából választott elemek, vagy logikai érték illetve akár feltöltendő fájl. Ezeket az adatokat fel lehet dolgozni kliens oldalon a böngészőben, illetve szerver oldalon is. Természetesen az adatok feldolgozásához már web-programozás szükséges, ami nem témája ennek a tananyagnak, de az űrlapok létrehozása és paraméterezése a webfejlesztés szerves része. Egy weboldalon több, egymástól független űrlap is lehet, ezek adatai és funkciói teljesen külön kezeltek. Például egy bejelentkezést megvalósító űrlap és egy kereső űrlap nem zavarja egymást a weboldalon.
Űrlapok létrehozása
Fontos, hogy először az űrlapot kell létrehozni és azon belül kell definiálni az űrlapelemeket. Ha egy űrlapelem az űrlap definícióján kívül áll, akkor az önállóan működik és legfeljebb kliens oldalon lehet kezelni az adatait.
<form > ... </form>
Az űrlap létrehozásakor két fontos attribútumot szoktunk megadni. Az action attribútum szerepe, hogy definiálja azt, hogy az űrlap adatait elküldéskor hova továbbítsa a böngésző, azaz mi fogja a kitöltött adatokat feldolgozni. A method pedig az elküldés módját adja meg. Két küldési mód létezik, az egyik a get, amikor az adatok az URL-ben kerülnek átadásra, emiatt a böngésző címsorában láthatóak. Ez a módszer rövidebb, általában szöveges adatok küldésére való. A másik a post, amikor egy HTTP tranzakció keretében egy belső, a címsorban nem látható csatornán keresztül kerül az adat elküldésre. Az alapértelmezett érték a get.
<form action="feldolgozo.php" method="post"> ... </form>
Az URL-ben átküldött adatoknak akkor van értelme, ha lehetőséget szeretnénk biztosítani, hogy az eredményül kapott weboldalhoz könyvjelzőt rendelhessen a felhasználó, mert ilyenkor az adatok is bekerülnek a könyvjelzőbe, így annak a felhasználásával újra olyan oldalra jutunk, mintha megint kitöltöttük volna az űrlapok. Erre jó példa a kereső felületek, amikor ezzel az adatküldési móddal a keresés eredményét tudjuk elmenteni, ilyen jól látható a Google-ben kereséskor.

Űrlapelemek
Többféle űrlapelem létezik, fontos, hogy mindig a megfelelőt válasszuk. Létezik elem rövid és hosszú szövegre, listából választásra, eldöntendő kérdésre és fájlfeltöltésre, illetve egy rejtett adatátadásra. Továbbá létezik többfajta gomb is. Amikor űrlapot tervezünk mindig az első, hogy határozzuk meg, hogy milyen jellegű adatok beolvasását szeretnénk megvalósítani és ez alapján válasszuk ki az űrlapelemeket. Fontos az elemek elhelyezése, sorrendje, csoportosítása, hogy a felhasználó kényelmesen és követhetően tudja kitölteni.
Az elemek csoportosítására való a fieldset tag, amely összefogja a benne definiált elemeket, így azokra tudunk stílusból egyszerre hivatkozni.
<fieldset>...</fieldset>Alapértelmezésként a böngésző egy keretet rajzol az egybe foglalt elemek köré. Ennek a keretnek lehet címet is adni, amely a fieldset első tag-jaként szoktunk megadni és csak egy lehet egy csoportnak.
<fieldset>Egy általánosan használható attribútumot érdemes itt megjegyezni, mivel ez majdnem minden elemnél használható. A disabled="disabled" megadásával az elem inaktívvá válik, azaz nem használható, bár a tartalmát megtartja. Jogos kérdés lehet, hogy mi értelme van egy űrlapelemnek, amit nem lehet használni. Természetesen ezt a jellemzőt programból szokták változtatni, például egy rendelés gomb inaktív addig, amit a felhasználó nem pipálja ki, hogy elolvasta a rendelési feltételeket. Egy másik fontos tulajdonsága az elemeknek a nevük, amelyet a name attribútummal adnunk meg, mert ezen a néven azonosíthatóak az adatok a szerver oldalon.
<legend>...</legend>
...
</fieldset>
Ahogy a későbbiekben látható lesz, több típusú űrlapelemet ugyanazzal a tag-gel kell létrehozni, az input tag-gel, ilyenkor a type attribútuma dönti el, hogy mely típusú elem lesz. Ezeknek a tag-eknek nincs lezáró párjuk, önmagukban már definiálják az űrlapelemet.
Szöveget beolvasó űrlapelem több is van. Rövid szöveghez az egysoros szövegbeviteli mezőt ajánlatos használni:
<input type="text" name="szoveg" />
16. Ábra: Egysoros szöveges beviteli mező
<input type="text" name="szoveg" size="15" maxlength="10" value="alapszöveg" readonly="readonly" />
Hasonló űrlapelem a jelszó mező, amelynek a tulajdonságai megegyeznek az előző szöveges mezővel, a különbség, hogy ezt jelszó beolvasásához használjuk ezért a begépelt karakterek helyett egy helyettesítő karaktert jelenít meg a böngésző.
<input type="password" name="jelszo" />
Hosszabb szöveg beolvasásához többsoros szöveges mező szükséges.
<textarea name="szoveg">... </textarea>
<textarea cols="10" rows="5" maxlength="100" name="szoveg">
A mező alapszövege.
</textarea>
Ha egy eldöntendő kérdésre szeretnénk választ kapni a felhasználótól, akkor a jelölőnégyzetet célszerű használni. Ennek a lényege, hogy be és ki lehet kapcsolni. Fontos azt tudni, hogy az adatok elküldésekor csak a bekapcsolt állapotot küldi el, tehát ha a jelölőnégyzet nincs bekapcsolva, az adat meg se jelenik a szerver oldalon.
<input type="checkbox" name="valaszt" />
Ennek két fontosabb tulajdonsága van. Az egyik a checked="checked", amely hatására a jelölőnégyzet bekapcsolt állapotba kerül (alapértelmezettként nincs bekapcsolva). A másik attribútum a value, amely tartalmazza azt az átadandó értéket, amelyet bekapcsolt állapotban, az elküldéskor tovább ad az űrlap. Ennek hiányában az „on" értéket adja át.
<input type="checkbox" name="nyilatkozat" checked="checked" value="olvasta" />
Ha adott értékek közül szeretnénk választatni a felhasználóval, akkor két elem is használható. Kevés elemnél célszerű a választókapcsolót (csúnyább nevén rádiógombot) használni. Ennek a lényege, hogy több elem közül pontosan az egyiket választhatja ki a felhasználó.
<input type="radio" name="valaszt" />
Értelemszerűen annyi ilyen elemet kell felvenni, ahány lehetőséget kínálunk választásra. Az elemek azáltal lesznek csoportosítva, hogy mi a nevük. Tehát azon elemek tartoznak össze és lehet csak egyet választani közülük, amelyeknek a name attribútumának értéke megegyezik. Ennek az elemnek is megadható a checked="checked" tulajdonság, amelyet az egyiknek célszerű is megadni, ennek hiányában egyik se lesz alapértelmezettként kiválasztva, ami ellent mond annak, hogy pontosan egyet lehet kijelölni. Továbbá itt is meg lehet adni a value tulajdonságot, ilyenkor adatelküldéskor a csoportból annak az értékét adja át, amelyet a felhasználó kiválaszt.
<input type="radio" name="valaszt" value="1" checked="checked" />
<input type="radio" name="valaszt" value="2" />
<input type="radio" name="valaszt" value="3" />
Szintén adott értékek közül választásra való a lista, amelynek két formája is van: a lenyíló lista és a listadoboz. Sok listaelemnél mindenképp célszerű ezt választan. Először a listát kell létrehozni, majd azon belül a listaelemeket megadni.
<select name="lista">
<option>1. elem</option>
<option>2. elem</option>
...
</select>

Azt, hogy lenyíló lista vagy listadoboz lesz, a size attribútuma adja meg. Ha ez az érték 1, akkor lenyíló lista, ha ennél több, akkor listadoboz. A doboz sorainak a számát is ez az érték adja meg. Ha a listadoboz mérete kisebb, mint az elemeinek a száma, akkor automatikusan görgetősávot tesz rá a böngésző.
A multiple="multiple" tulajdonság megadásával a listadobozból csoportos kiválasztást is engedélyezünk, tehát egyszerre több elemet is ki lehet választani a Ctrl és Shift billentyűk segítségével. Mivel ennek a működése nem egységes, így ilyen esetben javasolt inkább több jelölőnégyzetet használni a lista helyett.
A lista elemeinek a value attribútummal értéket lehet adni. A kiválasztott elem ezen értékét küldi el az adatátadáskor. Ha ez nincs megadva, akkor a listaelem szövegét küldi el, amely a nyitó és záró tag között található, de ez kerülendő. A selected="selected" tulajdonság megadásával lehet kijelölni, hogy mely listaelem legyen alapértelmezettként kiválasztva.
A lista elemeit lehet csoportosítani, hogy sok elem esetén könnyebb legyen a felhasználónak közöttük keresni. A csoportnak a label attribútummal lehet címkét adni, amely az elválasztást megvalósítja, természetesen ezek nem választható listaelemek.
<optgroup label="elsoCsoport">
<option>...</option>
...
</optgroup>
<optgroup label="masodikCsoport">
<option>...</option>
...
</optgroup>
Egy példa a hét napjait tartalmazó lenyíló listára, ahol elválasztjuk a hétköznapokat és a hétvégi napokat, alapértelmezettként a kedd van kiválasztva, valamint átadásra a napok sorszáma kerül:
<select name="lista" size="1">
<optgroup label="Hétköznap">
<option value="1">Hétfő</option>
<option value="2" selected="selected">Kedd</option>
<option value="3">Szerda</option>
<option value="4">Csütörtök</option>
<option value="5">Péntek</option>
</optgroup>
<optgroup label="Hétvége">
<option value="6">Szombat</option>
<option value="7">Vasárnap</option>
</optgroup>
</select>
Az űrlapokon keresztül lehet fájlokat feltölteni a szerverre, természetesen csak akkor, ha ez ott engedélyezve van. Fájl feltöltésekor az adatküldés módjának post értéket kell választani. A fájlt egy tallózó gombbal lehet kiválasztani, a feltöltés az adatelküldéskor hajtódik végre.
<input type="file" name="fajl" />
Ennek a megjelenési formája és böngészőnként változik, így a design tervezésekor ezt figyelembe kell venni!
Létezik egy olyan űrlapelem, amelyik nem jelenik meg a felhasználónak az oldalon, nem is a felhasználó ad neki értéket. Ennek a rejtett elemnek a funkciója, hogy olyan adatot is át tudjunk adni kitöltött űrlapadatokkal, amelyet fejlesztéskor vagy programból aktuálisan határozunk meg. Ezt az adatot a value attribútumával tudjuk megadni. Ilyen lehet például, ha egy regisztrációs űrlap esetén átadjuk az adatokkal a kliens oldali aktuális dátumot és időt.
<input type="hidden" name="aktIdo" value="10:00" />
Magukhoz az űrlapelemekhez lehet címkét rendelni, amely hozzá tartozó felirat, így a felhasználó a címkére klikkelve is aktívvá tud tenni egy elemet. Ehhez az kell, hogy az elemnek azonosítót adjunk az id attribútumával, majd a címkében megadjuk a for attribútummal, hogy melyik elemhez tartozik.
<label for="login">Azonosító</label>
<input type="text" id="login" name="login" />
Végül fontos űrlapelemek a gombok. A gombokat funkciójuk szerint három csoportba tudjuk sorolni. A submit gomb hajtja végre az adatok elküldését a form action attribútumában meghatározott helyre. A reset gomb visszaállítja az összes űrlapelemet az alapértékére. Illetve az általános button gombnak nincs rögzített funkciója, ehhez programmal rendelünk műveletet. Mindhárom gomb esetén a value tulajdonság adja meg a gomb feliratát.
<input type="submit" value="Elküld" />
<input type="reset" value="Alaphelyzet" />
<input type="button" value="Újratölt" onClick="reload()" />
Ha az űrlapon található submit gomb, akkor bármely űrlapelemen leütve az Enter billentyűt az adatokat elküldi, mintha a gombra klikkelt volna a felhasználó.
A submit gomb helyett lehet képet is megadni, melynek a funkciója ugyanaz, mint a gombnak. Ennek olyan attribútumai vannak, amelyeket a képeknél (5. Lecke) már szerepeltek.
<input type="image" src="kuld.png" alt="Elküld" width="10" height="10" />
Űrlap formázása
Az űrlap formázásához nincs semmi speciális formátum. Természetesen a már megismert formázások mindegyike használható az űrlapelemekre is aszerint, hogy melyik milyen típusú elem. Általánosságban a méret, belső és külső margó, illetve a háttér megadása a legalapvetőbb formázási lehetőségek. Továbbá a szöveget tartalmazó elemeknek lehet a tartalmára az 5. Leckében megismert szövegformázásokat alkalmazni.
Az elemek kijelölésénél nagy szerepet játszik a fieldset-ekkel való csoportosítás. Illetve mivel több vizuálisan teljesen különböző elemet is az input tag-gel adunk meg, ezek közötti kijelölést nagyban segíti az értékfüggő kijelölők használata (4. Lecke).
input[type=text] { ... }


a form tag-ben megadott action tulajdonság adja meg.
| |
a submit gomb value tulajdonsága adja meg.
| |
a form tag-ben megadott method tulajdonság adja meg.
|
a method tulajdonság get értékével az URL-ben, a post értékével egy belső, nem látható HTTP csatornán.
| |
a method tulajdonság post értékével az URL-ben, a get értékével egy belső, nem látható HTTP csatornán.
| |
az action tulajdonság url értékével az URL-ben, a method értékével egy belső, nem látható HTTP csatornán.
|
az űrlapelemek csoportosítása, az elemek köré keretet tesz, illetve ezzel tudunk ezekre az elemekre együtt hivatkozni stílusból.
| |
az űrlapelemek csoportosítása, így különböző csoportok adatait különböző helyre küldhetjük, például bejelentkezés és keresés.
| |
ennek segítségével lehet a radio gombokat csoportosítani.
|
lenyíló lista és listadoboz, amit a size tulajdonság dönt el.
| |
a lenyíló lista, amit a select tag-gel adunk meg, és a listadoboz, amit az optgroup tag-gel.
| |
a lenyíló lista, a listadoboz és a többszörös kiválasztású lista, amit a multiple tulajdonság dönt el.
|
az űrlap adatainak elküldése.
| |
az űrlap alapállapotra állítása.
| |
egy megírt kliens oldali függvényt lehet vele meghívni.
|