Příklady na input z html 5

Staré hodnoty type

text button checkbox file hidden image password radio reset submit

Nové hodnoty type

HTML 5 ukázka popis
<input type="color" name="barva" value="blue"> Firefox a Chrome rozbaluje nabídku barev a odesílá je ve formátu %23rrggbb, kde %23 je escape sekvence pro znak #, takže očekávaná hodnota je #rrggbb. Jiné prohlížeče zobrazují jako input type="text"
<input type="date" name="datum"> Chrome a Opera nechávají rozbalovat kalendář. Výstupní hodnota je rrrr-mm-dd. Safari na iPhone a iPadu zobrazuje jako zadání data. Jiné prohlížeče zobrazují jako input type="text".
<input type="datetime" name="datum-cas" value="obsah"> Opera zobrazuje jako dvě políčka, jedno na datum, druhé na čas. Dopisuje šedivá písmenka UTC, jako že to je světový čas. Výstupní formát je rrrr-mm-ddThh%3AmmZ, tedy např. 2012-04-06T12%3A02Z. Jiné prohlížeče zobrazují jako input type="text".
<input type="datetime-local" name="mistni-cas" value="obsah"> Chrome a Opera - jako datetime, výstupní formát je rrrr-mm-ddThh%3Amm, tedy např. 2012-04-10T12%3A05. Od datetime se to liší tím Z na konci, které zde chybí. Safari na iPhone a iPadu chce zadat datum. Jiné prohlížeče zobrazují jako input type="text".
<input type="email" name="email" value="obsah"> Chrome, Opera, IE a Firefox při odesílání kontrolují, jestli obsahuje znak @ (zavináč). Všechny prohlížeče zobrazují jako input type="text", liší se to jen tou kontrolou. Safari na iPhone a iPadu zobrazuje v klávesnici zavináč, ale hodnotu nekontroluje.
<input type="month" name="mesic" value="obsah"> Opera umí rozbalit kalendářík, výstupní hodnota je rrrr-mm, tedy např. 2012-04. Jiné prohlížeče zobrazují jako input type="text".
<input type="number" name="cislo" value="20"> v Chrome a v Opeře se u inputu objeví šipečky umožňující měnit hodnotu. Jiné prohlížeče zobrazují jako input type="text". Mobilní prohlížeče zobrazují klávesnici s čísly.
<input type="range" name="rozsah" value="4"> v Chrome, Safari a Firefoxu se místo inputu objeví šoupátko, kterým uživatel hodnotu může měnit, ale nevidí pak, na jakou hodnotu se to změnilo! Internet Explorer 11 zobrazuje modrý proužek s tooltipem, což mi přijde nejlepší.
<input type="search" name="hledani" value="obsah"> jako textové políčko s tím rozdílem, že vpravo je modrý křížek, kterým lze hodnotu vymazat. Chrome, Firefox, Internet Explorer. Safari křížek nezobrazí.
<input type="tel" name="telefon" value="obsah"> jako input type="text", žádný rozdíl. Mobilní prohlížeče zobrazují telefonní klávesnici.
<input type="time" name="cas" value="obsah"> Chrome a Opera umí ukázat "hodinky" s dvojtečkou uprostřed. Výstupní formát hh:mm:ss, escapovaně např. 04%3A02%3A00
<input type="url" name="url" value="http://www.jakpsatweb.cz/"> jako input type="text", žádný rozdíl. Safari na iPhone přidává do klávesnice lomítko, tečku a ".com".
<input type="week" name="tyden" value="obsah"> Chrome a Opera umí rozbalit kalendář, výstupní hodnota je rrrr-Www, tedy např. 2012-W15

Testováno 5. září 2015 (předtím 8. dubna 2012) na aktualizovaných verzích prohlížečů.

V době, kdy budete číst tuto stránku, nebudu už mezi ... nebudu už ručit ... teda -- prostě to už může být jinak, protože prohlížeče mohou dodělat podporu.

Stránka se mírně vztahuje k popisu tagu input v HTML 5