site logo

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 někteých browserech a popis prvků. Pokud chcete nové elementy vyzkoušet, doporučuji tuto stránku zobrazit v browseru Chrome, nebo Opera, nový Firefox podporuje jen některé prvky. Odkaz na podrobnější popis některých prvků najdete v prvním sloupci tabulky, živé formulářové prvky najdete v druhém sloupci. Vyplněný formulář zkuste odeslat. Popis atributů nových formulářových prvků podle HTML5 najdete v následujícím článku.

Podpora v browserech

input typeživý elementChromeOperaFirefoxIE
email 1094no
url 1099no
number 8929no
date 89nono
search 89nono
color 141129no
range 8923no
outputoutput 8910no
meter meter 8916no
progress progress 898no
  

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.

Pro screenshoty je použito české prostředí, to znamená, že desetinný oddělovač v prvku number je čárka a datum v prvku date je zapsáno podle českých zvyklostí. Některé formulářové elementy zobrazují ovládací prvky jen když je prvek aktivní (má focus), nebo ukazatel myši je nad prvkem. V Chrome jsou neaktivní prvky, v browseru Opera aktivní.

screenshot: formulářové prvky html5 v různých browserech

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.

Na mobilních zařízeních s dotykovým displejem by pro vyplnění formulářového prvku měla být nabídnuta speciální 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. Přes to, že v adresním řádku browseru, nebo odkazy v tištěných mediích neuvádějí název protokolu, tento formulářový element vyžaduje úvodní část adresy http://.... 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. Element může obsahovat atributy min, max, step, určující přípustný rozsah čísla a hodnotu přírůstku. Hodnotu nastavíme klávesnicí, nebo pomocí kurzorových kláves, případně použijeme spinner (malá tlačítka jsou součástí elementu).

Nativní validace testuje kromě správnosti čísla i chybu překročení rozsahu, nebo větší počet desetinných míst než je určeno atributem step. Browsery které tento element nemají implementován zobrazí prvek typu text , který umožní zapsat cokoli, tedy i nečíselnou hodnotu.

Viditelný formát čísla závisí na nastavení v ovládacích panelech (místní a jazykové zvyklosti). Tak v českém prostředí je desetinná část čísla oddělena čárkou a ve stejném formuláři, ale v anglickém prostředí musí být použita desetinná tečka. Oddělení tisícových řádů není sjednoceno a většinou je browsery nepodporují.

Vnitřní formát čísla elementu number je stejný jako zápis čísla v programech. Tedy s desetinnou tečkou a bez oddělení tisíců. V tomto formátu je hodnota odeslána na server, je použita v Javascriptu a také hodnota atributů musí být uvedena v tomto formátu.

<input type="date">

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 určuje jaká data mají být zadána. V prázdném elementu zobrazuje Chrome jakýsi placeholder  či nápovědu formátu podle národního prostředí. V českém browseru to bude dd.mm.rrrr  a v americkém browseru mm/dd/yyyy.

Podobně jako v případě čísel i zde je viditelná hodnota datumu závislá na národních zvyklostech. Vnitřní formát elementů, je zasílán na server a je použit v Javascriptu je podle ISO 8601 (yyyy-mm-dd). Je možné použít atributy min a max pro omezení intervalu. Hodnoty atributů musí být zapsány v souladu s ISO 8601. Datum lze zadat výběrem z kalendáře, pomocí numerické klávesnice, i pomocí spinneru.

<input type="search">

Browsery, které mají implementován tento element zobrazí uvnitř prvku vpravo malý křížek, který slouží k mazání vloženého textu. Křížek není viditelný když je prvek prázdný. Pro výpočet velikosti tohoto elementu používá Chrome jiný boxmodel.

<input type="color">

Po kliknutí na tento prvek se objeví dialogové okno s možností výběru z palety barev. Viditelná hodnota tohoto elementu je barva, vnitřní hodnota je kód barvy. Na screennshotu je použita žlutá barva s kódem "#fff200". Na server je odeslán kód barvy.

<input type="tel">

Protože existuje velká variabilita ve formátech zápisu telefonního čísla, není stanoven žádný předpis a tedy ani nativní 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 2014-05-05