Moderní tvorba webových aplikací

O webu

Našeptávání značkou <datalist>

Pro napovídání možností při vyplňování <input>u lze v HTML 5 použít značku <datalist>.

3 minuty

Pro zpříjemnění vyplňování políček formulářů je vhodné při psaní napovídat možné hodnoty. Od IE 10 existuje možnost jak napovídání řešit bez JavaScriptu.

Nejspíš kvůli zpětné kompatibilitě se veškerý obsah <datalist>u zapisuje do atributů value značek <option> (jinak by se obsah k napovídání umístěný do neznámých HTML značek v nepodporovaných prohlížečích objevil).

Připojení <datalist>u

Připojit data pro napovídání je možné nejspíš jen pro <input type="text">, pro type="number" a napovídání čísel to nefunguje. Samotné propojení <input>u s <datalist>em se provádí pojmenováním <datalist>u atributem id a přiřazením názvu id do atributu list u <input>u.

Závislé datalisty

Samostatná živá ukázka

Napovídání napříč prohlížeči

Jak už bylo zmíněno, v IE 9 a starších to nefunguje vůbec, v podporovaných prohlížečích se chování různí.

  • IE 10 a Opera zobrazí <datalist> po kliknutí do políčka, Chrome a Firefoxpo dvojkliku.
  • Firefox umí možnosti filtrovat jako skutečný vyhledávač (položku „Nějaký text“ nabídne i při napsání ex), ostatní prohlížeče filtrují jen podle písmen na začátku.

Zdá se tedy být vhodnější stále napovídání řešit JavaScriptem. Třeba nástrojem Select2.

Související články

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

3 minuty

HTML značka <input>

Všechny varianty značky <input>, možné atributy, vysvětlení a ukázky.

13 minut

Atribut autocapitalize

HTML atribut autocapitalize slouží k nastavení automatického přepnutí na velká písmena u dotykových klávesnic.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025