032.4 Lecke 1

Mielőtt belekezdenénk az űrlapokba, hozzunk létre egy egyszerű, üres HTMl-oldalt, tartalom nélkül:

Mentsük el a kódot szövegfájlként, .html kiterjesztéssel (például form.html) és nyissuk meg a böngészőnkkel! Ha változtatunk rajta, nyomjuk meg a böngészőben az újratöltés gombot a módosítások megjelenítéséhez!

Az űrlap (form) alapvető struktúráját a <form> címke és annak belső elemei adják meg:

A dupla idézőjeleket nem kötelező használni olyan, egyszavas attribútumok esetén, mint a type, tehát a type=text ugyanúgy működik, mint a type="text". A fejlesztő eldöntheti, melyik konvenciót használja.

Mentsük a módosításokat és frissítsük a lapot a böngészőben. Az alábbi eredményt kell kapnunk: Figure 1.

A <form> tag önmagában nem okoz látható változást az oldalon. A <form>…​</form> tagek között levő elemek határozzák meg a mezőket és egyéb vizuális segédleteket, amelyeket már lát a felhasználó.

Példakódunk tartalmaz általános HTML tageket (<h2> és <p>), valamint az <input> taget, ami egy form-specifikus tag. Míg az általános címkék bárhol megjelenhetnek a dokumentumban, a form-specifikusakat csak a <form> elemen belül használhatjuk; vagyis a nyitó <form> és a záró </form> tagek között.

Amint a példában látható, a bekezdés tag (<p>) használható a mezőhöz tartozó leírás megadásához. Nincs egyértelmű mód arra azonban, hogy a böngésző összekösse a <p> taget a hozzátartozó input elemmel. A <label> tag sokkal megfelelőbb ezekben az esetekben (ezentúl a példákban az összes kód a HTML-dokumentum body részében lesz):

A <label> tag for attribútuma tartalmazza a megfelelő bemeneti elem id értékét. Hozzáférhetőbbé teszi az oldalt, mivel a képernyőfelolvasók képesek lesznek elmondani a label elem tartalmát, amikor az input elem van fókuszban. Ezenfelül a látogatók rákattinthatnak a címkére, hogy a fókuszt a hozzá tartozó input mezőre állítsák.

Az id attribútum a form-elemek esetén úgy működik, mint a dokumentum bármelyik más eleme esetén. Megadja az elem — dokumentumon belül — teljesen egyedi azonosítóját. A name attribútum célja hasonló, de az a form esetén az input elem azonosítására szolgál. A böngésző a name attribútummal azonosítja a beviteli mezőt, amikor az űrlap adatait elküldi a szervernek, ezért fontos, hogy a name attribútumok a formon belül egyediek legyenek és legyen jelentésük.

A type attribútum az input elem fő attribútuma, mivel meghatározza az elem által elfogadott adattípust és annak vizuális megjelenését is. Ha a type attribútum nincs megadva, akkor alapértelmezés szerint az input szövegdobozként jelenik meg. A modern böngészők az alábbi bemeneti típusokat támogatják:

A password, search, tel, url és email beviteli típusok megjelenése nem különbözik a standard text típustól. A céljuk az, hogy a böngészőnek segítséget adjanak az adott beviteli mező tervezett tartalmáról, így a böngésző vagy a kliensoldalon futó szkript egyéni műveleteket végezhet egy adott beviteli típushoz. Az egyetlen különbség a szöveges beviteli típus és például a jelszómező típusa között az, hogy a jelszómező tartalma nem jelenik meg, amikor a látogató beleír. Érintőképernyős eszközökön, ahol a szöveg beírása képernyőbillentyűzettel történik, a böngésző csak a numerikus billentyűzetet tudja megjeleníteni, amikor a tel típusú mező fókuszba kerül. Egy másik lehetséges művelet az ismert e-mail címek listájának felajánlása, amikor az "email" típusú bevitelre fókuszál.

A number típus szintén egyszerű szöveges mezőként jelenik meg, de növelő/csökkentő nyilakkal az oldalán. Érintőképernyős eszközök esetén megjeleníti a numerikus billentyűzeteket, ha rákerül a fókusz.

