Formulářové elementy podle HTML5
Nové formulářové prvky podle specifikace HTML5 a jejich podpora v jednotlivých browserech je uvedena v následující tabulce. Dále najdete screenshoty prvků v různých browserech a popis prvků, atributy a způsob validace. Pokud chcete tyto nové elementy a jejich automatickou validaci vyzkoušet, doporučuji spustit tuto stránku v browseru Opera. Živé formulářové prvky najdete v druhém sloupci tabulky. Některé browsery provádí validaci ihned po té co prvek ztratí focus, jiné až po kliknutí na tlačítko odeslat, nebo provádí jen test zda prvek není prázdný. Popis nových formulářových atributů podle HTML5 najdete v následujícím článku.
Podpora v browserech
Následují screenshoty z Windows XP pro porovnání vzhledu formulářových prvků v různých browserech. Prázdný vstupní element znamená, že daný prohlížeč zobrazuje prvek jako běžný prvek <input type="text"> a tedy je možné do něj zapsat v podstatě cokoli. Jediný použitý styl je nastavení jednotné šířky prvků, tak aby bylo možné získat srovnatelné screenshoty. Jsou zde jen poslední finální verze browserů, nikoli betaverze.
Popis nových formulářových elementů
Výhodou nových formulářových prvků je především automatická, nativní validace hodnoty zapsaná do prvku. Nativní validace probíhá i při vypnutém javascriptu, požadavek na provedení validace určuje atribut reqired zapsaný do elementu. Tím se značně zjednoduší kódování formulářů, protože zprávy o chybném obsahu formulářového pole zajistí browser a tak není potřeba psát validační funkce.
Další výhodu je akceptování zápisu pouze platných znaků. Např. do elementu number nejde zapisovat písmena. Na mobilních zařízeních s dotykovým displejem by měla být nabídnuta omezená klávesnice, obsahující pouze znaky povolené v daném typu elementu.
<input type="email">
Správná mailová adresa musí obsahovat znak zavináč a alespoň jednu tečku. Validní adresa znamená jenom tolik, že je zapsaná syntakticky správně, nikoli že zadaná adresa skutečně existuje.
<input type="url">
Slouží pro zapsání adresy webové stránky. Opera při validaci doplní úvodní text http://, pokud ještě není zapsán. Opět se netestuje zda adresa existuje, ale jen zda je správně zapsaná.
<input type="number" min="1" max="12000" step="0.01">
Podle očekávání do elementu number budeme zapisovat celá i desetinná čísla. Může obsahovat atributy min, max, step, určující přípustný rozsah čísla a hodnotu přírůstku. Pomocí dvou malých tlačítek (spinner, je součástí elementu) nastavíme požadovanou hodnotu. Samozřejmě je možné zapsat číselnou hodnotu i přímo z klávesnice, nebo nastavit hodnotu pomocí kurzorových kláves. Za zmínku snad stojí, že i čísla jsou odeslána jako textový řetězec obsahující číslice, nikoli jako binární hodnota.
Chrome používá lokalizovaný formát čísla, závislý podle jazykové verze browseru. Jazyk lze nastavit v menu Možnosti/Pod pokličkou/Obsah webu. Poté co vstupní pole number ztratí focus (kliknete jinam) je zapsané číslo přeformátováno podle zvyklostí daného jazyka. Tedy v české verzi jsou tisíce odděleny mezerou a desetinná část čárkou (v US verzi jsou tisíce odděleny čárkou a desetinná část tečkou). Na server je vždy odeslána hodnota bez oddělovače tisíců a s desetinnou tečkou bez ohledu na jazykovou verzi browseru.
Opera nepoužívá lokální formát čísel a vyžaduje zápis bez oddělovače tisíců a případné použití desetinné tečky pro oddělení desetinné části. Chybný zápis čísla se ohlásí až při automatické validaci, tedy až před odesláním celého formuláře.
Chrome i Opera ohlásí chybu překročení rozsahu, nebo větší počet desetinných míst než je dáno atributem step. Ostatní browsery zachází s tímto formulářovým prvkem jako s prvkem typu text.
Volba datumu a času
Série elementů pro výběr datumu a času: <input type="date">, <input type="month">, <input type="week">, <input type="time">, <input type="datetime">, <input type="datetime-local">. Typ elementu jasně popisuje jaká data mají být zapsána. Datumový formát je podle normy ISO: yyyy-mm-dd. Současně se v Evropě užívá zápis dd.mm.yyyy a v USA mm/dd/yyyy. Ačkoli je formát ISO jasný a pochopitelný, jeho všeobecné přijetí tak samozřejmé není.
Opera spouští dialog (vidget) pro výběr datumu a tak vidíme i weekendy, což je často důležitá informace (hodilo by se i zobrazení národních svátků). Chrome8 používá spiner pro postupné procházení dnů. Najet na vzdálené datum, např. narozeniny pomocí spineru je zdlouhavé a musíte aspoň část datumu přepsat pomocí klávesnice. Informace o weekendu chybí.
<input type="search">
Chrome a Safari zobrazuje uvnitř prvku malý křížek, který slouží k mazání vloženého textu. Ikona lupy jako symbol vyhledávacího prvku byla přirozenější. Křížek (nebo x) znamenal symbol zavření vyskakovacího okna. Něco mi neštimuje. Opera nezobrazuje žádnou ikonu uvnitř prvku a tak je prvek nerozlišitelný od běžného prvku text.
<input type="color">
Po kliknutí na tento prvek (zatím jenom Opera) se objeví dialogové okno s možností výběru z 20 základních barev. V tomto okně je možné zapsat i číselný kód barvy, nebo zvolit jinou barvu (další dialogové okno), kde je možné vybrat libovolnou barvu z celého spektra. Barva na screennshotu Opery má kód "#fff200".
<input type="tel">
Protože existuje velká variabilita ve formátech zápisu telefonního čísla, není stanoven žádný předpis a tedy ani automatická validace pro tento typ formulářového prvku. Není uveden v tabulce, ani na screenshotech. Má význam pro mobilní zařízení, kde má nabízet speciální číslicovou klávesnici pro dotykový displej.
<input type="range" min="0" max="24" step="1">
Používá stejné atributy jako element number a stejně tak je vnitřní hodnota číslo ve stanoveném rozmezí a ta závisí na poloze jezdce. Pro nastavení jezdce, či ukazatele není potřeba mít zapnutý javascript. V základní podobě je digitální hodnota nastaveného čísla neviditelná, jeho hodnotu nahrazuje poloha ukazatele. Pro zviditelnění hodnoty je vhodný element output.
V podstatě je to analogový vstupní prvek. Nastavení hodnoty je mnohem rychlejší než zápis číslic, ale méně přesné. Vhodné je v aplikacích, když není důležitá absolutní hodnota, ale subjektivní vjem určený zpětnou vazbou: hlasitost, barva ap.
Výstupní elementy: output, meter, progress
Elementy output, meter, progress nejsou typické formulářové, tedy vstupní prvky, mají charakter spíše prvků výstupních. Zobrazují digitální, nebo grafickou podobu číselné hodnoty. Hodnoty těchto prvků se neodesílají na server i když jsou uvnitř formuláře. V ukázkovém formuláři v úvodu tohoto článku jsou svázány s prvkem range.
Element output je určen pro zobrazení výsledku nějakého výpočtu např. výsledek v kalkulačce. Tento prvek lze nahradit prvky div, nebo input s atributem readonly, ovšem za cenu porušení sémantických pravidel.
Element meter zobrazí vodorovný sloupec podle nastavených atributů. Délka sloupce odpovídá poměru aktuální a maximální hodnoty. Je možné nastavit horní a dolní limity, kdy nastane změna barvy sloupce jako upozornění na nízkou, nebo vysokou aktuální hodnotu.
Element progress také zobrazuje grafický sloupec odpovídající aktuální číselné hodnotě. Měl by sloužit pro zobrazení postupu v řešení nějakého úkolu, např. stupně vyplnění rozsáhlého formuláře. Pozor není vhodný pro zobrazení průběhu odesílání formuláře a jeho zpracování na serveru. Pro takové účely jsou vhodné animované obrázky typu .gif označující, že nějaký děj právě probíhá (a neznáme dobu trvání).
Na intranetu, kde prakticky každý formulář obsahuje údaje typu datum, čas, celá i reálná čísla by nové typy elementů mohly přinést značné zjednodušení přípravy formulářů, především při psaní validačních skriptů.
Formulářové elementy podle HTML5 jsou stále ve stadiu přípravy a hledání optimální funkčnosti. Proto se k tomuto tématu budu vracet. Jen doufejme, že to neskončí stejně jako element file, který zůstává jakoby pořád ve stádiu vývoje a to ve všech browserech.
updated 2011-12-21