Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Űrlapok

Tanulási útmutató

Összefoglalás

Ebben a leckében megismerkedünk az űrlapok létrehozásának módjával, a különböző űrlapelemekkel.

Űrlapok

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.

Megjegyzés

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.

<form> –Űrlap létrehozása

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:

Fontos

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"

Példa
Forráskód
<form action="urlapfeldolgoz.php"  method="post" name="kerdoiv">
<!-- itt kapnak helyet az űrlapelemek -->
</form>
Magyarázat

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.

Megjegyzés

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.

Vissza a tartalomjegyzékhez

<input type="submit"><input type="reset"> – Űrlap elküldése, illetve alapállapotba hozása

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.

Példa
Forráskód
<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>
Magyarázat

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.

Vissza a tartalomjegyzékhez

<textarea> –Szövegterület létrehozása

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:

Kapcsolódó ergonómiai elvek

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.

Példa
Interaktív példa
Magyarázat

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.

Az animációban azt látjuk, hogy egy űrlap elküldésekor megjelenik az alapértelmezett levelezőprogram, amelynek címzettje ki van töltve, illetve a levél törzsében látható az űrlap tartalma.

Flash lejátszó letöltése

Űrlap küldés e-mail címre
A példa meghallgatása képernyőolvasó programmal

Halljuk, ahogy az űrlapmezőt szerkesztőmezőként jelzi a képernyőolvasó program.

Gyakorlat

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?

Gyakorlat

Á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?

Gyakorlat

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?

Vissza a tartalomjegyzékhez

<label> – Címke használata

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:

Példa
Interaktív példa
Magyarázat

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.

Kapcsolódó ergonómiai elvek

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.

Kapcsolódó akadálymentességi elvek

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)

Vissza a tartalomjegyzékhez

<fieldset> <legend> – űrlapelemek strukturálása

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.

Példa
Interaktív példa
Magyarázat

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.

Gyakorlat

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.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

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.