Mire használjuk?
Különböző űrlapelemek létrehozására használjuk. A type (típus) attribútum értéke fogja meghatározni az űrlapelem típusát (pl. beviteli mező, jelölőnégyzet, választókapcsoló, dátum, fájlfeltöltő stb.).
A tag paraméterei:
A type attribútummal tudjuk megadni, hogy milyen típusú űrlapmezőt szeretnénk készíteni. A lehetséges értékek:
Kulcsszó | Magyarázat | Hozzá tartozó vezérlő |
|---|---|---|
hidden | Rejtett űrlapmező, amelynek egy karakterláncot adhatunk értékül. | Nincs. |
text | Egyszerű szöveg bevitelére szolgáló mező, ahol nincsenek sortörések. | Szöveges mező |
search | Keresőmező. Egyszerű szöveg, sortörések nélkül. | Kereső mező |
tel | Telefonszám megadására. Egyszerű szöveg, sortörések nélkül. | Szöveges mező |
url | Egy abszolút URL megadására szolgál. | Szöveges mező |
E-mail cím (listájának) megadására szolgál. | Szöveges mező | |
password | Jelszó típusú mező. Nem látszik a begépelt szöveg, ami egyszerű szöveg lehet sortörések nélkül. | Szöveges mező, ahol a bevitt szöveg nem látszik, csak körök (csillagok) jelzik a begépelt karaktereket. |
datetime | Dátum és idő megadására szolgál. | Dátum és idő vezérlő |
date | Dátum (év, hónap, nap) megadására szolgál időzóna megadás nélkül. | Dátumvezérlő |
month | Dátum (év, hónap) megadására, időzóna megadás nélkül. | Hónap vezérlő |
week | Dátum (hét) megadására szolgál, időzóna megadás nélkül. | Hét vezérlő |
time | Idő (óra, perc, másodperc, ezredmásodperc) megadására, időzóna megadás nélkül. | Idő vezérlő |
datetime-local | Dátum és idő megadására (év, hónap, nap, óra, perc, másodperc, ezredmásodperc) megadására szolgál időzóna megadás nélkül. | Dátum és idő vezérlő |
number | Számérték megadására szolgál. | Szöveges mező, vagy szám mező, amelynek az értéke csökkenthető/növelhető a le és fel nyilakkal |
range | Számérték megadására, azzal a speciális jelentéssel, hogy a konkrét érték nem fontos. | Csúszka (vagy hasonló) vezérlő |
color | Egy szín (sRGB) megadására szolgál (8 bites vörös, zöld és kék komponenssel) | Színkerék vezérlő |
checkbox | Jelölőnégyzet (azonos jelölőnégyzet-csoportból nulla, egy vagy több elem jelölhető ki) | Jelölőnégyzet vezérlő |
radio | Választókapcsoló (azonos rádiógombcsoportból pontosan egy elem jelölhető ki, illetve ha nem volt alapértelmezetten kijelölt elem, akkor nulla vagy egy elem) | Választókapcsoló vezérlő |
file | Nulla, vagy több fájl feltöltésére mime típussal és opcionálisan a fájl nevének megadásával. | Egy címke és egy gomb. |
submit | Elküldés gomb | Gomb |
image | Kép típusú gomb, ahol a kattintás koordinátája kerül elküldésre, relatív módon a kép méretéhez képest, azzal az extra jelentéssel, hogy ez az utolsó kiválasztható érték, és az űrlap elküldése ezzel történik. | Kattintható kép, vagy gomb |
reset | Alaphelyzet gomb, ami az űrlap mezőinek értékét alapállapotba hozza. | Gomb |
button | Gomb | Gomb |
A következőkben részletesebben megnézzük az egyes vezérlőket.
Azokat paramétereket, amelyeket korábban már bemutattunk, nem magyarázzuk el újra. Ezen paraméterek fogalomként vannak megjelölve, így a fogalmak bekapcsolt állapota mellett el tudjuk olvasni a leírásukat.
A text és search mezőt érdemes együtt tárgyalni, mert paramétereikben megegyeznek:
Mire használjuk?
A "text" típusú egyszerű szöveg bevitelére szolgáló mező, ahol nincsenek sortörések. A "search" típusú mező ugyanilyen, de abban az esetben érdemes használnunk, ha keresési mezőt hozunk létre, mivel bizonyos platformokon megjelenésben is meg vannak különböztetve a keresőmezők, és ebben az esetben egy normál szöveges mező megjelenése zavaró lenne a felhasználóknak.
A tag paraméterei:
Ebben a példában egy három mezőből álló űrlapot valósítottunk meg, ahol mindhárom mező egyszerű szöveg.
Az első esetben egy nevet kérünk be, amelyhez egy 40 karakter hosszúságú mező áll rendelkezésre, a beírható karakterek számát a példa kedvéért viszont korlátoztuk 37-re.
A második eset annyiban speciális, hogy itt egy rendszámot kérünk be, és meg is adtuk, hogy milyen formátumban várjuk az adatokat. Ez a pattern="[a-zA-z]{3}[0-9]{3}" megadással történt. A reguláris kifejezés itt azt jelenti, hogy az kis és nagybetűket lehet megadni, amelyből háromnak kell követnie egymást, majd számok következhetnek (0 és 9 között), amelyből szintén hármat lehet megadni. Ha nem ilyen formátumú adatot adunk meg, akkor a böngésző figyelmeztet bennünket.
A felhasználónak nem elég csak annyit kiírni, hogy az adat nem megfelelő formátumú. Már a begépelés előtt világosnak kellene lennie, hogy milyen felépítésű adatot várunk. Ebben segíthet a címkében elhelyezett szöveg, valamint a placeholder tartalma.
A harmadik esetben azt kérjük be, hogy a látogató melyik kar oktatójához érkezik. Hogy megkönnyítsük az adatbevitelt, egy listába felvettük az ELTE összes karát, és hozzárendeltük a szövegmezőhöz. Így ha a felhasználó elkezd gépelni, megjelennek a lehetőségek, így gyorsabban kitöltheti az űrlapot. De akár nem a listában megadott módon is megadhatja az adatot (pl. ELTE IK).
Bővítsd a példát egy keresési mező hozzáadásával. Látsz valamilyen különbséget a megjelenésben? Ha van rá módod, teszteld le az eredményt mobil platformon is!
Mire használjuk?
Egysoros beviteli mező jelszavak számára. A begépelt karakterek helyett csillagokat vagy pontokat látunk, ezek száma gépeléskor megegyezik a begépelt karakterek számával.
A tag paraméterei:
Az elem használatára kicsit később, más elemekkel együtt mutatunk interaktív példát.
Mire használjuk?
Email cím, vagy címek bekérésére szolgál. Amennyiben a multiple paramétert szerepeltetjük, akkor több e-mail cím is megadható vesszővel elválasztva.
A tag paraméterei:
Az elem használatára kicsit később, más elemekkel együtt mutatunk interaktív példát.
Mire használjuk?
Abszolút webcím (url) bekérésére szolgáló űrlapmező.
A tag paraméterei:
Az elem használatára kicsit később, más elemekkel együtt mutatunk interaktív példát.
Mire használjuk?
Telefonszám bekérésére használatos űrlapmező. Az url és email típusú mezőkkel ellentétben itt nincs alapértelmezett szintaxis elemzés, mivel számos telefonszám formátum létezik. Ezért érdemes a pattern paraméterrel megadni azt a reguláris kifejezést, ami az adott bevitelnél releváns.
A tag paraméterei:
Az elem használatára kicsit később, más elemekkel együtt mutatunk interaktív példát.
A következőkben nézzünk egy olyan interaktív példát, ahol a korábban bemutatott beviteli mezők a gyakorlatban is láthatóak, kipróbálhatók és módosíthatók.
Ebben a példában két jelszó típusú mezőt is használtunk, amely bevett szokás a jelszó véletlen elgépelésének kiszűrésére.
Az e-mail cím mezőbe csak olyan adatot írhatunk be a sikeres elküldéshez, amely tartalmaz @ jelet.
A telefonszám mezőbe a pattern paraméterrel állítottuk be a kívánt reguláris kifejezést.
A honlap címe mezőben ha nem abszolút url-t adunk meg, nem lesz sikeres az űrlap elküldése. (Ha ezt a funkciót már támogatja a böngészőprogram.)
Hallható, hogy a képernyőolvasó program felolvassa az egyes űrlapmezők jellemzőit is. A HTML5 lehetőségeit jobban támogató böngészőprogramban már azt is halljuk, hogy a mező kötelezően kitöltendő-e, vagy sem.
Mire használjuk?
Jelölőnégyzet létrehozására. Olyankor érdemes használnunk, ha több választási lehetőség van, és azokból nullát, egyet, vagy többet választhat ki a felhasználó.
A tag paraméterei:
Ebben a példában három jelölőnégyzetet helyeztünk el. Az elsőt alapértelmezetten kijelöltté tettük a checked paraméter használatával.
Mire használjuk?
A választókapcsoló (rádiógomb) alkalmazása több válaszlehetőséget kínál fel, amelyek közül egyet (vagy nullát) lehet kiválasztani. Azon csoportokat, amelyekből egy elemet engedünk kiválasztani, azonos name paraméterrel kell ellátnunk.
A tag paraméterei:
Az első négy válaszlehetőséget azonos névvel láttuk el (kerd1), így ezek közül egyet tudunk kiválasztani. Az értéknek pedig a kiválasztott szót adtuk meg. Ahhoz, hogy a címkéket beállíthassuk, minden válasznak egyedi azonosítót kellett beállítanunk.
A második kérdéshez tartozó lehetőségeket kerd2 névvel láttuk el, így mivel azonos nevűek, csak egyet választhatunk ki belőlük.
Ahogy a jelölőnégyzetnél, úgy a választókapcsolóknál is használható a checked paraméter az alapértelmezett kijelöléshez. Azonban a mező speciális működése miatt legfeljebb egy válasz lehet alapértelmezetten kiejlölt egy csoportban.
  |
 |
 |
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.