A ‘HTML5 Forms’ kategória archívuma
Ahogy azt már egy korábbi cikkemben (ahol a HTML5 input types került bemutatásra) megemlítettem, a HTML5 range element egy mostohagyerek. Nem gondolom, hogy a böngészők a normális támogatást ne tudnák megoldani, de úgy néz ki, nincs rá idejük az egyre gyorsuló verziószám háborúban. Az általam bemutatott megoldás IE alatt nem működik, de a többi tesztelt böngészőben igen.
HTML5 range
Kezdjük egy kis múltidézővel.A range beviteli típus a tartományok közötti értékek bevitelét segíti, egy csúszkával. Használata:
<input type="range" value="500" min="0" max="1000" step="100" id="egyid" />
Attribútumai, ahogy látható is:
- value - Az érték lehet bármilyen érvényes lebegőpontos szám (nem muszáj egész számnak lennie). Az alapértelmezett érték a minimum és maximum értékek fele.
- min – A tartomány minimum értéke, alapértelmezésben:0
- max – A tartomány maximum értéke, alapértelmezésben: 100
- step - A lépésköz, alapértelmezésben:1 Tovább olvasom »
Egy kis szünet után ismét jelentkezek egy cikkel. Remélem felkészültetek, ezúttal csinálunk egy komplett fizetési űrlapot, annak minden kellékével együtt.
Nem lesz egyszerű dolgunk, hiszen itt már komolyan kell az egyes strukturális elemeket használni, valamint fejest ugrunk a css3-ba is. Ha valamelyik parancsot nem érted és én nem láttam el commenttel, akkor sokat segíthet a CSS3 referencia. Találsz magyarul vagy angolul is. Valamint, javasolt a kód letöltése és ízekre szedése, átírása, ahogy jól esik.
Vágjunk is bele, kezdjük a HTML5 résszel, hiszen ez az egyszerűbb, itt csak az lesz fontos, hogy a struktúrát megfelelő logikával építsük fel, hogy a “csinosítás” egyszerűbb legyen.
A HTML5 beviteli elemeit fogom használni, értelemszerűen a következőket:
- text
- tel
Valamint pár kiegészítő opciót, amiket már megnéztünk az előzőekben:
- autofocus
- required
- placeholder Tovább olvasom »
Ű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 Tovább olvasom »