Ebben a leckében megismerkedünk az űrlapok létrehozásának módjával, a különböző űrlapelemekkel.
Az űrlapokat a weboldalak készítésénél számos célra felhasználhatjuk, például arra, hogy segítségével a látogatók üzenetet, visszajelzést küldhessenek az üzemeltetőnek, árukat rendelhessenek, bejelentkezhessenek, és így tovább.
Tananyagunkban az űrlapok létrehozásával foglalkozunk, az adatok feldolgozásának módjaira itt most nem térünk ki, mivel az legtöbbször szerveroldali programozást is igényel, ami a tananyagunk témakörén kívül esik.
A HTML5-ben az űrlapok lehetőségei oly mértékben kiteljesedtek, hogy csak erről az egy témáról lehetne olyan terjedelemben írni, mint a mostani teljes tananyagunk. Ezért ebben a fejezetben a leggyakrabban használt területekre koncentrálunk, de bemutatunk a most még csak néhány böngészőprogram által támogatott újdonságokat is.
Az űrlapok/kérdőívek összes eleme a <form> és </form> tageken belül helyezkedik el, ahol az egyes űrlapelemeket más-más tagekkel definiálhatjuk.
Mire használjuk?
Az űrlap létrehozására és főbb tulajdonságainak megadására. A <form> és </form> elemek közé kell elhelyeznünk az űrlapelemeket (pl. beviteli mező, jelölőnégyzet stb.) Az űrlap (alapesetben) akkor kerül elküldésre, ha egy megfelelő (úgynevezett submit) gombot is elhelyezünk az űrlapban, és azt a felhasználó a kitöltés végén meg is nyomja (esetleg más módon aktiválódik a gomb).
A tag paraméterei:
A mailto: protokollt használva az üzenet a számítógép alapértelmezett levelezőprogramjával kerül továbbításra. Ehhez azonban ennek a programnak megfelelően konfigurálva kell lennie, így egyáltalán nem egy biztos (és hatékony) módja az űrlap adatok e-mailben való küldése. Példáinkban is csak azért használjuk, mert így egyszerűen láthatjuk, hogy milyen adatok kerülnének elküldésre.
Sokkal megbízhatóbb, ha az űrlapokat szerveroldalon dolgozzuk fel egy megfelelő script segítségével.
A második esetben az adott űrlapot egy szerveren futó program dolgozza fel. Ekkor az URI például a "http://www.szerverneve.hu/feldolgoz.php"
<form action="urlapfeldolgoz.php" method="post" name="kerdoiv"> <!-- itt kapnak helyet az űrlapelemek --> </form>
A fenti kóddal egy olyan űrlapot hoztunk létre, amelyik post metódussal kerül elküldésre. Az adatokat az urlapfeldolgoz.php script fogja feldolgozni. Az űrlap neve kerdoiv lett.
Mielőtt egy működő űrlapra mutatnánk példát, ismerkedjünk meg néhány további elemmel, ami ehhez szükséges.
Valójában az <input> taggel nagyon sokféle űrlapelemet létrehozhatunk (beviteli mező, jelölőnégyzet, választókapcsoló, elküldés gomb), most csak kifejezetten az űrlap elküldésére és alaphelyzetbe hozására vonatkozó funkciókat emeljük ki. Az <input> tag további lehetőségeit hamarosan részletesen is bemutatjuk.
<form action="urlapfeldolgoz.php" method="post" name="kerdoiv"> <!-- itt kapnak helyet az űrlapelemek --> <br> <input type="submit" value="Elküld"> <input type="reset" value="Töröl"> </form>
A fenti kódban már helyet kapott az elküldés és alaphelyzet gomb is, amelyeknek a feliratát most megváltoztattuk a value paraméter használatával.
Mire használjuk?
Ha többsoros beviteli mezőt (szövegterületet) akarunk létrehozni, akkor a <textarea> taget kell használnunk. A <textarea> és </textarea> között elhelyezett szöveg lesz a mező alapértelmezett értéke.
A tag paraméterei:
A szövegterület (és minden más beviteli mező) méretét úgy kell beállítani, hogy elegendő terület álljon rendelkezésre az adatok beviteléhez, az elküldés előtt jól ellenőrizhető legyen a tartalma.
A példában létrehoztunk egy olyan szövegterületet, amelybe a látogatók leírhatják a véleményüket a honlapunkról. Méretnek 50 oszlopot és 10 sort állítottunk be. Az űrlapmező a velemeny nevet kapta. Ha elküldjük az űrlapot, azt kell tapasztalni, hogy az e-mail törzsében a velemeny mező megjelenik, és utána egy egyenlőségjelet követően olvashatjuk, amit a mezőbe írt a felhasználó.
A placeholder paraméterrel egy olyan szöveget helyeztünk el, amely a szövegterületen látszódik, de a szöveg begépelésekor eltűnik. A required paraméterrel jeleztük, hogy a mezőt kötelező kitölteni, ezért azon böngészők, amelyek támogatják ezt a funkciót, egy hibaüzenetben figyelmeztetnek elküldéskor, ha üresen maradt a mező.
A következő animációban láthatjuk, hogy az alapértelmezett levelezőprogram hogyan nyílik meg az elküldés gombra kattintás után.
Halljuk, ahogy az űrlapmezőt szerkesztőmezőként jelzi a képernyőolvasó program.
Nézd meg, mi történik akkor, ha egy szöveget elhelyezel a forráskódban a <textarea> és </textarea> tag közé! Megjelenik-e ekkor a placeholderben megadott szöveg?
El tudom-e küldeni az űrlapot ebben az esetben akkor, ha semmit nem írtam be a szövegterületbe?
Állítsd vissza az eredeti forráskódot és használd az autofocus paramétert is a <textarea> tagnél! Mit tapasztalsz? Mi történt a placeholderben megadott szöveggel?
Próbáld ki a readonly és disabled attribútum használatát. Milyen különbséget tapasztalsz a kettő között? Melyiknél tudod a tartalmat kimásolni a szövegterületből?
Az előbbiekben létrehoztunk egy űrlapot, de a forráskódban jelöltük is, hogy nem volt szerencsés megoldás, hogy az űrlapmező előtt egy normál bekezdésbe írtuk le, hogy milyen adatot várunk a felhasználótól. Ennél precízebben kell meghatározni az űrlapmezők és a hozzájuk tartozó szövegek (címkék) kapcsolatát, hogy az akadálymentesen használható legyen. Erre jó a <label> tag.
Mire használjuk?
Az űrlapelemhez tartozó szöveg (címke) megadására szolgál.
A tag paraméterei:
Ebben a példában egy <label> taggel adtuk meg az űrlapmezőhöz tartozó címkét. Ehhez egyedi azonosítóval kellett ellátnunk az űrlapmezőt (id="velemeny"), és a <label> tag for attribútumában ezt a nevet kellett megadnunk.
Vegyük észre, hogy ha most az oldalon az űrlapmező előtti címkére kattintunk, akkor a hozzá tartozó űrlapmező automatikusan fókuszba kerül, vagyis a kurzor megjelenik benne.
A <label> és a hozzá tartozó mező a szabvány szerint nem kell, hogy közvetlenül kövesse egymást.
Bizonyos űrlapoknál előfordul, hogy az űrlapmező és a címke egymástól túl nagy távolságra kerül, és emiatt gyengül a kettő közti asszociáció. Ilyenkor sokat segít a <label> használat, mert elég a címkére kattintani ahhoz, hogy az űrlapelem fókuszba kerüljön, illetve – mondjuk egy jelölőnégyzet – kiválasztásra kerüljön.
A vak felhasználók akkor tudnak egy webes űrlapot jól kitölteni, ha a címkék minden esetben precízen meg vannak adva, ugyanis a címke tartalmát a képernyőolvasó program felolvassa, amikor az adott űrlapelemre navigál a felhasználó.
A WCAG 2.0 szabvány 3.3-as irányelve tartalmaz ehhez kapcsolódó teljesítési feltételt.
3.3.2 Címkék vagy utasítások: Megfelelő címkék vagy utasítások biztosítottak, amikor a tartalom felhasználói bevitelt igényel. (A szint)
Mielőtt tovább ismerkednénk az űrlapelemekkel, érdemes megismerkedni azon tagekkel is, amelyek elegánsabb, átláthatóbb megjelenést kölcsönözhetnek az űrlapjainknak.
Az űrlapok esetén érdemes lehet az egyes elemeket valamiképpen strukturálni, az azonos témához tartozó mezőket összefogni.
A csoportosítani kívánt mezőket a <fieldset> és </fieldset> tag-ek közé kell zárni. Minden ilyen csoportnak lehet felirata is, amelyet a <legend> és </legend> tag-ek között kell megadni.
A <fieldset> tag paraméterei:
A <legend> tag paraméterei: globális attribútumok
Most nézzük meg a korábbi példánkat úgy, hogy a <fieldset> és <legend> tageket is használjuk, illetve egy külső stíluslapot is beállítunk.
Ebben a példában elhelyeztük a <fieldset> és <legend> taget is, amellyel az űrlapunkat jobban strukturálni tudtuk. Egy stíluslappal meg is formáztuk az oldalt.
Távolítsd el az oldalból a stíluslapra hivatkozást, hogy lásd, hogyan nézne ki az űrlap a stílus megadása nélkül.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.