A többi bemeneti elemnek megvan a saját megjelenési és viselkedési formája. A date típus például a helyi dátumformátum-beállításoknak felel meg és megjelenik egy naptár, amikor a mezőre kerül a fókusz:

A kód eredménye a Figure 2 lesz, ami megmutatja, hogy a Firefox asztali verziója hogyan jeleníti meg ezt a mezőt.

Ez minden böngésző szabványos funkciója és nincs hozzá szükség extra beállításokra vagy programozásra.

A bemenet típusától függetlenül egy input mező tartalmát értéknek (value) nevezzük. Alapértelmezés szerint minden mező értéke üres, de a value attribútum használatával megadhatjuk egy mező alapértelmezett értékét. Dátum típus esetén az ÉÉÉÉ-HH-NN formátumot kell használnunk. Az alábbi mező alapértelmezett értéke 2020. augusztus 6:

A specifikus bemeneti típusok segítik a látogatót a mezők kitöltésében, de nem akadályozzák meg, hogy kikerülje a korlátozásokat és tetszőleges értékeket adjon meg bármelyik mezőben. Ezért fontos az, hogy az adatok a szerveren is validálva legyenek.

Azok az űrlap-elemek, amelyek értékeit a látogatónak kell megadni, olyan különleges attribútumokkal rendelkezhetnek, amelyek segítik azok kitöltését. A placeholder attribútum egy példaértéket szúr be a bemeneti elembe:

A placeholder az input elemben jelenik meg, ahogy az Figure 3 látható.

Amint a látogató elkezdi kitölteni a mezőt, a placeholder szöveg eltűnik. A placeholder szöveg nem kerül elküldésre a mező értékeként, ha a mező üres.

A required attribútum megköveteli, hogy a felhasználó kitöltse a mezőt, mielőtt elküldené az űrlapot:

A required attribútum egy Boolean attribútum, tehát magában kell beírni (egyenlőségjel nélkül). Fontos megjelölni a kötelezően kitöltendő mezőket, különben a látogató nem fogja tudni, hogy mely mezők hiánya akadályozza meg az űrlap elküldését.

Az autocomplete attribútum jelzi, hogy a böngésző kitölthesse-e automatikusan a mező értékét. Ha az autocomplete="off" értéket adjuk meg, akkor a böngésző nem ajánl korábbi értékeket a mező kitöltéséhez. A szenzitív információkat (mint például bankkártyaszámok) tartalmazó bemeneti elemek esetén az autocomplete attribútumot off-ra kell állítani.

A text mezővel szemben, ahol csak egy sor szöveg adható meg, a textarea (szövegdoboz) elem lehetővé teszi, hogy a felhasználó egy sornál több szöveget adjon meg. A szövegdoboz egy különálló elem, de nem a bemeneti elemeken alapszik:

A textarea tipikus megjelenése az alábbi: Figure 4.

A másik különbség a bemeneti elemhez képest, hogy a textarea elemhez tartozik lezáró tag (</textarea>), tehát a tartalma (azaz az értéke) ezek közé kerül. A rows és cols attribútumok nem korlátozzák a szöveg mennyiségét; csak a megjelenítést határozzák meg. A szövegdoboz jobb alsó sarkánál megfogva átméretezhető a látogató által.

Az űrlapvezérlők segítségével többféle módon is listázhatjuk a lehetőségeket a felhasználó számára: a <select> elem, a radio és a checkbox bemeneti típusokkal.

A <select> elem egy lenyíló menü, előre definiált listaelemekkel:

Az <option> címke egyetlen bejegyzést reprezentál a megfelelő <select> vezérlőben. A teljes lista megjelenik, amikor a látogató rákattint a vezérlőelemre, ahogy az Figure 5 ábrán látható.

Alapértelmezés szerint a lista első bejegyzése van kiválasztva. Ezt a viselkedést úgy változtathatjuk meg, hogy hozzáadjuk a selected attribútumot egy másik bejegyzéshez, így az oldal betöltődésekor az lesz kiválasztva.

