Hoci HTML5 formuláre ponúkajú oveľa viac funkcií ako ich predchodcovia, definujú sa rovnako jednoducho.
HTML5 naozaj ponúka veľké množstvo nových typov polí. Podpora aktuálnymi prehliadačmi je v tejto oblasti už teraz pomerne dobrá. Avšak tu vám ukážem len také typy polí, ktoré sú prakticky použiteľné.
Výber farby
Môžete svojim návštevníkom umožniť vybrať farbu.
Ak kliknete na takéto pole, otvorí sa typický výber farby.
Pomocou neho môžete vybrať požadovanú farbu. Takéto pole sa definuje pomocou <input type="color" />.
Vyberte svoju obľúbenú farbu: <input type="color" name="lf" />
Polu musí byť vždy pridelená hodnota. Ak chýba alebo je neplatná, automaticky sa predpokladá #000 (teda čierna).
Dátum a čas
V HTML5 existuje veľa noviniek v oblasti polí pre dátumy a časy. Tieto druhy polí sú skutočne zaujímavé. Napríklad, uvažujte o tom, aké kroky sú potrebné, ak chcete ponúknuť návštevníkom možnosť vybrať dátum. Obvykle bez použitia JavaScriptu (alebo aj Flash) nie je nič možné. Vďaka HTML5 je to teraz oveľa jednoduchšie. Stačí definovať pole vstupu s typom date.
<input type="date" />
Pre zobrazenie a implementáciu kalendára je výlučne zodpovedný prehliadač. Pre zobrazenie kalendára by mal prehliadač zobraziť príslušné widgety. V prehliadači Google Chrome to vyzerá nasledovne:
Pomocou date sa definuje kalendár, cez ktorý si používatelia vyberú požadovaný dátum. Po výbere sa dátum automaticky zobrazí v textovom poli.
Rovnako jednoducho je možné vytvoriť pole pre čas. Na to sa používa pole s typom time.
<input type="time" />
Použitím time zobrazia prehliadače ovládacie prvky na výber času.
Rovnako jednoduché je použitie week. Tým sa zobrazí pole na výber týždňa.
<input type="week" />
Okrem toho je možné zobraziť pole pre výber mesiaca.
<input type="month" />
Obe typy polí zobrazujú ovládacie prvky, cez ktoré sa dajú zadať požadované informácie.
Byť time a date umožňujú len výber dátumu alebo času, datetime a datetime-local dovoľujú kombináciu oboch variantov.
Pre datetime sa vedľa seba zobrazujú pole pre dátum a pole na výber času. (datetime momentálne podporujú len Safari a Opera).
Už sme naznačili, že polia formulára predstavené v tejto sekcii momentálne ešte nie sú podporované vo všetkých prehliadačoch. Ak ich chcete napriek tomu použiť, môžete sa obrátiť na príslušné riešenia pomocou JavaScriptu. Veľká JavaScriptová frameworky ako jQuery a Dojo poskytujú vhodné skripty. V prípade jQuery UI bude vyzerať toto takto:
<!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>Takže ste na bezpečnej strane, aj keď váš prehliadač nepodporuje klasický date.
Polia pre čísla
Pomocou number sa ponúka pole určené špeciálne na zadaný číselných hodnôt.
Definícia poľa number môže v najjednoduchšom prípade vyzerať takto:
<input type="number" />
Čísla je možné zadať do týchto polí dvoma spôsobmi:
• cez klávesnicu
• cez ovládacie prvky
Špecifikácia ďalších atribútov umožňuje ešte podrobnejšie popísať polia s typom number. Prvými sú atribúty min a max, ktoré určujú rozsah hodnôt polí.
• min – najmenšia možná hodnota
• max – najväčšia možná hodnota
Tieto dva atribúty však ovplyvňujú len ovládacie prvky prehliadačov. Manuálne vstupy používateľov cez klávesnicu nimi nie sú ovplyvnené.
Obojim atribútom možno priradiť celé a desatinné čísla.
Atribútom step sa určuje krok, ktorý by mal byť dodržaný ovládacími prvkami prehliadača.
<input type="number" min="0" max="8" step="2" />
V tomto prípade možno cez ovládacie prvky prehliadača vybrať len hodnoty 0, 2, 4, 6 a 8.
Posuvník
Polia typu range umožňujú výber hodnoty v definovanom rozsahu hodnôt.
Prehliadače interpretovali pole typu range cez posuvník.
<input type="range" min="0" max="10" step="2" value="6">
Najmenšia možná hodnota je určená atribútom min. max opisuje najväčšiu možnú hodnotu. Ak chýbajú atribúty min a max, prehliadače predpokladajú hodnoty 0 a 100.
Atribútom step možno určiť postupnosť krokov.
Vytvorenie vyhľadávacieho poľa
search nemá primárne žiadnu funkciu. Skôr treba tento typ poľa vnímať ako doplnok k klasickému textovému polu. Zmyslom polí search je iba to, že sa vizuálne odlišujú od jednoduchých textových polí. Zvyčajne by mali prehliadače zabezpečiť zobrazenie polí search.
<input type="search" />
Ako to presne implementujú, je na výrobcov. Dobrou kombináciou je pridanie atribútu results.
<input type="search" results="5" placeholder="Hľadať..." />
Atribútom results sa určuje, koľko predchádzajúcich vyhľadávaní má byť zobrazených v poli.
Pozor: Atribút results nie je súčasťou špecifikácie HTML5.
