I přesto, že formuláře HTML5 mají nabídnout výrazně více funkcí než jejich předchůdci, lze je stejně snadno definovat.
HTML5 skutečně nabízí mnoho nových typů polí. Podpora současnými prohlížeči je v této oblasti již nyní poměrně dobrá. Každopádně zde budu prezentovat pouze takové typy polí, které jsou prakticky použitelné.
Výběr barvy
Můžete svým návštěvníkům umožnit vybrat si barvu.
Pokud kliknete na takové pole, otevře se typický výběr barev.
Skrze něj lze vybrat požadovanou barvu. Takový výběr barvy se definuje pomocí <input type="color" />.
Vyberte svou oblíbenou barvu: <input type="color" name="lf" />
Poli musí být vždy přiřazena hodnota. Pokud chybí nebo není platná, automaticky se přijme barva #000 (tedy černá).
Datum a čas
Zvláště co se týká typů polí pro datumy a časy, nabízí HTML5 mnoho novinek. Tyto typy polí jsou opravdu zajímavé. Představte si například, jaké kroky jsou nutné, pokud chcete svým návštěvníkům nabídnout pole pro výběr data. Obvykle nelze takové pole zprovoznit bez JavaScriptu (nebo také Flash). Díky HTML5 to nyní jde mnohem snadněji. Stačí pouze definovat pole pro vstup dat typu date.
<input type="date" />
Pro zobrazení a implementaci kalendáře je zcela zodpovědný prohlížeč. Prohlížeče by měly zobrazit odpovídající widget pro kalendář. V Google Chrome to vypadá následovně:
Pomocí date je definován kalendář, skrze který uživatelé mohou vybrat požadované datum. Po výběru se datum automaticky převezme do textového pole.
Naprosto snadno lze také vytvořit pole pro čas. K tomu se použije pole typu time.
<input type="time" />
Pomocí time by prohlížeče měly zobrazit ovládací prvky pro výběr času.
Podobně snadno funguje week. Skrze něj se zobrazí pole pro výběr týdne.
<input type="week" />
Dále lze zobrazit pole pro výběr měsíce.
<input type="month" />
Oba typy polí způsobí zobrazení ovládacích prvků, skrze které lze nastavit požadované údaje.
Zatímco time a date umožňují pouze výběr data nebo jen výběr času, datetime a datetime-local umožňují kombinaci obou variant.
U datetime jsou vedle sebe zobrazena pole pro datum a pole pro výběr času. (datetime je momentálně podporováno pouze prohlížeči Safari a Opera).
Již bylo naznačeno, že formulářová pole představená v tomto oddíle zatím nejsou podporována všemi prohlížeči. Pokud je však chcete používat, můžete sáhnout po odpovídajících JavaScriptových řešeních. Velká JavaScriptová frameworky jako jQuery a Dojo poskytují vhodné skripty. S jQuery UI by to vypadalo následovně:
<!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 jste na bezpečné straně, i když váš prohlížeč nepodporuje klasický date.
Pole pro čísla
Pomocí number je nabídnuto pole, které je určeno speciálně pro zadávání čísel.
V nejjednodušším případě vypadá definice pole number následovně:
<input type="number" />
Čísla lze zadat do těchto polí dvěma způsoby:
• přes klávesnici
• pomocí ovládacích prvků
Pomocí zadaní dalších atributů lze pole typu number popsat ještě podrobněji. Začněme tedy s atributy min a max, pomocí kterých lze určit rozsahy hodnot v polích.
• min – nejmenší možná hodnota
• max – největší možná hodnota
Tyto dva atributy však ovlivňují pouze ovládací prvky prohlížečů. Ruční zadávání uživatelů klávesnicí jimi nelze ovlivnit.
Oběma atributům lze přiřadit celá nebo desetinná čísla.
Pomocí atributu step lze nastavit krok, který má být dodržen pomocí ovládacích prvků prohlížeče.
<input type="number" min="0" max="8" step="2" />
V tomto případě byste však pomocí ovládacích prvků prohlížeče mohli vybrat pouze hodnoty 0, 2, 4, 6 a 8.
Schieberegler
Pole typu range umožňuje vybrat hodnotu v rámci definovaného rozsahu.
Prohlížeče interpretují pole range pomocí posuvníku.
<input type="range" min="0" max="10" step="2" value="6">
Nejmenší možná hodnota je určena atributem min. Atribut max popisuje největší možnou hodnotu. Pokud chybí oba atributy min a max, prohlížeče předpokládají hodnoty 0 a 100.
Pomocí step lze definovat krok pro přecházání mezi hodnotami.
Vytvoření vyhledávacího pole
search zpočátku nemá žádnou funkci. Spíše je tato typ pole vnímáno jako doplněk k klasickému textovému poli. Účelem polí typu search je pouze to, aby se vizuálně lišila od běžných textových polí. Obvykle by prohlížeče měly zabezpečit zobrazení polí typu search.
<input type="search" />
Jak bude toto nakonec implementováno, je v kompetenci výrobců. Dobrou kombinací je přidání atributu results.
<input type="search" results="5" placeholder="Hledat..." />
Pomocí results je určeno, kolik předchozích vyhledávacích vstupů by mělo být zobrazeno v poli.
Ale pozor: atribut results není součástí specifikace HTML5.
