Čeprav imajo obrazci HTML5 veliko več funkcij kot njihovi predhodniki, jih je mogoče enako enostavno opredeliti.
HTML5 dejansko ponuja veliko novih tipov polj. Podpora trenutnim brskalnikom je že zdaj relativno dobra. Tukaj bom vseeno predstavil samo tiste tipe polj, ki so praktično uporabni.
Izbirnik barv
Svojim obiskovalcem lahko omogočite izbiro barve.
Ko kliknemo na takšno polje, se odpre običajen izbirnik barv.
Preko njega je mogoče izbrati želeno barvo. Tak izbirnik barv se definira preko <input type="color" />.
Izberi svojo najljubšo barvo: <input type="color" name="lf" />
Polju mora vedno biti dodeljena vrednost. Če ta manjka ali je neveljavna, se samodejno prevzame #000 (črna barva).
Datum in čas
Sicer glede tipov polj za datumsko in časovno vnašanje obstaja v HTML5 veliko novosti. In ti tipi polj so deloma resnično koristni. Predstavljajte si na primer, koliko korakov je potrebnih, če želite obiskovalcem omogočiti polje za izbiro datuma. Običajno brez JavaScripta (ali Flasha) tukaj nič ni mogoče storiti. Zahvaljujoč HTML5 je to od zdaj naprej veliko lažje. Samo definirati morate polje za vnos datuma s tipom date.
<input type="date" />
Za prikaz in implementacijo koledarja je izključno odgovoren brskalnik. Brskalniki naj za prikaz koledarja prikažejo ustrezno pripomoček. V Google Chrome je aplikacija videti takole:
Preko date je določen koledar, preko katerega uporabniki izberejo želeni datum. Datum se po izbiri samodejno prenese v vnosno polje.
Prav tako enostavno je ustvariti polje za uro. Za to se uporabi polje s tipom time.
<input type="time" />
Preko time naj bi brskalniki prikazali nadzorne elemente za izbiro časa.
Podobno enostavno deluje tudi week. S tem se prikaže polje za izbiro tedna.
<input type="week" />
Poleg tega je mogoče prikazati polje za izbiro meseca.
<input type="month" />
Obe vrsti polj omogočata prikaz kontrolnih elementov, preko katerih se lahko opravijo želene nastavitve.
Čeprav time in date dovoljujeta samo izbiro datuma ali samo izbiro ure, pa datetime in datetime-local omogočata kombinacijo obeh variant.
Pri datetime se izbereta polje z datumom in polje za izbiro ure prikažeta drug ob drugem. (datetime trenutno podpirata samo Safari in Opera).
Že omenjeno je, da trenutno vsi brskalniki ne podpirajo vseh predstavljenih polj v tem odstavku. Tisti, ki bi jih želeli uporabiti, se lahko zatečejo k ustreznejšim rešitvam JavaScripta. Veliki JavaScript okviri, kot sta jQuery in Dojo, ponujajo ustrezne skripte. Pri jQuery UI bi bilo videti nekako takole:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Tako boste torej na varni strani, kljub temu, da brskalnik ne podpira klasičnega date.
Polja za števila
Preko number se ponuja polje, ki je posebej namenjeno vnašanju številk.
V najpreprostejšem primeru je definicija polja za number videti takole:
<input type="number" />
Številke lahko vnašate v ta polja na dva načina:
• preko tipkovnice
• preko kontrolnikov
Z dodatnimi atributi lahko number polja dodatno opišemo. Na primer, ta dva atributa sta min in max, ki določata območje vrednosti polj.
• min - najmanjša možna vrednost
• max - največja možna vrednost
Ti dve atributi vplivata le na kontrolnike brskalnikov. Ročni vnosi uporabnikov preko tipkovnice se ne bodo izvedli.
Obe vrednosti lahko sprejemata cela in decimalna števila.
S pomočjo atributa step lahko določimo korak, ki ga morajo upoštevati kontrolniki brskalnika.
<input type="number" min="0" max="8" step="2" />
V tem primeru bi lahko preko kontrolnikov brskalnika izbrali le vrednosti 0, 2, 4, 6 in 8.
Drsnik
Polja tipa range omogočajo izbiro vrednosti znotraj določenega območja vrednosti.
Brskalniki interpretirajo polje območja preko drsnika.
<input type="range" min="0" max="10" step="2" value="6">
Najmanjša možna vrednost je določena preko atributa min. max določa največjo možno vrednost. Če manjkata atributa min in max, bosta brskalnika izhajala iz vrednosti 0 in 100.
S pomočjo step lahko določimo korak, ki naj ga držijo kontrolniki.
Ustvarjanje iskalnih polj
search v osnovi nima funkcije. Gre predvsem za dodatek k klasičnemu polju za besedilo. Namen search polj je, da se vizualno ločijo od preprostih besedilnih polj. Običajno bi naj brskalniki poskrbeli za izgled search polj.
<input type="search" />
Kako se to končno izvede, ostane v domeni proizvajalcev. Dobra kombinacija je dodajanje atributa results.
<input type="search" results="5" placeholder="Iskanje..." />
Z results se določi, koliko prejšnjih iskalnih vnosov naj bo prikazano v polju.
Vendar pozor: Atribut results ni del specifikacije HTML5.
