Datum a čas ve formuláři podle HTML5
Zapsat správné, existující datum do formuláře s ohledem na formát, kterému rozumí serverový skript, není triviální záležitost. Aplikace, které vyžadují zadání datumu (jízdní řády, objednávky ubytování) usnadňují tento úkol většinou pomocí javascriptových kalendářů. Standard HTML5 navrhuje pro datum a čas celou rodinu nových formulářových prvků typu dateTime. Pomocí atributů lze nastavit povolený rozsah datumu a času, velikost kroku a povinnost vyplnit vstupní pole. Zda datum a čas jsou správné zkontroluje browser pomocí naitivní validace i při vypnutém javascriptu.
Pro účely testování tohoto prvku je připraven miniformulář se všemi variantami vstupního elementu pro čas a datum. Testování nového formulářového prvku má smysl jen v browserech Chrome14, Opera11. Safari5 pro Windows umožní nastavit hodnoty datumu i času, ale neprovádí kontrolu správnosti. Browsery Firefox a IE zpracují všechny elementy rodiny datetime jako běžný text, lze tedy zapsat cokoli. Kontrola správnosti se provádí při odeslání formuláře.
V Chrome16 je rodina prvků datetime disablovaná a tyto elementy se chovají jako běžné type="text". Následující ukázka tedy není v uvedeném browseru funkční.
Formát datumu je podle ISO 8601, norma, která sjednocuje velmi rozdílné způsoby zápisu datumu a času. To je dost zásadní změna, ale takto formátované datum je docela pochopitelné a nemělo by dělat problém ani běžným uživatelům. Velmi různorodé národní zvyklosti používané pro zápis datumu a času najdete na Wikipedii. Zda se takto formátované datum všeobecně ujme je otázka.
Browsery Chrome a Safari zobrazí všechny typy těchto formulářových prvků stejným způsobem. Nastavení hodnoty je možné provést pomocí ovládacího prvku spinner, pomocí kurzorových kláves nahoru/dolů, nebo přímým zápisem hodnoty do vstupního pole. Totéž platí i pro nastavení času v browseru Opera. Rozdílné je nastavení datumu v Opeře: když element získá focus (po kliknutí na něj) otevře se widget pro výběr datumu. Takto v podstatě není možné zapsat cokoli z klávesnice a vložené datum je vždy správné.
Vpravo je screenshot kalendáře (date picker widget) pro výběr datumu v browseru Opera. Je lokalizovaný a označení měsíců a dnů v týdnu závisí na zvoleném jazyku browseru (Menu > Nastavení > Nastavení > Jazyk).
Ovládání kalendáře pomocí myši nedělá problémy, ovládání klávesnici má své mouchy. Limity nastavené pomocí atributů min, max jsou v kalendáři aktivní a datum které překračuje nastavené limity nelze zvolit.
Výhodou je jednoduchá orientace v kalendáři s ohledem na dny v týdnu. Nepotřebujete mít při ruce papírový kalendář když plánujete dovolenou a objednáváte ubytování, nebo plánujete cestování pomocí jízdního řádu. Ostatně podobně funguje většina řešení pro simulaci formulářového prvku date.
Je škoda že standard HTML5 zapoměl na nějakou obdobu tagu <calendar>, který by mohl vypadat nějak podobně jako je na screenshotu, s možností samostatného zvýraznění dne podle zadaného atributu.
Atributy formulářových prvků datetime
Velká rodina formulářových elementů datetime má 6 prvků a rozlišují se podle atributu type. V zásadě jsou důležité dva prvky type="date" pro samostatné nastavení datumu a type="time" pro nastavení času. Pro nastavení společné hodnoty datumu i času v jednom formulářovém prvku jsou vhodné type="datetime" a type="datetime-local". První je pro nastavení času podle UTC, tedy světového času, druhý je vhodný pro určení běžného, lokálního času. Element type="month" umožní vybrat rok a měsíc, prvek type="week" vybere kalendářní týden.
Pomocí atributů min a max je možné nastavit limity přípustných hodnot. Atribut value použijeme, když je potřeba mít pole formuláře vyplněné již při načtení formuláře, s možností toto pole změnit. Např. editování již existujícího záznamu z databáze. Hodnoty těchto atributů musí odpovídat formátu podle ISO 8601 a typu prvku. Atribut step se uplatní pro krokování času. Defaultní hodnota je 60 (sekundy), tedy 1 minuta, a tato hodnota skryje zobrazení sekund.
Atribut required použijeme tehdy když hodnota musí být vyplněna (prvek nesmí zůstat prázdný). Pak nativní validace znemožní odeslat formulář s nevyplněným políčkem.
Vzhled formulářových prvků datetime
Vpravo jsou screenshoty ukázkového formuláře z tohoto článku v browserech Chrome a Opera. Safari pro Windows zobrazí formulář stejně jako Chrome. Jejich vzhled pravděpodobně není definitivní. Firefox a IE zatím neumí pracovat s těmito prvky a zobrazí testované prvky jako běžné textboxy.
Pomocí CSS mají všechny prvky jednotně nastaveny vlastnosti width a height. Jak je vidět ze screenshotů, Opera má drobné problémy s nastavením šířky prvků. Dále je nastavena vlastnost margin: 0; protože Chrome má defaultně nastavenou tuto vlastnost na 2px, zatímco Opera má 0. Pokud nastavíte barvu pozadí background, vzhled elementů se přepne do podoby klasik, tak jak je známý z win2000.
Zásadní rozdíl je ve vzhledu prvků datetime. Opera zobrazí tento prvek jako prvek složený ze dvou částí, jeden pro datum, druhý pro čas. V HTML kódu je ovšem deklarován jen jeden prvek. Opera navíc zobrazí text "UTC" jako součást elementu (označení, že jde o čas odpovídající nultému poledníku) i když toto upozornění by mělo být spíše součástí popisu políčka v label.
Chrome zobrazí datum a čas podle formátu ISO 8601, Opera odešle data ve stejném formátu, ale díky oddělení datumu a času je viditelné zobrazení nastavených údajů přehlednější.
Při krokování času přes půlnoc Chrome opraví datum, Opera v takovém případě zastaví krokování a případnou změnu datumu je nutné provést v datumové části prvku.
Poznámky
Pokud máte poněkud rozpačitý pocit a jste zklamaní z rodiny formulářových prvků pro výběr datumu a času podle HTML5, nejste sami. Obávám se, že poměrně radikální změna formátu datumu a zejména míchání písmen a časového údaje způsobí, že tvůrci webových aplikací zůstanou raději u současných osvědčených kalendářových skriptů. Ostatně nejen formát ve formuláři, ale i výpis datumů a času by bylo nutné sjednotit.
Na jedné straně se snažíme udělat web čitelný a jednoduchý, na druhé straně do časového údaje přidáme písmena "T" a "Z", aby údaj byl hůře čitelný. Kolik běžných uživatelů si s tím poradí? Přitom pro astronomy a vědce stačí v label zdůraznit, že je nutné zapsat celosvětový jednotný čas UTC (GMT). Skript na serveru si s tím poradí.
Můj osobní dojem z návrhu formulářových prvků pro výběr datumu a času podle HTML5, je bezmyšlenková implementace standardu ISO 8601. Pro každý standardizovaný formát časového údaje je navržen odlišný typ elementu. Často méně znamená více. V praxi by stačily jen dva elementy: type="date" a type="time". Položením těchto prvků vedle sebe lze nahradit prvky datetime, podobně jak je vidět v Opeře. Takové řešení navíc zjednoduší stylování formulářových prvků.
updated 2011-10-31