A HTML5 rengeteg újdonságot várva várt valamint meglepetésszerű újdonságot hoz. A bejegyzés írásakor igazából még nincs is kész a HTML5 szabvány, hanem “working draft” állapotban van. Ez persze azt jelenti, hogy sok új szolgáltatása még nincs támogatva még a legfrissebb és legelterjedtebb böngészőkben sem. Ennek ellenére íme egy kis ízelítő a kiokosított input elemről.
Ugye azzal senkinek nem mondok újat, hogy a HTML szabvány praktikusan nem változott az elmúlt 10 évben. Ez teljesen hihetetlennek tűnik ha belegondolunk, hogy egy animált gif mennyire menőnek számított 1999-ben és ehhez képest most 2009-ben milyen gazdag webalkalmazásokat használunk nap mint nap. Az új igényekre próbál reagálni az új HTML5 szabvány. Ma az input elemet küldjük a boncasztalra.
Figyelem: A bejegyzés írásakor az itt leírtakat a legfrissebb Opera böngészővel érdemes kipróbálni, mert a többi böngésző nem érti az új html5 bővítményeket.
Egy HTML5 input demo oldal itt elérhető.
Új tulajdonságok
Az új tulajdonságokkal olyan tulajdonságokkal okosíthatjuk ki az inputjainkat amikre eddig csak JavaScript használatávl volt lehetőség.
required
A reqiured
tulajdonság azt mondja ki, hogy az adott input elemet kötelező kitölteni. A böngészőnek nem szabadni elküldenie a formot amíg a reqirednek jelölt inputok ki nincsenek töltve.
<input type="text" required="true" />
autocomplete
Input elemekben az autocomplete
tulajdonság on-off állapotával változtathatjuk meg, hogy a böngésző felkínáljon-e lehetséges értékeket az előzmények alapján.
Ezt a tulajdonságot a Mozilla vezette be, ezért a Firefox már rég ismeri, de jelen pillanatban ez az egyetlen új html5 input eljárás amit ismer. A Safari ezt és még 2 új tulajdonságot ismer.
<input type="text" autocomplete="off" />
autofocus
Az állíthatjuk be vele, hogy melyik form elemre kerüljön a focus a lap betöltődésekor.
<input type="text" autofocus="true" />
Ez a második tulajdonság amit a Safari is ismer.
pattern
Ez az egyik talán leghasznosabb HTML5 újítás. A pattern
tulajdonságban megadhatunk egy reguláris kifejezést amire a bevitt értéknek illeszkednie kell.
<input type="text" pattern="\d{3}" title="3 számot kell beírni süsüke"/>
list
Az új list
tulajdonsághoz szorosan kapcsolódik az új datalist
elem. A datalistben értékeket tudunk tárolni majd több helyen is használhatjuk az értékek ezen tömbjét. Ha például szeretnénk, hogy egy input mezőbe egy előre definiált halmazból kínáljon fel a böngésző választási lehetőségeket akkor ezt a következőképpen tehetjük meg.
<datalist id="names"> <option value="Hare"> <option value="Krisna"> <option value="Rama"> </datalist> <input type="text" list="names">
A list tulajdonság értékeként megadtuk annak a datalist elemnek az id-jét ahonnan az értékeket fel kell kínálnia.
A type attribútum
Eddig ugye az input elemek esetén nem volt túl sok választásunk, hogy milyen type attributummal lássuk el. A text
, radio
, checkbox
, submit
négyes praktikusan le is fedte az általánosan használt típusokat. Ehhez képest a HTML5 13 új típust definiál, valamint bevezet egy rakat új tulajdonságot.
number
A number típus nagy meglepetésemre számokat vár az input mezőbe. Amennyiben együtt használjuk az új min
és/vagy max
tulajdonságokkal akkor az input elemünk mellett megjelenik egy felfelé és egy lefelé mutató nyilacska amivel az értékeket tudjuk léptetni.
Például a <input type="number" max="200" step="10" />
hatására a le és felfelé mutató nyilacskákkal maximum 200-ig tudjuk a számot léptetni, mégpedig a step
tulajdonság hatására 10-esével.
search
Keresésekhez használatos kiváltva a text-et. Egyenlőre nem igazán látom mi a haszna.
tel
Telefonszámok bevitelére szolgáló inputot hoz létre.
url
URL-ek beviteléhez tesz jó szolgálatot ugyanis a focus elvesztésekor ellenőrzi, hogy a megadott adat jó url-nek néz-e ki.
A böngésző az email típusú mezőknél ellenőrzi, hogy a bevitt adat megfelelő email formátumú-e vagy sem.
datetime, date, month, week, time, datetime-local
Dátumok, időpontok bevitelét segíti. Az input elem mellé kikerül egy kis nyilacska és arra kattintva egy lapozható dátum választó kis ablakocskát kapunk. Nagyon kényelmes eszközök.
range
Tartományok közötti értékek bevitelét segíti, egy csúszkát jelenít meg. Ez a harmadik újdonság amit a Safari is tud kezelni.
color
Jelen pillanatban egyik böngésző sem támogatja, egy színválasztó kis ablakocskát kellene feldobnia.
Konklúzió
Habár az itt bemutatott újdonságok egyelőre eléggé szűk támogatottságot élveznek biztosak lehetünk abban, hogy hamarosan minden böngésző támogatni fogja ezeket a tulajdonságokat és az input elemhez kapcsolódó újításokat. Ezeket használva sok helyen könnyebbé válik a fejlesztés, valamint a felhasználók orra alá kiokosított, kényelmesebben használható eszközöket tolhatunk. És ez csak az input elemhez kapcsolódó újítások voltak…
Phuh, nagyon jó lesz… Datetime… életmentő , nem kell javascriptezni annyit 😀 Köszi, jó összefoglaló, várom a többit.
Engem bevallom nem hatott meg. Nem a cikked, mert az mindig jó, hanem maga a szabvány. illetve az opera validátora a piros villogásával elég idegesítő.
Pingback:HTML Info » A HTML 5 tartalommodellje
Tetszik.
Bár hogy miért nem az XHTML-lel csinálták ugyanezt…
Tényleg, abba is belekerülnek majd ezek a dolgok?
ui.: azért elég sok helyen te is xhtml-ül írtad le a tageket 😛
@Galamb az XHTML2-ben benne lesznek. Amennyire látom a html5 elfogadja az xhtml szerű tagokat is, csak nem teszi kötelezővé. Gondolom idővel összeolvad a két szabvány majd eggyé.
@rrd,
Nem vagyok biztos benne, hogy a HTML és az xHTML összeolvadna. A HTML a maga viszonylagos lazaságával egész mást képvisel, mint a szigorú XML implementáció.
tök jó írás
Csak a tisztán látás véget: a 10-es Opera támogatja az url, email, date, range, number, required elemeket is 😀
Pingback:HTML5