A HTML5 input újdonságai

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.

email

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…