A radio input hasonló a <select> vezérlőhöz, de lenyíló lista helyett az összes bejegyzést megjeleníti, így a látogató megjelölhet egyet közülük. Az alábbi kód eredményei a Figure 6 ábrán láthatóak.

Vegyük figyelembe, hogy az azonos csoportba tartozó összes radio típusú inputnak ugyanaz a name attribútuma. Mindegyik kizárólagos, így a kiválasztott bejegyzéshez tartozó value attribútum lesz az, amelyik a közös name attribútumhoz kapcsolódik. A checked attribútum úgy működik, mint a <select> vezérlő selected attribútuma, az oldal első betöltődésekor megjelöli a megfelelő bejegyzést. A <label> tag különösen hasznos a radio típusú bejegyzéseknél, mert lehetővé teszi a látogató számára, hogy magán a vezérlőn kívül a megfelelő szövegre kattintva vagy koppintva ellenőrizze a bejegyzést.

Míg a radio vezérlők csak egy lista egyetlen bejegyzésének kiválasztására szolgálnak, a checkbox típus lehetővé teszi, hogy a látogató több bejegyzést is kiválasszon:

A jelölőnégyzetek is használhatják a checked attribútumot, hogy a bejegyzések alapértelmezés szerint kijelölésre kerüljenek. Míg a radio típusú inputok esetén a vezérlőelemek kerekek, addig checkboxok esetén négyzet alakúak, ahogyan az a Figure 7 ábrán látható.

Ha egynél több bejegyzés van kiválasztva, a böngésző ugyanazzal a névvel küldi el őket, így a backend-fejlesztőnek speciális kódot kell írnia a jelölőnégyzeteket tartalmazó űrlapok megfelelő olvasásához.

A használhatóság javítása érdekében a beviteli mezők csoportosíthatók egy <fieldset> címkén belül:

A <legend> tag tartalmazza a szöveget, amely a frame (keret) tetejére kerül, a <fieldset> tag pedig körberajzolja a vezérlőelemeket ([img-figg08]).

A <fieldset> tag nem változtatja meg a mezők értékeinek szerverre való elküldését, csak lehetővé teszi a frontend fejlesztő számára, hogy könnyebben irányítsa az egymásba ágyazott vezérlőelemeket. Például a <fieldset> attribútumban a disabled attribútum beállítása az összes belső elemét elérhetetlenné teszi a látogató számára.

Vannak olyan helyzetek, amikor a fejlesztő olyan információt akar az űrlaphoz hozzáadni, amelyet a látogató nem tud manipulálni. Ez azt jelenti, hogy a fejlesztő által kiválasztott értéket anélkül küldi el, hogy olyan űrlapmező jelenne meg az oldalon, ahol a látogató értéket írhat be vagy módosíthat. A fejlesztő például az adott űrlaphoz egy olyan azonosító tokent szeretne hozzáadni, amelyet a látogatónak nem kell látnia. A rejtett elem kódolása a következő példában leírtak szerint történik:

A rejtett beviteli mező értéke általában a szerveroldalon, a feldolgozáskor kerül hozzáadásra a dokumentumhoz. A rejtett bemeneteket a böngésző szokásos mezőként kezeli, elküldi őket a szervernek, amely szintén szokásos bemeneti mezőként olvassa be őket.

A HTML űrlapok a beírt vagy listából kiválasztott szöveges adatok mellett tetszőleges fájlokat is elküldhetnek a szervernek. A "file" beviteli típus lehetővé teszi, hogy a látogató kiválasszon egy fájlt a helyi fájlrendszerből, és azt közvetlenül a weboldalról küldje el:

