Egy új űrlap elemről tanulunk, a range típusú beviteli mezőről, amely számadatok bekérésére alkalmas és újabb eseményeket, amelyeket űrlapokkal használhatunk.
Új űrlap elem ebben a leckében:
<input type="range" /> - ez a HTML címke egy beviteli mező megjelenítésére alkalmas, amikor a számértékek értéke nem annyira fontos, nagyságrendekben gondolkodunk.
Új JavaScript tulajdonságok ebben a leckében:
min – tulajdonság a range elemhez, a legkisebb értéket jelöli, amit az elem értéke elérhet.
max – tulajdonság a range elemhez, a legnagyobb értéket jelöli, amit az elem értéke elérhet.
step – tulajdonság a range elemhez, az elem által felvehető lehetséges értékek közötti különbséget jelenti.
value – ezt a tulajdonságot, több űrlap elem esetén használjuk a tartalmának/értékének beállítására vagy lekérésére.
checked – ez a tulajdonság a value tulajdonság helyett használható a jelölőnégyzetek esetén. Az érték logikai: igaz, ha ki van pipálva és hamis, ha nem.
Új elem ebben a leckében:
onfocus – ez az esemény akkor következik be, ha kattintunk vagy tab billentyűvel váltunk egy űrlap elemre. Egy elem automatikus ia fokusz is lehet (autofocus tulajdonság).
onfocusout – ez az esemény akkor következik be, ha kilépünk egy űrlap elemről, amely előzőleg fókuszban volt. Például a szövegdoboz kitöltés után.
onchange – ez az esemény akkor következik, ha az elem megváltozik. Ez az esemény különbözik a focusout eseménytől, mivel ez az esemény többször bekövetkezhet a focus és a focusout esemény között.
onsubmit – ez az esemény akkor következik, ha az űrlap submit gombjára kattintunk. Az esemény egy űrlapra vonatkozik.
Új metódusok ebben a leckében:
isNaN(a leellenőrizendő adat) – ez a függvény eldönti, hogy a paraméterként megadott érték szám, vagy számmá alakítható. Igazat eredményez nem numerikus értékekre és hamisat numerikus adat esetén.
JavaScript-tel kiegészített űrlapok:
A name (név) és/vagy id (azonosító) értékeket kell adnunk az űrlap elemeknek, hogy elérjük őket a programkódból. Űrlap elemeket használhatunk, <form> címkék nélkül. Ezeket használhatjuk JavaScript-tel, a <form> címkére akkor van szüksége, ha az eredményt végül vissza akarjuk küldeni a webszerverre.
Példa űrlap elemekre tényleges űrlap nélkül:
Ebben a példában a kép megnövelése történik, a szövegdobozban megadott értékkel. A szövegdoboznak azonosítója van. Az azonosítót (id) és a value tulajdonságot használva elérhetjük a szövegdobozba írt számot.
A Number függvényt használjunk újra a szöveget számmá alakítani. Emlékezz vissza, hogy a + műveletnek a szövegre kifejtett hatása az itt elvárttól különbözik.
Ha betűket illesztünk be vagy üresen hagyjuk a szövegdobozt, nem történik növekedés.
Űrlap adathelyességének ellenőrzése JavaScriptel:
Előzőleg a HTML kódbeli validálást, adatellenőrzést használunk: a required kulcsszavat, a mintát (pattern) és gondosan kiválasztott űrlap elemeket használva.
JavaScript kódot használata, személyre szabott hibaüzeneteket és egyéb lehetőségeket nyújt: összehasonlíthatjuk különböző elemek értékeit, a beírt adatok típusát ellenőrizhetjük.
A hibák megelőzése érdekében, elrejthetünk és felfedhetünk új elemeket más elemek állapotától függően.
Példa tényleges űrlap adatellenőrzésére:
Egyik szövegdobozra azonosítóval hivatkozunk és a másikra névvel.
A második hivatkozás az űrlapot is megnevezi.
A validate nevű függvényt az űrlap onsubmit eseményéhez társítjuk.
Az egyetlen probléma az, hogy az előzőleg beírt szöveg eltűnik, és újra ki kell töltenünk az egészet, ha hiba merül fel.
Az előző példa javított változataként, ez a kód nem eredményezi az űrlap újratöltését, ha egy hibaüzenet megjelenik.
A függvényt return utasítással van kiegészítve, igazat eredményez, ha helyesek az adatok és hamisat, ha hibát találtunk.
Nem szükséges az else ág ebben a függvényben, mivel a return utasítás befejezi a függvényt, a többi if-et nem látogatjuk meg ez esetben.
Példa a range típusú elem használatára:
Ebben a példában először használjuk a range típusú bemeneti adatot.
A kép szélessége a range elem értékének változtatásával változik.
Az érték bekérése minden alkalommal megtörténik, ahányszor módosítjuk a tartalmat. Az onchange esemény nem működött a címkén belülről, tehát szükségünk van az addEvenListener metódusra, hogy aktiváljuk.
Ha a range elem megváltozik, az értéket a change függvény a kép width (szélesség) tulajdonságához adja értékként.
Példa rádiógomb használatára:
Ebben a példában az űrlap két azonos nevű rádiógombbal rendelkezik. Annak eldöntésére, hogy melyiket választottuk ki az értéküket vesszük alapul, ez ebben a példában piros vagy kék lehet. A színt kiválasztva és az adatot elküldve a háttérszínt cseréljük le.
A hamis visszatérített értéket használva, elérhetjük, hogy az oldal ne töltődjön újra visszatérve a fehér háttérre.
Szükséged van annak biztosítása érdekében, hogy a szövegek hivatkozásra kerüljenek - nem pontosan alkotóelemek, ezért id azonosítóval kell megtalálni őket .
Üzenetet jelenít meg, ha a szövegmező üres. Van egy minta, amely hibaüzenetet vált ki, ha a formátum rossz. Lehet használni ha szükséges, de a JavaScript használatával hozzáadhatjuk saját üzenetünket.
Győződjön meg róla, hogy a jelölőnégyzetek legalább egyike be van jelölve. Szükségük van a nevekre is - jelölőnégyzetek esetén ezeknek a neveknek eltérőnek kell lenniük (ellentétben a rádió gombokkal).
Használja a visszatérési nyilatkozatot, mint a harmadik példában (a már bevitt adatok megőrzése érdekében) nevet a formanyomtatványhoz.
Sikeres üzenetek indítása, ha az összes feltétel teljesül.
Adjon hozzá egy új űrlapot a leckék árának kiszámításához, amelyek tartalmazzák a szövegmezőt a szükséges órák számához, 3 rádió gomb az opciókhoz: egyéni lecke (15 EUR), kis csoport (10 EUR) és nagyobb csoport (5 EUR). Csak egyet kell ellenőrizni. Meg kell adnia egy elküldési gombot is.
Adatellenőrzés (HTML és JavaScript kombináció) használata annak biztosítására, hogy a szövegmező ne legyen üres és pozitív számot tartalmaz. A rádió gombok közül az egyiket ellenőrizni kell (alapértelmezettként ellenőrizhetjük). Szükség esetén használjon hibaüzeneteket.
Ha minden adat helyes, számítsa ki a fizetendő árat szorozva az órák számát és a kiválasztott árat. Az eredmény megjelenítése egy riasztási mezőben.
<input id="r_e" type="range" min="10" max="30" step="5"/>
