HTML5 Forms 1.0 avagy “Form”-álódjunk

English Version!

Ű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.

You may also like...