A file beviteli típus egy űrlapmező helyett, amelybe írni kell, vagy amelyből értéket kell kiválasztani, egy browse feliratú gombot jelenít meg, amely megnyit egy fájl párbeszédpanelt. A file beviteli típus bármilyen fájltípust elfogad, de a backend fejlesztője valószínűleg korlátozni fogja a megengedett fájltípusokat és azok maximális méretét. A fájltípus ellenőrzése a frontendben is elvégezhető az accept attribútum hozzáadásával. Ha például csak JPEG és PNG képeket szeretnénk elfogadni, az accept attribútumnak `accept="image/jpeg, image/png"-nek kell lennie.

Alapértelmezés szerint az űrlap akkor kerül elküldésre, amikor a látogató megnyomja az Enter billentyűt bármelyik beviteli mezőnél. A dolgok intuitívabbá tételéhez a submit beviteli típushoz egy submit gombot kell hozzáadni:

Az value attribútumban lévő szöveg jelenik meg a gombon, ahogyan az a következő ábrán látható: Figure 9.

Egy másik hasznos gomb az összetett űrlapokban a reset gomb, amely törli az űrlap tartalmát, és visszaállítja az eredeti állapotát:

A submit gombhoz hasonlóan a value attribútumban lévő szöveggel lehet a gombra szöveget tenni. Alternatívaként a <button> tag használható gombok hozzáadására űrlapoknál vagy bárhol máshol az oldalon. Az <<input> taggel készített gombokkal ellentétben a gomb elemnek van egy záró tagje, és a gomb felirata a nyitó és záró tagek közötti tartalom:

Űrlap esetén a button elem alapértelemzett művelete az űrlap elküldése. Az input gombokhoz hasonlóan ezen gomb attribútuma is lehet reset.

A HTML űrlap megírásának utolsó lépése annak meghatározása, hogy az adatokat hogyan és hová kell elküldeni. Ezek a szempontok mind a kliens, mind a szerver tulajdonságaitól függenek.

Szerveroldalon a leggyakoribb megoldás egy olyan szkriptfájl, amely az alkalmazás céljának megfelelően elemzi, ellenőrzi és feldolgozza az űrlap adatait. A backend fejlesztője például írhat egy receive_form.php nevű szkriptet, amely fogadja az űrlapról küldött adatokat. A kliensoldalon a szkriptet a form tag action attribútumában jelöljük:

Az action attribútum ugyanazokat a konvenciókat követi, mint az összes HTTP-cím. Ha a szkript az űrlapot tartalmazó oldal azonos hierarchiaszintjén található, akkor az elérési útvonal nélkül is kiírható. Ellenkező esetben az abszolút vagy a relatív elérési utat kell megadni. A szkriptnek a választ is generálnia kell, hogy az legyen az űrlap elküldése után a böngésző által betöltött céloldal.

A HTTP különböző módszereket biztosít az űrlapadatok küldésére a szerverrel való kapcsolaton keresztül. A leggyakoribb módszerek a get és a post, amelyeket a form tag method attribútumában kell feltüntetni:

Vagy:

A get metódus esetén az űrlap adatai közvetlenül az URL-ben vannak kódolva. Amikor a látogató elküldi az űrlapot, a böngésző betölti az action attribútumban meghatározott URL-t az űrlap mezőivel együtt.

A get metódust kis mennyiségű adat esetén részesítjük előnyben, például egyszerű kapcsolatfelvételi űrlapok esetén. Az URL hossza azonban nem lehet több néhány ezer karakternél, ezért a post módszert kell használni, ha az űrlapok nagy vagy nem szöveges mezőket, például képeket tartalmaznak.

A post metódussal a böngésző a HTTP-kérelem törzsében küldi el az űrlap adatait. A post módszer szükséges az olyan bináris adatok esetében, amelyek meghaladják az URL méretkorlátját, de egyszerűbb szöveges űrlapok esetén feleslegesen terheli a kapcsolatot, ezért ilyen esetekben a get metódus előnyösebb.

A választott módszer nem befolyásolja, hogy a látogató hogyan használja az űrlappot. A get és post metódusokat az űrlapot fogadó szerverszkript másképp dolgozza fel.

A post módszer használata esetén az űrlap tartalmának MIME típusát is meg lehet változtatni az enctype form attribútummal. Ez befolyásolja, hogy az űrlap mezői és értékei hogyan lesznek egymásra helyezve a kiszolgálóval folytatott HTTP-kommunikációban. Az enctype alapértelmezett értéke az application/x-www-form-urlencoded, ami hasonló a get metódusban használt formátumhoz. Ha az űrlap file típusú beviteli mezőket tartalmaz, akkor helyette a multipart/form-data enctype-ot kell használni.