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="#0000ff">
hodnota: 		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">
hodnota: 		Chrome, Firefox, Edge a Opera nechávají rozbalovat kalendář.  Safari na iPhone a iPadu zobrazuje jako zadání data. Jiné prohlížeče zobrazují jako chrome nebo jako input type="text". Výstupní hodnota je ve všech prohlížečích rrrr-mm-dd. Problém je v hodnotě, která se v políčku zobrazuje na Chrome. Zobrazované datum formát závislý na jazyce prohlížíeče. Pokud má tedy někdo anglický chrome, input date mu zobrazuje US formát (napřed měsíc, pak den) a nedá se změnit.
<input type="datetime" name="datum-cas" value="obsah">
zavrženo, nefunguje		 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". Zavrženo, používejte datetime-local.
<input type="datetime-local" name="mistni-cas" value="obsah">
hodnota: 		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">
hodnota: 		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">
hodnota: 		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" min="0" max="25">
hodnota: 		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! (To jenom já to tady ukazuju javascriptem.) Internet Explorer a Edge 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">
hodnota: 		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">
hodnota: 		Chrome a Opera umí rozbalit kalendář, výstupní hodnota je rrrr-Www, tedy např. 2012-W15

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

Obrázky z telefonu

Screenshoty z telefonu jsou z ledna 2022 z prohlížeče Safari na iPhone 12 mini. Na každém telefonu se může podoba inputů zobrazovat jinak.

input type color

html type color = zadání barvy

Různé typy zadání data a času

input type date = zadání data

input type datetime-local = zadání data a místního času

input type month = zadání měsíce a roku

input type time

Input type="email"

všimněte si tlačítek zavináč @ a tečka ., které jsou častou součástí emailů (žluté zvýraznění já). Navíc prohlížeč uhodl (podle name="email"), že se do kolonky má vyplnit můj email, tak ho autofillem nabízí.

input type email = zadání emailu

Input type="number"

Zadání čísla. Klávesnice se automaticky přepnula na čísla a symboly.

input type number

Input type="tel"

Zadání telefonního čísla. Klávesnice se automaticky přepnula na telefonní klávesnici s čísly.

input type tel

Input type="url"

Zadání URL adresy. Ve spodní části klávesnici není mezerník a jsou tam navíc znaky, které se často vyskytují v URL (žluté zvýraznění já).

input type url

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