HTML5 Forms 1.0 avagy “Form”-álódjunk
Űrlapokkal mindenütt találkozhatunk a weben, elengedhetetlen tartozékai szinte az összes weboldalnak. Szerencsére a HTML5 szabvány kidolgozásakor ez a ma már elavult, különböző praktikákkal „turbósított” terület nagyobb figyelmet kapott. A HTML5 szabvány jelenlegi állapotában 13 új beviteli elemet (input types) tartalmaz, vagy módosított működéssel bírót. (Ez így péntek 13.-án nem rossz, kétszer is átszámoltam. )
HTML5 beviteli elemek (input types)
Akkor lássuk azt a bizonyos 13 új HTML5 beviteli elemet (minden elemnél egy egyszerű példát is beszúrok, az adott elem használatához egy reprezentatív értékkel ellátva):
color – Egy natív színválasztó, melynek segítségével a felhasználó választhat egy színt.
<input type="color" value="#99BBEE">
date – Dátumválasztó beviteli elem
<input type="date" value="2012-01-13">
datetime – Dátum és időválasztó elem
<input type="datetime" value="2012-01-13T13:13:13.13">
datetime-local – Helyi dátum- és időválasztó
<input type="datetime-local" value="2012-01-13T13:13">
email – Email cím beviteli elem
<input type="email" value="[email protected]">
month – Hónapválasztó beviteli elem
<input type="month" value="2012-01">
number – Számválasztó
<input type="number" value="5">
range – Választómező egy speciális csúszkával, léptetés is megvalósítható vele (erről még bővebben írok majd, jelenleg nem minden böngésző támogatja)
<input type="range" value="10"> <!—az értékek alapértelmezetten min="0", max="100", lépésköz="1". -->
search – Egyszerű keresőmező
<input type="search" value="[amit keresel]">
tel – Telefonszám felviteli mező
<input type="tel" value="[06301234567]">
time – Időbeviteli mező
<input type="time" value="13:13">
url – Webcímek bevitelére szolgáló elem
<input type="url" value="https://html5.ugyesen.com"> <!—Minden esetben szükséges definiálni a használandó protokollt, http:// ftp:// -->
week – Egy speciális hét-választó mező
<input type="week" value="2012-W3">
Nézzünk ezekre egy nagyon egyszerű (CSS3 nélküli) példát.
A Demo forrását nem teszem ide ki, mert így is meglehetősen hosszúra nyúlik ez a post. Bárki lementheti. Itt szeretném megjegyezni, hogy a böngészők nagy része még nem támogatja ezen új beviteli módokat. Aki kíváncsi, hogy teljesít a böngészője form téren, látogassa meg ezt az oldalt. http://miketaylr.com/code/input-type-attr.html
HTML5 Attributes – avagy könnyítsünk a programozó életén
Ezen új tulajdonságok segítségével javascript nélkül gyorsan és egyszerűen valósíthatunk meg, nagyon ügyes kis trükköket. Felsorolás szinten megemlítem az összes jelenlegi attributes-t, de csak néhányra térnék ki részletesen.
autocomplete – Automatikus kiegészítés. Kapcsolói az on-off. Gyakorta hasznos lehet, ha a böngészőnek nem engedjük, hogy a beviteli mezőbe, az előzmények (már kitöltött űrlapok) alapján kínáljon értékeket (már csak biztonsági szempontból is érdekes kérdéseket vet fel).
<input type="text" autocomplete="off" />
autofocus – Form „focus”-ba állítása, azaz meghatározhatjuk, hogy a lap betöltődésekor melyik beviteli mezőre ugorjon először.
<input type="text" autofocus="true" />
formaction – Az egész űrlapmező ACTION attribútumát felülbírálja.
formenctype – Az űrlapmező adatainak (MIME) kódolása. Az ENCTYPE attribútumot felülbírálja.
formmethod – Az URL elküldéséhez használt eljárás. A METHOD attribútumot felülbírálja.
formnovalidate – esetén a mező nem kerül elküldéskor ellenőrzésre. Felülbírálja a NOVALIDATE attribútumot.
formtarget – A cél megnyitási helye.
Értékek:
• _blank: új ablak
• _parent: a szülő-dokumentumban nyílik
• _self: alapértelmezett, eredeti kiinduló ablak
• _top: a cél az ablak tetején nyílik meg
• framename: iframe esetén
list – (datalist) – ehhez az elemhez kapcsolódik az adatlisták létrehozására szolgáló új elem. Egy egyszerű példával meg is mutatnám egybe a kettő használatát.
<datalist id="automarka"> <option value="FORD"> <option value="OPEL"> <option value="FIAT"> </datalist> <input type="text" list="automarka">
max – A beviteli mező maximális értéke
min – A beviteli mező minimális értéke
multiple – többszörös kiválasztás engedélyezése Pl. képfeltöltésnél, több fájl betallózása
novalidate – Az adott beviteli mező nem kerül ellenőrzésre.
pattern – egy reguláris kifejezés, amellyel definiálhatjuk, hogy a beviteli mezőbe pl. hány számot/betűt kell írnia a kitöltőnek.
<input type="text" pattern="[A-z]{3}" title="3 jegyű országkód"/>
placeholder – Szöveg megjelenítése a beviteli mezőben
<input name="first_name" placeholder="Mi a neved?" type="text">
readonly – Csak olvasható tartalommal bíró beviteli mező
required – Kötelezően kitöltendő beviteli mezőt jelöl.
<input type="text" required="true" />
spellcheck – a mögöttes tartalom ellenőrzéséhez
step – a következő beviteli típusokkal használható: number, range, date, datetime, datetime-local, month, time and week.
Egy szintén nagyon egyszerű demo elérhető itt.
HTML5 Elements
datalist – Szorosan összefügg a list elemmel, fentebb egy példában már bemutattam a használatát.
keygen – Ahogy a neve is jelzi, kulcsokat készíthetünk vele, a privát kulcsot tárolja a kliens, a publikusat a szerver. Ez arra lesz használható, hogy a kulcspár segítségével autentikálást biztosít a felhasználó számára. Egyenlőre biztonsági problémák miatt a böngészők nem támogatják.
<form action="dkeygen.asp" method="get"> Username: <input type="text" name="usr" /> Encryption: <keygen name="sec" /> <input type="submit" />
output – Ahogy utána néztem, nem sok dologgal összefüggésben használható, én egy matematikai példát emelnék ki ezek közül.
<form oninput="c.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" name="a" value="100" /> +<input type="number" name="b" value="100" /> =<output name="c" for="a b"></output> </form>
A cikk következő részében összerakunk – CSS3 segítségével – egy szép űrlapot.
Forrás:
http://dev.w3.org/html5/spec/Overview.html?true
HTML5 Forms 1.0 avagy “Form”-álódjunk a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.
